/* Font files are imported in main.tsx (self-hosted via @fontsource) so Vite emits
   them locally. Do NOT put a remote @import back here: the CSP in index.html blocks
   it, which is why the app rendered in system-ui + Consolas for months. */

*, ::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: var(--font-sans); /* 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: var(--font-mono); /* 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;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.\!fixed {
  position: fixed !important;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-2 {
  inset: 0.5rem;
}

.-right-1\.5 {
  right: -0.375rem;
}

.-top-1\.5 {
  top: -0.375rem;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-4 {
  bottom: 1rem;
}

.left-1\/2 {
  left: 50%;
}

.left-4 {
  left: 1rem;
}

.right-0 {
  right: 0px;
}

.right-2\.5 {
  right: 0.625rem;
}

.right-4 {
  right: 1rem;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-1\/2 {
  top: 50%;
}

.top-2\.5 {
  top: 0.625rem;
}

.top-full {
  top: 100%;
}

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

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

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

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

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

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

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

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

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

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

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

.float-left {
  float: left;
}

.mx-3 {
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}

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

.mx-6 {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

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

.my-0\.5 {
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.my-1\.5 {
  margin-top: 0.375rem;
  margin-bottom: 0.375rem;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.my-3 {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

.-mb-px {
  margin-bottom: -1px;
}

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

.mb-0\.5 {
  margin-bottom: 0.125rem;
}

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

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

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

.mb-2\.5 {
  margin-bottom: 0.625rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-3\.5 {
  margin-bottom: 0.875rem;
}

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

.mb-5 {
  margin-bottom: 1.25rem;
}

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

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

.mb-\[3px\] {
  margin-bottom: 3px;
}

.mb-px {
  margin-bottom: 1px;
}

.ml-0\.5 {
  margin-left: 0.125rem;
}

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

.ml-1\.5 {
  margin-left: 0.375rem;
}

.ml-10 {
  margin-left: 2.5rem;
}

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

.ml-auto {
  margin-left: auto;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

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

.mt-1\.5 {
  margin-top: 0.375rem;
}

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

.mt-2\.5 {
  margin-top: 0.625rem;
}

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

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

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.mt-auto {
  margin-top: auto;
}

.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;
}

.hidden {
  display: none;
}

.h-0\.5 {
  height: 0.125rem;
}

.h-1 {
  height: 0.25rem;
}

.h-1\.5 {
  height: 0.375rem;
}

.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-3 {
  height: 0.75rem;
}

.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-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.max-h-28 {
  max-height: 7rem;
}

.max-h-48 {
  max-height: 12rem;
}

.max-h-72 {
  max-height: 18rem;
}

.max-h-\[300px\] {
  max-height: 300px;
}

.min-h-0 {
  min-height: 0px;
}

.w-1 {
  width: 0.25rem;
}

.w-1\.5 {
  width: 0.375rem;
}

.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-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-28 {
  width: 7rem;
}

.w-3 {
  width: 0.75rem;
}

.w-4 {
  width: 1rem;
}

.w-40 {
  width: 10rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-64 {
  width: 16rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[104px\] {
  width: 104px;
}

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

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.w-screen {
  width: 100vw;
}

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

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

.max-w-3xl {
  max-width: 48rem;
}

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

.max-w-5xl {
  max-width: 64rem;
}

.max-w-\[110px\] {
  max-width: 110px;
}

.max-w-\[120px\] {
  max-width: 120px;
}

.max-w-\[140px\] {
  max-width: 140px;
}

.max-w-\[150px\] {
  max-width: 150px;
}

.max-w-\[160px\] {
  max-width: 160px;
}

.max-w-\[180px\] {
  max-width: 180px;
}

.max-w-\[200px\] {
  max-width: 200px;
}

.max-w-\[220px\] {
  max-width: 220px;
}

.max-w-\[80px\] {
  max-width: 80px;
}

.max-w-\[85\%\] {
  max-width: 85%;
}

.max-w-\[90px\] {
  max-width: 90px;
}

.max-w-lg {
  max-width: 32rem;
}

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

.max-w-sm {
  max-width: 24rem;
}

.max-w-xs {
  max-width: 20rem;
}

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

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

.-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));
}

.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 bounce {

  0%, 100% {
    transform: translateY(-25%);
    animation-timing-function: cubic-bezier(0.8,0,1,1);
  }

  50% {
    transform: none;
    animation-timing-function: cubic-bezier(0,0,0.2,1);
  }
}

.animate-bounce {
  animation: bounce 1s infinite;
}

@keyframes fadeIn {

  0% {
    opacity: 0;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 0.25s ease-out;
}

@keyframes pulse {

  50% {
    opacity: .5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes slideInRight {

  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(0);
  }
}

.animate-slide-in-right {
  animation: slideInRight 0.3s ease-out;
}

@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-grab {
  cursor: grab;
}

.cursor-pointer {
  cursor: pointer;
}

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

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

.resize-none {
  resize: none;
}

.resize {
  resize: both;
}

.list-inside {
  list-style-position: inside;
}

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

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

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

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

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

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

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

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

.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-start {
  justify-content: flex-start;
}

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

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

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

.gap-0 {
  gap: 0px;
}

.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-\[2px\] {
  gap: 2px;
}

.gap-\[3px\] {
  gap: 3px;
}

.gap-px {
  gap: 1px;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

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

.gap-y-1 {
  row-gap: 0.25rem;
}

.gap-y-1\.5 {
  row-gap: 0.375rem;
}

.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-3\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.875rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.875rem * 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));
}

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

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

.overflow-hidden {
  overflow: hidden;
}

.overflow-scroll {
  overflow: scroll;
}

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

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

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

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

.break-words {
  overflow-wrap: break-word;
}

.rounded {
  border-radius: 0.25rem;
}

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

.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-full {
  border-top-left-radius: 9999px;
  border-bottom-left-radius: 9999px;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

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

.border-accent-amber {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}

.border-accent-blue {
  --tw-border-opacity: 1;
  border-color: rgb(59 158 255 / var(--tw-border-opacity, 1));
}

.border-accent-blue\/20 {
  border-color: rgb(59 158 255 / 0.2);
}

.border-accent-green\/30 {
  border-color: rgb(52 211 153 / 0.3);
}

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

.border-b-transparent {
  border-bottom-color: transparent;
}

.border-t-transparent {
  border-top-color: transparent;
}

.bg-\[\#28c840\] {
  --tw-bg-opacity: 1;
  background-color: rgb(40 200 64 / var(--tw-bg-opacity, 1));
}

.bg-\[\#febc2e\] {
  --tw-bg-opacity: 1;
  background-color: rgb(254 188 46 / var(--tw-bg-opacity, 1));
}

.bg-\[\#ff5f57\] {
  --tw-bg-opacity: 1;
  background-color: rgb(255 95 87 / var(--tw-bg-opacity, 1));
}

.bg-accent-blue {
  --tw-bg-opacity: 1;
  background-color: rgb(59 158 255 / var(--tw-bg-opacity, 1));
}

.bg-accent-blue\/10 {
  background-color: rgb(59 158 255 / 0.1);
}

.bg-accent-green {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}

.bg-accent-green\/10 {
  background-color: rgb(52 211 153 / 0.1);
}

.bg-accent-orange {
  --tw-bg-opacity: 1;
  background-color: rgb(255 107 53 / var(--tw-bg-opacity, 1));
}

.bg-navy-850 {
  --tw-bg-opacity: 1;
  background-color: rgb(4 13 26 / var(--tw-bg-opacity, 1));
}

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

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

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

.p-0\.5 {
  padding: 0.125rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2\.5 {
  padding: 0.625rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-3\.5 {
  padding: 0.875rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}

.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-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.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-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}

.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;
}

.py-\[3px\] {
  padding-top: 3px;
  padding-bottom: 3px;
}

.pb-1 {
  padding-bottom: 0.25rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-3\.5 {
  padding-bottom: 0.875rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-5 {
  padding-bottom: 1.25rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-0\.5 {
  padding-left: 0.125rem;
}

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

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

.pl-\[74px\] {
  padding-left: 74px;
}

.pr-0\.5 {
  padding-right: 0.125rem;
}

.pr-1 {
  padding-right: 0.25rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pr-3 {
  padding-right: 0.75rem;
}

.pt-0\.5 {
  padding-top: 0.125rem;
}

.pt-1 {
  padding-top: 0.25rem;
}

.pt-1\.5 {
  padding-top: 0.375rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-2\.5 {
  padding-top: 0.625rem;
}

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

.pt-3\.5 {
  padding-top: 0.875rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.pt-6 {
  padding-top: 1.5rem;
}

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

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

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

.font-mono {
  font-family: var(--font-mono);
}

.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-\[10\.5px\] {
  font-size: 10.5px;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11\.5px\] {
  font-size: 11.5px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[12\.5px\] {
  font-size: 12.5px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[13px\] {
  font-size: 13px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[26px\] {
  font-size: 26px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-\[40px\] {
  font-size: 40px;
}

.text-\[7\.5px\] {
  font-size: 7.5px;
}

.text-\[7px\] {
  font-size: 7px;
}

.text-\[8\.5px\] {
  font-size: 8.5px;
}

.text-\[8px\] {
  font-size: 8px;
}

.text-\[9\.5px\] {
  font-size: 9.5px;
}

.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-black {
  font-weight: 900;
}

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

.font-extrabold {
  font-weight: 800;
}

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

.font-normal {
  font-weight: 400;
}

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

.uppercase {
  text-transform: uppercase;
}

.capitalize {
  text-transform: capitalize;
}

.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-none {
  line-height: 1;
}

.leading-relaxed {
  line-height: 1.625;
}

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

.leading-tight {
  line-height: 1.25;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.text-accent-amber {
  --tw-text-opacity: 1;
  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
}

.text-accent-blue {
  --tw-text-opacity: 1;
  color: rgb(59 158 255 / var(--tw-text-opacity, 1));
}

.text-accent-green {
  --tw-text-opacity: 1;
  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
}

.text-accent-orange {
  --tw-text-opacity: 1;
  color: rgb(255 107 53 / var(--tw-text-opacity, 1));
}

.text-indigo-400 {
  --tw-text-opacity: 1;
  color: rgb(129 140 248 / var(--tw-text-opacity, 1));
}

.text-navy-400 {
  --tw-text-opacity: 1;
  color: rgb(30 63 96 / var(--tw-text-opacity, 1));
}

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

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

.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}

.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}

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

.text-white\/80 {
  color: rgb(255 255 255 / 0.8);
}

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

.underline-offset-2 {
  text-underline-offset: 2px;
}

.opacity-0 {
  opacity: 0;
}

.opacity-20 {
  opacity: 0.2;
}

.opacity-50 {
  opacity: 0.5;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-80 {
  opacity: 0.8;
}

.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);
}

.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-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-opacity {
  transition-property: opacity;
  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-200 {
  transition-duration: 200ms;
}

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

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

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

.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);
}

.\[column-count\:2\] {
  -moz-column-count: 2;
       column-count: 2;
}

.\[column-gap\:0\.625rem\] {
  -moz-column-gap: 0.625rem;
       column-gap: 0.625rem;
}

/* ── Theme variables (dark defaults, overridden by ThemeContext) ────────────── */

