*, ::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:  ;
}/*
! tailwindcss v3.4.19 | 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: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif; /* 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]:where(:not([hidden="until-found"])) {
  display: none;
}
.\!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;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!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;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-right-0\.5 {
  right: -0.125rem;
}
.-top-0\.5 {
  top: -0.125rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-24 {
  bottom: 6rem;
}
.bottom-\[var\(--meeting-control-bar-clearance\)\] {
  bottom: var(--meeting-control-bar-clearance);
}
.bottom-full {
  bottom: 100%;
}
.left-0 {
  left: 0px;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.left-4 {
  left: 1rem;
}
.left-\[7px\] {
  left: 7px;
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.top-16 {
  top: 4rem;
}
.top-2\.5 {
  top: 0.625rem;
}
.top-24 {
  top: 6rem;
}
.top-3 {
  top: 0.75rem;
}
.top-3\.5 {
  top: 0.875rem;
}
.top-4 {
  top: 1rem;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-20 {
  z-index: 20;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[1100\] {
  z-index: 1100;
}
.z-\[1140\] {
  z-index: 1140;
}
.z-\[1145\] {
  z-index: 1145;
}
.z-\[1150\] {
  z-index: 1150;
}
.z-\[1160\] {
  z-index: 1160;
}
.z-\[1170\] {
  z-index: 1170;
}
.z-\[2000\] {
  z-index: 2000;
}
.z-modal {
  z-index: var(--z-modal);
}
.z-nav {
  z-index: var(--z-nav);
}
.z-popover {
  z-index: var(--z-popover);
}
.z-raised {
  z-index: var(--z-raised);
}
.z-sticky {
  z-index: var(--z-sticky);
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.col-span-2 {
  grid-column: span 2 / span 2;
}
.m-0 {
  margin: 0px;
}
.m-1 {
  margin: 0.25rem;
}
.mx-1 {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-5 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}
.-mb-2 {
  margin-bottom: -0.5rem;
}
.-mt-1 {
  margin-top: -0.25rem;
}
.-mt-12 {
  margin-top: -3rem;
}
.-mt-3 {
  margin-top: -0.75rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}
.me-1 {
  margin-inline-end: 0.25rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-12 {
  margin-left: 3rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-4 {
  margin-left: 1rem;
}
.ml-5 {
  margin-left: 1.25rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-3 {
  margin-right: 0.75rem;
}
.mr-4 {
  margin-right: 1rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}
.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.\!block {
  display: block !important;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-0\.5 {
  height: 0.125rem;
}
.h-1 {
  height: 0.25rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-28 {
  height: 7rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-32 {
  height: 8rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-48 {
  height: 12rem;
}
.h-5 {
  height: 1.25rem;
}
.h-56 {
  height: 14rem;
}
.h-6 {
  height: 1.5rem;
}
.h-64 {
  height: 16rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[380px\] {
  height: 380px;
}
.h-\[60dvh\] {
  height: 60dvh;
}
.h-\[min\(760px\2c 92vh\)\] {
  height: min(760px, 92vh);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-40 {
  max-height: 10rem;
}
.max-h-64 {
  max-height: 16rem;
}
.max-h-72 {
  max-height: 18rem;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[65vh\] {
  max-height: 65vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[80vh\] {
  max-height: 80vh;
}
.max-h-\[85vh\] {
  max-height: 85vh;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.max-h-\[calc\(100vh-13rem\)\] {
  max-height: calc(100vh - 13rem);
}
.max-h-\[calc\(100vh-8rem\)\] {
  max-height: calc(100vh - 8rem);
}
.min-h-0 {
  min-height: 0px;
}
.min-h-24 {
  min-height: 6rem;
}
.min-h-\[110px\] {
  min-height: 110px;
}
.min-h-\[120px\] {
  min-height: 120px;
}
.min-h-\[130px\] {
  min-height: 130px;
}
.min-h-\[150px\] {
  min-height: 150px;
}
.min-h-\[180px\] {
  min-height: 180px;
}
.min-h-\[260px\] {
  min-height: 260px;
}
.min-h-\[320px\] {
  min-height: 320px;
}
.min-h-\[34px\] {
  min-height: 34px;
}
.min-h-\[38px\] {
  min-height: 38px;
}
.min-h-\[40px\] {
  min-height: 40px;
}
.min-h-\[42px\] {
  min-height: 42px;
}
.min-h-\[44px\] {
  min-height: 44px;
}
.min-h-\[46px\] {
  min-height: 46px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1 {
  width: 0.25rem;
}
.w-1\/2 {
  width: 50%;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-2\/3 {
  width: 66.666667%;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-48 {
  width: 12rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-56 {
  width: 14rem;
}
.w-6 {
  width: 1.5rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[300px\] {
  width: 300px;
}
.w-\[\2026\] {
  width: …;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[10rem\] {
  min-width: 10rem;
}
.min-w-\[1200px\] {
  min-width: 1200px;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[16rem\] {
  min-width: 16rem;
}
.min-w-\[2\.75rem\] {
  min-width: 2.75rem;
}
.min-w-\[220px\] {
  min-width: 220px;
}
.min-w-\[24rem\] {
  min-width: 24rem;
}
.min-w-\[28rem\] {
  min-width: 28rem;
}
.min-w-\[32rem\] {
  min-width: 32rem;
}
.min-w-\[34rem\] {
  min-width: 34rem;
}
.min-w-\[46rem\] {
  min-width: 46rem;
}
.min-w-\[52rem\] {
  min-width: 52rem;
}
.min-w-\[560px\] {
  min-width: 560px;
}
.min-w-\[640px\] {
  min-width: 640px;
}
.min-w-\[720px\] {
  min-width: 720px;
}
.min-w-\[760px\] {
  min-width: 760px;
}
.min-w-\[820px\] {
  min-width: 820px;
}
.min-w-\[900px\] {
  min-width: 900px;
}
.min-w-\[960px\] {
  min-width: 960px;
}
.min-w-full {
  min-width: 100%;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-48 {
  max-width: 12rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-5xl {
  max-width: 64rem;
}
.max-w-6xl {
  max-width: 72rem;
}
.max-w-7xl {
  max-width: 80rem;
}
.max-w-\[14rem\] {
  max-width: 14rem;
}
.max-w-\[200px\] {
  max-width: 200px;
}
.max-w-\[70vw\] {
  max-width: 70vw;
}
.max-w-\[90vw\] {
  max-width: 90vw;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-none {
  max-width: none;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-none {
  flex: none;
}
.shrink {
  flex-shrink: 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.basis-72 {
  flex-basis: 18rem;
}
.table-fixed {
  table-layout: fixed;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  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));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  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));
}
.rotate-180 {
  --tw-rotate: 180deg;
  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));
}
.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));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}
.resize-none {
  resize: none;
}
.resize-y {
  resize: vertical;
}
.resize {
  resize: both;
}
.list-disc {
  list-style-type: disc;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-\[1fr_5\.5rem_5\.5rem\] {
  grid-template-columns: 1fr 5.5rem 5.5rem;
}
.grid-cols-\[minmax\(0\2c 1fr\)\] {
  grid-template-columns: minmax(0,1fr);
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.place-items-center {
  place-items: center;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.items-stretch {
  align-items: stretch;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-8 {
  gap: 2rem;
}
.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}
.gap-x-5 {
  -moz-column-gap: 1.25rem;
       column-gap: 1.25rem;
}
.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}
.gap-y-0\.5 {
  row-gap: 0.125rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-1\.5 {
  row-gap: 0.375rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1.5rem * var(--tw-space-x-reverse));
  margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}
.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-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * 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));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.self-start {
  align-self: flex-start;
}
.self-center {
  align-self: center;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overscroll-contain {
  overscroll-behavior: contain;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.whitespace-pre-line {
  white-space: pre-line;
}
.whitespace-pre-wrap {
  white-space: pre-wrap;
}
.break-words {
  overflow-wrap: break-word;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-3xl {
  border-radius: 1.5rem;
}
.rounded-\[14px\] {
  border-radius: 14px;
}
.rounded-\[18px\] {
  border-radius: 18px;
}
.rounded-\[20px\] {
  border-radius: 20px;
}
.rounded-\[22px\] {
  border-radius: 22px;
}
.rounded-\[24px\] {
  border-radius: 24px;
}
.rounded-\[26px\] {
  border-radius: 26px;
}
.rounded-\[28px\] {
  border-radius: 28px;
}
.rounded-\[30px\] {
  border-radius: 30px;
}
.rounded-\[32px\] {
  border-radius: 32px;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-sm {
  border-radius: 0.125rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-l-\[18px\] {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}
.rounded-r-xl {
  border-top-right-radius: 0.75rem;
  border-bottom-right-radius: 0.75rem;
}
.rounded-t {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-\[28px\] {
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
}
.rounded-t-xl {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.border {
  border-width: 1px;
}
.border-0 {
  border-width: 0px;
}
.border-2 {
  border-width: 2px;
}
.border-4 {
  border-width: 4px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-2 {
  border-left-width: 2px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-amber-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 211 77 / var(--tw-border-opacity, 1));
}
.border-amber-500\/50 {
  border-color: rgb(245 158 11 / 0.5);
}
.border-blue-200 {
  --tw-border-opacity: 1;
  border-color: rgb(191 219 254 / var(--tw-border-opacity, 1));
}
.border-blue-600 {
  --tw-border-opacity: 1;
  border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
}
.border-current {
  border-color: currentColor;
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity, 1));
}
.border-green-300 {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity, 1));
}
.border-green-500\/40 {
  border-color: rgb(34 197 94 / 0.4);
}
.border-indigo-200 {
  --tw-border-opacity: 1;
  border-color: rgb(199 210 254 / var(--tw-border-opacity, 1));
}
.border-purple-200 {
  --tw-border-opacity: 1;
  border-color: rgb(233 213 255 / var(--tw-border-opacity, 1));
}
.border-purple-600 {
  --tw-border-opacity: 1;
  border-color: rgb(147 51 234 / var(--tw-border-opacity, 1));
}
.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-red-300 {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity, 1));
}
.border-red-500\/40 {
  border-color: rgb(239 68 68 / 0.4);
}
.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-rose-300 {
  --tw-border-opacity: 1;
  border-color: rgb(253 164 175 / var(--tw-border-opacity, 1));
}
.border-sky-200 {
  --tw-border-opacity: 1;
  border-color: rgb(186 230 253 / var(--tw-border-opacity, 1));
}
.border-sky-300 {
  --tw-border-opacity: 1;
  border-color: rgb(125 211 252 / var(--tw-border-opacity, 1));
}
.border-sky-400 {
  --tw-border-opacity: 1;
  border-color: rgb(56 189 248 / var(--tw-border-opacity, 1));
}
.border-sky-500 {
  --tw-border-opacity: 1;
  border-color: rgb(14 165 233 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-200\/80 {
  border-color: rgb(226 232 240 / 0.8);
}
.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-teal-200 {
  --tw-border-opacity: 1;
  border-color: rgb(153 246 228 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-violet-200 {
  --tw-border-opacity: 1;
  border-color: rgb(221 214 254 / var(--tw-border-opacity, 1));
}
.border-violet-300 {
  --tw-border-opacity: 1;
  border-color: rgb(196 181 253 / var(--tw-border-opacity, 1));
}
.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}
.border-white\/70 {
  border-color: rgb(255 255 255 / 0.7);
}
.border-yellow-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 240 138 / var(--tw-border-opacity, 1));
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-\[\#0A66C2\] {
  --tw-bg-opacity: 1;
  background-color: rgb(10 102 194 / var(--tw-bg-opacity, 1));
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-50\/70 {
  background-color: rgb(255 251 235 / 0.7);
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-amber-500\/10 {
  background-color: rgb(245 158 11 / 0.1);
}
.bg-amber-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-amber-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(120 53 15 / var(--tw-bg-opacity, 1));
}
.bg-black {
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/5 {
  background-color: rgb(0 0 0 / 0.05);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-blue-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(219 234 254 / var(--tw-bg-opacity, 1));
}
.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.bg-emerald-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 250 229 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-emerald-900\/80 {
  background-color: rgb(6 78 59 / 0.8);
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1));
}
.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-gray-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
}
.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}
.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity, 1));
}
.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity, 1));
}
.bg-green-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/10 {
  background-color: rgb(34 197 94 / 0.1);
}
.bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity, 1));
}
.bg-indigo-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 231 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-indigo-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-orange-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 237 213 / var(--tw-bg-opacity, 1));
}
.bg-purple-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 232 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(233 213 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}
.bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
}
.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500\/10 {
  background-color: rgb(239 68 68 / 0.1);
}
.bg-red-500\/5 {
  background-color: rgb(239 68 68 / 0.05);
}
.bg-red-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-rose-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-50\/70 {
  background-color: rgb(255 241 242 / 0.7);
}
.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}
.bg-sky-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.bg-sky-50\/60 {
  background-color: rgb(240 249 255 / 0.6);
}
.bg-sky-50\/80 {
  background-color: rgb(240 249 255 / 0.8);
}
.bg-sky-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(14 165 233 / var(--tw-bg-opacity, 1));
}
.bg-sky-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-50\/70 {
  background-color: rgb(248 250 252 / 0.7);
}
.bg-slate-50\/80 {
  background-color: rgb(248 250 252 / 0.8);
}
.bg-slate-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}
.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/80 {
  background-color: rgb(15 23 42 / 0.8);
}
.bg-slate-950 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}
.bg-slate-950\/45 {
  background-color: rgb(2 6 23 / 0.45);
}
.bg-slate-950\/55 {
  background-color: rgb(2 6 23 / 0.55);
}
.bg-teal-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 250 / var(--tw-bg-opacity, 1));
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-violet-50\/60 {
  background-color: rgb(245 243 255 / 0.6);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/50 {
  background-color: rgb(255 255 255 / 0.5);
}
.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}
.bg-white\/80 {
  background-color: rgb(255 255 255 / 0.8);
}
.bg-white\/85 {
  background-color: rgb(255 255 255 / 0.85);
}
.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity, 1));
}
.bg-yellow-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1));
}
.bg-yellow-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 252 232 / var(--tw-bg-opacity, 1));
}
.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}
.bg-\[linear-gradient\(135deg\2c rgba\(236\2c 253\2c 245\2c 1\)\2c rgba\(255\2c 255\2c 255\2c 0\.98\)\)\] {
  background-image: linear-gradient(135deg,rgba(236,253,245,1),rgba(255,255,255,0.98));
}
.bg-\[radial-gradient\(circle_at_top_left\2c _rgba\(251\2c 191\2c 36\2c 0\.18\)\2c _transparent_34\%\)\2c radial-gradient\(circle_at_top_right\2c _rgba\(14\2c 165\2c 233\2c 0\.14\)\2c _transparent_38\%\)\2c linear-gradient\(135deg\2c _rgba\(248\2c 250\2c 252\2c 0\.98\)\2c _rgba\(255\2c 255\2c 255\2c 0\.96\)\)\] {
  background-image: radial-gradient(circle at top left, rgba(251,191,36,0.18), transparent 34%),radial-gradient(circle at top right, rgba(14,165,233,0.14), transparent 38%),linear-gradient(135deg, rgba(248,250,252,0.98), rgba(255,255,255,0.96));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-slate-200 {
  --tw-gradient-from: #e2e8f0 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(226 232 240 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-slate-300 {
  --tw-gradient-to: #cbd5e1 var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-2\.5 {
  padding: 0.625rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-0\.5 {
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.pb-1 {
  padding-bottom: 0.25rem;
}
.pb-2 {
  padding-bottom: 0.5rem;
}
.pb-3 {
  padding-bottom: 0.75rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-6 {
  padding-bottom: 1.5rem;
}
.pb-8 {
  padding-bottom: 2rem;
}
.pl-10 {
  padding-left: 2.5rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pr-4 {
  padding-right: 1rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pr-9 {
  padding-right: 2.25rem;
}
.pt-0\.5 {
  padding-top: 0.125rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-16 {
  padding-top: 4rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.align-top {
  vertical-align: top;
}
.align-middle {
  vertical-align: middle;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[6px\] {
  font-size: 6px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.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-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.italic {
  font-style: italic;
}
.tabular-nums {
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-7 {
  line-height: 1.75rem;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.leading-snug {
  line-height: 1.375;
}
.leading-tight {
  line-height: 1.25;
}
.tracking-\[0\.08em\] {
  letter-spacing: 0.08em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.2em\] {
  letter-spacing: 0.2em;
}
.tracking-\[0\.3em\] {
  letter-spacing: 0.3em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-wide {
  letter-spacing: 0.025em;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-\[\#0A66C2\] {
  --tw-text-opacity: 1;
  color: rgb(10 102 194 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-amber-900 {
  --tw-text-opacity: 1;
  color: rgb(120 53 15 / var(--tw-text-opacity, 1));
}
.text-amber-950 {
  --tw-text-opacity: 1;
  color: rgb(69 26 3 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-blue-700 {
  --tw-text-opacity: 1;
  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
}
.text-blue-800 {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}
.text-blue-900 {
  --tw-text-opacity: 1;
  color: rgb(30 58 138 / var(--tw-text-opacity, 1));
}
.text-emerald-100 {
  --tw-text-opacity: 1;
  color: rgb(209 250 229 / var(--tw-text-opacity, 1));
}
.text-emerald-800 {
  --tw-text-opacity: 1;
  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
}
.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity, 1));
}
.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity, 1));
}
.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity, 1));
}
.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity, 1));
}
.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity, 1));
}
.text-green-900 {
  --tw-text-opacity: 1;
  color: rgb(20 83 45 / var(--tw-text-opacity, 1));
}
.text-indigo-700 {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.text-indigo-800 {
  --tw-text-opacity: 1;
  color: rgb(55 48 163 / var(--tw-text-opacity, 1));
}
.text-inherit {
  color: inherit;
}
.text-orange-700 {
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-purple-100 {
  --tw-text-opacity: 1;
  color: rgb(243 232 255 / var(--tw-text-opacity, 1));
}
.text-purple-200 {
  --tw-text-opacity: 1;
  color: rgb(233 213 255 / var(--tw-text-opacity, 1));
}
.text-purple-500 {
  --tw-text-opacity: 1;
  color: rgb(168 85 247 / var(--tw-text-opacity, 1));
}
.text-purple-600 {
  --tw-text-opacity: 1;
  color: rgb(147 51 234 / var(--tw-text-opacity, 1));
}
.text-purple-700 {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}
.text-purple-800 {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}
.text-red-400 {
  --tw-text-opacity: 1;
  color: rgb(248 113 113 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600 {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700 {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-red-800 {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-rose-800 {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}
.text-rose-950 {
  --tw-text-opacity: 1;
  color: rgb(76 5 25 / var(--tw-text-opacity, 1));
}
.text-sky-700 {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-sky-800 {
  --tw-text-opacity: 1;
  color: rgb(7 89 133 / var(--tw-text-opacity, 1));
}
.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-slate-950 {
  --tw-text-opacity: 1;
  color: rgb(2 6 23 / var(--tw-text-opacity, 1));
}
.text-teal-700 {
  --tw-text-opacity: 1;
  color: rgb(15 118 110 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-violet-800 {
  --tw-text-opacity: 1;
  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
}
.text-violet-900 {
  --tw-text-opacity: 1;
  color: rgb(76 29 149 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity, 1));
}
.text-yellow-600 {
  --tw-text-opacity: 1;
  color: rgb(202 138 4 / var(--tw-text-opacity, 1));
}
.text-yellow-700 {
  --tw-text-opacity: 1;
  color: rgb(161 98 7 / var(--tw-text-opacity, 1));
}
.text-yellow-800 {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.decoration-dotted {
  text-decoration-style: dotted;
}
.underline-offset-2 {
  text-underline-offset: 2px;
}
.opacity-40 {
  opacity: 0.4;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-75 {
  opacity: 0.75;
}
.opacity-80 {
  opacity: 0.8;
}
.opacity-85 {
  opacity: 0.85;
}
.opacity-90 {
  opacity: 0.9;
}
.opacity-95 {
  opacity: 0.95;
}
.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);
}
.shadow-2xl {
  --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_0_0_1px_rgba\(0\2c 0\2c 0\2c 0\.5\)\] {
  --tw-shadow: 0 0 0 1px rgba(0,0,0,0.5);
  --tw-shadow-colored: 0 0 0 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);
}
.shadow-\[0_0_0_1px_rgba\(125\2c 211\2c 252\2c 0\.55\)\2c 0_28px_72px_-48px_rgba\(15\2c 23\2c 42\2c 0\.4\)\] {
  --tw-shadow: 0 0 0 1px rgba(125,211,252,0.55),0 28px 72px -48px rgba(15,23,42,0.4);
  --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 28px 72px -48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_80px_-40px_rgba\(15\2c 23\2c 42\2c 0\.65\)\] {
  --tw-shadow: 0 24px 80px -40px rgba(15,23,42,0.65);
  --tw-shadow-colored: 0 24px 80px -40px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_24px_80px_-48px_rgba\(15\2c 23\2c 42\2c 0\.35\)\] {
  --tw-shadow: 0 24px 80px -48px rgba(15,23,42,0.35);
  --tw-shadow-colored: 0 24px 80px -48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_28px_72px_-48px_rgba\(15\2c 23\2c 42\2c 0\.4\)\] {
  --tw-shadow: 0 28px 72px -48px rgba(15,23,42,0.4);
  --tw-shadow-colored: 0 28px 72px -48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_28px_72px_-48px_var\(--shadow-color\)\] {
  --tw-shadow: 0 28px 72px -48px var(--shadow-color);
  --tw-shadow-colored: 0 28px 72px -48px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_36px_120px_-52px_rgba\(15\2c 23\2c 42\2c 0\.55\)\] {
  --tw-shadow: 0 36px 120px -52px rgba(15,23,42,0.55);
  --tw-shadow-colored: 0 36px 120px -52px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_36px_120px_-52px_var\(--shadow-color\)\] {
  --tw-shadow: 0 36px 120px -52px var(--shadow-color);
  --tw-shadow-colored: 0 36px 120px -52px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px 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-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.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);
}
.ring-0 {
  --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(0px + 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);
}
.ring-1 {
  --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(1px + 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);
}
.ring-2 {
  --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(2px + 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);
}
.ring-black\/10 {
  --tw-ring-color: rgb(0 0 0 / 0.1);
}
.ring-black\/40 {
  --tw-ring-color: rgb(0 0 0 / 0.4);
}
.ring-blue-500 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1));
}
.ring-indigo-400 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(129 140 248 / var(--tw-ring-opacity, 1));
}
.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);
}
.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-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;
}
.transition-none {
  transition-property: none;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}
.\[chimeMeetingUi\:presence\] {
  chime-meeting-ui: presence;
}
.\[useChimeSdk\:factory\] {
  use-chime-sdk: factory;
}

/* ============================================
   Base HTML/Body Styles
   ============================================ */
