/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
*, ::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', -apple-system, BlinkMacSystemFont, 'Segoe UI', 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;
}
.pointer-events-none {
  pointer-events: none;
}
.visible {
  visibility: visible;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-32 {
  bottom: -8rem;
}
.-left-24 {
  left: -6rem;
}
.-right-24 {
  right: -6rem;
}
.-top-24 {
  top: -6rem;
}
.bottom-4 {
  bottom: 1rem;
}
.bottom-\[-5\%\] {
  bottom: -5%;
}
.left-1\/2 {
  left: 50%;
}
.left-3 {
  left: 0.75rem;
}
.right-0 {
  right: 0px;
}
.right-2 {
  right: 0.5rem;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1\/2 {
  top: 50%;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.z-\[60\] {
  z-index: 60;
}
.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}
.-mb-px {
  margin-bottom: -1px;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.ml-0\.5 {
  margin-left: 0.125rem;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.block {
  display: block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.table-cell {
  display: table-cell;
}
.table-row {
  display: table-row;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-16 {
  height: 4rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[420px\] {
  height: 420px;
}
.h-\[620px\] {
  height: 620px;
}
.h-\[680px\] {
  height: 680px;
}
.h-full {
  height: 100%;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-12 {
  width: 3rem;
}
.w-16 {
  width: 4rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-4 {
  width: 1rem;
}
.w-5 {
  width: 1.25rem;
}
.w-6 {
  width: 1.5rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-80 {
  width: 20rem;
}
.w-\[420px\] {
  width: 420px;
}
.w-\[480px\] {
  width: 480px;
}
.w-\[620px\] {
  width: 620px;
}
.w-\[680px\] {
  width: 680px;
}
.w-full {
  width: 100%;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-\[64px\] {
  min-width: 64px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.-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));
}
.animate-none {
  animation: none;
}
@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-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-3 {
  gap: 0.75rem;
}
.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));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.break-all {
  word-break: break-all;
}
.rounded {
  border-radius: 0.5rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.75rem;
}
.rounded-xl {
  border-radius: 1rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-l-4 {
  border-left-width: 4px;
}
.border-t {
  border-top-width: 1px;
}
.border-border {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-primary {
  --tw-border-opacity: 1;
  border-color: rgb(79 70 229 / var(--tw-border-opacity, 1));
}
.border-teal-300\/10 {
  border-color: rgb(94 234 212 / 0.1);
}
.border-teal-300\/15 {
  border-color: rgb(94 234 212 / 0.15);
}
.border-transparent {
  border-color: transparent;
}
.border-l-error {
  --tw-border-opacity: 1;
  border-left-color: rgb(220 38 38 / var(--tw-border-opacity, 1));
}
.border-l-success {
  --tw-border-opacity: 1;
  border-left-color: rgb(5 150 105 / var(--tw-border-opacity, 1));
}
.border-l-surface-subtle {
  --tw-border-opacity: 1;
  border-left-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-l-warning {
  --tw-border-opacity: 1;
  border-left-color: rgb(217 119 6 / var(--tw-border-opacity, 1));
}
.bg-black\/30 {
  background-color: rgb(0 0 0 / 0.3);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-error {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1));
}
.bg-error\/10 {
  background-color: rgb(220 38 38 / 0.1);
}
.bg-info {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-info\/10 {
  background-color: rgb(2 132 199 / 0.1);
}
.bg-primary {
  --tw-bg-opacity: 1;
  background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
}
.bg-primary-light {
  --tw-bg-opacity: 1;
  background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
}
.bg-primary\/20 {
  background-color: rgb(79 70 229 / 0.2);
}
.bg-success {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-success\/10 {
  background-color: rgb(5 150 105 / 0.1);
}
.bg-surface-subtle {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-teal-300\/70 {
  background-color: rgb(94 234 212 / 0.7);
}
.bg-teal-400\/15 {
  background-color: rgb(45 212 191 / 0.15);
}
.bg-text-muted {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-warning {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.bg-warning\/10 {
  background-color: rgb(217 119 6 / 0.1);
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-\[hsl\(168\2c 80\%\2c 28\%\)\] {
  --tw-gradient-from: hsl(168,80%,28%) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(168 80% 28% / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-\[hsl\(168\2c 55\%\2c 18\%\)\] {
  --tw-gradient-to: hsl(168,55%,18%) var(--tw-gradient-to-position);
}
.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}
.p-0\.5 {
  padding: 0.125rem;
}
.p-1 {
  padding: 0.25rem;
}
.p-1\.5 {
  padding: 0.375rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.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;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.pb-0 {
  padding-bottom: 0px;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pl-3 {
  padding-left: 0.75rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-10 {
  padding-right: 2.5rem;
}
.pt-4 {
  padding-top: 1rem;
}
.pt-5 {
  padding-top: 1.25rem;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-2xl {
  font-size: 1.75rem;
  line-height: 2rem;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-base {
  font-size: 0.9375rem;
  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.375rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.text-error {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-info {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-primary {
  --tw-text-opacity: 1;
  color: rgb(79 70 229 / var(--tw-text-opacity, 1));
}
.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.text-success {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-text {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-text-muted {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-text-secondary {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-transparent {
  color: transparent;
}
.text-warning {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-zinc-100 {
  --tw-text-opacity: 1;
  color: rgb(244 244 245 / var(--tw-text-opacity, 1));
}
.text-zinc-400 {
  --tw-text-opacity: 1;
  color: rgb(161 161 170 / var(--tw-text-opacity, 1));
}
.text-zinc-50 {
  --tw-text-opacity: 1;
  color: rgb(250 250 250 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line: underline;
}
.opacity-30 {
  opacity: 0.3;
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.03);
  --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-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);
}
.outline {
  outline-style: solid;
}
.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-teal-400\/20 {
  --tw-ring-color: rgb(45 212 191 / 0.2);
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.drop-shadow {
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.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);
}
.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-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;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ══════════════════════════════════════════════════════════════════
   CT Ops Monitor — carries the Control Tower Performance tab's visual
   system (tokens, card anatomy, pill nav, filter bar, table, drawer)
   so the monitor reads as part of the same Control Tower. Values are
   copied from that app's globals.css; nothing here is reinvented.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --bg:#eef1f9; --card:#fff; --line:#dfe4f2; --line2:#eef0f8;
  --ink:#141a33; --ink2:#3d4668; --ink3:#5d6480;
  --indigo:#3b39d4; --navy:#0b1b54;
  --g:#0e7a59; --a:#9c5c06; --r:#c0392f;
  --gbg:#e4f5ee; --abg:#fdf1dc; --rbg:#fde9e6; --ibg:#e9ecfb;
  /* chart series: pastel, no red, never the UI accent */
  --c1:#5b7cc9; --c2:#4fa08b; --c3:#c9a24f; --c4:#8b7cc4; --c5:#6b8ea3; --c6:#b2846a;
  --c1f:rgba(91,124,201,.20); --c2f:rgba(79,160,139,.20); --c3f:rgba(201,162,79,.22);
  --graphite:#6b7285; --gridline:#d6dde4; --good:#2e7a4d;
  --r-card:14px;
  --sh:0 1px 3px rgba(20,26,51,.06);
  --sh2:0 6px 24px rgba(20,26,51,.10);
  --ease:cubic-bezier(.22,.9,.28,1);
  --sg:12px; --sb:22px; --pad:18px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:12.5px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-variant-numeric:tabular-nums lining-nums;
  -webkit-font-smoothing:antialiased;
}
::-moz-selection{background:#d9dcfa;color:var(--ink)}
::selection{background:#d9dcfa;color:var(--ink)}
:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:6px}
*{scrollbar-width:thin;scrollbar-color:#c3cade transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#c3cade;border-radius:9px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:#a8b1cb;background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}
button{font:inherit;color:inherit;font-variant-numeric:inherit}
input{font:inherit;color:inherit}
svg text{font-variant-numeric:tabular-nums lining-nums}
a{color:var(--indigo)}

/* ---------------- top bar ---------------- */
.topbar{display:flex;align-items:center;gap:12px;padding:12px 20px 0}
.brand{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line);background:var(--card);
  border-radius:12px;padding:9px 13px;flex:none}
.brand .mark{width:19px;height:19px;border-radius:5px;background:var(--indigo);display:grid;place-items:center}
.brand .mark svg{width:11px;height:11px}
.brand b{font-size:12.5px;letter-spacing:.06em;color:var(--navy)}
.brand span{font-size:12.5px;letter-spacing:.06em;color:var(--ink3)}
.nav{flex:1;display:flex;align-items:center;gap:4px;border:1.5px solid var(--line);background:var(--card);
  border-radius:999px;padding:5px;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{flex:1;text-align:center;white-space:nowrap;padding:9px 14px;border-radius:999px;
  color:var(--ink2);text-decoration:none;font-size:12.5px;font-weight:500;
  transition:background .15s var(--ease),color .15s var(--ease)}
.nav a:hover{background:var(--line2);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--indigo);color:#fff;font-weight:600}
.nav a[aria-current="page"]:hover{background:#3230bd}
.who{flex:none;display:flex;align-items:center;gap:9px;border:1.5px solid var(--line);background:var(--card);
  border-radius:11px;padding:6px 6px 6px 12px;font-size:12.5px;color:var(--ink2)}
.who b{color:var(--ink);font-weight:600}
.logout{flex:none;display:flex;align-items:center;gap:7px;border:1.5px solid #f6d5d0;background:#fff6f4;
  color:var(--r);border-radius:9px;padding:6px 11px;font-size:12.5px;font-weight:600;cursor:pointer}
.logout:hover{background:#fdeeea}
.logout svg{width:13px;height:13px}

/* ---------------- shell ---------------- */
.shell{display:block;padding:14px 20px 60px}
.page{min-width:0;max-width:1680px;margin:0 auto}

/* ---------------- filter bar ---------------- */
.fstrip{position:sticky;top:0;z-index:30;background:var(--bg);padding-top:2px}
.fbar{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:8px;margin-bottom:var(--sb)}
.fgrp{display:flex;align-items:center;gap:8px;min-width:0}
.flab{font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink3);font-weight:600;flex:none}
.fspacer{flex:1}
.stamp{font-size:12.5px;color:var(--ink3);white-space:nowrap;display:flex;align-items:center;gap:8px;flex:none}
.dot{width:6px;height:6px;border-radius:50%;background:var(--g);flex:none}
.dot.stale{background:var(--a)}
.scope{margin:-12px 2px var(--sb);font-size:12.5px;color:var(--ink3)}
.scope b{color:var(--ink2);font-weight:600}

.msel{position:relative;flex:none}
.msel>button{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--card);
  border-radius:9px;padding:7px 10px;cursor:pointer;max-width:260px;font-size:12.5px;color:var(--ink2);
  transition:border-color .15s var(--ease)}
.msel>button:hover{border-color:#c3cade}
.msel>button .chips{display:flex;gap:4px;overflow:hidden}
.chip{background:var(--ibg);color:var(--indigo);border-radius:6px;padding:2px 7px;font-size:12.5px;
  font-weight:600;white-space:nowrap}
.chip.plain{background:var(--line2);color:var(--ink2);font-weight:500}
.caret{width:12px;height:12px;flex:none;stroke:var(--ink3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pop{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--card);
  border:1px solid var(--line);border-radius:11px;box-shadow:var(--sh2);padding:6px;z-index:60}
.pop.right{left:auto;right:0}
.pop .find{width:100%;border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin-bottom:6px;
  font-size:12.5px;background:#fbfcfe}
.pop .find:focus{outline:2px solid var(--indigo);outline-offset:0;border-color:transparent}
.pop .list{max-height:300px;overflow:auto}
.pop label{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:12.5px}
.pop label:hover{background:var(--line2)}
.pop label small{color:var(--ink3);margin-left:auto;font-size:11px}
.pop input[type=checkbox],.pop input[type=radio]{accent-color:var(--indigo);width:14px;height:14px;flex:none}
.pop .hd{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);padding:6px 9px 4px}
.pop .ft{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line2);margin-top:6px;padding:7px 4px 1px}
.pop .presets button{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 9px;
  border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--ink)}
.pop .presets button:hover{background:var(--line2)}
.pop .presets button[aria-pressed="true"]{background:var(--ibg);color:var(--indigo);font-weight:600}
.pop .custom{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px 9px 4px}
.pop .custom label{display:flex;flex-direction:column;align-items:stretch;gap:4px;padding:0;font-size:11px;
  color:var(--ink3);letter-spacing:.04em;text-transform:uppercase;font-weight:600;cursor:default}
.pop .custom label:hover{background:none}
.pop .custom input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12.5px;
  text-transform:none;letter-spacing:0;color:var(--ink);font-weight:500}

/* duration cycle */
.cycle{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;background:var(--card);flex:none;position:relative}
.cycle button.nv{border:0;background:none;padding:7px 8px;cursor:pointer;color:var(--ink3);display:grid;place-items:center}
.cycle button.nv:hover{color:var(--indigo)}
.cycle button.nv:disabled{color:var(--line);cursor:default}
.cycle button.nv svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cycle .val{min-width:150px;min-height:26px;text-align:center;font-size:12.5px;font-weight:600;
  color:var(--ink);padding:0 4px;cursor:pointer;border:0;background:none}
.cycle .val:hover{color:var(--indigo)}

/* segmented */
.seg{display:inline-flex;background:var(--line2);border-radius:9px;padding:3px;gap:4px;flex:none}
.seg button{border:0;background:none;padding:5px 11px;border-radius:7px;font-size:12.5px;font-weight:600;
  color:var(--ink2);cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}
.seg button:hover:not([aria-pressed="true"]){background:#e3e7f3}
.seg button[aria-pressed="true"]{background:var(--indigo);color:#fff;box-shadow:0 1px 2px rgba(20,26,51,.16)}

/* switch */
.sw{display:flex;align-items:center;gap:8px;cursor:pointer;flex:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;min-height:26px;position:relative}
.sw input{position:absolute;opacity:0;width:0;height:0}
.sw .tr{width:36px;height:20px;border-radius:999px;background:#d5dae8;position:relative;flex:none;
  transition:background .17s var(--ease)}
.sw .tr::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(20,26,51,.25);transition:transform .17s var(--ease)}
.sw input:checked+.tr{background:#7fb3c4}
.sw input:checked+.tr::after{transform:translateX(16px)}
.sw input:focus-visible+.tr{outline:2px solid var(--indigo);outline-offset:2px}
.sw span.t{font-size:12.5px;color:var(--ink2);white-space:nowrap}
.sw input:checked~span.t{color:var(--ink);font-weight:600}

.chipbtn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);border-radius:9px;padding:6px 11px;cursor:pointer;
  font-size:12.5px;font-weight:600;color:var(--ink2);white-space:nowrap;
  transition:border-color .14s var(--ease),background .14s var(--ease)}
.chipbtn:hover{border-color:var(--ink3)}
.chipbtn:disabled{opacity:.5;cursor:not-allowed}
.chipbtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.chipbtn.primary{background:var(--indigo);border-color:var(--indigo);color:#fff}
.chipbtn.primary:hover{background:#3230bd}
.linkish{border:0;background:none;padding:0;color:var(--indigo);font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;font-size:12.5px}
.linkish:hover{text-decoration-thickness:2px}

/* ---------------- grids ---------------- */
.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sg);align-items:stretch}
.g5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--sg);align-items:stretch}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sg);align-items:stretch}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sg);align-items:stretch}
.g4t{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.75fr);gap:var(--sg);align-items:stretch}
.tile .split{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:end}
.g75{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--sg);align-items:stretch}
.mtb{margin-top:var(--sb)}
.mt12{margin-top:var(--sg)}
.sec{margin:var(--sb) 2px 10px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink3)}

/* ---------------- tile + panel ---------------- */
.tile,.panel{position:relative;display:flex;flex-direction:column;height:100%;max-width:100%;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:var(--pad);text-align:left;width:100%;min-width:0}
.tile .nm,.panel .nm{display:block;font-size:12.5px;font-weight:600;color:var(--ink2);letter-spacing:.01em;margin:0 0 10px}
.panel .hdr{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.panel .hdr h3{margin:0;font-size:12.5px;font-weight:600;color:var(--ink)}
.panel .hdr p{margin:2px 0 0;font-size:12.5px;color:var(--ink3)}
.panel .hdr .acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fig{display:block;font-size:34px;font-weight:700;color:var(--ink);letter-spacing:-.022em;line-height:1.04}
.fig .u{display:inline;font-size:14px;font-weight:600;color:var(--ink2);margin-left:2px}
.fig.s-r{color:var(--r)} .fig.s-g{color:var(--g)} .fig.s-a{color:var(--a)}
.fig2{display:block;font-size:26px;font-weight:700;color:var(--ink);letter-spacing:-.018em;line-height:1.06}
.sub2{display:block;font-size:11px;color:var(--ink3);margin-top:6px;line-height:1.45}
.foot{display:flex;align-items:baseline;gap:8px 12px;flex-wrap:wrap;padding-top:10px;width:100%;margin-top:auto}
.tgt{font-size:11px;color:var(--ink3);letter-spacing:.01em;white-space:nowrap}
.delta{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px}
.delta.down{background:var(--gbg);color:var(--g)}
.delta.up{background:var(--rbg);color:var(--r)}
.delta.flat{background:var(--line2);color:var(--ink2)}

.note{font-size:11px;color:var(--ink3);margin-top:10px;line-height:1.5}
.note b{color:var(--ink2);font-weight:600}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12.5px;color:var(--ink2)}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2.5px;margin-right:6px;vertical-align:-1px}
.legend .ln{display:inline-block;width:14px;height:0;border-top:2px solid var(--c2);margin-right:6px;vertical-align:3px}
.legend .ln.dash{border-top:1.5px dashed var(--graphite)}
.legend .ln.good{border-top:1.5px dashed var(--good)}
.chart svg{display:block;width:100%;height:auto;overflow:visible}

/* ---------------- before / after ---------------- */
.ba{display:grid;grid-template-columns:auto 1fr;gap:18px 26px;align-items:center}
.ba .pairfig{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ba .pairfig .arrow{color:var(--ink3);font-size:20px;font-weight:400}
.ba .was{color:var(--ink3)}
.scale{position:relative;height:56px;margin:6px 10px 0}
.scale .rail{position:absolute;left:0;right:0;top:24px;height:8px;border-radius:999px;background:var(--line2)}
.scale .span{position:absolute;top:24px;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--c1f),var(--c1))}
.scale .pt{position:absolute;top:18px;width:2px;height:20px;background:var(--ink);transform:translateX(-1px)}
.scale .pt.before{background:var(--graphite)}
.scale .lab{position:absolute;font-size:11px;white-space:nowrap;transform:translateX(-50%);color:var(--ink2)}
.scale .lab.top{top:0}
.scale .lab.bot{top:40px;color:var(--ink3)}
.scale .ref{position:absolute;top:14px;height:28px;border-left:1.5px dashed var(--good)}
.scale .ref.ceil{border-left-color:var(--graphite)}
.waiting{display:flex;gap:14px;align-items:flex-start;padding:4px 0}
.waiting .ic{width:34px;height:34px;border-radius:10px;background:var(--abg);color:var(--a);display:grid;place-items:center;flex:none}
.waiting .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.waiting b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px}
.waiting p{margin:0;color:var(--ink3);font-size:12.5px;max-width:62ch}

/* change bar used in per-type before/after rows */
.chg{position:relative;height:8px;border-radius:999px;background:var(--line2);min-width:90px}
.chg i{position:absolute;top:0;bottom:0;border-radius:999px}
.chg i.down{background:var(--c2)}
.chg i.up{background:#e7a69e}
.chg .mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--graphite)}

/* ---------------- table ---------------- */
.tw{overflow-x:auto}
.tw.tall{max-height:560px;overflow:auto}
table.t{width:100%;border-collapse:collapse;font-size:12.5px}
table.t th{text-align:left;font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink3);
  font-weight:600;padding:0 10px 8px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--card)}
.tw.tall table.t th{position:sticky;top:0;z-index:2;padding-top:4px}
table.t th button{border:0;background:none;padding:0;font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
table.t th button:hover{color:var(--ink)}
table.t th[aria-sort="ascending"] button,table.t th[aria-sort="descending"] button{color:var(--indigo)}
table.t th.n,table.t td.n{text-align:right}
table.t th.n button{flex-direction:row-reverse}
table.t td{padding:9px 10px;border-bottom:1px solid var(--line2);vertical-align:middle}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover{background:#fafbfe}
table.t tbody tr.click{cursor:pointer}
table.t tbody tr.sub td{background:#fbfcfe;color:var(--ink2)}
table.t tbody tr.sub td:first-child{padding-left:34px}
table.t td .muted{color:var(--ink3)}
table.t td.strong{font-weight:600}
.tg{display:inline-flex;align-items:center;font-size:11px;font-weight:600;border-radius:6px;padding:1px 7px;
  white-space:nowrap;margin-left:6px;vertical-align:1px}
.tg.ret{background:var(--line2);color:var(--ink3)}
.tg.new{background:var(--ibg);color:var(--indigo)}
.tg.adm{background:var(--abg);color:var(--a)}
.tg.det{background:#eef6f2;color:var(--g)}
.tg.set{background:var(--ibg);color:var(--indigo)}
.tg.no{background:var(--rbg);color:var(--r)}
.exp{border:0;background:none;cursor:pointer;width:20px;height:20px;border-radius:6px;display:inline-grid;
  place-items:center;color:var(--ink3);margin-right:6px;vertical-align:-5px}
.exp:hover{background:var(--line2);color:var(--ink)}
.exp svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .15s var(--ease)}
.exp[aria-expanded="true"] svg{transform:rotate(90deg)}
.share{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.share .bar{width:64px;height:6px;border-radius:999px;background:var(--line2);overflow:hidden;flex:none}
.share .bar i{display:block;height:100%;background:var(--c1);border-radius:999px}

/* heat cells (store × type matrix, time-of-day heatmap) */
.hm td.cell{text-align:right;padding:7px 10px;border-bottom:1px solid #fff;border-left:2px solid #fff}
.hm td.cell button{border:0;background:none;width:100%;text-align:right;cursor:pointer;font-weight:600;padding:0}
.hm td.cell:hover{outline:2px solid var(--indigo);outline-offset:-2px}
.hmap{display:grid;grid-template-columns:34px repeat(24,minmax(0,1fr));gap:2px;font-size:11px;color:var(--ink3)}
.hmap .c{aspect-ratio:1.25;border-radius:3px;background:var(--line2)}
.hmap .hl{display:flex;align-items:center}
.hmap .hx{text-align:center}

/* share bars (periods, sections, stores) */
.sbars{display:flex;flex-direction:column;gap:9px}
.sbars .r{display:grid;grid-template-columns:minmax(110px,170px) 1fr auto;gap:10px;align-items:center}
.sbars .r .k{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sbars .r .tr{height:9px;border-radius:999px;background:var(--line2);overflow:hidden}
.sbars .r .tr i{display:block;height:100%;border-radius:999px;background:var(--c1)}
.sbars .r .v{font-weight:600;min-width:84px;text-align:right;white-space:nowrap}
.sbars .r .v small{color:var(--ink3);font-weight:500;margin-left:6px}

/* ---------------- states ---------------- */
.empty{border:1px dashed var(--line);border-radius:11px;padding:24px 20px;text-align:center;color:var(--ink3);
  font-size:12.5px;background:#fbfcfe}
.empty b{display:block;color:var(--ink2);font-size:12.5px;margin-bottom:4px}
.sk{background:linear-gradient(90deg,var(--line2) 0%,#f6f7fc 50%,var(--line2) 100%);background-size:200% 100%;
  border-radius:8px;animation:sk 1.3s ease-in-out infinite}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}
.banner{display:flex;gap:12px;align-items:flex-start;background:var(--abg);border:1px solid #f1d9a8;
  color:#6e4204;border-radius:12px;padding:12px 14px;margin-bottom:var(--sb);font-size:12.5px}
.banner.err{background:var(--rbg);border-color:#f3c9c3;color:#8c2a22}
.banner b{color:inherit}
.banner code,.panel code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;
  background:rgba(20,26,51,.06);border-radius:5px;padding:1px 5px}
.gate{min-height:100vh;display:grid;place-items:center;padding:24px}
.gate .box{max-width:460px;background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--sh2);padding:28px}
.gate h1{font-size:20px;margin:14px 0 6px;letter-spacing:-.012em}
.gate p{color:var(--ink3);margin:0 0 6px;font-size:12.5px;line-height:1.55}

/* ---------------- drawer ---------------- */
.scrim{position:fixed;inset:0;background:rgba(11,27,84,.30);z-index:90;backdrop-filter:blur(1.5px);
  animation:fade .2s var(--ease)}
.dw{position:fixed;top:0;right:0;bottom:0;width:860px;max-width:95vw;background:var(--bg);z-index:100;
  overflow-y:auto;box-shadow:-10px 0 40px rgba(11,27,84,.16);display:flex;flex-direction:column;
  animation:slide .22s var(--ease)}
.dw.narrow{width:600px}
@keyframes slide{from{transform:translateX(100%)}to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.dw,.scrim{animation:none}}
.dwhd{position:sticky;top:0;background:var(--bg);padding:18px 22px 13px;border-bottom:1px solid var(--line);z-index:5}
.dwhd .r1{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.dwhd h2{margin:0;font-size:20px;font-weight:700;letter-spacing:-.012em;color:var(--ink)}
.dwhd .r1 p{margin:3px 0 0;font-size:12.5px;color:var(--ink3)}
.xbtn{flex:none;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);background:var(--card);
  cursor:pointer;display:grid;place-items:center;color:var(--ink2)}
.xbtn:hover{background:var(--line2);color:var(--ink)}
.xbtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.dwecho{display:flex;gap:24px;margin-top:13px;flex-wrap:wrap}
.dwecho .k{font-size:11px;letter-spacing:.055em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.dwecho .v{font-size:20px;font-weight:700;letter-spacing:-.016em;margin-top:2px}
.dwbody{padding:18px 22px 40px;display:flex;flex-direction:column;gap:18px}
.blk{display:flex;flex-direction:column;gap:12px}
.blk>h4{margin:0;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--indigo)}
.blk+.blk{margin-top:6px;padding-top:18px;border-top:1px dashed var(--line)}
.sess{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.sess .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sess .top b{font-size:13.5px}
.sess dl{display:grid;grid-template-columns:96px 1fr;gap:5px 12px;margin:10px 0 0;font-size:12.5px}
.sess dt{color:var(--ink3)}
.sess dd{margin:0;color:var(--ink)}
.golive-row{display:grid;grid-template-columns:minmax(0,1fr) 150px auto;gap:10px;align-items:center;
  padding:10px 0;border-bottom:1px solid var(--line2)}
.golive-row:last-child{border-bottom:0}
.golive-row input{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12.5px;width:100%}
.golive-row .meta{font-size:11px;color:var(--ink3);margin-top:2px}

.tipbox{position:fixed;pointer-events:none;z-index:200;background:var(--card);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--sh2);padding:9px 11px;font-size:12.5px;max-width:260px}
.tipbox .tt{font-weight:700;margin-bottom:5px;color:var(--ink)}
.tipbox .tr2{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:3px}
.tipbox .tr2 .l{display:flex;align-items:center;gap:7px;color:var(--ink2)}
.tipbox .tr2 i{width:8px;height:8px;border-radius:2px;display:inline-block}
.tipbox .tr2 b{font-weight:700}

/* ---------------- Old Control Tower, retune view (R8) ---------------- */
.headline{margin:0 2px 6px;font-size:19px;font-weight:650;line-height:1.35;color:var(--ink);letter-spacing:-.01em;max-width:72ch;text-wrap:balance}
.headline+.scope{margin:0 2px 14px}
.ans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sg)}
.ans .pairfig{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.ans .was{font-size:22px;font-weight:600;color:var(--ink3)}
.ans .arrow{color:var(--ink3);font-size:18px}
.ans .delta{align-self:center}
.ans sup{font-size:9px;margin-left:1px}
.linkfig{text-decoration:none;width:-moz-max-content;width:max-content}
.linkfig:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.linkish.inline{display:inline-block;margin-top:12px;font-size:12.5px}
.golive-row select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12.5px;width:100%;
  background:var(--card);color:var(--ink);grid-column:2/-1}

/* type split: outline = before, solid = after, one shared scale */
.sw8{display:inline-block;width:9px;height:9px;border-radius:2.5px;margin-right:7px;vertical-align:0}
table.bt td:nth-child(2){width:46%;min-width:220px}
.pb{display:flex;flex-direction:column;gap:4px}
.pbr{display:flex;align-items:center;gap:8px;height:12px}
.pbr span{height:10px;border-radius:3px;min-width:1px;flex:none}
.pbr .o{border:1.5px solid;background:transparent;box-sizing:border-box}
.pbr em{font-style:normal;font-size:11.5px;color:var(--ink3);white-space:nowrap}
.pbr em b{color:var(--ink);font-weight:700}

/* config check */
.okline{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--g);
  background:var(--gbg);border-radius:10px;padding:10px 12px}
.okline svg{width:16px;height:16px;background:var(--g);border-radius:5px;padding:2px}
.cfg{display:flex;flex-direction:column;border:1px solid var(--line2);border-radius:11px;overflow:hidden}
.cr+.cr{border-top:1px solid var(--line2)}
.crh{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;
  grid-template-columns:20px minmax(0,1fr) 88px 72px 72px;gap:12px;align-items:center;padding:12px 12px}
.crh:hover{background:#f7f8fd}
.crh:focus-visible{outline:2px solid var(--indigo);outline-offset:-2px}
.crh .exp{pointer-events:none}
.crh[aria-expanded="true"] .exp svg{transform:rotate(90deg)}
.crt{display:flex;flex-direction:column;gap:4px;min-width:0}
.crt .tg{align-self:flex-start;margin-left:0}
.crt b{font-size:13.5px;color:var(--ink);font-weight:650}
.crt .why{font-size:12.5px;color:var(--ink2);line-height:1.45}
.cr.in_config .crt b{font-weight:500;color:var(--ink2)}
.crn{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.crn b{font-size:15px;font-weight:700;color:var(--ink)}
.crn small{font-size:11px;color:var(--ink3)}
.crs{padding:0 12px 12px 44px;background:#fafbfe}

/* ---------------- responsive ---------------- */
@media(max-width:1280px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4t{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g4t .wide{grid-column:1/-1}
  .g75,.g3{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .topbar{flex-wrap:wrap;padding:10px 12px 0}
  .nav{order:3;flex-basis:100%}
  .who .em{display:none}
  .shell{padding:12px 12px 40px}
  .fstrip{position:static}
  .g4,.g4t,.g5,.g2{grid-template-columns:minmax(0,1fr)}
  .tile .split{grid-template-columns:minmax(0,1fr)}
  .fig{font-size:28px}
  .ba{grid-template-columns:minmax(0,1fr)}
  .sbars .r{grid-template-columns:minmax(90px,120px) 1fr auto}
  table.t{min-width:560px}
  .golive-row{grid-template-columns:minmax(0,1fr)}
  .golive-row select{grid-column:auto}
  .headline{font-size:17px}
  .ans{grid-template-columns:minmax(0,1fr)}
  .chart{overflow-x:auto}
  table.bt{min-width:0}
  table.bt thead{display:none}
  table.bt tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:10px 0;border-bottom:1px solid var(--line2)}
  table.bt td{border:0;padding:3px 4px}
  table.bt td:first-child,table.bt td:nth-child(2){grid-column:1/-1;width:auto;min-width:0}
  table.bt tr.sub td:nth-child(3){display:none}
  .crh{grid-template-columns:20px repeat(3,minmax(0,1fr));row-gap:8px}
  .crt{grid-column:2/-1}
  .crt+.crn{grid-column:2}
  .crn{align-items:flex-start;text-align:left}
  .crs{padding:0 12px 12px}
  table.t.cards{min-width:0}
  table.t.cards thead{display:none}
  table.t.cards tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 12px;padding:10px 2px;border-bottom:1px solid var(--line2)}
  table.t.cards td{border:0;padding:2px 0;text-align:left}
  table.t.cards td:first-child{grid-column:1/-1;font-size:14px}
  table.t.cards td:not(:first-child)::before{content:attr(data-l);display:block;font-size:10.5px;letter-spacing:.05em;
    text-transform:uppercase;color:var(--ink3);font-weight:600}
}
.hover\:border-border-strong:hover {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-primary-hover:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(67 56 202 / 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-surface-secondary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-surface-subtle:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:from-\[hsl\(168\2c 80\%\2c 38\%\)\]:hover {
  --tw-gradient-from: hsl(168,80%,38%) var(--tw-gradient-from-position);
  --tw-gradient-to: hsl(168 80% 38% / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.hover\:to-\[hsl\(168\2c 55\%\2c 28\%\)\]:hover {
  --tw-gradient-to: hsl(168,55%,28%) var(--tw-gradient-to-position);
}
.hover\:text-primary-hover:hover {
  --tw-text-opacity: 1;
  color: rgb(67 56 202 / var(--tw-text-opacity, 1));
}
.hover\:text-text:hover {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --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);
}
.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-primary\/30:focus {
  --tw-ring-color: rgb(79 70 229 / 0.3);
}
.focus\:ring-offset-1:focus {
  --tw-ring-offset-width: 1px;
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
@media (min-width: 768px) {

  .md\:block {
    display: block;
  }
}
@media (min-width: 1024px) {

  .lg\:block {
    display: block;
  }
}