:root {
  --root-bg:       #020912;
  --main-bg:       #030c1a;
  --panel-bg:      rgba(4,11,22,0.97);
  --card-bg:       rgba(6,14,28,0.92);
  --input-bg:      rgba(3,9,18,0.98);
  --row-even:      rgba(4,11,22,0.8);
  --row-odd:       rgba(6,15,28,0.5);
  --text-primary:  #e8e8e8;
  --text-secondary:#9a9a9a;
  --text-muted:    #6a6a6a;
  --text-dim:      #4a4a4a;
  --accent:        #6366f1;
  --accent-bg:     rgba(99,102,241,0.06);
  --accent-glow:   rgba(99,102,241,0.4);
  --border:        rgba(99,102,241,0.16);
  --border-mid:    rgba(99,102,241,0.35);
  --border-hi:     rgba(99,102,241,0.65);
  --label:         #8a8a8a;
  --label-dim:     #5a5a5a;
  --brand:         #3b9eff;
  --positive:      #34d399;
  --positive-bg:   rgba(52,211,153,0.10);
  --warning:       #fbbf24;
  --warning-bg:    rgba(251,191,36,0.10);
  --negative:      #f87171;
  --negative-bg:   rgba(248,113,113,0.10);

  /* ── Type ──────────────────────────────────────────────────────────────────
     Three families, same as the website, so site and app read as one product.
     The fallbacks are real Windows faces rather than the generic keywords: if a
     woff2 ever fails to load, the app lands on Segoe UI Variable / Cascadia Mono
     instead of whatever "sans-serif" happens to resolve to.

     --font-mono is for NUMBERS AND STATUS ONLY. It is not a label font and not a
     heading font; using it for section labels is what gave the app its terminal
     look. Reach for --font-sans unless the glyphs need to line up in a column. */
  --font-sans:    'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Space Grotesk', var(--font-sans);
  --font-mono:    'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body,
#root {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: var(--root-bg);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────────── */

::-webkit-scrollbar       { width: 5px; height: 5px; }

::-webkit-scrollbar-track { background: var(--root-bg); }

::-webkit-scrollbar-thumb {
  background: var(--border-mid);
  border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ── Light mode overrides for bg-grid pattern ──────────────────────────────── */

html.light .bg-grid {
  background-image: radial-gradient(rgba(0,100,180,0.08) 1px, transparent 1px);
}

/* ── Panel ─────────────────────────────────────────────────────────────────
   This used to draw glowing sci-fi corner brackets on every card via ::before
   and ::after. It read as a heads-up display, not as software you leave running
   all day, and it fought the rounded card surface used everywhere else in the
   app. Separation now comes from the surface itself: a real radius, a hairline
   border, and a soft shadow doing the lifting instead of decoration. */

.hud-panel {
  position: relative;
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--elev-low);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Glow variant — more prominent for key panels */

.hud-panel-glow {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.06), inset 0 0 20px rgba(99, 102, 241, 0.03);
}

/* ── HUD Rule — glowing horizontal divider ─────────────────────────────────── */

.hud-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-mid) 20%, var(--border-mid) 80%, transparent);
  margin: 2px 0;
}