html {
  box-sizing: border-box;
  font-size: 16px;
  /* Always reserve the scrollbar's width, even on pages short enough not to
     need one. Without this the viewport is 15px wider on a page that does not
     scroll, and every centered container -- the navbar's max-w-7xl, the
     reading container -- lands 7.5px further right: navigating from a long
     page (/, /calendar) to a short one (/discover with few results) visibly
     jogged the whole layout sideways. Also stops the same jog when a modal
     locks body scrolling. */
  scrollbar-gutter: stable;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  /* On iOS Safari and Android Chrome 100vh is the URL-bar-collapsed viewport, so
     it is taller than what is actually visible on load. dvh is the visible one;
     the 100vh line above stays as the fallback for browsers without it. */
  min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

#root {
  margin: 0;
  padding: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ============================================
   Skeleton Loading
   ============================================ */
.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    var(--bg-secondary) 25%,
    var(--bg-hover) 37%,
    var(--bg-secondary) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* ============================================
   Theme CSS Variables (defaults, overridden by JS)
   ============================================ */
:root {
    /* Backgrounds */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --bg-elevated: #1e293b;
    --bg-sunken: #0a0f1a;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-card: #1e293b;
    --bg-hover: #334155;
    --bg-input: #1e293b;

    /* Text */
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #0f172a;
    --text-link: #3b82f6;

    /* Accents */
    --accent-primary: #3b82f6;
    --accent-primary-hover: #2563eb;
    --accent-secondary: #f97316;
    --accent-secondary-hover: #ea580c;
    --accent-success: #22c55e;
    --accent-warning: #eab308;
    --accent-danger: #ef4444;
    --accent-info: #06b6d4;

    /* Borders */
    --border-color: #334155;
    --border-subtle: #1e293b;
    --border-strong: #475569;
    --border-light: #475569;

    /* Gradients */
    --gradient-start: #3b82f6;
    --gradient-end: #f97316;

    /* Shadows */
    --shadow-none: none;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    --shadow-color: rgba(0, 0, 0, 0.3);
    --overlay-color: rgba(0, 0, 0, 0.7);

    /* Status Colors */
    --status-going-bg: #064e3b;
    --status-going-text: #6ee7b7;
    --status-pending-bg: #78350f;
    --status-pending-text: #fcd34d;
    --status-invited-bg: #1e3a5f;
    --status-invited-text: #93c5fd;
    --status-waitlisted-bg: #7f1d1d;
    --status-waitlisted-text: #fca5a5;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --font-family-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-speed: 250ms;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Spacing */
    --spacing-scale: 1;

    /* Layout */
    --sidebar-width: 280px;
    --sidebar-width-collapsed: 72px;
    --topbar-height: 64px;
    --content-max-width: 1440px;
    --content-padding: 2rem;
    /* The widest a *form* should get, whatever container it sits in. A text
       input stretched across a 1600px pane is harder to use, not easier, so
       form-shaped pages cap at a measure instead of filling the width. */
    --form-max-width: 72rem;

    /* Layering
       --------
       Which box wins when two overlap used to be decided by accident: almost
       nothing declared a z-index, so painting order fell out of CSS 2.1
       Appendix E — a *positioned* box (a `sticky` rail, say) paints after every
       non-positioned sibling no matter what it contains. That is how the event
       page's attendee roster ended up underneath the ticket rail: neither
       carried a z-index, so the merely-positioned one won.

       These are the tiers. A new overlapping box picks the tier that names what
       it IS, and never a number — a number is a claim about every other box on
       the page, and nobody can check it. Use them through the Tailwind aliases
       (`z-raised`, `z-sticky`, `z-popover`, `z-nav`, `z-overlay`, `z-modal`,
       `z-toast`), which are wired to these variables in tailwind.config.js.

       The values keep the numbers the converted sites already used, so adopting
       the scale changes names and not behaviour. Two tiers exist only to be
       compared: `raised` is for in-flow CONTENT that must not disappear under
       floating furniture, and it deliberately sits below `sticky` because
       content and furniture should not overlap at all — if they do, the layout
       is wrong and the fix belongs in the layout, not here. */
    --z-raised: 1;      /* in-flow content lifted out of the accidental order */
    --z-sticky: 30;     /* in-page sticky furniture: rails, floating headers */
    --z-popover: 40;    /* menus and dropdowns anchored to a control */
    --z-nav: 50;        /* the global navbar and the fixed sidebars */
    --z-overlay: 1000;  /* full-screen scrims and backdrops */
    --z-modal: 1200;    /* dialogs, which sit above every scrim */
    --z-toast: 9999;    /* transient notices, above dialogs by design */
}

        * { box-sizing: border-box; }
        body {
            font-family: var(--font-family);
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }
        .gradient-bg { background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%); }
        .card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 40px var(--shadow-color); }
        .transition-all { transition: all 0.2s ease; }
        .sidebar-item:hover { background: var(--bg-hover); }
        .sidebar-item.active { background: var(--bg-hover); border-left: 3px solid var(--accent-primary); }
        .react-modal-overlay { background: var(--overlay-color); }
        .tag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; margin: 2px; }
        .status-going { background: var(--status-going-bg); color: var(--status-going-text); }
        .status-pending { background: var(--status-pending-bg); color: var(--status-pending-text); }
        .status-invited { background: var(--status-invited-bg); color: var(--status-invited-text); }
        .status-waitlisted { background: var(--status-waitlisted-bg); color: var(--status-waitlisted-text); }
        .btn-primary {
            background: var(--accent-primary);
            color: var(--text-inverse);
            min-height: 44px; /* Touch target */
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .btn-primary:hover { background: var(--accent-primary-hover); }

        /* Navbar controls keep one stable touch-target size. Text never wraps
           inside the fixed-height header, and the controls do not shrink when
           the available width gets tight at responsive breakpoints. */
        .navbar-action {
            flex: 0 0 auto;
            min-width: 0;
            min-height: 44px;
            height: 44px;
            padding: 0 1rem;
            font-size: 0.875rem;
            line-height: 1.25rem;
            white-space: nowrap;
        }

        .navbar-icon-button,
        .navbar-user-button {
            flex: 0 0 auto;
            min-width: 44px;
            min-height: 44px;
        }

        .navbar-icon-button {
            width: 44px;
            height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: var(--radius-md);
        }

        .navbar-drawer-action {
            min-height: 44px;
            line-height: 1.25rem;
            white-space: nowrap;
        }

        .btn-secondary {
            background: var(--accent-secondary);
            color: var(--text-inverse);
            min-height: 44px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        .btn-secondary:hover { background: var(--accent-secondary-hover); }

        /* Themed components */
        .themed-card {
            background-color: var(--bg-card);
            border-color: var(--border-color);
            color: var(--text-primary);
        }

        .themed-input {
            background-color: var(--bg-input);
            border-color: var(--border-color);
            color: var(--text-primary);
        }
        .themed-input::-moz-placeholder {
            color: var(--text-muted);
        }
        .themed-input::placeholder {
            color: var(--text-muted);
        }
        .themed-input:focus {
            border-color: var(--accent-primary);
            outline: none;
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }

        .themed-border {
            border-color: var(--border-color);
        }

        .themed-bg {
            background-color: var(--bg-secondary);
        }

        .themed-bg-tertiary {
            background-color: var(--bg-tertiary);
        }

        /* The recessed surface: a strip *inside* a card that has to read as a
           different plane rather than as another box. `--bg-sunken` is set by
           every theme (ThemeContext, server.ts), so this stays in step with the
           preset the way a hard-coded slate would not. */
        .themed-bg-sunken {
            background-color: var(--bg-sunken);
        }

        /* For the accent rule down the side of a quoted/derived block. Pairs
           with Tailwind's border-l-2; the colour is the theme's, not blue-500. */
        .accent-border {
            border-color: var(--accent-primary);
        }

        .themed-text {
            color: var(--text-primary);
        }

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

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

        /* Semantic text colours. Every preset defines these four accents, so a
           figure that means "good"/"bad"/"caution"/"informational" reads the same
           in all of them — which a literal text-green-600 does not. */
        .themed-text-success {
            color: var(--accent-success);
        }

        .themed-text-warning {
            color: var(--accent-warning);
        }

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

        .themed-text-info {
            color: var(--accent-info);
        }

        /* Hover affordance for themed interactive surfaces (list rows, chips).
           These themed classes are plain CSS rather than utilities in a Tailwind
           @layer, so Tailwind cannot generate a `hover:themed-*` variant for them —
           the hover state has to be declared here, the same way .btn-primary:hover is. */
        .themed-hover:hover {
            background-color: var(--bg-tertiary);
        }

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

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

        /* Theme switcher */
        .theme-switcher {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border-radius: 8px;
            background: var(--bg-tertiary);
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .theme-switcher:hover {
            background: var(--bg-hover);
        }
        .theme-switcher-icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .html-content {
            line-height: 1.75;
            color: var(--text-secondary);
        }

        .html-content p {
            margin-top: 1em;
            margin-bottom: 1em;
        }

        .html-content h1 {
            font-size: 2rem;
            font-weight: 700;
            margin-top: 0;
            margin-bottom: 0.5em;
            line-height: 1.2;
            color: var(--text-primary);
        }

        .html-content h2 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-top: 2em;
            margin-bottom: 1em;
            line-height: 1.3;
            color: var(--text-primary);
        }

        .html-content h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-top: 2em;
            margin-bottom: 1em;
            line-height: 1.4;
            color: var(--text-primary);
        }

        .html-content h4 {
            font-size: 1.125rem;
            font-weight: 600;
            margin-top: 2em;
            margin-bottom: 1em;
            line-height: 1.45;
            color: var(--text-primary);
        }

        .html-content blockquote {
            border-left: 0.25rem solid var(--border-color);
            color: var(--text-muted);
            font-style: italic;
            margin-top: 1.6em;
            margin-bottom: 1.6em;
            padding-left: 1em;
        }

        .html-content ul,
        .html-content ol {
            margin-top: 1.25em;
            margin-bottom: 1.25em;
            padding-left: 1.75rem;
        }

        .html-content li {
            margin-top: 0.5em;
            margin-bottom: 0.5em;
        }

        .html-content strong {
            font-weight: 600;
            color: var(--text-primary);
        }

        .html-content em {
            font-style: italic;
        }

        .html-content a {
            color: var(--accent-primary);
            text-decoration: underline;
            font-weight: 500;
        }

        .html-content a:hover {
            color: var(--accent-primary-hover);
        }

        /* Mobile improvements */
        @media (max-width: 640px) {
            .card-hover:hover {
                transform: none;
            }
        }

        button {
            min-height: 44px; /* iOS touch target minimum */
            min-width: 44px;
        }

        /* iOS Safari zooms the page when a focused field's text is under 16px, and
           it does not zoom back out when the field blurs — the user is left on a
           magnified, sideways-scrolling page. Roughly forty fields in this app pair
           `themed-input` with Tailwind's `text-sm` (14px) or `text-xs` (12px), so
           the fix belongs here rather than at each call site.

           Scoped to coarse pointers so desktop keeps its denser type: only touch
           devices have the zoom behaviour to avoid. This sits after
           `@tailwind utilities` at equal specificity, so source order carries it
           over `text-sm`/`text-xs` — keep it below them.

           Checkbox, radio, and range have no text to zoom toward and are sized by
           their own rules, so they stay out of it. */
        @media (pointer: coarse) {
            input:not([type='checkbox']):not([type='radio']):not([type='range']),
            select,
            textarea {
                font-size: 16px;
            }
        }

/* ============================================
   App Root
   ============================================ */
.app-root {
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ============================================
   Layout System
   ============================================ */
.layout {
    min-height: 100vh;
    min-height: 100dvh;
}

/* Top Nav Layout */
.layout--top-nav {
    display: flex;
    flex-direction: column;
}

.layout--top-nav .layout__content {
    flex: 1;
}

/* The reading container. Pages should NOT re-cap their own width on top of
   this — a page-level `max-w-4xl` inside a 1440px container is what produced
   865px of content between 500px gutters on a 1920px screen. Let this element
   own the measure, and only cap *inside* it where a narrower measure is
   genuinely right (a form: `--form-max-width`). */
.layout__content--centered {
    max-width: var(--content-max-width);
    margin: 0 auto;
    width: 100%;
}

/* Pages that carry their own left rail (the event-management console) or their
   own full-viewport surface (the live meeting) opt out of the reading
   container entirely — boxing a sidebar inside it leaves the rail floating
   mid-screen with dead gutters either side. They cap their inner content pane
   instead, so nothing sprawls on an ultrawide. */
.layout__content--full {
    width: 100%;
}

/* The content pane beside a management sidebar: fills the freed width up to a
   ceiling, so a 1920px screen is used and a 3440px one does not get
   3000px-wide table rows. */
.manage-content {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.manage-content--form {
    max-width: var(--form-max-width);
}

/* Sidebar Layout */
.layout--sidebar {
    display: flex;
}

.layout--sidebar .layout__sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    z-index: 40;
    transition: width var(--transition-speed) var(--transition-easing);
}

.layout--sidebar .layout__content {
    margin-left: var(--sidebar-width);
    flex: 1;
    padding: var(--content-padding);
    transition: margin-left var(--transition-speed) var(--transition-easing);
}

.layout--sidebar-collapsed .layout__sidebar {
    width: var(--sidebar-width-collapsed);
}

.layout--sidebar-collapsed .layout__content {
    margin-left: var(--sidebar-width-collapsed);
}

/* Dashboard Layout */
.layout--dashboard {
    display: flex;
}

.layout--dashboard .layout__sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    z-index: 40;
    transition: width var(--transition-speed) var(--transition-easing);
}

.layout--dashboard .layout__main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-speed) var(--transition-easing);
}