/* ── Headings ──────────────────────────────────────────────────────────────
   Space Grotesk on headings only, matching the website's h1-h4 rule, so a page
   title in the app and a section title on the site are recognisably the same
   voice. Body and labels stay on Inter: Grotesk is a display face and gets
   tiring below ~13px. Tighter tracking because display faces set loose at the
   sizes we use for page titles. */

h1, h2 {
  font-family: var(--font-display);
  letter-spacing: -0.012em;
}

/* ── Section label ─────────────────────────────────────────────────────────
   Was a 9px 0.18em-tracked uppercase MONO "HUD" style. That single rule is what
   made the app read as a terminal readout rather than a product: it is used in
   102 places, so every section heading in the app was shouting in Consolas.

   The call sites already pass properly cased text ("Top Apps", "Today's Session
   Timeline"), so dropping text-transform restores real sentence case everywhere
   without touching a single view. 9px is also below a comfortable reading floor
   for a window this size; 11px sans at 600 reads as a quiet label instead. */

.hud-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text-secondary);
  font-family: var(--font-sans);
}

/* ── Data value — monospace numerics ─────────────────────────────────────────
   Mono earns its place HERE and essentially nowhere else: figures that stack in a
   column have to align, which needs tabular numerals and a fixed advance width. */

.data-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

/* ── Glass card ────────────────────────────────────────────────────────────── */

.glass-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  backdrop-filter: blur(12px);
}

/* ── Card ──────────────────────────────────────────────────────────────────── */

.card {
  border-radius: 0.75rem;
  padding: 1.25rem;
}


[data-glass="full"] .card {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
}

/* ── Buttons ───────────────────────────────────────────────────────────────── */

.btn-primary {
  border-radius: 0.5rem;
  --tw-bg-opacity: 1;
  background-color: rgb(59 158 255 / var(--tw-bg-opacity, 1));
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}


[data-glass="full"] .btn-primary {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.btn-primary:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(96 184 255 / var(--tw-bg-opacity, 1));
}

.btn-primary {
  border: 1px solid rgba(99,102,241,0.25);
  box-shadow: 0 0 16px rgba(99,102,241,0.08);
}

.btn-ghost {
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(30 63 96 / var(--tw-text-opacity, 1));
  text-decoration-line: underline;
  text-underline-offset: 2px;
  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: 200ms;
}

.btn-ghost:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

/* ── Sidebar items, theme-aware (adapt to light + dark) ─────────────────────── */

.sidebar-item {
  display: flex;
  cursor: pointer;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0px;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  font-weight: 500;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  position: relative;
}

.sidebar-item:hover {
  background: var(--accent-bg);
  color: var(--text-primary);
}