.layout--dashboard .layout__content {
    flex: 1;
    padding: var(--content-padding);
}

.layout--dashboard.layout--sidebar-collapsed .layout__sidebar {
    width: var(--sidebar-width-collapsed);
}

.layout--dashboard.layout--sidebar-collapsed .layout__main {
    margin-left: var(--sidebar-width-collapsed);
}

/* Minimal Layout */
/* Give the minimal layout the viewport and let its content own whatever the
   "Back" header leaves. Without this a child sized `height: 100vh` (that is
   `.page-container`, which the meeting page uses) is laid out BELOW the header
   and so runs off the bottom of the window by the header's height — which
   clipped the meeting control bar, the one thing that must always be reachable. */
.layout--minimal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.layout--minimal .layout__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.layout__minimal-header {
    padding: 1rem var(--content-padding);
}

.layout__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-speed) var(--transition-easing);
}

.layout__back-btn:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* ============================================
   Side Navigation
   ============================================ */
.side-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1rem;
}

.side-nav__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
    cursor: pointer;
}

.side-nav__logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.side-nav__logo-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--text-primary);
}

.side-nav__create-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: all var(--transition-speed) var(--transition-easing);
}

.side-nav__create-btn:hover {
    background: var(--accent-primary-hover);
}

.side-nav__items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.side-nav__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: all var(--transition-speed) var(--transition-easing);
    text-align: left;
}

.side-nav__item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.side-nav__item--active {
    background: var(--bg-tertiary);
    color: var(--accent-primary);
}

.side-nav__item i {
    width: 20px;
    text-align: center;
}

.side-nav__bottom {
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.side-nav__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radius-md);
    transition: all var(--transition-speed) var(--transition-easing);
    text-align: left;
}

.side-nav__user:hover {
    background: var(--bg-tertiary);
}

.side-nav__avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    -o-object-fit: cover;
       object-fit: cover;
}

.side-nav__user-name {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

/* ============================================
   Top Bar (Dashboard)
   ============================================ */
.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: var(--topbar-height);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.top-bar__left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-bar__menu-btn {
    padding: 0.5rem;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
}

.top-bar__menu-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.top-bar__search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    min-width: 300px;
}

.top-bar__search i {
    color: var(--text-muted);
}

.top-bar__search input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    width: 100%;
}

.top-bar__search input::-moz-placeholder {
    color: var(--text-muted);
}

.top-bar__search input::placeholder {
    color: var(--text-muted);
}

.top-bar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.top-bar__action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.top-bar__action-btn:hover {
    background: var(--accent-primary-hover);
}

.top-bar__icon-btn {
    padding: 0.5rem;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
}

.top-bar__icon-btn:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.top-bar__user {
    position: relative;
}

.top-bar__user-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem;
}

.top-bar__user-btn img {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
}

.top-bar__user-btn i {
    color: var(--text-muted);
    font-size: 0.75rem;
}

.top-bar__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    padding: 0.5rem;
    z-index: 50;
}

.top-bar__dropdown button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    text-align: left;
}

.top-bar__dropdown button:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.top-bar__dropdown hr {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 0.5rem 0;
}

.top-bar__dropdown-danger {
    color: var(--accent-danger) !important;
}

/* ============================================
   Dev Theme Panel
   ============================================ */
.dev-panel__overlay {
    display: none;
}

.dev-panel__toggle {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    color: white;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-lg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform var(--transition-speed) var(--transition-easing);
    -webkit-tap-highlight-color: transparent;
}

.dev-panel__toggle:hover {
    transform: scale(1.1);
}

.dev-panel__toggle:active {
    transform: scale(0.95);
}

.dev-panel {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 320px;
    max-height: 80vh;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dev-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.dev-panel__header h3 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dev-panel__header button {
    color: var(--text-muted);
    padding: 0.25rem;
}

.dev-panel__header button:hover {
    color: var(--text-primary);
}

.dev-panel__tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
}

.dev-panel__tabs button {
    flex: 1;
    padding: 0.75rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--text-muted);
    border-bottom: 2px solid transparent;
    transition: all var(--transition-speed) var(--transition-easing);
}

.dev-panel__tabs button:hover {
    color: var(--text-secondary);
}

.dev-panel__tabs button.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.dev-panel__content {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.dev-panel__section {
    margin-bottom: 1.5rem;
}

.dev-panel__section:last-child {
    margin-bottom: 0;
}

.dev-panel__label {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.dev-panel__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.dev-panel__swatch {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-easing);
}

.dev-panel__swatch:hover {
    border-color: var(--border-strong);
}

.dev-panel__swatch.active {
    border-color: var(--accent-primary);
}

.dev-panel__swatch-preview {
    height: 40px;
    border-radius: var(--radius-sm);
    margin-bottom: 0.5rem;
    position: relative;
    overflow: hidden;
}

.dev-panel__swatch-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 8px;
}

.dev-panel__swatch-name {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-primary);
}

.dev-panel__swatch-category {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: capitalize;
}

.dev-panel__list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dev-panel__layout-btn {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border: 2px solid var(--border-color);
    border-radius: var(--radius-md);
    text-align: left;
    transition: all var(--transition-speed) var(--transition-easing);
}

.dev-panel__layout-btn:hover {
    border-color: var(--border-strong);
    background: var(--bg-tertiary);
}

.dev-panel__layout-btn.active {
    border-color: var(--accent-primary);
    background: var(--bg-tertiary);
}

.dev-panel__layout-btn i {
    font-size: 1.25rem;
    color: var(--text-muted);
    width: 24px;
    text-align: center;
}

.dev-panel__layout-btn.active i {
    color: var(--accent-primary);
}

.dev-panel__layout-name {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.dev-panel__layout-desc {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.dev-panel__detail-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.dev-panel__detail-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.dev-panel__detail-value {
    font-size: var(--font-size-xs);
    color: var(--text-primary);
    font-weight: 500;
}

.dev-panel__color-row {
    display: flex;
    gap: 4px;
}

.dev-panel__color-row div {
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

/* ============================================
   Command Center Layout
   ============================================ */
.layout--command-center {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-sunken);
    font-family: var(--font-family-mono);
}

.command-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--accent-primary);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.command-status-bar__left,
.command-status-bar__center,
.command-status-bar__right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.command-status-bar__indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-success);
}

.command-status-bar__indicator--online {
    box-shadow: 0 0 8px var(--accent-success);
}