.sidebar-item.active {
  background: var(--accent-bg);
  color: var(--text-primary);
}

/* Glowing left bar on active */

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow), 0 0 2px var(--accent);
  border-radius: 0 1px 1px 0;
}

/* ── Status badge ──────────────────────────────────────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 500;
}

.status-new {
  background: rgba(251,191,36,0.15);
  color: #fbbf24;
  border: 1px solid rgba(251,191,36,0.3);
}

/* ── Scan line overlay (optional bg effect) ────────────────────────────────── */

@keyframes scanLine {
  0%   { transform: translateY(-100%); opacity: 0; }
  5%   { opacity: 0.4; }
  95%  { opacity: 0.4; }
  100% { transform: translateY(100vh); opacity: 0; }
}

.scan-line {
  animation: scanLine 2.5s ease-in-out infinite;
}

/* ── Progress arc ──────────────────────────────────────────────────────────── */

@keyframes progressFill {
  from { stroke-dashoffset: 440; }
  to   { stroke-dashoffset: var(--target-offset); }
}

.arc-progress {
  animation: progressFill 1.2s ease-out forwards;
}

/* ── Window drag regions ───────────────────────────────────────────────────── */

.titlebar-drag   { -webkit-app-region: drag; }

.titlebar-nodrag { -webkit-app-region: no-drag; }

/* ── Selectable text ───────────────────────────────────────────────────────── */

/* The app disables text selection globally for a native-app feel; chat messages opt
   back in so users can select and copy replies. */