.command-status-bar__indicator--pulse {
    animation: pulse 2s infinite;
    background: var(--accent-danger);
    box-shadow: 0 0 8px var(--accent-danger);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.command-status-bar__divider {
    color: var(--border-color);
}

.command-status-bar__time {
    font-size: 0.85rem;
    color: var(--accent-primary);
    font-weight: 600;
}

.command-status-bar__date {
    color: var(--text-secondary);
}

.command-main {
    display: flex;
    flex: 1;
    gap: 1rem;
    padding: 1rem;
}

.command-left-panel {
    width: 240px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.command-logo {
    position: relative;
    padding: 1.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.command-logo__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent-primary);
}

.command-logo__inner i {
    font-size: 1.5rem;
}

.command-logo__inner span {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.2em;
}

.command-bracket {
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--accent-primary);
    border-style: solid;
    border-width: 0;
}

.command-bracket--top-left {
    top: 4px;
    left: 4px;
    border-top-width: 2px;
    border-left-width: 2px;
}

.command-bracket--top-right {
    top: 4px;
    right: 4px;
    border-top-width: 2px;
    border-right-width: 2px;
}

.command-bracket--bottom-left {
    bottom: 4px;
    left: 4px;
    border-bottom-width: 2px;
    border-left-width: 2px;
}

.command-bracket--bottom-right {
    bottom: 4px;
    right: 4px;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

.command-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem;
}

.command-nav__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}

.command-nav__item:hover {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.command-nav__item--active {
    background: var(--bg-secondary);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.command-nav__hotkey {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.command-nav__arrow {
    margin-left: auto;
    color: var(--accent-primary);
}

.command-quick-panel {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
}

.command-quick-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
}

.command-quick-panel__indicator {
    width: 6px;
    height: 6px;
    background: var(--accent-success);
    border-radius: 50%;
}

.command-quick-panel__content {
    padding: 0.75rem;
}

.command-action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    transition: all 0.15s ease;
}

.command-action-btn:hover {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
}

.command-user-panel {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    margin-top: auto;
}

.command-user-panel__avatar {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    border: 2px solid var(--accent-primary);
}

.command-user-panel__info {
    display: flex;
    flex-direction: column;
}

.command-user-panel__name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
}

.command-user-panel__status {
    font-size: 0.65rem;
    color: var(--accent-success);
}

.command-content {
    flex: 1;
    position: relative;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 2rem;
}

.command-content__inner {
    height: 100%;
    overflow-y: auto;
}

.command-right-panel {
    width: 180px;
}

.command-stat {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle);
}

.command-stat__label {
    font-size: 0.65rem;
    color: var(--text-muted);
}

.command-stat__value {
    font-size: 0.8rem;
    color: var(--accent-primary);
    font-weight: 600;
}

.command-bottom-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* ============================================
   Magazine Layout
   ============================================ */
.layout--magazine {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-primary);
}

.magazine-masthead {
    border-bottom: 3px solid var(--text-primary);
}

.magazine-masthead__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border-color);
}

.magazine-masthead__date {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.magazine-masthead__logo {
    text-align: center;
    cursor: pointer;
}

.magazine-masthead__logo-text {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    font-family: var(--font-family-display);
    letter-spacing: 0.15em;
    color: var(--text-primary);
}

.magazine-masthead__logo-tagline {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 0.25rem;
}

.magazine-masthead__actions {
    display: flex;
    gap: 1rem;
}

.magazine-masthead__actions button {
    padding: 0.5rem;
    color: var(--text-secondary);
    transition: color 0.2s;
}

.magazine-masthead__actions button:hover {
    color: var(--text-primary);
}

.magazine-masthead__search {
    padding: 1rem 2rem;
    background: var(--bg-secondary);
}

.magazine-masthead__search input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1rem;
}

.magazine-masthead__nav {
    background: var(--bg-secondary);
    overflow-x: auto;
}

.magazine-masthead__nav-inner {
    display: flex;
    justify-content: center;
    gap: 0;
}

.magazine-masthead__nav-item {
    padding: 1rem 1.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.magazine-masthead__nav-item:hover {
    color: var(--text-primary);
}

.magazine-masthead__nav-item--active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-primary);
}

.magazine-body {
    display: flex;
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    gap: 2rem;
}

.magazine-content {
    flex: 1;
}

.magazine-sidebar {
    width: 300px;
    flex-shrink: 0;
}

.magazine-sidebar__section {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.magazine-sidebar__heading {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.magazine-sidebar__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--accent-primary);
    color: var(--text-inverse);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    transition: background 0.2s;
}

.magazine-sidebar__cta:hover {
    background: var(--accent-primary-hover);
}

.magazine-sidebar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.magazine-tag {
    padding: 0.25rem 0.75rem;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s;
}

.magazine-tag:hover {
    background: var(--accent-primary);
    color: var(--text-inverse);
}

.magazine-sidebar__profile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.magazine-sidebar__profile img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.magazine-sidebar__profile-name {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
}

.magazine-sidebar__profile-stat {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.magazine-sidebar__text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.magazine-sidebar__input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

.magazine-sidebar__subscribe {
    width: 100%;
    padding: 0.5rem;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

.magazine-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 2rem;
}

.magazine-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.magazine-footer__logo {
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.magazine-footer__copyright {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.magazine-footer__links {
    display: flex;
    gap: 1.5rem;
}

.magazine-footer__links a {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.magazine-footer__links a:hover {
    color: var(--text-primary);
}

.magazine-footer__social {
    display: flex;
    gap: 1rem;
}

.magazine-footer__social a {
    color: var(--text-muted);
    font-size: 1.25rem;
}

.magazine-footer__social a:hover {
    color: var(--text-primary);
}

/* ============================================
   Floating Dock Layout
   ============================================ */
.layout--floating-dock {
    min-height: 100vh;
    padding-bottom: 100px; /* Space for dock */
    background: var(--bg-primary);
}

.floating-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    position: sticky;
    top: 0;
    background: var(--bg-primary);
    z-index: 30;
}

.floating-header__logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.floating-header__logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.floating-header__logo span {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.floating-header__search {
    transition: all 0.3s ease;
}

.floating-header__search button {
    padding: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: var(--radius-full);
}

.floating-header__search input {
    width: 300px;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-primary);
}

.floating-content {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 2rem;
}

.floating-dock {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
}

.floating-dock__inner {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), 0 0 40px var(--bg-overlay);
    backdrop-filter: blur(20px);
}

.floating-dock__item {
    position: relative;
    padding: 0.75rem;
    color: var(--text-secondary);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.floating-dock__item-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
}

.floating-dock__item:hover .floating-dock__item-icon {
    background: var(--dock-item-color, var(--accent-primary));
    color: white;
}

.floating-dock__item--active .floating-dock__item-icon {
    background: var(--dock-item-color, var(--accent-primary));
    color: white;
}

.floating-dock__tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    pointer-events: none;
}

.floating-dock__indicator {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    background: var(--dock-item-color, var(--accent-primary));
    border-radius: 50%;
}

.floating-dock__divider {
    width: 1px;
    height: 32px;
    background: var(--border-color);
    margin: 0 0.5rem;
}

.floating-dock__avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    -o-object-fit: cover;
       object-fit: cover;
    transition: all 0.2s ease;
}

.floating-dock__item--user:hover .floating-dock__avatar {
    transform: scale(1.1);
}

/* ============================================
   Focus Layout
   ============================================ */
.layout--focus {
    min-height: 100vh;
    background: var(--bg-primary);
}

.focus-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--bg-tertiary);
    z-index: 100;
}

.focus-progress__bar {
    height: 100%;
    background: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
    transition: width 0.1s linear;
}

.focus-nav {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 50;
}

.focus-nav__toggle {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    transition: all 0.2s;
}

.focus-nav__toggle:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.focus-nav--expanded .focus-nav__toggle {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.focus-nav__menu {
    position: absolute;
    top: 56px;
    left: 0;
    width: 240px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: focusMenuIn 0.2s ease;
}

@keyframes focusMenuIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.focus-nav__header {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.focus-nav__logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

.focus-nav__items {
    padding: 0.5rem;
}

.focus-nav__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    transition: all 0.15s;
}

.focus-nav__item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.focus-nav__item--active {
    background: var(--accent-primary);
    color: white;
}

.focus-nav__footer {
    padding: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.focus-nav__create {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem;
    background: var(--accent-primary);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 500;
}

.focus-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    margin-top: 3px; /* Account for progress bar */
}

.focus-header__spacer {
    width: 44px;
}

.focus-header__logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    cursor: pointer;
}

.focus-header__avatar img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
}

.focus-content {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem;
}

.focus-article {
    font-size: 1.125rem;
    line-height: 1.8;
}

.focus-footer {
    text-align: center;
    padding: 3rem;
    border-top: 1px solid var(--border-subtle);
}

.focus-footer button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}

.focus-footer button:hover {
    color: var(--text-primary);
}

.focus-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 40;
}

/* ============================================
   Split Panel Layout
   ============================================ */
.layout--split-panel {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    background: var(--bg-primary);
    font-family: var(--font-family);
}

.split-activity-bar {
    display: flex;
    flex-direction: column;
    width: 48px;
    background: var(--bg-sunken);
    border-right: 1px solid var(--border-color);
    padding: 0.5rem 0;
}

.split-activity-bar__item {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.15s;
    position: relative;
}

.split-activity-bar__item:hover {
    color: var(--text-primary);
}

.split-activity-bar__item--active {
    color: var(--text-primary);
}

.split-activity-bar__item--active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 24px;
    background: var(--accent-primary);
}

.split-activity-bar__spacer {
    flex: 1;
}

.split-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.split-side-panel {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    overflow-y: auto;
    flex-shrink: 0;
}

.split-panel-content {
    height: 100%;
}

.split-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-subtle);
}

.split-panel-badge {
    padding: 0.125rem 0.375rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.65rem;
}

.split-tree__section {
    padding: 0.5rem 0;
}

.split-tree__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
}

.split-tree__header i {
    font-size: 0.6rem;
}

.split-tree__items {
    padding-left: 0.5rem;
}

.split-tree__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    transition: all 0.1s;
}

.split-tree__item:hover {
    background: var(--bg-tertiary);
}

.split-tree__item--active {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.split-tree__item i {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.split-search {
    padding: 0.75rem;
}

.split-search input {
    width: 100%;
    padding: 0.5rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

.split-search__options {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.split-search__options label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.split-list__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-subtle);
    transition: all 0.1s;
}

.split-list__item:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.split-list__item i {
    color: var(--text-muted);
}

.split-resizer {
    width: 4px;
    background: transparent;
    cursor: col-resize;
    transition: background 0.15s;
    flex-shrink: 0;
}

.split-resizer:hover,
.split-resizer--active {
    background: var(--accent-primary);
}

.split-resizer__handle {
    width: 100%;
    height: 100%;
}

.split-content-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.split-tab-bar {
    display: flex;
    background: var(--bg-sunken);
    border-bottom: 1px solid var(--border-color);
    overflow-x: auto;
}

.split-tab {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-right: 1px solid var(--border-color);
    cursor: pointer;
    min-width: 0;
}

.split-tab:hover {
    background: var(--bg-tertiary);
}

.split-tab--active {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.split-tab i {
    font-size: 0.7rem;
}

.split-tab__close {
    margin-left: auto;
    padding: 0.125rem;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.1s;
}

.split-tab:hover .split-tab__close {
    opacity: 1;
}

.split-tab__close:hover {
    color: var(--text-primary);
}

.split-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

.split-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.75rem;
    background: var(--accent-primary);
    color: white;
    font-size: 0.7rem;
}

.split-status-bar__left,
.split-status-bar__right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.split-status-bar__item {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* ============================================
   Responsive Layout Adjustments
   ============================================ */
@media (max-width: 768px) {
    .layout--sidebar .layout__sidebar,
    .layout--dashboard .layout__sidebar {
        transform: translateX(-100%);
        width: var(--sidebar-width);
    }

    .layout--sidebar .layout__content,
    .layout--dashboard .layout__main {
        margin-left: 0;
    }

    .layout--sidebar.layout--sidebar-open .layout__sidebar,
    .layout--dashboard.layout--sidebar-open .layout__sidebar {
        transform: translateX(0);
    }

    .top-bar__search {
        display: none;
    }

    /* Dev Panel Mobile Styles */
    .dev-panel__overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--bg-overlay);
        z-index: 9999;
        animation: fadeIn 0.2s ease;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .dev-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        max-height: 85vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        animation: slideUp 0.3s ease;
    }

    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    .dev-panel__header {
        padding: 1rem 1.25rem;
    }

    .dev-panel__header::before {
        content: '';
        position: absolute;
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--border-color);
        border-radius: 2px;
    }

    .dev-panel__header h3 {
        font-size: var(--font-size-base);
    }

    .dev-panel__tabs button {
        padding: 1rem;
        font-size: var(--font-size-sm);
    }

    .dev-panel__content {
        padding: 1.25rem;
        padding-bottom: 2rem;
    }

    .dev-panel__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .dev-panel__swatch {
        padding: 0.75rem;
    }

    .dev-panel__swatch-preview {
        height: 48px;
    }

    .dev-panel__layout-btn {
        padding: 1rem;
    }

    .dev-panel__toggle {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
    }

    /* Command Center Mobile */
    .layout--command-center .command-main {
        flex-direction: column;
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .layout--command-center .command-left-panel {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .layout--command-center .command-logo {
        display: none;
    }

    .layout--command-center .command-nav {
        flex: 1;
        flex-direction: row;
        overflow-x: auto;
        padding: 0.25rem;
    }

    .layout--command-center .command-nav__item {
        flex-direction: column;
        padding: 0.5rem;
        font-size: 0.65rem;
        min-width: auto;
    }

    .layout--command-center .command-nav__hotkey,
    .layout--command-center .command-nav__arrow {
        display: none;
    }

    .layout--command-center .command-quick-panel {
        display: none;
    }

    .layout--command-center .command-user-panel {
        display: none;
    }

    .layout--command-center .command-right-panel {
        display: none;
    }

    .layout--command-center .command-content {
        padding: 1rem;
    }

    .layout--command-center .command-status-bar {
        font-size: 0.6rem;
        padding: 0.375rem 0.75rem;
    }

    .layout--command-center .command-status-bar__left span:not(.command-status-bar__indicator),
    .layout--command-center .command-status-bar__right span:not(:last-child):not(.command-status-bar__indicator) {
        display: none;
    }

    .layout--command-center .command-bottom-bar {
        font-size: 0.55rem;
        gap: 0.5rem;
    }

    /* Magazine Mobile */
    .layout--magazine .magazine-masthead__top {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
    }

    .layout--magazine .magazine-masthead__logo-text {
        font-size: 1.75rem;
    }

    .layout--magazine .magazine-masthead__date {
        font-size: 0.65rem;
    }

    .layout--magazine .magazine-masthead__nav-inner {
        justify-content: flex-start;
        padding: 0 0.5rem;
    }

    .layout--magazine .magazine-masthead__nav-item {
        padding: 0.75rem 1rem;
        font-size: 0.7rem;
    }

    .layout--magazine .magazine-body {
        flex-direction: column;
        padding: 1rem;
        gap: 1.5rem;
    }

    .layout--magazine .magazine-sidebar {
        width: 100%;
        order: 1;
    }

    .layout--magazine .magazine-content {
        order: 0;
    }

    .layout--magazine .magazine-footer__inner {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }

    /* Floating Dock Mobile */
    .layout--floating-dock {
        padding-bottom: 80px;
    }

    .floating-header {
        padding: 0.75rem 1rem;
    }

    .floating-header__logo span {
        display: none;
    }

    .floating-content {
        padding: 0 1rem;
    }

    .floating-dock {
        bottom: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        transform: none;
        width: auto;
    }

    .floating-dock__inner {
        justify-content: space-around;
        padding: 0.375rem 0.5rem;
        gap: 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .floating-dock__item {
        padding: 0.5rem;
    }

    .floating-dock__item-icon {
        width: 40px;
        height: 40px;
    }

    .floating-dock__divider {
        margin: 0 0.25rem;
        height: 24px;
    }

    .floating-dock__avatar {
        width: 40px;
        height: 40px;
    }

    .floating-dock__tooltip {
        display: none;
    }

    /* Focus Layout Mobile */
    .focus-header {
        padding: 0.75rem 1rem;
    }

    .focus-content {
        padding: 1rem;
    }

    .focus-article {
        font-size: 1rem;
    }

    .focus-nav__menu {
        width: calc(100vw - 2rem);
        max-width: 280px;
    }

    /* Split Panel Mobile */
    .layout--split-panel {
        flex-direction: column;
    }

    .split-activity-bar {
        flex-direction: row;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        overflow-x: auto;
    }

    .split-activity-bar__item {
        width: 44px;
        height: 44px;
    }

    .split-activity-bar__spacer {
        flex: 0;
    }

    .split-main {
        flex-direction: column;
        flex: 1;
    }

    .split-side-panel {
        width: 100%;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }

    .split-resizer {
        display: none;
    }

    .split-content-area {
        min-height: 0;
    }

    .split-tab-bar {
        overflow-x: auto;
    }

    .split-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
    }

    .split-content {
        padding: 1rem;
    }

    .split-status-bar {
        font-size: 0.6rem;
        padding: 0.25rem 0.5rem;
    }

    .split-status-bar__left,
    .split-status-bar__right {
        gap: 0.5rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .dev-panel__grid {
        grid-template-columns: 1fr;
    }

    .floating-dock__item-icon {
        width: 36px;
        height: 36px;
    }

    .floating-dock__avatar {
        width: 36px;
        height: 36px;
    }

    .command-nav__item {
        padding: 0.375rem;
    }

    .command-nav__label {
        font-size: 0.55rem;
    }
}

/* ============================================
   Timer Styles
   ============================================ */
/*
 * Round countdown overlay. Pinned top-center (a conventional, hard-to-miss spot
 * that clears the top-right meeting controls that used to occlude it) as a
 * high-contrast, theme-aware pill. Same design on desktop and mobile so the clock
 * is never visible on one device and lost on another. z-index sits above the
 * meeting toolbar but below modals/status (1000). Deliberately compact and top-
 * aligned so it never covers the center of the video.
 */
.timer-container {
  position: fixed;
  top: 14px;
  /* Centred on the video, not on the window: docked chat (`--meeting-chat-dock-width`,
     set by MeetingChatPanel) takes the right edge, and a pill still centred on the
     window drifts over the toolbar's trailing cluster the moment chat opens. */
  left: calc(50% - var(--meeting-chat-dock-width, 0px) / 2);
  transform: translateX(-50%);
  z-index: 950;
  min-width: 168px;
  max-width: min(88vw, 320px);
  padding: 8px 16px 10px;
  border-radius: 999px;
  background-color: var(--bg-elevated, #1e293b);
  color: var(--text-primary, #f8fafc);
  border: 1px solid var(--border-strong, #475569);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.3));
  font-family: inherit;
  pointer-events: none;
}

.timer-container.hidden {
  display: none;
}

.timer-body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.timer-icon {
  flex: none;
  color: var(--accent-primary, #3b82f6);
}

.timer-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
  min-width: 0;
}

.timer-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary, #cbd5e1);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timer-time {
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: 0.03em;
  color: var(--text-primary, #f8fafc);
}

/* The schedule pill: what happens next, in every phase that is not a round.
   It occupies the same fixed top-center slot as the round timer and is never on
   screen at the same time, so it inherits the pill wholesale and only relaxes
   the width — "Rounds have not started yet" is a sentence, not a clock face.
   The horizontal padding is widened symmetrically to clear .timer-dismiss on the
   right, so the text stays optically centred instead of shunted left by it. */
.timer-container--schedule {
  max-width: min(88vw, 380px);
  padding-left: 32px;
  padding-right: 32px;
}

/* Dismiss. The pill sets `pointer-events: none` so it can never swallow a click
   meant for the video underneath; this control is the one exception and opts
   back in for itself alone. Centred vertically rather than tucked into a corner:
   at `border-radius: 999px` the corners of the bounding box are outside the
   painted pill, so a corner button would hang off the curve. */
.timer-dismiss {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: transparent;
  color: var(--text-secondary, #cbd5e1);
  cursor: pointer;
}

.timer-dismiss:hover {
  background-color: var(--bg-sunken, rgba(0, 0, 0, 0.35));
  color: var(--text-primary, #f8fafc);
}

.timer-dismiss:focus-visible {
  outline: 2px solid var(--accent-primary, #3b82f6);
  outline-offset: 1px;
}

.timer-dismiss-glyph {
  width: 12px;
  height: 12px;
}

.timer-container--schedule .timer-title {
  max-width: 340px;
  white-space: normal;
}

.timer-container--schedule .timer-text {
  align-items: center;
  text-align: center;
  width: 100%;
}

/* The explanatory second line. Muted rather than alarming — unlike .timer-wrapup
   below it, nothing here is urgent. */
.timer-note {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--text-secondary, #cbd5e1);
}

.timer-progress {
  width: 100%;
  height: 4px;
  margin-top: 8px;
  background-color: var(--bg-sunken, rgba(0, 0, 0, 0.35));
  border-radius: 3px;
  overflow: hidden;
}

.timer-bar {
  height: 100%;
  width: 0%;
  background-color: var(--accent-primary, #3b82f6);
  border-radius: 3px;
  transition: width 0.4s linear, background-color 0.3s ease;
}

/* Final stretch of a round: shift the whole pill to the alert accent so the last
   seconds read at a glance. The urgency is deliberately amplified so it registers
   from peripheral vision (people are looking at a conversation partner, not the
   clock): the pill grows slightly and the red glow brightens, on top of the base
   opacity pulse. A "Time to wrap up" label spells out the meaning. */
.timer-container--urgent {
  border-color: var(--accent-danger, #ef4444);
  /* Brighter, layered glow: the flat 2px ring plus a soft outer bloom. */
  box-shadow:
    var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.3)),
    0 0 0 2px var(--accent-danger, #ef4444),
    0 0 22px 4px var(--accent-danger, #ef4444);
  /* Combine with the base centering transform; nudge the pill up ~6%. */
  transform: translateX(-50%) scale(1.06);
  animation: timer-urgent-pulse 1s ease-in-out infinite;
}

.timer-container--urgent .timer-icon,
.timer-container--urgent .timer-time {
  color: var(--accent-danger, #ef4444);
}

.timer-container--urgent .timer-bar {
  background-color: var(--accent-danger, #ef4444);
}

/* "Time to wrap up" line, shown only in the urgent state. It fades/rises in so it
   does not pop into place. It is centered under the clock; the pill is a fixed
   top-center overlay, so its own height growing downward never reflows page
   content (no layout jank for anything else). */
.timer-wrapup {
  margin-top: 4px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-danger, #ef4444);
  animation: timer-wrapup-in 0.28s ease-out both;
}

@keyframes timer-wrapup-in {
  from { opacity: 0; transform: translateY(-3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes timer-urgent-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

@media (prefers-reduced-motion: reduce) {
  /* Static red urgent look + label, no motion: keep the (static) enlarged size and
     brighter glow, but drop the opacity pulse and the label's entrance animation. */
  .timer-container--urgent {
    animation: none;
  }
  .timer-wrapup {
    animation: none;
  }
}

/* ============================================
   Round-end warning overlay
   ============================================ */
/*
 * The visual "time to wrap up" cue that paints over every provider. Both layers are
 * fixed, pointer-events: none, and sit at z-index 940 — above the provider stage but
 * BELOW the timer pill (950) so the countdown stays readable on top. Colors use
 * var(--accent-danger) so the cue tracks the active theme, matching the timer pill's
 * urgent styling. See RoundEndWarningOverlay.tsx for the a11y rationale.
 */
.round-end-warning-flash,
.round-end-warning-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 940;
}

/* Option E: a one-shot, gentle full-screen red glow. Two slow pulses over ~2.5s
   (~0.8 Hz, well under WCAG 2.3.1's 3/sec limit) peaking at 0.25 opacity — NOT a
   literal fast red flash. Remounted per rising edge (React key) so it restarts. */
.round-end-warning-flash {
  background-color: var(--accent-danger, #ef4444);
  opacity: 0;
  animation: round-end-warning-flash 2.5s ease-in-out forwards;
}

@keyframes round-end-warning-flash {
  0% { opacity: 0; }
  20% { opacity: 0.25; }
  40% { opacity: 0; }
  60% { opacity: 0.22; }
  80%, 100% { opacity: 0; }
}

/* The escalation flash, replayed when the warning enters its final seconds. Same
   two-pulse shape and the same sub-1Hz rate (WCAG 2.3.1), a little brighter and
   a little quicker, because by then the deadline is the only thing that matters. */
.round-end-warning-flash[data-intensity='final'] {
  animation: round-end-warning-flash-final 1.8s ease-in-out forwards;
}

@keyframes round-end-warning-flash-final {
  0% { opacity: 0; }
  20% { opacity: 0.32; }
  40% { opacity: 0.05; }
  60% { opacity: 0.3; }
  80%, 100% { opacity: 0; }
}

/* Option A: a red edge vignette that "breathes" slowly (3s period) while the
   warning is active. An inset shadow keeps the center of the screen fully clear —
   only the edges glow — so it never tramples a mid-round conversation. */
.round-end-warning-vignette {
  box-shadow: inset 0 0 90px 24px var(--accent-danger, #ef4444);
  opacity: 0.45;
  animation: round-end-warning-vignette-breathe 3s ease-in-out infinite;
}

@keyframes round-end-warning-vignette-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.7; }
}

/* The final seconds. Thicker, brighter, and breathing at 1.2s instead of 3s.
   The numbers are chosen so the two levels cannot cross: this loop's DIMMEST
   moment (0.75) is above the approach loop's BRIGHTEST (0.7), so there is no
   instant at which the last seconds look weaker than the thirty before them.
   That inversion — loudest on arrival, steady thereafter — is the whole of the
   2026-08-13 "the red seemed to fade at the end" report. */
.round-end-warning-vignette[data-intensity='final'] {
  box-shadow: inset 0 0 130px 44px var(--accent-danger, #ef4444);
  animation-name: round-end-warning-vignette-final;
  animation-duration: 1.2s;
}

@keyframes round-end-warning-vignette-final {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

/* Reduced motion: the JS gate never mounts the flash; the vignette renders static
   (no breathing) at its subtle intensity. The class is applied by the component;
   the media query is the belt-and-suspenders fallback for the CSS-only path.
   The final level stays brighter even without motion — escalation is information,
   and dropping it for a reduced-motion user would drop the information too. */
.round-end-warning-vignette--static {
  animation: none;
  opacity: 0.55;
}

.round-end-warning-vignette--static[data-intensity='final'] {
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .round-end-warning-flash {
    animation: none;
    opacity: 0;
  }
  .round-end-warning-vignette {
    animation: none;
    opacity: 0.55;
  }
  .round-end-warning-vignette[data-intensity='final'] {
    animation: none;
    opacity: 0.9;
  }
}

/* ============================================
   Event-end warning overlay
   ============================================ */
/*
 * "The whole meeting is closing", as opposed to the round-end overlay's "your
 * room is closing". Same grammar (flash + breathing edge + a `final` escalation),
 * deliberately different reading. See EventEndWarningOverlay.tsx for why the
 * separation is three-fold rather than just a hue swap.
 *
 * z-index 941: one above the round-end vignette so the hard amber frame draws
 * INSIDE the soft red halo when a round and the event end together, and still
 * below the timer pill (950) so the countdown stays readable on top.
 */
.event-end-warning-flash,
.event-end-warning-edge {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 941;
}

.event-end-warning-flash {
  background-color: var(--accent-warning, #eab308);
  opacity: 0;
  animation: event-end-warning-flash 2.5s ease-in-out forwards;
}

/* Same two slow pulses (~0.8Hz, well under WCAG 2.3.1's 3/sec) and the same
   0.25 ceiling as the round-end flash. The cue is bigger news; it is not
   permitted to be a bigger photosensitivity hazard. */
@keyframes event-end-warning-flash {
  0% { opacity: 0; }
  20% { opacity: 0.25; }
  40% { opacity: 0; }
  60% { opacity: 0.22; }
  80%, 100% { opacity: 0; }
}

.event-end-warning-flash[data-intensity='final'] {
  animation: event-end-warning-flash-final 1.8s ease-in-out forwards;
}

@keyframes event-end-warning-flash-final {
  0% { opacity: 0; }
  20% { opacity: 0.32; }
  40% { opacity: 0.05; }
  60% { opacity: 0.3; }
  80%, 100% { opacity: 0; }
}

/* The hard frame line is the greyscale-safe half of the distinction: the
   round-end vignette has no boundary at all, this one has a crisp 5px edge. The
   soft bloom behind it keeps the two in the same visual family. Centre stays
   clear either way — people are mid-conversation. */
.event-end-warning-edge {
  box-shadow:
    inset 0 0 0 5px var(--accent-warning, #eab308),
    inset 0 0 70px 18px var(--accent-warning, #eab308);
  opacity: 0.5;
  animation: event-end-warning-edge-breathe 3s ease-in-out infinite;
}

@keyframes event-end-warning-edge-breathe {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.7; }
}

/* The final 30 seconds. As with the round-end overlay, the dimmest moment of
   this loop (0.75) is above the brightest of the one before it (0.7), so the
   warning can never appear to weaken as its deadline arrives. */
.event-end-warning-edge[data-intensity='final'] {
  box-shadow:
    inset 0 0 0 9px var(--accent-warning, #eab308),
    inset 0 0 110px 34px var(--accent-warning, #eab308);
  animation-name: event-end-warning-edge-final;
  animation-duration: 1.2s;
}

@keyframes event-end-warning-edge-final {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

.event-end-warning-edge--static {
  animation: none;
  opacity: 0.55;
}

.event-end-warning-edge--static[data-intensity='final'] {
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .event-end-warning-flash {
    animation: none;
    opacity: 0;
  }
  .event-end-warning-edge {
    animation: none;
    opacity: 0.55;
  }
  .event-end-warning-edge[data-intensity='final'] {
    animation: none;
    opacity: 0.9;
  }
}

/* The words. Bottom-centre above the control bar, using the same 88px clearance
   and the same chat-dock-aware centring the recording upload toast established —
   top-centre belongs to the timer pill and the auto-start notice, and a cue about
   the END of the meeting must never be mistaken for the round clock. */
.event-end-warning-pill {
  position: fixed;
  bottom: 88px;
  left: calc(50% - var(--meeting-chat-dock-width, 0px) / 2);
  transform: translateX(-50%);
  z-index: 942;
  pointer-events: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 9px 18px;
  border-radius: 9999px;
  background-color: rgba(15, 23, 42, 0.96);
  border: 2px solid var(--accent-warning, #eab308);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  color: var(--text-primary, #f8fafc);
  font-size: 13px;
  white-space: nowrap;
}

.event-end-warning-pill-title {
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--accent-warning, #eab308);
}

.event-end-warning-pill-time {
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 700;
}

/* The final seconds fill the pill in, so it is legible from peripheral vision by
   someone looking at a conversation partner rather than at the screen. */
.event-end-warning-pill[data-intensity='final'] {
  background-color: var(--accent-warning, #eab308);
  border-color: var(--accent-warning, #eab308);
  color: #1c1917;
}

.event-end-warning-pill[data-intensity='final'] .event-end-warning-pill-title {
  color: #1c1917;
}

/* ============================================
   Status Indicator
   ============================================ */
/* An in-flow chip; where it sits is the container's job. It lives in the
   meeting toolbar next to the other context chips — a fixed top-right pill sat
   exactly on the toolbar's trailing corner (the feedback button) and fought
   the toast stack for the same spot. */
.status-indicator {
  padding: 5px 10px;
  border-radius: 15px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
}

/* Short-viewport (landscape phone) fallback: under 480px of height the
   toolbar is hidden, and with it everything in its trailing cluster — the
   status chip AND the feedback button. This cluster floats those two over the
   stage's top-right corner there, and stays out of the DOM's way (display:
   none) everywhere else. */
.meeting-short-viewport-chrome {
  display: none;
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 1000;
  align-items: center;
  gap: 8px;
}

@media (max-height: 480px) {
  .meeting-short-viewport-chrome {
    display: flex;
  }
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 5px;
}

.status-connected {
  background-color: #4CAF50;
}

/* Reserved only for the outage that has outlived "just a blip". A drop under
   the grace window never reaches the chip at all, and the first fifteen seconds
   of a real one wear the amber below — red is for the point at which the user
   might genuinely want to go and look at their wifi. */
.status-disconnected {
  background-color: #f44336;
}

/* Opening the very first socket of the page. Grey, not red: nothing has failed
   yet, and a red dot on the first frame of a meeting reads as one. */
.status-connecting {
  background-color: #94a3b8;
}

/* A recoverable outage in progress. Amber is the whole point — the meeting is
   still on screen and the audio is still flowing, so this is a "hold on", not
   an error. */
.status-reconnecting {
  background-color: #f59e0b;
}

.status-moderator {
  background-color: #ff9800;
}

/* ============================================
   Control Panel
   ============================================ */
.control-panel {
  padding: 10px;
  background-color: #f0f0f0;
  border-bottom: 1px solid #ddd;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.control-btn {
  margin: 0;
  padding: 8px 12px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

.control-btn:hover {
  opacity: 0.9;
}

.control-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.control-btn-primary { background-color: #2196F3; }
.control-btn-danger { background-color: #f44336; }
.control-btn-success { background-color: #4CAF50; }
.control-btn-purple { background-color: #9C27B0; }
.control-btn-orange { background-color: #FF9800; }
.control-btn-neutral { background-color: #4b5563; }

.sequence-selector {
  margin: 0;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}

/* ============================================
   Modal Styles
   ============================================ */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-overlay.open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.modal-header h2 {
  margin: 0;
}

.modal-close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  background: none;
  border: none;
  line-height: 1;
}

.modal-close:hover {
  color: black;
}

.modal-textarea {
  width: 100%;
  height: 200px;
  margin-bottom: 15px;
  padding: 10px;
  font-family: monospace;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  box-sizing: border-box;
}

.modal-error {
  color: #f44336;
  margin-bottom: 10px;
  padding: 8px;
  background-color: #ffebee;
  border-radius: 4px;
}

.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============================================
   Jitsi Container
   ============================================ */
.jitsi-container {
  flex: 1;
  min-height: 0;
  position: relative;
}

.jitsi-container iframe {
  width: 100% !important;
  height: 100% !important;
  border: none;
}

.meeting-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.78), rgba(15, 23, 42, 0.68));
  backdrop-filter: blur(6px);
  z-index: 10;
}

.meeting-overlay-card {
  width: min(100%, 440px);
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.92);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.4);
  padding: 28px 24px;
  text-align: center;
}

.meeting-overlay-eyebrow {
  margin: 0 0 10px;
  color: #93c5fd;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.meeting-overlay-title {
  margin: 0;
  color: #f8fafc;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.15;
}

.meeting-overlay-copy {
  margin: 12px 0 0;
  color: #cbd5e1;
  font-size: 15px;
  line-height: 1.6;
}

.meeting-overlay-error .meeting-overlay-card {
  border-color: rgba(248, 113, 113, 0.35);
  background: rgba(69, 10, 10, 0.92);
}

.meeting-overlay-error .meeting-overlay-eyebrow {
  color: #fca5a5;
}

.meeting-overlay-copy-error {
  color: #fecaca;
}

/* ============================================
   Meeting Page Layout
   ============================================ */
/* Two classes so this beats `.page-container { height: 100vh }` further down:
   the meeting fills the space the minimal layout leaves, not the whole window
   (see `.layout--minimal`). It grows as a flex child rather than taking a
   percentage height, because the layout above it is bounded by `min-height`,
   against which a percentage has nothing to resolve. */
.page-container.meeting-page-root {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0;
}

/* Same two-class trick, opposite need: prejoin is a form, not a stage. Its content
   — device pickers, the consent block, the profile panel that expands when you open
   "what people see when they look you up" — is routinely taller than a phone, and
   `.page-container`'s `height: 100dvh; overflow: hidden` clipped whatever did not
   fit rather than scrolling it. What it clipped was the bottom of the page, which
   is where Join is: on a phone the screen simply ended after the mute toggle.
   `height: auto` lets the page grow past the viewport and `overflow: visible` lets
   the DOCUMENT scroll it, which is the scroll a phone should get — the URL bar
   collapses with it, and there is no inner scroll container to trap a swipe. */
.page-container.meeting-prejoin-root {
  width: 100%;
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

/* Tight on purpose: the layout gives this shell the whole viewport (see
   `fullBleed` in `MinimalLayout`), and every px of chrome here comes straight
   out of the video stage. */
.meeting-page-shell {
  /* Load-bearing: this is the containing block for the recording-notice scrim
     (`.meeting-recording-notice-scrim`, `inset: 0`), a child of this shell.
     Without it the scrim resolves against the initial containing block and dims
     the whole viewport — page header included — instead of the meeting. Nothing
     else in here depends on it: `.meeting-page-stage` and `.meeting-control-bar`
     carry their own `position: relative`. */
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  /* Docked chat (the `split` mode) is `position: fixed` against the right edge,
     so without this it would cover the tiles of the people you are talking to.
     `MeetingChatPanel` sets `--meeting-chat-dock-width` for exactly as long as it
     is docked; unset it resolves to 0 and this line costs nothing. The toolbar
     and control bar are inside this shell too, so they clear the panel as well.
     Deliberately not transitioned: the provider owns the video DOM and re-lays
     its tiles out on every resize, so an animated width is a frame's worth of
     tile churn rather than a nicety. */
  padding-right: calc(8px + var(--meeting-chat-dock-width, 0px));
}

.meeting-page-toolbar {
  width: 100%;
}

/* Landscape phones: a ~390px-tall viewport can't spare a header strip — the
   toolbar is ambient info (title, counts), and the control bar still names
   your room. Hiding it gives the stage back a quarter of the screen. */
@media (max-height: 480px) {
  .meeting-page-toolbar {
    display: none;
  }
}

.meeting-page-toolbar-row {
  min-height: 36px;
}

/* A flex column, so the provider mount below grows by flex rather than by a
   percentage height. Nothing in this page's ancestry has a *definite* height —
   `.layout--minimal` is bounded by `min-height: 100vh` — and a flex item's
   post-flex size is only definite when its container's main size was. So
   `height: 100%` here resolves to `auto`, and the mount is `position: absolute`
   and contributes no content height: the stage collapses to 0 and the video is
   invisible while every roster and tile is perfectly healthy. Flex sizing needs
   no definiteness, which is why it survives that layout and a percentage cannot. */
.meeting-page-stage {
  width: 100%;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* No height here on purpose — see `.meeting-page-stage`. `.jitsi-container`'s
   `flex: 1` does the sizing. */
.meeting-page-jitsi {
  width: 100%;
  min-height: 0;
}

/* ============================================
   Meeting Control Bar
   ============================================
   The bottom bar, modelled on Google Meet / Zoom: context on the left, the
   controls you reach for mid-call in the middle, and one red hang-up on the
   right. Dark regardless of theme — like every other meeting app, because it
   sits against video, not against the page. */

/* How far up from the bottom of the viewport a floating surface must start so it
   does not cover the control bar. ONE number, published to CSS, so every surface
   that has to clear the bar and the bar itself cannot drift apart — the same
   contract `--meeting-chat-dock-width` has for the docked column.

   `MeetingControlBar` overwrites this on the root element, for as long as it is
   mounted, with `window.innerHeight - rect.top` plus a gap: the *measured*
   distance from the bottom of the screen to the top of the bar. Measured, because
   the arithmetic is only knowable at runtime — on a phone the button row wraps to
   two rows and the bar takes `margin-bottom: env(safe-area-inset-bottom)`, which
   together put its real top edge ~100px up rather than 88px.

   The value below is the fallback that first paint, a JS-less render and a failed
   measurement all get: the desktop arithmetic that used to be hardcoded in three
   places — the bar's 60px min-height, the meeting shell's 8px padding, and 20px of
   room for its shadow — plus the safe-area term the measured value absorbs on its
   own. Approximately right everywhere, exactly right on a desktop. */
:root {
  --meeting-control-bar-clearance: calc(88px + env(safe-area-inset-bottom));
}

/* The in-meeting moderator drawer (`MeetingModeratorPanel`).

   A drawer down the right of the meeting, not a modal over it. It used to be a
   `fixed inset-0` overlay with a scrim, sitting BELOW chat in the layer stack,
   and a co-host who pressed "Live Controls" with chat open got a panel hidden
   behind the chat column over a meeting that no longer took clicks. Reported as
   "clicking moderator controls froze things". Three of the four declarations
   below are that report:

   - `right` steps aside for chat instead of opening behind it.
     `--meeting-chat-right-inset` is the width of whatever chat is holding on the
     right edge, published by `MeetingChatPanel` and unset — so 0 — when chat is
     closed, or in a layout with no strip to share (fullscreen, a phone's bottom
     sheet). There the drawer covers chat, which is what its z-index is for.
   - `bottom` keeps the clearance every floating meeting surface keeps: the
     control bar holds the one control with a deadline, and "close the host
     panel, then mute" is not something anyone completes in time.
   - `width` shrinks by the same inset rather than overflowing, so a laptop with
     both panels open gets a narrower drawer instead of one running off-screen.

   The 0.5rem gap is small on purpose: enough to show the meeting is still there
   and still live behind the panel, not enough to frame it. */
.meeting-moderator-drawer {
  position: fixed;
  z-index: 1145;
  top: 0.5rem;
  right: calc(var(--meeting-chat-right-inset, 0px) + 0.5rem);
  bottom: calc(var(--meeting-control-bar-clearance) + 0.5rem);
  width: min(34rem, calc(100vw - var(--meeting-chat-right-inset, 0px) - 1rem));
  border-radius: 30px;
}

.meeting-control-bar {
  position: relative;
  /* Above the meeting's panel tier (chat 1140, the moderator drawer 1145) and
     below its modal tier (the participants panel 1150 and everything over it).

     The bar's own box never overlaps those panels — they all stop at
     `--meeting-control-bar-clearance`, and meeting-chat-controls-reachable.spec.ts
     asserts exactly that — but the MENUS it opens do: `.meeting-control-menu` is
     absolute at `bottom: calc(100% + 8px)`, i.e. in the strip of screen the
     panels occupy. The bar is a stacking context (this line makes it one), so a
     menu cannot outrank a panel on its own however large its z-index; the bar has
     to carry it. At the old 40, opening Host controls with the moderator drawer
     open lit the button and showed nothing — the same invisible-panel failure the
     drawer's own z-index was raised to fix, one layer along. */
  z-index: 1148;
  flex: none;
  display: grid;
  /* minmax(0, …), not a bare 1fr: a bare `1fr` is `minmax(auto, 1fr)`, so the
     track cannot shrink below the min-content width of the button row inside it.
     On a phone that row demands ~500px (a moderator with chat and a recording in
     progress renders nine controls) and pushes the whole DOCUMENT sideways —
     nothing above here clips overflow — leaving Host controls and the hang-up
     button off-screen mid-call. The same implicit-track trap the 360px section of
     the README documents for page grids. */
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  min-height: 60px;
  border-radius: 18px;
  background-color: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(148, 163, 184, 0.18);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.3));
  color: #f8fafc;
}

.meeting-control-bar-context {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
}

.meeting-control-context-room {
  font-size: 13px;
  font-weight: 600;
  color: #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meeting-control-context-counterpart {
  font-size: 13px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meeting-control-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  /* The escape valve for the track above. min-width:0 lets this flex item shrink
     below its content width at all; wrapping is what it does with the pressure.
     Deliberately NOT `overflow-x: auto` — a scroll container clips absolutely
     positioned descendants on both axes, and the Settings / More / Host popovers
     open upward out of this very box. A second row is ugly; a clipped host menu
     is broken. One row is the intent and holds everywhere it can still fit. */
  min-width: 0;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 6px;
}

.meeting-control-bar-leave {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.meeting-control-split {
  position: relative;
  display: flex;
  align-items: center;
}

.meeting-control-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  color: #f8fafc;
  background-color: rgba(51, 65, 85, 0.95);
  transition: background-color 0.15s ease;
}

.meeting-control-button:hover:not(:disabled) {
  background-color: rgba(71, 85, 105, 0.95);
}

.meeting-control-button:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 2px;
}

.meeting-control-button:disabled {
  cursor: not-allowed;
  opacity: 0.75;
}

.meeting-control-button--active {
  background-color: rgba(37, 99, 235, 0.95);
}

/* Muted mic / stopped camera: red, the state everyone already reads as "off". */
.meeting-control-button--off,
.meeting-control-button--off:hover:not(:disabled) {
  background-color: rgba(220, 38, 38, 0.95);
}

.meeting-control-icon {
  width: 20px;
  height: 20px;
  flex: none;
}

.meeting-control-button-label {
  font-size: 14px;
  font-weight: 600;
}

/* The "▾" on the phone-sized Share control: a menu affordance, so it has to be
   visibly smaller than the glyph it follows or it reads as a second icon. */
.meeting-control-button-caret {
  margin-left: 2px;
  font-size: 10px;
  line-height: 1;
  opacity: 0.75;
}

.meeting-control-badge {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Unread chat: a dot rather than a count. Chat keeps no read state to count
   against (no history, no receipts), so a number would be a precise-looking lie —
   "something was said since you last looked" is all we know. Absolutely
   positioned so it marks the button without nudging the icon off centre when it
   appears. */
.meeting-control-badge--dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background-color: #dc2626;
}

/* Chat previews — the other half of that dot: WHAT was said, while the panel is
   shut. Each one ages out on its own (CHAT_PREVIEW_TIMEOUT_MS) or takes an X.

   Bottom-RIGHT, and the corner is the whole placement argument. `bottom` is the
   bar's measured clearance, so a preview can never sit on the mute or the red
   Leave button — the mistake the recording banner and the chat drawer above both
   already made once. Right is where the chat panel itself opens from in every
   layout but the phone's bottom sheet, so a popup lands where the thing it is
   about is about to appear; bottom-centre could not be used anyway, belonging to
   the recording banner, the end-of-round pill and the skip notices. The meeting
   page's feedback trigger is inline in the toolbar, not the floating bottom-right
   pill, so this corner is free. The draggable self-view can be parked here, which
   is survivable — it moves, and these disappear. */
.meeting-chat-previews {
  position: fixed;
  right: 16px;
  bottom: var(--meeting-control-bar-clearance);
  z-index: 1130;
  display: flex;
  /* Newest at the bottom, nearest the chat button, as in the panel itself. */
  flex-direction: column;
  gap: 8px;
  width: min(320px, calc(100vw - 32px));
  /* The stack is a positioning box; only the cards inside it take clicks. */
  pointer-events: none;
}

.meeting-chat-preview {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 8px 8px 12px;
  border-radius: 12px;
  background-color: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #e2e8f0;
  animation: meeting-chat-preview-in 160ms ease-out;
}

/* The message itself is the button: it opens the panel. Styled back to plain
   text so it reads as a notification rather than as a form control. */
.meeting-chat-preview-body {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.meeting-chat-preview-sender {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
}

/* "Private" beside the name. A popup in the corner is otherwise silent about
   which conversation it came from, and that is the one thing about a private
   message worth knowing before you reply into the wrong one. */
.meeting-chat-preview-private {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 9999px;
  background-color: rgba(148, 163, 184, 0.25);
  color: #cbd5e1;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* Three lines, then an ellipsis — the body is already truncated by character
   count, but a narrow phone still wraps it further than the stack can afford. */
.meeting-chat-preview-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.4;
  /* A pasted 200-character URL is one "word" and would otherwise widen the card. */
  overflow-wrap: anywhere;
}

.meeting-chat-preview-dismiss {
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 9999px;
  background: none;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.meeting-chat-preview-dismiss:hover {
  background-color: rgba(148, 163, 184, 0.2);
  color: #f8fafc;
}

@keyframes meeting-chat-preview-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .meeting-chat-preview {
    animation: none;
  }
}

/* Recording indicator — a labelled pill in the centre zone, so "you are being
   recorded" is legible at a glance rather than hidden behind an icon. */
.meeting-recording-indicator {
  width: auto;
  padding: 0 12px;
  gap: 8px;
}

.meeting-recording-label {
  font-size: 13px;
  font-weight: 600;
}

.meeting-recording-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 9999px;
  background-color: #dc2626;
  animation: meeting-recording-pulse 1.4s ease-in-out infinite;
}

/* Paused: a hollow, still dot — the recording is held, not live. */
.meeting-recording-dot--paused {
  background-color: transparent;
  border: 2px solid #f59e0b;
  animation: none;
}

/* Consent pending (§13.1): a solid amber dot, distinct from both the live red
   pulse and the hollow paused ring — recording is waiting on the user's answer,
   the mic was never acquired. */
.meeting-recording-dot--pending {
  background-color: #f59e0b;
  animation: none;
}

@keyframes meeting-recording-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.82); }
}

.meeting-recording-menu-note {
  margin: 0 0 6px;
  padding: 0 10px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(226, 232, 240, 0.75);
}

/* Announced lobby recording. Deliberately a BANNER and not an overlay: there is
   no decision to gate, so dimming the meeting would be theatre. It sits in the
   normal flow above the stage, is never dismissible (see LobbyRecordingBanner
   for why), and takes its whole width so it cannot be mistaken for a toolbar
   chip somebody has already stopped seeing. */
.meeting-lobby-recording-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: none;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(220, 38, 38, 0.45);
  background-color: rgba(127, 29, 29, 0.22);
  color: var(--text-primary, #e2e8f0);
}

.meeting-lobby-recording-banner-dot {
  width: 10px;
  height: 10px;
  flex: none;
  margin-top: 5px;
  border-radius: 9999px;
  background-color: #dc2626;
}

.meeting-lobby-recording-banner-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meeting-lobby-recording-banner-title {
  font-size: 14px;
  font-weight: 600;
}

.meeting-lobby-recording-banner-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.85;
}

/* One-time consent notice (§13.1) — a modal-weight overlay anchored to the
   meeting page shell, same visual tier as the duplicate-tab / pre-join gates.
   The scrim dims the meeting but the call keeps running behind it; only
   recording waits on the answer, so this informs a genuine consent decision
   rather than quietly overlaying already-running capture. */
.meeting-recording-notice-scrim {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: rgba(2, 6, 23, 0.62);
  backdrop-filter: blur(2px);
  /* Dim, but do NOT trap input. The dialog is deliberately `aria-modal="false"`:
     this gates *recording*, not the meeting, so mute, camera, chat, "Who's here?"
     and above all Leave must stay clickable while the answer is outstanding. A
     scrim that ate those clicks would hold someone in a call they cannot mute or
     leave until they answer a question about summaries. Only the card itself
     takes pointer events. */
  pointer-events: none;
}

.meeting-recording-notice {
  pointer-events: auto;
  width: min(480px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  border-radius: 16px;
  background-color: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  color: #e2e8f0;
}

.meeting-recording-notice-header {
  display: flex;
  gap: 10px;
  align-items: center;
}

.meeting-recording-notice-dot {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 9999px;
  background-color: #dc2626;
}

.meeting-recording-notice-title {
  display: block;
  font-size: 18px;
  font-weight: 600;
}

.meeting-recording-notice-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(226, 232, 240, 0.82);
}

/* The three facts §1 requires: what's recorded, where it goes, retention. */
.meeting-recording-notice-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.meeting-recording-notice-fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 10px;
  background-color: rgba(148, 163, 184, 0.1);
}

.meeting-recording-notice-fact-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(148, 163, 184, 0.9);
}

.meeting-recording-notice-fact-value {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(226, 232, 240, 0.9);
}

.meeting-recording-notice-actions {
  display: flex;
  gap: 10px;
  margin-top: 2px;
}

/* Equal-weight buttons: accept and decline are peers, not primary/secondary. */
.meeting-recording-notice-button {
  flex: 1;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  background-color: rgba(37, 99, 235, 0.95);
  color: #fff;
}

.meeting-recording-notice-button--secondary {
  background-color: rgba(148, 163, 184, 0.14);
  border-color: rgba(148, 163, 184, 0.3);
  color: #e2e8f0;
}

/* App-level upload status banner (§13.2). Fixed bottom-centre so it survives
   leaving the meeting route and never collides with the top-centre toast stack
   or the bottom-right dev panel.

   It DID collide with the meeting control bar, which is exactly where "bottom
   centre" lands in a meeting: mic, camera, screen-share and hang-up all sit
   under it, and at `z-index: 9998` this banner won every hit test. During a live
   demo the retry message parked itself over the controls for the whole meeting.
   Two independent guarantees, because either alone can fail:

   1. `pointer-events: none` — it is a status message with nothing to click, so
      it must never eat a click even if it does overlap something.
   2. `--recording-upload-toast-bottom` — the meeting route raises it clear of
      the control bar, by however tall the bar actually measures. Elsewhere it
      keeps the original 20px. */
.recording-upload-toast {
  position: fixed;
  bottom: var(--recording-upload-toast-bottom, 20px);
  /* Centred on the video for the same reason as `.timer-container`. */
  left: calc(50% - var(--meeting-chat-dock-width, 0px) / 2);
  transform: translateX(-50%);
  z-index: 9998;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: 9999px;
  background-color: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: #e2e8f0;
  font-size: 13px;
}

.recording-upload-toast[data-retrying='true'] {
  border-color: rgba(234, 179, 8, 0.5);
}

/* Above the control bar rather than on top of it. Set by the toast itself when
   the route is a meeting, so the value travels with the one rule that needs it.
   The height comes from the bar, which measures itself — see
   `--meeting-control-bar-clearance` in the Meeting Control Bar section. */
.recording-upload-toast--above-meeting-controls {
  --recording-upload-toast-bottom: var(--meeting-control-bar-clearance);
}

.recording-upload-toast-spinner {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 9999px;
  border: 2px solid rgba(148, 163, 184, 0.4);
  border-top-color: #60a5fa;
  animation: recording-upload-spin 0.8s linear infinite;
}

.recording-upload-toast-spinner--paused {
  border-top-color: #eab308;
  animation-play-state: paused;
}

@keyframes recording-upload-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .recording-upload-toast-spinner {
    animation: none;
  }
}

/* The one red control. Wider than the rest and alone on its side of the bar. */
.meeting-control-button--hangup,
.meeting-control-button--hangup:hover:not(:disabled) {
  padding: 0 18px;
  background-color: #dc2626;
}

.meeting-control-button--hangup:hover:not(:disabled) {
  background-color: #b91c1c;
}

/* Speaking: the mic icon pulses, Google Meet's "yes, they can hear you". */
.meeting-control-button--speaking .meeting-control-icon {
  animation: meeting-mic-pulse 1s ease-in-out infinite;
}

@keyframes meeting-mic-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.18); opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .meeting-control-button--speaking .meeting-control-icon {
    animation: none;
  }
  .meeting-control-button--speaking {
    box-shadow: inset 0 0 0 2px #22c55e;
  }
}

/* Menus pop UPWARDS out of the bar — the bar is at the bottom of the screen. */
.meeting-control-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  max-width: min(320px, 90vw);
  padding: 8px;
  border-radius: 12px;
  background-color: rgba(15, 23, 42, 0.98);
  border: 1px solid rgba(148, 163, 184, 0.2);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.3));
  color: #e2e8f0;
  font-size: 13px;
}

.meeting-control-menu--wide {
  min-width: 260px;
  max-height: 60vh;
  overflow-y: auto;
}

.meeting-control-menu--right {
  left: auto;
  right: 0;
  transform: none;
}

.meeting-control-menu-heading {
  padding: 6px 8px 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}

.meeting-control-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: #e2e8f0;
  background-color: transparent;
}

.meeting-control-menu-item:hover {
  background-color: rgba(51, 65, 85, 0.9);
}

.meeting-control-menu-item[data-selected='true'] {
  background-color: rgba(37, 99, 235, 0.95);
}

/* A menu item standing in for a disabled bar button (a share on cooldown) must
   look as inert as the button does, hover included. */
.meeting-control-menu-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.meeting-control-menu-item:disabled:hover {
  background-color: transparent;
}

.meeting-control-menu-separator {
  height: 1px;
  margin: 6px 4px;
  background-color: rgba(51, 65, 85, 0.9);
}

.meeting-control-menu-item--danger {
  color: #fca5a5;
}

.meeting-control-menu-item--danger:hover {
  background-color: rgba(127, 29, 29, 0.9);
  color: #fee2e2;
}

.meeting-control-menu-item-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.meeting-control-menu-item-label {
  font-weight: 600;
}

.meeting-control-menu-item-desc {
  font-size: 11px;
  color: #94a3b8;
}

.meeting-control-menu-check {
  width: 14px;
  height: 14px;
  flex: none;
}

.meeting-control-menu-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
}

.meeting-control-menu-field-label {
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.meeting-control-menu-select {
  width: 100%;
  padding: 6px;
  border-radius: 6px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background-color: #1e293b;
  color: #e2e8f0;
  font-size: 12px;
}

.meeting-control-menu-toggle {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  cursor: pointer;
}

.meeting-control-menu-toggle-input {
  margin: 2px 0 0;
  flex: none;
  width: 15px;
  height: 15px;
  accent-color: var(--accent-primary, #6366f1);
  cursor: pointer;
}

.meeting-control-menu-toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.meeting-control-menu-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: #e2e8f0;
}

.meeting-control-menu-toggle-desc {
  font-size: 11px;
  color: #94a3b8;
}

/* Phones: the context text is the first thing to go — the controls are the point,
   and the room name is also on the stage's own banner. */
@media (max-width: 640px) {
  /* Two columns, not three: the context zone is display:none below, so it is not
     a grid item at all — leaving it in the template would push the controls into
     the `auto` column and off centre. */
  .meeting-control-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 6px 8px;
    /* Below the home indicator otherwise: the bar is the last thing in a
       100dvh column, so its bottom edge IS the bottom of the screen. */
    margin-bottom: env(safe-area-inset-bottom);
  }

  .meeting-control-bar-context {
    display: none;
  }

  .meeting-control-bar-actions {
    gap: 6px;
  }

  .meeting-control-button {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
  }

  .meeting-control-button--hangup .meeting-control-button-label {
    display: none;
  }
}

/* ============================================
   Page Layouts
   ============================================ */
.page-container {
  height: 100vh;
  /* Paired with `overflow: hidden`, a 100vh that overshoots the visible viewport
     does not scroll — it clips, and what it clips is the bottom of the meeting
     page. dvh tracks the URL bar; 100vh above is the fallback. */
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-card {
  background: white;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
}

.login-card h1 {
  margin: 0 0 20px;
  text-align: center;
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  color: #555;
}

.form-group input {
  width: 100%;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  box-sizing: border-box;
}

.form-group input:focus {
  outline: none;
  border-color: #667eea;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.login-btn:hover {
  opacity: 0.9;
}

.home-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
}

.home-page h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.home-page p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.home-links {
  display: flex;
  gap: 20px;
}

.home-link {
  padding: 12px 24px;
  background: white;
  color: #667eea;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: transform 0.2s;
}

.home-link:hover {
  transform: translateY(-2px);
}

/* ============================================
   Responsive - Tablets and Mobile
   ============================================ */
@media (max-width: 768px) {
  .login-card {
    padding: 30px 24px;
    margin: 1rem;
    max-width: 90%;
  }

  .login-card h1 {
    font-size: 1.8rem;
  }

  .form-group input,
  .login-btn {
    padding: 14px 12px;
    font-size: 16px;
  }

  .home-page h1 {
    font-size: 2.2rem;
    margin-bottom: 0.8rem;
  }

  .home-page p {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
  }

  .home-links {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .home-link {
    width: 280px;
    padding: 16px 32px;
  }

  .control-panel {
    padding: 12px 8px;
    gap: 8px;
  }

  .control-btn {
    padding: 14px 20px;
    font-size: 16px;
    min-height: 48px;
  }

  .sequence-selector {
    padding: 14px 16px;
    font-size: 16px;
    min-width: 160px;
  }

  /* Same centered pill as desktop, just a touch tighter. Keeping the layout
     identical is the point: the countdown must not be prominent on the phone and
     invisible on the laptop. */
  .timer-container {
    top: 10px;
    padding: 7px 14px 9px;
  }

  .timer-time {
    font-size: 24px;
  }

  .modal-content {
    margin: 1rem;
    width: calc(100% - 2rem);
    padding: 24px 20px;
  }

  .modal-textarea {
    height: 180px;
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .control-panel {
    flex-direction: column;
    gap: 10px;
    padding: 10px 12px;
  }

  .control-btn,
  .sequence-selector {
    flex: 1 1 100%;
    max-width: none;
    min-height: 50px;
  }

  .timer-container {
    top: 8px;
    max-width: 92vw;
  }

  /* NOTE: an old rule here pinned .status-indicator to bottom:0/left:0/right:0
     while the wider rule's top:8px still applied, stretching the translucent
     pill over the entire phone viewport (and swallowing every tap under its
     z-index). The indicator is an in-toolbar chip now; nothing to override. */

  .home-page h1 {
    font-size: 1.8rem;
  }

  .home-link {
    width: 100%;
    max-width: 300px;
  }
}

.placeholder\:text-slate-400::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.placeholder\:text-slate-400::placeholder {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}

.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}

.after\:left-\[2px\]::after {
  content: var(--tw-content);
  left: 2px;
}

.after\:top-\[2px\]::after {
  content: var(--tw-content);
  top: 2px;
}

.after\:h-5::after {
  content: var(--tw-content);
  height: 1.25rem;
}

.after\:w-5::after {
  content: var(--tw-content);
  width: 1.25rem;
}

.after\:rounded-full::after {
  content: var(--tw-content);
  border-radius: 9999px;
}

.after\:border::after {
  content: var(--tw-content);
  border-width: 1px;
}

.after\:border-gray-300::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}

.after\:bg-white::after {
  content: var(--tw-content);
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

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

.after\:content-\[\'\'\]::after {
  --tw-content: '';
  content: var(--tw-content);
}

.first\:pt-0:first-child {
  padding-top: 0px;
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.hover\:border-sky-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(56 189 248 / var(--tw-border-opacity, 1));
}

.hover\:bg-\[\#004182\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(0 65 130 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(253 230 138 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(180 83 9 / var(--tw-bg-opacity, 1));
}

.hover\:bg-amber-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(146 64 14 / var(--tw-bg-opacity, 1));
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}

.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
}

.hover\:bg-gray-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}

.hover\:bg-green-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(21 128 61 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-indigo-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(250 245 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-purple-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(126 34 206 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-red-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(185 28 28 / var(--tw-bg-opacity, 1));
}

.hover\:bg-rose-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1));
}

.hover\:bg-rose-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 205 211 / var(--tw-bg-opacity, 1));
}

.hover\:bg-rose-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}

.hover\:bg-rose-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sky-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sky-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(186 230 253 / var(--tw-bg-opacity, 1));
}

.hover\:bg-sky-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(3 105 161 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-800:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-900:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}

.hover\:bg-slate-950:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(2 6 23 / var(--tw-bg-opacity, 1));
}

.hover\:bg-teal-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(204 251 241 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-violet-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.hover\:bg-white\/40:hover {
  background-color: rgb(255 255 255 / 0.4);
}

.hover\:bg-opacity-10:hover {
  --tw-bg-opacity: 0.1;
}

.hover\:bg-opacity-50:hover {
  --tw-bg-opacity: 0.5;
}

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

.hover\:bg-opacity-90:hover {
  --tw-bg-opacity: 0.9;
}

.hover\:text-blue-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-700:hover {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-700:hover {
  --tw-text-opacity: 1;
  color: rgb(126 34 206 / var(--tw-text-opacity, 1));
}

.hover\:text-purple-800:hover {
  --tw-text-opacity: 1;
  color: rgb(107 33 168 / var(--tw-text-opacity, 1));
}

.hover\:text-red-700:hover {
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}

.hover\:text-red-800:hover {
  --tw-text-opacity: 1;
  color: rgb(153 27 27 / var(--tw-text-opacity, 1));
}

.hover\:text-rose-700:hover {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}

.hover\:text-rose-800:hover {
  --tw-text-opacity: 1;
  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
}

.hover\:text-sky-900:hover {
  --tw-text-opacity: 1;
  color: rgb(12 74 110 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-700:hover {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}

.hover\:text-slate-800:hover {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}

.hover\:text-violet-900:hover {
  --tw-text-opacity: 1;
  color: rgb(76 29 149 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-800:hover {
  --tw-text-opacity: 1;
  color: rgb(133 77 14 / var(--tw-text-opacity, 1));
}

.hover\:text-yellow-900:hover {
  --tw-text-opacity: 1;
  color: rgb(113 63 18 / var(--tw-text-opacity, 1));
}

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

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:opacity-70:hover {
  opacity: 0.7;
}

.hover\:opacity-80:hover {
  opacity: 0.8;
}

.hover\:opacity-90:hover {
  opacity: 0.9;
}

.hover\:opacity-95:hover {
  opacity: 0.95;
}

.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

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

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

.focus\:border-sky-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(56 189 248 / var(--tw-border-opacity, 1));
}

.focus\:bg-white:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --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(2px + 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);
}

.focus\:ring-blue-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-2:focus-visible {
  --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(2px + 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);
}

.focus-visible\:ring-sky-300:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity, 1));
}

.focus-visible\:ring-sky-400:focus-visible {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(56 189 248 / var(--tw-ring-opacity, 1));
}

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

.disabled\:cursor-default:disabled {
  cursor: default;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:bg-emerald-200:disabled {
  --tw-bg-opacity: 1;
  background-color: rgb(167 243 208 / var(--tw-bg-opacity, 1));
}

.disabled\:text-emerald-700:disabled {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}

.disabled\:opacity-100:disabled {
  opacity: 1;
}

.disabled\:opacity-40:disabled {
  opacity: 0.4;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.disabled\:opacity-60:disabled {
  opacity: 0.6;
}

.peer:checked ~ .peer-checked\:bg-purple-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

.peer:checked ~ .peer-checked\:after\:translate-x-full::after {
  content: var(--tw-content);
  --tw-translate-x: 100%;
  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));
}

.peer:checked ~ .peer-checked\:after\:border-white::after {
  content: var(--tw-content);
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity, 1));
}

.peer:focus ~ .peer-focus\:outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 640px) {

  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:mx-2 {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .sm\:mt-3 {
    margin-top: 0.75rem;
  }

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:table-cell {
    display: table-cell;
  }

  .sm\:h-28 {
    height: 7rem;
  }

  .sm\:h-32 {
    height: 8rem;
  }

  .sm\:w-16 {
    width: 4rem;
  }

  .sm\:w-32 {
    width: 8rem;
  }

  .sm\:w-60 {
    width: 15rem;
  }

  .sm\:w-64 {
    width: 16rem;
  }

  .sm\:w-80 {
    width: 20rem;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:min-w-\[720px\] {
    min-width: 720px;
  }

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

  .sm\:max-w-4xl {
    max-width: 56rem;
  }

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

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

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

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

  .sm\:flex-row {
    flex-direction: row;
  }

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

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

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

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

  .sm\:gap-3 {
    gap: 0.75rem;
  }

  .sm\:gap-6 {
    gap: 1.5rem;
  }

  .sm\:self-auto {
    align-self: auto;
  }

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

  .sm\:p-10 {
    padding: 2.5rem;
  }

  .sm\:p-4 {
    padding: 1rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

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

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:py-5 {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .sm\:pt-3 {
    padding-top: 0.75rem;
  }

  .sm\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
}

@media (min-width: 768px) {

  .md\:sticky {
    position: sticky;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:block {
    display: block;
  }

  .md\:hidden {
    display: none;
  }

  .md\:min-w-\[380px\] {
    min-width: 380px;
  }

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

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

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

  .md\:grid-cols-\[3fr_2fr\] {
    grid-template-columns: 3fr 2fr;
  }

  .md\:grid-cols-\[minmax\(0\2c 1fr\)_220px\] {
    grid-template-columns: minmax(0,1fr) 220px;
  }

  .md\:grid-cols-\[minmax\(260px\2c 340px\)_1fr\] {
    grid-template-columns: minmax(260px,340px) 1fr;
  }

  .md\:grid-cols-\[minmax\(300px\2c 380px\)_1fr\] {
    grid-template-columns: minmax(300px,380px) 1fr;
  }

  .md\:flex-row {
    flex-direction: row;
  }

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

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

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

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

  .md\:border-l {
    border-left-width: 1px;
  }

  .md\:border-t-0 {
    border-top-width: 0px;
  }

  .md\:p-10 {
    padding: 2.5rem;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:pt-0 {
    padding-top: 0px;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width: 1024px) {

  .lg\:sticky {
    position: sticky;
  }

  .lg\:top-24 {
    top: 6rem;
  }

  .lg\:z-sticky {
    z-index: var(--z-sticky);
  }

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

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .lg\:ml-0 {
    margin-left: 0px;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:grid {
    display: grid;
  }

  .lg\:hidden {
    display: none;
  }

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

  .lg\:w-64 {
    width: 16rem;
  }

  .lg\:shrink-0 {
    flex-shrink: 0;
  }

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

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

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

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

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

  .lg\:grid-cols-\[minmax\(0\2c 2fr\)_minmax\(0\2c 22rem\)\] {
    grid-template-columns: minmax(0,2fr) minmax(0,22rem);
  }

  .lg\:grid-cols-\[minmax\(340px\2c 480px\)_1fr\] {
    grid-template-columns: minmax(340px,480px) 1fr;
  }

  .lg\:flex-row {
    flex-direction: row;
  }

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

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

  .lg\:p-8 {
    padding: 2rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

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

  .lg\:pt-0 {
    padding-top: 0px;
  }

  .lg\:text-\[2\.15rem\] {
    font-size: 2.15rem;
  }
}

@media (min-width: 1280px) {

  .xl\:sticky {
    position: sticky;
  }

  .xl\:top-6 {
    top: 1.5rem;
  }

  .xl\:block {
    display: block;
  }

  .xl\:inline {
    display: inline;
  }

  .xl\:flex {
    display: flex;
  }

  .xl\:hidden {
    display: none;
  }

  .xl\:min-w-\[360px\] {
    min-width: 360px;
  }

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

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

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

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

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

  .xl\:grid-cols-\[minmax\(0\2c 1\.3fr\)_minmax\(320px\2c 0\.7fr\)\] {
    grid-template-columns: minmax(0,1.3fr) minmax(320px,0.7fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 1\.7fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: minmax(0,1.7fr) minmax(0,1fr);
  }

  .xl\:grid-cols-\[minmax\(0\2c 1fr\)_380px\] {
    grid-template-columns: minmax(0,1fr) 380px;
  }

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

  .xl\:gap-4 {
    gap: 1rem;
  }
}

@media (min-width: 1536px) {

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

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

@media (prefers-color-scheme: dark) {

  .dark\:bg-black\/30 {
    background-color: rgb(0 0 0 / 0.3);
  }

  .dark\:bg-yellow-500\/40 {
    background-color: rgb(234 179 8 / 0.4);
  }

  .dark\:from-slate-700 {
    --tw-gradient-from: #334155 var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(51 65 85 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  }

  .dark\:to-slate-800 {
    --tw-gradient-to: #1e293b var(--tw-gradient-to-position);
  }

  .dark\:ring-white\/15 {
    --tw-ring-color: rgb(255 255 255 / 0.15);
  }

  .dark\:hover\:bg-gray-700:hover {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }
}

.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-search-cancel-button\]\:appearance-none::-webkit-search-cancel-button {
  -webkit-appearance: none;
          appearance: none;
}

.\[\&\:\:-webkit-search-decoration\]\:appearance-none::-webkit-search-decoration {
  -webkit-appearance: none;
          appearance: none;
}