.select-text {
  -moz-user-select: text;
       user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

.select-text ::-moz-selection { background: rgba(99,102,241,0.35); }

.select-text ::selection { background: rgba(99,102,241,0.35); }

/* ── Subtle dot-grid background pattern ────────────────────────────────────── */

.bg-grid {
  background-image: radial-gradient(rgba(99,102,241,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ── Glow utilities ────────────────────────────────────────────────────────── */

.glow-cyan  { box-shadow: 0 0 16px rgba(99,102,241,0.25), 0 0 4px rgba(99,102,241,0.4); }

.glow-green { box-shadow: 0 0 12px rgba(52,211,153,0.25); }

.glow-amber { box-shadow: 0 0 12px rgba(251,191,36,0.25); }

.glow-red   { box-shadow: 0 0 12px rgba(248,113,113,0.25); }

/* ── Text glow ─────────────────────────────────────────────────────────────── */

.text-glow-cyan  { text-shadow: 0 0 10px rgba(99,102,241,0.6), 0 0 20px rgba(99,102,241,0.3); }

.text-glow-green { text-shadow: 0 0 10px rgba(52,211,153,0.5); }

.text-glow-amber { text-shadow: 0 0 10px rgba(251,191,36,0.5); }

/* ── Entry slide ────────────────────────────────────────────────────────────── */

@keyframes entrySlide {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-entry {
  opacity: 0;
  animation: entrySlide 0.32s ease-out forwards;
}

/* ── Slide in from left ──────────────────────────────────────────────────────── */

@keyframes slideInLeft {
  0%   { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}

.animate-slide-in-left {
  animation: slideInLeft 0.18s cubic-bezier(0.2, 0, 0, 1) forwards;
}

/* ── Bar fill (scaleX from 0 → 1) ──────────────────────────────────────────── */

@keyframes barFill {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.bar-fill {
  transform-origin: left;
  animation: barFill 0.75s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ── Stagger delays ─────────────────────────────────────────────────────────── */

.delay-1 { animation-delay: 60ms; }

.delay-2 { animation-delay: 120ms; }

.delay-3 { animation-delay: 180ms; }

.delay-4 { animation-delay: 240ms; }

.delay-5 { animation-delay: 300ms; }

.delay-6 { animation-delay: 360ms; }

/* ── Interactive HUD panel hover ────────────────────────────────────────────── */

.hud-panel-hover {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
  cursor: default;
}

.hud-panel-hover:hover {
  border-color: var(--border-mid) !important;
  box-shadow: 0 0 18px var(--accent-bg);
  transform: translateY(-1px);
}

/* ── HUD table ──────────────────────────────────────────────────────────────── */

.hud-table {
  border-collapse: collapse;
  width: 100%;
}

/* 8px tracked-out uppercase mono was unreadable as well as loud. A column header
   is a label, not data, so it takes the sans stack like every other label. */

.hud-table thead th {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--text-muted);
  background: var(--panel-bg);
  border-bottom: 1px solid var(--border);
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
}

.hud-table thead th:hover { cursor: pointer; color: var(--accent); }

.hud-table tbody tr {
  transition: background 0.12s ease;
  border-bottom: 1px solid var(--border);
}

.hud-table tbody tr:hover {
  background: var(--accent-bg) !important;
}

.hud-table tbody td {
  padding: 6px 10px;
  vertical-align: middle;
  color: var(--text-primary);
}

/* ── Number glow ────────────────────────────────────────────────────────────── */

.num-glow-green { text-shadow: 0 0 14px rgba(52,211,153,0.55); }

.num-glow-cyan  { text-shadow: 0 0 14px rgba(99,102,241,0.55); }

.num-glow-amber { text-shadow: 0 0 14px rgba(251,191,36,0.55); }

.num-glow-red   { text-shadow: 0 0 14px rgba(248,113,113,0.55); }

/* ── Section panel (generic content panel in views) ─────────────────────────── */

.section-panel {
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 2px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* ── Drill-down hit target, a clickable metric that darkens on hover ────────── */

.drill-hit {
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.12s ease;
}

.drill-hit:hover { background-color: rgba(127, 130, 150, 0.12); }

.drill-hit:active { background-color: rgba(127, 130, 150, 0.18); }

/* ── Shimmer sweep on active elements ───────────────────────────────────────── */

@keyframes shimmerSweep {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Pulsing dot indicator ──────────────────────────────────────────────────── */

@keyframes dotPulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}

.dot-pulse { animation: dotPulse 2s ease-in-out infinite; }

/* ── Presence ────────────────────────────────────────────────────────────────
   The aura behind the brand mark. The ONE thing in the app allowed to move, and
   it barely does: a ~5s cycle at low amplitude reads as alive in peripheral
   vision and disappears when looked at directly. An app that exists to protect
   attention must not spend it, so nothing else loops. */

@keyframes presenceBreathe {
  0%, 100% { transform: scale(1);    opacity: 0.72; }
  50%      { transform: scale(1.09); opacity: 1; }
}

.presence-breathe { animation: presenceBreathe 5s ease-in-out infinite; }

/* ── Reduced motion ──────────────────────────────────────────────────────────
   Respect the OS setting. Nothing here is load-bearing: the presence still reads
   through colour and the ambient wash still shifts, they just stop moving. */

@media (prefers-reduced-motion: reduce) {
  .presence-breathe { animation: none; }
  .dot-pulse { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Full-glass experiment ───────────────────────────────────────────────────
   Opt-in via Settings. The translucency comes from the theme tokens (see
   withGlass in ThemeContext); this only supplies the blur, because
   backdrop-filter cannot ride on a colour token.

   Scoped to panel-shaped containers rather than "*": blur is GPU work and this
   app runs 24/7, so blurring every div would cost battery for nothing. Turning
   the toggle off removes the attribute and every rule below stops matching, so
   the revert is total. */

/* ONE blurred plane, not one per panel. Every backdrop-filter re-blurs what is already
   blurred beneath it, so blurring each nested card compounded the desktop into a smear.
   #root frosts; panels are only tint on top of it. */

[data-glass="full"] #root {
  backdrop-filter: var(--blur-md);
  -webkit-backdrop-filter: var(--blur-md);
}

/* Belt and braces: nothing inside the app frosts again. */

[data-glass="full"] .section-panel,
[data-glass="full"] .rounded-xl,
[data-glass="full"] .rounded-2xl,
[data-glass="full"] .rounded-lg {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Collapsed sidebar ───────────────────────────────────────────────────────
   The rail is 56px. .sidebar-item is built for a labelled row (px-4, gap-3,
   text-left), so with the label removed the icon sits off-centre and the badge,
   which is absolutely positioned relative to the row, lands on top of it. These
   rules re-centre the icon and pin the badge to the corner instead. */

.sidebar-collapsed .sidebar-item {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  gap: 0;
}

/* ── Seeing the desktop through the window ───────────────────────────────────
   globals sets `html, body, #root { background-color: var(--root-bg) }`. That is
   three stacked layers painting the SAME colour, which is invisible while the
   colour is opaque and fatal once it is not: three passes of a 0.3 alpha compose
   to roughly 0.66, so the window would look nearly solid no matter how far the
   opacity slider was pushed.

   Under glass, exactly one layer paints. html and body go fully transparent so
   the window's acrylic (and the user's actual desktop behind it) is what shows,
   and #root carries the single tint. */

html[data-glass="full"],
html[data-glass="full"] body {
  background-color: transparent;
}

.hover\:scale-105:hover {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  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));
}

.hover\:scale-\[1\.01\]:hover {
  --tw-scale-x: 1.01;
  --tw-scale-y: 1.01;
  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));
}

.hover\:bg-\[\#e81123\]:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(232 17 35 / var(--tw-bg-opacity, 1));
}

.hover\:bg-accent-blue-light:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(96 184 255 / var(--tw-bg-opacity, 1));
}

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

.hover\:bg-white\/\[0\.03\]:hover {
  background-color: rgb(255 255 255 / 0.03);
}

.hover\:text-accent-blue:hover {
  --tw-text-opacity: 1;
  color: rgb(59 158 255 / var(--tw-text-opacity, 1));
}

.hover\:text-accent-orange:hover {
  --tw-text-opacity: 1;
  color: rgb(255 107 53 / var(--tw-text-opacity, 1));
}

.hover\:text-indigo-300:hover {
  --tw-text-opacity: 1;
  color: rgb(165 180 252 / var(--tw-text-opacity, 1));
}

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

.hover\:text-white\/60:hover {
  color: rgb(255 255 255 / 0.6);
}

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

.hover\:text-white\/90:hover {
  color: rgb(255 255 255 / 0.9);
}

.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\:brightness-105:hover {
  --tw-brightness: brightness(1.05);
  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);
}

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

.hover\:brightness-125:hover {
  --tw-brightness: brightness(1.25);
  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);
}

.hover\:brightness-90:hover {
  --tw-brightness: brightness(.9);
  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);
}

.active\:cursor-grabbing:active {
  cursor: grabbing;
}

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

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

.disabled\:opacity-30:disabled {
  opacity: 0.3;
}

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

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

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

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

.group\/code:hover .group-hover\/code\:opacity-100 {
  opacity: 1;
}

.group\/sug:hover .group-hover\/sug\:opacity-60 {
  opacity: 0.6;
}

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

.group:hover .group-hover\:opacity-60 {
  opacity: 0.6;
}

@media (min-width: 640px) {

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