/* ====================================================================== */
/* aops.css - Bundled stylesheet generated by scripts.bundle_css        */
/* ====================================================================== */

/* ===================================================================== */
/* Source: tokens/aops_settings.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_SETTINGS.CSS              */
/* ============================== */

:root {
  --set-opt-border-on: color-mix(in hsl, var(--accent-color) 80%, var(--soft) 20%);
  --set-opt-bg-on: color-mix(in srgb, var(--accent-color) 25%, var(--panel) 75%);
}

.settings-overlay {
  --overlay-gap: clamp(16px, 3vw, 32px);
  --settings-transition-duration: 1000ms;
  --settings-transition-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --settings-transition-distance: 120px;
  --shadow-soft: 0 12px 28px rgba(15, 23, 42, 0.12);
  --border: rgba(148, 163, 184, 0.26);
  --border-strong: rgba(148, 163, 184, 0.32);
  --overlay-surface: rgba(12, 15, 20, 0.55);
  --modal-margin: var(--overlay-gap);
  --modal-backdrop: var(--overlay-surface);
  --modal-backdrop-blur: none;
  --z-modal: 1600;
  --modal-w-xl: min(75rem, calc(100vw - (var(--overlay-gap) * 2)));
  --modal-h-xl: calc(100vh - (var(--overlay-gap) * 2));
  --modal-pad-top: 0;
  --modal-pad-x: 0;
  --modal-pad-bottom: 0;
}

.settings-overlay::part(body) {
  display: flex;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  scrollbar-gutter: auto;
}

.settings-overlay::part(head),
.settings-overlay::part(foot) {
  display: none;
}

.settings-overlay__content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-columns: 100%;
  grid-auto-rows: minmax(0, auto);
  align-content: start;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}

.settings-overlay__content--transitioning {
  overflow: hidden;
}

.settings-overlay__content > [data-settings-view] {
  width: 100%;
  grid-area: 1 / 1 / 2 / 2;
  transition:
    opacity var(--settings-transition-duration) var(--settings-transition-ease),
    transform var(--settings-transition-duration) var(--settings-transition-ease);
  opacity: 0;
  transform: translateY(var(--settings-transition-distance));
  pointer-events: none;
  will-change: opacity, transform;
}

.settings-overlay__content > [data-settings-view][data-transition-state='exit'] {
  opacity: 1;
  transform: translateY(0);
}

.settings-overlay__content > [data-settings-view][data-transition-state='enter-active'],
.settings-overlay__content > [data-settings-view][data-transition-state='settled'] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.settings-overlay__content > [data-settings-view][data-transition-state='exit-active'] {
  opacity: 0;
  transform: translateY(calc(var(--settings-transition-distance) * -0.45));
  pointer-events: none;
}

.settings-overlay__content > [data-settings-view][data-transition-state='enter'] {
  opacity: 0;
  transform: translateY(var(--settings-transition-distance));
}

.settings-overlay__content--transitioning > [data-settings-view] {
  pointer-events: none;
}

.settings-overlay__content--transitioning > [data-settings-view][data-transition-state='enter-active'] {
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .settings-overlay {
    --settings-transition-duration: 1ms;
  }

  .settings-overlay__content > [data-settings-view] {
    transition: none;
    transform: none;
    /* keep opacity/pointer-events state-driven */
  }
}


/* ============================== */
/* SETTINGS AREAS                 */
/* ============================== */

.settings-area {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background: transparent;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.settings-area--home {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
}

.settings-area--general {
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: auto;
}

.settings-area--templates {
  overflow: hidden;
}

/* ============================== */
/* SETTINGS PANELS                */
/* ============================== */

.settings-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--bg-gradient);
  border: 1px solid var(--border);
  border-radius: var(--custom-radius-modal, 18px);
  padding: clamp(20px, 2.75vw, 28px);
  box-shadow: var(--shadow-soft, 0 12px 28px rgba(15, 23, 42, 0.12));
}

.settings-panel--general,
.settings-panel--workspaces,
.settings-panel--templates {
  flex: 1 1 auto;
  min-height: 0;
}

.settings-panel--general {
  overflow: hidden;
}

.settings-panel__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-panel__body--general,
.settings-panel__body--workspaces,
.settings-panel__body--templates {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable both-edges;
  padding-inline-end: 4px;
  padding-block-end: 12px;
}

/* Keep the inner body as the only scroller */
.settings-panel__body--general {
  overflow-y: auto;
  overflow-x: clip;
  scrollbar-gutter: stable;
  padding-inline-end: 16px; /* IMPORTANT: prevents overlay scrollbar “covering” content */
  gap: 24px;
}

.settings-panel__body--general > *,
.settings-panel__body--workspaces > *,
.settings-panel__body--templates > * {
  min-width: 0;
}

.settings-panel__header {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
}

.settings-panel__header h2 {
  margin: 0;
  font-size: clamp(1.2rem, 2vw + 0.1rem, 1.55rem);
  font-weight: 600;
}

.settings-panel__subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: clamp(0.8rem, 2vw + 0.1rem, 0.95rem);
  max-width: 48ch;
}

.settings-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.settings-panel__icon-btn {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: var(--circle);
  background: var(--soft);
  color: var(--muted);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.settings-panel__icon-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-panel__icon-btn span {
  font-size: 1rem;
  font-weight: 600;
  transform: translateY(-0.5px);
}

.settings-panel__icon-btn:hover,
.settings-panel__icon-btn:focus-visible {
  background: var(--set-opt-bg-on);
  color: var(--text-color);
  border-color: var(--set-opt-border-on);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
}

.settings-panel__status {
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--soft);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

.settings-panel__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}

.settings-panel__hint {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ============================== */
/* SETTINGS HOME TILES            */
/* ============================== */

.settings-tile {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: transparent;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.settings-tile:hover:not(:disabled) {
  border-color: var(--text-on);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.settings-tile:focus-visible {
  outline: 2px solid var(--muted, rgba(59, 130, 246, 0.65));
  outline-offset: 2px;
}

.settings-tile:disabled,
.settings-tile--disabled {
  cursor: not-allowed;
  opacity: 0.65;
  background: var(--soft);
}

.settings-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  flex: 0 0 auto;
}

.settings-tile__icon svg {
  width: 20px;
  height: 20px;
}

.settings-tile__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
}

.settings-tile__label {
  font-weight: 600;
  font-size: var(--fsm);
  color: var(--text);
}

.settings-tile__desc {
  font-size: var(--fxs);
  color: var(--muted);
}

.settings-tile__badge {
  align-self: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: var(--fx);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ============================== */
/* SETTINGS SECTIONS + OPTIONS    */
/* ============================== */

.settings-section {
  display: flex;
  flex-direction: column;
  padding-top: 1rem;
}

.settings-section__header {
  display: flex;
  flex-direction: row;
  padding: 0 0 0 0.35rem;
  gap: 6px;
}

.settings-section__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.settings-section__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.settings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.settings-options {
  list-style: none;
  margin: 0;
  padding: 0.2rem 0 0 clamp(0rem, 2vw, 2rem);
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

/* Notifications list: lock to 1-col by default (we'll explicitly set 2-col later) */
.settings-options--notifications {
  gap: 12px;
  align-items: start;
  grid-template-columns: 1fr;
}

/* General settings stack (width/typography + toggles) */
.settings-options__stack {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.settings-options__stack > .settings-choice {
  grid-column: 1 / -1;
}

.settings-options__stack > .settings-toggle {
  min-width: 0;
}

@media (min-width: 760px) {
  .settings-options,
  .settings-choice__options {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }

  .settings-options--notifications {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 960px) {
  .settings-options__stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

@media (max-width: 1000px) {
  .settings-section {
    gap: 16px;
  }
}

/* ============================== */
/* CHOICE CARDS                   */
/* ============================== */

.settings-choice {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-inline-size: 0;
}

.settings-choice__legend {
  margin: 0;
  padding: 0;
  font-size: var(--fml);
  font-weight: 600;
  color: var(--text);
}

.settings-choice__description {
  margin: 0;
  color: var(--muted);
  font-size: var(--fsm);
  line-height: 1.45;
}

.settings-choice__options {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.settings-choice__option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(148, 163, 184, 0.06);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.settings-choice__option:hover {
  border-color: var(--set-opt-border-on);
  background: var(--set-opt-bg-on);
}

.settings-choice__option--selected {
  border-color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 18%, var(--panel) 82%);
  box-shadow: 0 0 0 1px rgba(89, 120, 170, 0.25);
}

.settings-choice__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.settings-choice__option:focus-within {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

.settings-choice__option-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: var(--text);
}

.settings-choice__option-title {
  font-weight: 600;
  font-size: var(--fsm);
}

.settings-choice__option-desc {
  font-size: var(--fxs);
  color: var(--muted);
  line-height: 1.4;
}

/* ============================== */
/* TYPOGRAPHY SCALE SLIDERS       */
/* ============================== */

.settings-typography__grid {
  display: grid;
  gap: clamp(12px, 1.8vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.settings-typography__field {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--panel) 94%, var(--bg) 6%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: clamp(10px, 1.6vw, 14px);
}
.settings-typography__field:hover {
  border-color: var(--set-opt-border-on);
}

.settings-typography__label {
  font-size: var(--fsm);
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-typography__inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.settings-typography__range {
  width: 100%;
  flex: 1 1 200px;
  min-width: 120px;
  appearance: none;
  height: 24px;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 999px;
  accent-color: var(--accent-color, #557cff);
  --slider-fill: 0%;
  --slider-track-bg: color-mix(in srgb, var(--soft, #f1f3f9) 70%, var(--panel, #ffffff) 30%);
  --slider-track-border: color-mix(in srgb, var(--border, rgba(0, 0, 0, 0.3)) 60%, transparent);
  --slider-thumb-bg: var(--panel, #ffffff);
  --slider-thumb-border: var(--accent-color, #557cff);
  --slider-thumb-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition: outline-color 0.2s ease;
}

.settings-typography__range:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color, #557cff) 45%, transparent);
  outline-offset: 2px;
}

.settings-typography__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(var(--accent-color, #557cff), var(--accent-color, #557cff)) 0/var(--slider-fill, 0%) 100% no-repeat,
    var(--slider-track-bg);
  border: 1px solid var(--slider-track-border);
  transition: background-size 0.2s ease;
}

.settings-typography__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-thumb-bg);
  border: 2px solid var(--slider-thumb-border);
  box-shadow: var(--slider-thumb-shadow);
  margin-top: calc((6px - 16px) / 2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.settings-typography__range::-webkit-slider-thumb:hover {
  transform: scale(1.05);
}

.settings-typography__range::-webkit-slider-thumb:active {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color, #557cff) 35%, transparent);
}

.settings-typography__range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--slider-track-bg);
  border: 1px solid var(--slider-track-border);
}

.settings-typography__range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent-color, #557cff);
}

.settings-typography__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-thumb-bg);
  border: 2px solid var(--slider-thumb-border);
  box-shadow: var(--slider-thumb-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.settings-typography__range::-moz-range-thumb:hover {
  transform: scale(1.05);
}

.settings-typography__range::-moz-range-thumb:active {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color, #557cff) 35%, transparent);
}

.settings-typography__output {
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 64px;
  text-align: right;
}

@media (max-width: 700px) {
  .settings-typography__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============================== */
/* NOTIFICATION ROWS              */
/* ============================== */

.settings-notification-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: 96px;
  box-sizing: border-box;
  container-type: inline-size;
}
.settings-notification-row:hover {
  border-color: var(--set-opt-border-on);
  background: var(--set-opt-bg-on);
}

.settings-notification-row__legend {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  grid-column: 1;
  min-width: 0;
}

.settings-notification-row__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
  grid-column: 1;
  min-width: 0;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.settings-notification-controls {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

@container (max-width: 460px) {
  .settings-notification-row {
    min-height: 118px;
    align-items: flex-start;
  }

  .settings-notification-row__legend,
  .settings-notification-row__desc,
  .settings-notification-controls {
    grid-column: 1 / -1;
  }

  .settings-notification-controls {
    grid-row: auto;
    justify-content: flex-start;
    margin-top: 6px;
  }
}

@container (max-width: 360px) {
  .settings-notification-controls .settings-segmented {
    width: 100%;
  }
}

/* ============================== */
/* SEGMENTED CONTROL              */
/* ============================== */

.settings-segmented {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  padding: 4px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.settings-segmented .settings-choice__option {
  padding: 8px 12px;
  gap: 6px;
  align-items: center;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  min-height: 0;
}

.settings-segmented .settings-choice__option:hover {
  border-color: rgba(89, 120, 170, 0.3);
  background: transparent;
}

.settings-segmented__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition:
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease;
  min-width: 0;
}

.settings-segmented__option:hover {
  background: rgba(148, 163, 184, 0.12);
}

.settings-segmented__option:focus-within {
  box-shadow: 0 0 0 2px rgba(89, 120, 170, 0.3);
}

.settings-segmented__option--selected,
.settings-segmented .settings-choice__option--selected {
  background: var(--bg);
  border-color: var(--accent-color);
  color: var(--text, var(--accent-color));
  box-shadow: 0 0 0 1px rgba(89, 120, 170, 0.25);
}

.settings-segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.settings-segmented__label {
  white-space: nowrap;
  line-height: 1.2;
}

/* ============================== */
/* TOGGLE CARDS                   */
/* Supports old + new sub-classes */
/* ============================== */

.settings-toggle {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 14px;
  padding: 14px 16px;
  min-height: 56px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.settings-toggle:hover {
  border-color: color-mix(in srgb, var(--accent-color) 60%, var(--border) 40%);
  background: var(--set-opt-bg-on);
}

.settings-toggle:focus-within {
  border-color: color-mix(in srgb, var(--accent-color) 55%, var(--text-on) 45%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 22%, transparent);
}

.settings-toggle__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

/* Old markup wrapper compatibility */
.settings-toggle__aside {
  display: contents;
}

/* Left switch/track (supports old .__switch and new .__track) */
.settings-toggle__switch,
.settings-toggle__track {
  grid-column: 1;
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: var(--bg);  
  transition: background 0.2s ease;
  pointer-events: none;
}

.settings-toggle__switch::after,
.settings-toggle__track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--soft);
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.14);
  transition: transform 0.2s ease, background 0.2s ease;
}

/* Center copy (supports old .__content and new .__copy) */
.settings-toggle__content,
.settings-toggle__copy {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.settings-toggle__label {
  font-weight: 600;
  font-size: var(--fsm);
  color: var(--text);
  line-height: 1.25;
}

/* Description alias support */
.settings-toggle__desc,
.settings-toggle__description {
  font-size: var(--fxs);
  color: var(--muted);
  line-height: 1.4;
}

/* Right status */
.settings-toggle__status {
  grid-column: 3;
  justify-self: end;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ON state */
.settings-toggle--on {
  border-color: color-mix(in srgb, var(--accent-color) 65%, var(--border) 35%);
  background: color-mix(in srgb, var(--accent-color) 18%, var(--panel) 82%);
}

.settings-toggle--on .settings-toggle__label {
  color: var(--text-on);
}

.settings-toggle--on .settings-toggle__desc,
.settings-toggle--on .settings-toggle__description {
  color: var(--text);
}

.settings-toggle--on .settings-toggle__status {
  color: var(--text-on);
}

.settings-toggle--on .settings-toggle__switch,
.settings-toggle--on .settings-toggle__track {
  background: color-mix(in srgb, var(--accent-color) 55%, transparent);
}

.settings-toggle--on .settings-toggle__switch::after,
.settings-toggle--on .settings-toggle__track::after {
  transform: translateX(18px);
  background: var(--text-on);
}

/* Disabled state */
.settings-toggle--disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.settings-toggle--disabled:hover {
  border-color: var(--border);
  background: var(--panel);
}

.settings-toggle--disabled .settings-toggle__input {
  cursor: not-allowed;
}

.settings-toggle--disabled .settings-toggle__switch,
.settings-toggle--disabled .settings-toggle__track {
  opacity: 0.85;
}

/* ============================== */
/* WORKSPACES PANEL               */
/* ============================== */

.settings-panel__toolbar--workspaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  align-items: center;
}

.settings-panel__toolbar--workspaces label {
  grid-column: 1 / -1;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.settings-panel__toolbar--workspaces select {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--panel);
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.settings-panel__toolbar--workspaces select option {
  background-color: var(--panel);
  color: var(--text);
}

.settings-panel__toolbar--workspaces select:focus {
  outline: none;
  border-color: var(--text-on);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.settings-panel__toolbar--workspaces .settings-panel__hint {
  grid-column: 1 / -1;
  font-size: 0.8rem;
}

.workspace-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.workspace-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  box-shadow: var(--shadow-soft, 0 12px 28px rgba(15, 23, 42, 0.12));
}

.workspace-card__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.workspace-card__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.workspace-card__type {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

.workspace-card__meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.workspace-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--soft);
  color: var(--accent, var(--text));
  flex-shrink: 0;
}

.workspace-card__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.workspace-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.workspace-card__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workspace-card__label,
.template-editor__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.workspace-card__field input,
.workspace-card__field textarea,
.template-editor__field input,
.template-editor__field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--soft);
  color: var(--text);
  padding: 10px 12px;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.workspace-card__field textarea,
.template-editor__field textarea {
  resize: vertical;
}

.workspace-card__field input:focus,
.workspace-card__field textarea:focus,
.template-editor__field input:focus,
.template-editor__field textarea:focus {
  outline: none;
  border-color: var(--text-on);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.workspace-card__chips {
  --wrap-gap: clamp(8px, 1.4vw, 12px);
  --wrap-align: stretch;
}

.workspace-card__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.workspace-card__tag,
.template-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--soft);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.workspace-card__tag--system {
  color: var(--text-on, #3b82f6);
  border-color: currentColor;
  background: rgba(59, 130, 246, 0.15);
}

.workspace-card__toggles {
  display: grid;
  gap: clamp(10px, 1.6vw, 16px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.workspace-card__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workspace-card__column {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px dashed var(--border);
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--soft);
}

.workspace-card__column--all {
  border-style: solid;
  border-color: var(--text-on);
  color: var(--text-on);
}

.workspace-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ============================== */
/* ROLE EDITOR                    */
/* ============================== */

.role-editor {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.6vw, 28px);
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
}

.role-editor__section,
.template-editor__section {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(16px, 2.4vw, 24px);
  box-shadow: var(--shadow-soft, 0 12px 28px rgba(15, 23, 42, 0.12));
}

.role-editor__section--actions {
  padding-block: clamp(12px, 1.8vw, 18px);
}

.role-editor__section--form {
  gap: clamp(18px, 2.4vw, 26px);
}

.role-editor__summary {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 2vw, 18px);
  justify-content: space-between;
  align-items: center;
  min-width: 0;
}

.role-editor__summary-primary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.role-editor__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 600;
  line-height: 1.25;
}

.role-editor__type {
  margin: 0;
  font-size: 0.9rem;
  color: var(--muted);
}

.role-editor__meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.role-editor__form,
.template-editor__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 32px);
  min-width: 0;
}

.role-editor__form {
  flex: 1 1 auto;
  min-height: 0;
}

.role-editor__column,
.template-editor__column {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 24px);
  min-width: 0;
}

.role-editor__column--access {
  align-self: start;
}

.role-editor__fieldset,
.template-editor__fieldset {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.6vw, 16px);
  padding: clamp(14px, 2vw, 18px);
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel-in);
  min-width: 0;
}

.role-editor__fieldset--grid {
  padding: clamp(16px, 2vw, 20px);
}

.role-editor__fieldset--features {
  position: sticky;
  top: clamp(12px, 2vw, 18px);
}

.role-editor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}

.role-editor__group {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.6vw, 14px);
}

.role-editor__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  align-items: center;
}

.role-editor__actions .btn {
  min-width: 140px;
}

.role-empty {
  padding: 24px;
  border: 1px dashed var(--border);
  border-radius: 16px;
  color: var(--muted);
  text-align: center;
  font-size: 0.95rem;
}

@media (min-width: 960px) {
  .role-editor__form,
  .template-editor__form {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

/* Role chips / access toggles */
.role-chip {
  position: relative;
  --pill-padding: 6px 12px;
  --pill-border: 1px solid var(--border);
  --pill-bg: var(--soft);
  --pill-color: var(--muted);
  --pill-font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.role-chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-chip--on {
  border-color: var(--text-on);
  background: rgba(59, 130, 246, 0.14);
  color: var(--text-on);
}

.role-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--soft);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
  min-height: 0;
}

.role-toggle span {
  line-height: 1.35;
  flex: 1;
}

.role-toggle input {
  accent-color: var(--text-on, #3b82f6);
}

.role-toggle--on {
  border-color: var(--text-on);
  background: rgb(89 120 170 / 12%);
  color: var(--text);
}

/* ============================== */
/* TEMPLATES PANEL                */
/* ============================== */

.templates-panel {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}

.templates-panel__sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(14px, 2vw, 20px);
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow-soft, 0 12px 28px rgba(15, 23, 42, 0.12));
}

.templates-panel__header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.templates-panel__header p {
  margin: 6px 0 0;
}

.templates-panel__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.templates-panel__create {
  align-self: flex-start;
}

.template-chip {
  --pill-padding: 6px 14px;
  --pill-border: 1px solid var(--border);
  --pill-bg: var(--soft);
  --pill-color: var(--text);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.template-chip--active {
  border-color: var(--text-on);
  background: rgba(59, 130, 246, 0.16);
  color: var(--text-on);
}

.template-editor {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.4vw, 28px);
  min-width: 0;
}

.template-editor__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}

.template-editor__summary-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.template-editor__title {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.45rem);
  font-weight: 600;
}

.template-editor__subtitle {
  color: var(--muted);
  font-size: 0.9rem;
}

.template-editor__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-tag--accent {
  color: var(--text-on, #3b82f6);
  border-color: currentColor;
  background: rgba(59, 130, 246, 0.14);
}

.template-editor__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: clamp(12px, 1.8vw, 18px);
}

.template-editor__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.template-editor__helper {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.template-editor__preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-editor__preview-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.template-editor__preview-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}

.template-editor__preview-note {
  font-size: 0.8rem;
  color: var(--muted);
}

.template-columns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.template-columns li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--soft);
}

.template-columns__index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 9px;
  background: rgba(59, 130, 246, 0.12);
  color: var(--text-on, #3b82f6);
  font-weight: 600;
  font-size: 0.8rem;
}

.template-columns__name {
  font-size: 0.9rem;
  color: var(--text);
}

.template-columns__empty {
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  color: var(--muted);
  background: var(--soft);
  font-size: 0.9rem;
}

.template-editor__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.template-editor__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.template-editor__hint {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ============================== */
/* RESPONSIVE                     */
/* ============================== */
@supports (height: 100dvh) {
  .settings-overlay {
    --modal-h-xl: calc(100dvh - (var(--overlay-gap) * 2));
  }
}

@media (max-width: 900px) {
  .templates-panel {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .settings-panel {
    padding: 20px;
  }

  .settings-panel__header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===================================================================== */
/* Source: tokens/aops_variables.css */
/* ===================================================================== */
/* ====================================================================== */
/* AOPS_VARIABLES.CSS                                                     */
/* ====================================================================== */
/* Tokenized shared variables for spacing, typography, and shape defaults */
/* Organization mirrors Kumo: Base surfaces, Text, Accents, Elevation,    */
/* Icons, Semantic aliases, Accent, States, Overlays, Highlights.         */
/* ====================================================================== */


/* ============================= */
/* CONTROL SPACING (Global)      */
/* ============================= */
:root {
  --logo-size: clamp(2rem, 3.5vw, 2.4rem);
     
  /* ============== Typography ============== */

  --ff: system-ui,Arial,sans-serif;
  --ffa: Arial;
  --ffs: sans,sans-serif; 
  --ffss: sans-serif; 
  --ffsu: 'Serge UI';
  
  --fx: .7rem;    /* Smallest */
  --fs: .875rem;  /* Smaller */
  --fm: 1rem;     /* Medium */
  --fl: 1.125rem; /* Larger */

  /* FONT CLAMPS */
  --fxs: clamp(var(--fx), 1vw, var(--fs)); /* Clamp XSmall to Small */
  --fxm: clamp(var(--fx), 1vw, var(--fm)); /* Clamp XSmall to Medium */
  --fxl: clamp(var(--fx), 1vw, var(--fl)); /* Clamp XSmall to Large */
  --fsm: clamp(var(--fs), 1vw, var(--fm)); /* Clamp Small to Medium */
  --fsl: clamp(var(--fs), 1vw, var(--fl)); /* Clamp Small to Large */
  --fml: clamp(var(--fm), 1vw, var(--fl)); /* Clamp Medium to Large */
  
  --text-gap: clamp(2px, 0.6vw, 6px);
  
  /* Body / Inputs / Controls (font sizes) */
  --text-fs-default: clamp(0.84rem, 1.8vw, 0.96rem);
  --input-fs-default: clamp(0.82rem, 1.8vw, 0.96rem);
  --control-fs-default: clamp(0.1rem, 2vw, 0.96rem); /* NOTE: very small minimum; keep as-is */
  /* Custom Overrides */
  --text-fs: var(--custom-font-body, var(--text-fs-default));
  --input-fs: var(--custom-font-input, var(--input-fs-default));
  --control-fs: var(--custom-font-control, var(--control-fs-default));

  /* Control sizing / padding */
  --control-h: clamp(28px, 3vw, 32px);
  --controls-pad:
    clamp(0.01rem, 0.2vw, 0.75rem)
    clamp(0.8rem, 1.2vw, 0.875rem);
  --control-pad:
    clamp(0.6rem, 1.2vw, 0.75rem)
    clamp(0.8rem, 1.2vw, 0.875rem);
  --control-pad-t:
    clamp(0.2rem, 1.2vw, 0.3rem)
    clamp(0.8rem, 1.8vw, 0.875rem);
  --control-pad-y: clamp(1px, 2.2rem, 10px);
  --control-pad-x: clamp(1px, 2.2rem, 14px);
  --control-gap: clamp(5px, 0.6vw, 8px);
  --control-radius: 20px;
  --search-clear-size: 1.6em;

  /* Minimum controls (compact UIs) */
  --min-input-pad:
    clamp(1px, 0.5rem, 6px)
    clamp(1px, 0.5rem, 10px);
  --min-control-pad-y: clamp(1px, 0.5rem, 6px);
  --min-control-pad-x: clamp(1px, 0.5rem, 10px);

  --color-mix: color-mix(in srgb, var(--accent, var(--focus)) 12%, transparent);

  /* Highlight */
  /* DEPRECATED: was RGB-list in light/dark */
  /* NOTE: Standardize on:
       - use var(--highlight-rgb) for rgba(var(--highlight-rgb), <alpha>)
       - use var(--highlight-hex) for solid fills
       - var(--highlight) is kept for legacy (DEPRECATED) */
  --highlight: avar(--highlight-rgb);

  /* ============== SHAPE ============== */

  /* Radiuses */
  --circle: 999px;
  
  /* Radius Default */
  --radius-default: clamp(14px, calc(25.64px - 1.136vw), 22px);
  --radius: var(--custom-radius, var(--radius-default));
  
  /* Radius Panel */
  --radius-panel-defaut: clamp(14px, calc(25.64px - 1.136vw), 22px);
  --radius-panel: var(--custom-radius-panel, var(--radius-panel-defaut));
  /* Radius Button */
  --radius-button-default: 20px;;
  --radius-button: var(--custom-radius-button, var(--radius-button-default));
  /* Radius Input */
  --radius-input-default: 20px;
  --radius-input: var(--custom-radius-input, var(--radius-input-default));
  /* Radius Card */
  --radius-card-default: 12px;
  --radius-card: var(--custom-radius-card, var(--radius-card-default));
  /* Radius Menu */
  --radius-menu-default: 16px;
  --radius-menu: var(--custom-radius-menu, var(--radius-menu-default));
  /* Radius Modal */
  --radius-modal-default: clamp(16px, 2vw, 18px);
  --radius-modal: var(--custom-radius-modal, var(--radius-modal-default));
}

/* ===================================================================== */
/* Source: tokens/aops_themes.css */
/* ===================================================================== */
/* ====================================================================== */
/* AOPS_THEMES.CSS                                                        */
/* ====================================================================== */


/* ============================= */
/* THEME: LIGHT (default :root)  */
/* ============================= */
:root,
[data-theme="light"] {
  /* Base surfaces */
  --bg: hsl(220, 50%, 98%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(220, 50%, 98%);
  --panel-in: hsl(0, 0%, 100%);
  --panel-in: color-mix(in hsl, var(--panel) 50%, white 50%);
  --card: hsl(217, 62%, 96%);
  --input: hsl(217, 62%, 96%);
  --soft: hsl(217, 62%, 96%);
  --section: hsl(226, 36%, 95%);
  --scrollbar: hsl(222, 36%, 27%);
  --secondary: hsla(0, 0%, 0%, 0);
  --button: hsl(224, 43%, 9%);
  --button-acc: hsl(225, 45%, 97%);

  /* Text */
  --text: hsl(224, 43%, 9%);
  --text-on: hsl(221, 41%, 26%);
  --muted: hsl(221, 19%, 41%);
  --text-color: hsl(224, 29%, 34%);
  --text-color-active: hsl(220, 28%, 23%);

  /* Accents & Borders */
  --acc: hsl(222, 36%, 27%);
  --acc-on: hsl(224, 30%, 33%);
  --accent-color: hsl(226, 100%, 67%);
  --accent-bg: hsl(222, 27%, 90%);
  --border: hsl(219, 32%, 86%);
  --border-soft: hsl(221, 18%, 37%);
  --border-checkbox: hsl(222, 36%, 27%);
  --shadow: 0 12px 30px rgba(0,0,0,.08);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(26%) sepia(7%) saturate(3756%) hue-rotate(184deg) brightness(92%) contrast(82%);
  --icon-brand-color: hsl(221, 41%, 26%);
  --title-color: hsl(224, 29%, 34%);
  --search-background: hsl(216.67deg 100% 97.9%);
  --chip: hsl(228, 100%, 97%);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 95%, var(--acc) 2.5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 4%);
  --table-row-hlt: hsl(224, 35%, 96%);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: hsl(351, 82%, 95%);

  /* Overlays & background treatment */
  --overlay-bg: rgb(236 236 236 / 25%);
  --bg-gradient-spot: hsl(225, 23%, 90%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(226, 100%, 96%);
  --highlight-rgb: 235, 240, 255;
  --highlight-light: 235, 240, 255; /* legacy helper */
  --highlight-dark: 36, 40, 54;     /* legacy helper */
}

/* ============================= */
/* THEME: DARK                   */
/* ============================= */
[data-theme="dark"] {
  /* Base surfaces */
  --bg: hsl(230, 12%, 7%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(229, 28%, 12%);
  --panel-in: color-mix(in hsl, var(--panel), white 2.5%);
  --card: hsl(225, 24%, 16%);
  --input: hsl(225, 24%, 16%);
  --soft: hsl(225, 24%, 16%);
  --section: hsl(223, 20%, 7%);
  --scrollbar: hsl(224, 22%, 19%);
  --secondary: transparent;
  --button: hsl(213, 33%, 91%);
  --button-acc: hsl(213, 33%, 91%);

  /* Text */
  --text: hsl(213, 33%, 91%);
  --text-on: hsl(226, 78%, 83%);
  --muted: hsl(212, 19%, 65%);
  --text-color: hsl(226, 78%, 83%);
  --text-color-active: hsl(222, 45%, 86%);

  /* Accents & Borders */
  --acc: hsl(224, 22%, 19%);
  --acc-on: hsl(224, 24%, 27%);
  --accent-color: hsl(223, 100%, 75%);
  --accent-bg: hsl(224, 22%, 19%);
  --border: hsl(224, 21%, 21%);
  --border-soft: hsl(221, 18%, 37%);
  --border-checkbox: hsl(224, 24%, 79%);
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(79%) sepia(7%) saturate(1494%) hue-rotate(193deg) brightness(101%) contrast(92%);
  --icon-brand-color: hsl(226, 78%, 83%);
  --title-color: hsl(226, 78%, 83%);
  --search-background: hsl(224, 22%, 19%);
  --chip: hsl(224, 26%, 18%);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 90%, white 5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 2%);
  --table-row-hlt: hsla(228, 74%, 85%, 0.039);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: rgba(196, 83, 96, .22);

  /* Overlays & background treatment */
  --overlay-bg: rgba(0, 0, 0, .25);
  --bg-gradient-spot: hsl(230, 22%, 12%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(228, 21%, 18%);
  --highlight-rgb: 36, 40, 54;
}

/* ============================= */
/* THEME: AURORA                 */
/* ============================= */
[data-theme="aurora"] {
  /* Base surfaces */
  --bg: hsl(231, 47%, 12%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(231, 42%, 19%);
  --panel-in: color-mix(in hsl, var(--panel), white 2.5%);
  --card: hsl(229deg 40.11% 23.05%);
  --input: hsl(229, 44%, 22%);
  --soft: hsl(229, 44%, 22%);
  --section: hsl(232, 44%, 15%);
  --scrollbar: hsl(228, 35%, 28%);
  --secondary: transparent;
  --button: hsl(229, 78%, 91%);
  --button-acc: hsl(229, 78%, 91%);

  /* Text */
  --text: hsl(229, 78%, 91%);
  --text-on: hsl(246, 100%, 97%);
  --muted: hsl(229, 45%, 73%);
  --text-color: hsl(231, 100%, 89%);
  --text-color-active: hsl(246, 100%, 97%);
  
  /* Accents & Borders */
  --acc: hsl(227, 43%, 20%);
  --acc-on: hsl(228, 40%, 28%);
  --accent-color: hsl(247, 100%, 74%);
  --accent-bg: hsl(229.45deg 39% 25.5%);
  --border: hsl(226, 39%, 30%);
  --border-soft: rgba(58, 72, 119, .65);
  --border-checkbox: hsl(230, 100%, 91%);
  --shadow: 0 12px 36px rgba(5, 9, 28, .55);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(537%) hue-rotate(190deg) brightness(105%) contrast(92%);
  --icon-brand-color: hsl(230, 100%, 88%);
  --title-color: hsl(229, 78%, 91%);
  --search-background: hsl(229, 46%, 15%);
  --chip: hsl(228, 45%, 20%);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 90%, white 5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 2%);
  --table-row-hlt: rgba(138, 123, 255, .18);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: rgba(225, 119, 174, .28);

  /* Overlays & background treatment */
  --overlay-bg: rgba(8, 11, 24, .55);
  --bg-gradient-spot: hsl(232, 47%, 19%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(247, 100%, 74%);
  --highlight-rgb: 138, 123, 255;
}

/* ============================= */
/* THEME: CHARCOAL               */
/* ============================= */
[data-theme="charcoal"] {
  /* Base surfaces */
  --bg: hsl(260, 5.08%, 11.57%);
  --bg-menu: hsl(225, 5.13%, 22%);
  --panel: hsl(240, 5.56%, 14.12%);
  --panel-in: hsl(222.86deg 6.98% 16.37%);  
  --card: hsl(222.86deg 7.12% 18.49%);
  --input: hsl(222.86, 6.93%, 19.8%);
  --soft: hsl(220, 5.88%, 30%);
  --section: hsl(226, 36%, 95%);
  --scrollbar: hsl(225, 4.76%, 50.59%);
  --secondary: hsl(222.86, 6.93%, 19.8%);
  --button: hsl(213, 33%, 91%);
  --button-acc: hsl(225, 45%, 97%);

  /* Text */
  --text: hsl(213, 33%, 91%);
  --text-on: hsl(229.29, 26.92%, 79.61%);
  --muted: hsl(232, 8.38%, 64.9%);
  --text-color: hsl(217.5, 40%, 88.24%);
  --text-color-active: hsl(222, 45%, 86%);

  /* Accents & Borders */
  --acc: hsl(222.86, 6.93%, 19.8%);
  --acc-on: hsl(220, 5.88%, 30%);
  --accent-color: hsl(197.8deg 19.78% 88.68%);
  --accent-bg: hsl(220, 5.88%, 30%);
  --border: hsl(0, 0%, 7.84%);
  --border-soft: hsl(240, 7.69%, 10.2%);
  --border-checkbox: hsl(224, 24%, 79%);
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(79%) sepia(7%) saturate(1494%) hue-rotate(193deg) brightness(101%) contrast(92%);
  --icon-brand-color: hsl(216.92, 15.29%, 83.33%);
  --title-color: hsl(229.09, 15.07%, 85.69%);
  --search-background: hsl(222.86deg 6.28% 21.9%);
  --chip: hsl(222.86deg 6.28% 21.9%);

  /* Tables */
  --table-row-hover: hsla(220, 43%, 72%, 0.09);
  --table-row-alt: hsl(220deg 9.43% 18.52%);
  --table-row-hlt: hsla(212.73, 4.6%, 46.86%, 0.039);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: hsla(353.63, 66.86%, 66.86%, 0.22);

  /* Overlays & background treatment */
  --overlay-bg: rgba(0, 0, 0, .25);
  --bg-gradient-spot: hsl(240, 1.96%, 10%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, hsl(240, 1.96%, 10%) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(226, 100%, 96%);
  --highlight-rgb: 36, 40, 54;
  --highlight-light: 235, 240, 255; /* legacy helper */
  --highlight-dark: 36, 40, 54;     /* legacy helper */
}

/* ============================= */
/* THEME: MULBERRY               */
/* ============================= */
[data-theme="damson"] {
  /* Base surfaces */
  --bg: hsl(286, 34%, 9%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(284.17deg 41.32% 17.06%);
  --panel-in: color-mix(in hsl, var(--panel), white 4.5%);
  --card: hsl(286deg 35.78% 22.7%);
  --input: hsl(286deg 35.78% 22.7%);
  --soft: hsl(286deg 35.78% 22.7%);
  --section: hsl(286, 38%, 12%);
  --scrollbar: hsl(286, 18%, 34%);
  --secondary: transparent;
  --button: hsl(286, 60%, 92%);
  --button-acc: hsl(286, 60%, 92%);

  /* Text */
  --text: hsl(286, 60%, 92%);
  --text-on: hsl(292, 100%, 97%);
  --muted: hsl(286, 28%, 74%);
  --text-color: hsl(286, 78%, 90%);
  --text-color-active: hsl(292, 100%, 97%);

  /* Accents & Borders */
  --acc: hsl(286, 28%, 18%);
  --acc-on: hsl(286deg 35.78% 22.7%);
  --accent-color: hsl(292, 88%, 66%);
  --accent-bg: hsl(286deg 29.76% 25.51%);
  --border: hsl(286deg 35.11% 22.68%);
  --border-soft: hsl(286 22% 62% / 56%);
  --border-checkbox: hsl(286, 70%, 88%);
  --shadow: 0 12px 38px rgba(20, 6, 26, .70);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(88%) sepia(8%) saturate(980%) hue-rotate(270deg) brightness(110%) contrast(92%);
  --icon-brand-color: hsl(286, 76%, 86%);
  --title-color: hsl(286, 64%, 93%);
  --search-background: hsl(286, 30%, 12%);
  --chip: hsl(286, 30%, 18%);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 86%, var(--accent-color) 8%);
  --table-row-alt: color-mix(in hsl, var(--panel) 90%, var(--accent-color) 3%);
  --table-row-hlt: hsl(292 88% 66% / 20%);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 62%, var(--accent-bg, transparent) 38%);
  --table-row-match: hsl(345 78% 62% / 26%);

  /* Overlays & background treatment */
  --overlay-bg: hsl(286 52% 7% / 62%);
  --bg-gradient-spot: hsl(292, 42%, 18%);
  --bg-gradient: radial-gradient(
    1400px 800px at 20% -10%,
    var(--bg-gradient-spot) 0%,
    var(--bg) 60%
  ) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(292, 88%, 66%);
  --highlight-rgb: 235, 110, 212;
}

/* ============================= */
/* THEME: DUSK                   */
/* ============================= */
[data-theme="dusk"] {
  /* Base surfaces */
  --bg: hsl(236, 34%, 10%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(236, 32%, 16%);
  --panel-in: color-mix(in hsl, var(--panel), white 3.5%);
  --card: hsl(236, 30%, 20%);
  --input: hsl(236, 30%, 20%);
  --soft: hsl(236, 30%, 20%);
  --section: hsl(236, 36%, 13%);
  --scrollbar: hsl(235, 22%, 30%);
  --secondary: transparent;
  --button: hsl(236, 55%, 92%);
  --button-acc: hsl(236, 55%, 92%);

  /* Text */
  --text: hsl(236, 55%, 92%);
  --text-on: hsl(236, 95%, 97%);
  --muted: hsl(236, 26%, 72%);
  --text-color: hsl(236, 70%, 90%);
  --text-color-active: hsl(236, 95%, 97%);

  /* Accents & Borders */
  --acc: hsl(236, 30%, 18%);
  --acc-on: hsl(236, 24%, 28%);
  --accent-color: hsl(236, 92%, 72%);
  --accent-bg: hsl(236deg 31% 24.5%);
  --border: hsl(238 31% 22%);
  --border-soft: hsl(236 24% 55% / 55%);
  --border-checkbox: hsl(236, 70%, 88%);
  --shadow: 0 12px 36px rgba(5, 8, 22, .62);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(86%) sepia(10%) saturate(520%) hue-rotate(214deg) brightness(108%) contrast(92%);
  --icon-brand-color: hsl(236, 70%, 86%);
  --title-color: hsl(236, 55%, 92%);
  --search-background: hsl(236 33% 13.5%);
  --chip: hsl(236, 30%, 18%);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 80%, var(--accent-color) 5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 92%, var(--accent-color) 2%);
  --table-row-hlt: hsl(236 92% 72% / 18%);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 65%, var(--accent-bg, transparent) 35%);
  --table-row-match: hsl(265.85deg 37.54% 60.1% / 17%);

  /* Overlays & background treatment */
  --overlay-bg: hsl(236 44% 8% / 62%);
  --bg-gradient-spot: hsl(236, 34%, 18%);
  --bg-gradient: radial-gradient(
    1400px 800px at 20% -10%,
    var(--bg-gradient-spot) 0%,
    var(--bg) 60%
  ) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(236, 92%, 72%);
  --highlight-rgb: 138, 130, 255;
}

/* ============================= */
/* THEME: EMBER                  */
/* ============================= */
[data-theme="ember"] {
  /* Base surfaces */
  --bg: hsl(0deg, 50%, 8%);
  --bg-menu: color-mix(in hsl, hsl(0deg 48.72% 13.85%) 92%, var(--panel) 4%);
  --panel: hsl(0deg 50% 8%);
  --panel-in: color-mix(in hsl, var(--panel), white 2.5%);
  --card: hsl(0deg 48.72% 13.85%);
  --input: hsl(0deg 48.72% 13.85%);
  --soft: hsl(0deg 43.52% 20.04%);
  --section: hsl(18, 25%, 9%);
  --scrollbar: hsl(0deg 27% 17%);
  --secondary: hsl(0deg 48.72% 13.85%);
  --button: hsl(27, 66%, 90%);
  --button-acc: hsl(27, 66%, 90%);

  /* Text */
  --text: hsl(0deg 66% 90%);
  --text-on: hsl(0deg 100% 88%);
  --muted: hsl(0deg 26% 69%);
  --text-color: hsl(0deg 73% 85%);
  --text-color-active: hsl(0deg 71.46% 87.53%);

  /* Accents & Borders */
  --acc: hsl(0deg 48.72% 13.85%);
  --acc-on: hsl(0deg 43.52% 20.04%);
  --accent-color: hsl(0deg 100% 65%);
  --accent-bg: hsl(0deg 39% 22%);
  --border: hsl(0deg 45.55% 12.99%);
  --border-soft: rgb(84 42 42 / 60%);
  --border-checkbox: hsl(0deg 78% 78%);
  --shadow: 0 12px 34px rgba(0, 0, 0, .5);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(647%) hue-rotate(328deg) brightness(100%) contrast(94%);
  --icon-brand-color: hsl(0deg 73.31% 61.96%);
  --title-color: hsl(0deg 49.17% 82.64%);
  --search-background: hsl(0deg 43.52% 20.04%);
  --chip: rgb(255 77 77 / 12%);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--soft) 30%, white 1%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 2%);
  --table-row-hlt: rgb(255 120 120 / 16%);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: rgb(146 40 40 / 30%);

  /* Overlays & background treatment */
  --overlay-bg: rgb(26 10 10 / 55%);
  --bg-gradient-spot: hsl(0deg 49.26% 12.07%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(28, 100%, 74%);
  --highlight-rgb: 255, 181, 122;

  /* Radius Shapes */
  --custom-radius-panel: 10px;
  --custom-radius-button: 14px;
  --custom-radius-input: 14px;
  --custom-radius-card: 12px;
  --custom-radius-menu: 10px;
  --custom-radius-modal: 10px;
}

/* ============================= */
/* THEME: GLACIER                */
/* ============================= */
[data-theme="glacier"] {
  /* Base surfaces */
  --bg: hsl(210, 71%, 95%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(216, 100%, 98%);
  --panel-in: color-mix(in hsl, var(--panel) 50%, white 50%);
  --card: hsl(209, 61%, 91%);
  --input: hsl(209, 61%, 91%);
  --soft: hsl(209, 61%, 91%);
  --section: hsl(209, 48%, 87%);
  --scrollbar: hsl(206, 56%, 41%);
  --secondary: transparent;
  --button: hsl(205, 64%, 15%);
  --button-acc: hsl(225, 45%, 97%);

  /* Text */
  --text: hsl(205, 64%, 15%);
  --text-on: hsl(206, 72%, 17%);
  --muted: hsl(206, 33%, 47%);
  --text-color: hsl(206, 57%, 28%);
  --text-color-active: hsl(206, 73%, 24%);
  
  /* Accents & Borders */
  --acc: hsl(206, 56%, 41%);
  --acc-on: hsl(206, 52%, 50%);
  --accent-color: hsl(209, 69%, 54%);
  --accent-bg: hsl(212, 67%, 93%);
  --border: hsl(203, 49%, 75%);
  --border-soft: hsl(204, 45%, 80%);
  --border-checkbox: hsl(206, 56%, 41%);
  --shadow: 0 18px 48px rgba(26, 58, 90, .08);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(32%) sepia(30%) saturate(614%) hue-rotate(173deg) brightness(90%) contrast(94%);
  --icon-brand-color: hsl(206, 56%, 41%);
  --title-color: hsl(206, 57%, 28%);
  --search-background: hsl(209, 48%, 87%);
  --chip: rgba(58, 142, 219, .12);
  
  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 95%, var(--acc) 2.5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 4%);
  --table-row-hlt: rgba(58, 142, 219, .18);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: rgba(239, 103, 118, .22);

  /* Overlays & background treatment */
  --overlay-bg: rgba(217, 232, 249, .65);
  --bg-gradient-spot: hsl(209, 61%, 91%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(206, 71%, 86%);
  --highlight-rgb: 195, 221, 244;
}

/* ============================= */
/* THEME: KUMO                   */
/* ============================= */
[data-theme="kumo"] {
  /* Base surfaces */
  --bg: hsl(228deg 22.91% 25.16%);
  --bg-menu: hsl(226deg 22.66% 39.86%);
  --panel: hsl(226deg 22.23% 30.78%);
  --panel-in: hsl(226deg 21.19% 34.37%); 
  --card: hsl(226deg 20.77% 35.95%);
  --input: hsl(226deg 20.77% 35.95%);
  --soft: hsl(226deg 18.91% 44.06%);
  --section: hsl(224, 28%, 9%);
  --scrollbar: hsl(226deg 18.91% 44.06%);
  --secondary: hsl(226deg 20.77% 35.95%);
  --button: hsl(206, 13%, 73%);
  --button-acc: hsl(206, 13%, 73%);

  /* Text */
  --text: hsl(206deg 34.39% 89.58%);
  --text-on: hsl(186.73deg 83.53% 96.63%);
  --muted: rgba(177, 184, 192, .70);
  --text-color: hsl(206, 13%, 73%);
  --text-color-active: hsl(142, 63%, 93%);
  
  /* Accents & Borders */
  --acc: hsl(226deg 20.77% 35.95%);
  --acc-on: hsl(226deg 18.91% 44.06%);
  --accent-color: hsl(232.62deg 100% 81.9%);
  --accent-bg: hsl(226deg 18.91% 44.06%);
  --border: hsl(226deg 23.24% 23.2%);
  --border-soft: rgba(29, 38, 52, .60);
  --border-checkbox: hsl(206, 13%, 73%);
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(80%) sepia(4%) saturate(350%) hue-rotate(165deg) brightness(92%) contrast(88%);
  --icon-brand-color: hsl(226deg 23.39% 73.55%);
  --title-color: hsl(226deg 23.39% 73.55%);
  --search-background: hsl(226deg 18.91% 44.06%);
  --chip: hsl(226deg 20.77% 35.95%);

  /* Tables */
  --table-row-hover: hsl(226deg 18.91% 44.06%);
  --table-row-alt: hsl(226deg 20.47% 38.8%);
  --table-row-hlt: rgb(124 159 232 / 10%);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: rgb(210 129 169 / 24%);

  /* Overlays & background treatment */
  --overlay-bg: rgba(0, 0, 0, .35);
  --bg-gradient-spot: hsl(232.62deg 20.83% 28.51%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(142, 76%, 70%);
  --highlight-rgb: 124, 232, 164;
}

/* ============================= */
/* THEME: MIDNIGHT               */
/* ============================= */
[data-theme="midnight"] {
  /* Base surfaces */
  --bg: hsl(245, 40%, 7%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(248, 39%, 13%);
  --panel-in: color-mix(in hsl, var(--panel), white 2.5%);
  --card: hsl(247, 37%, 17%);
  --input: hsl(247, 37%, 17%);
  --soft: hsl(247, 37%, 17%);
  --section: hsl(246, 44%, 9%);
  --scrollbar: hsl(249, 33%, 23%);
  --secondary: transparent;
  --button: hsl(248, 62%, 90%);
  --button-acc: hsl(248, 62%, 90%);

  /* Text */
  --text: hsl(248, 62%, 90%);
  --text-on: hsl(255, 100%, 96%);
  --muted: hsl(246, 39%, 70%);
  --text-color: hsl(251, 59%, 85%);
  --text-color-active: hsl(255, 100%, 96%);

  /* Accents & Borders */
  --acc: hsl(249, 33%, 18%);
  --acc-on: hsl(248, 33%, 25%);
  --accent-color: hsl(276, 100%, 71%);
  --accent-bg: hsl(267, 39%, 27%);
  --border: hsl(246, 31%, 24%);
  --border-soft: rgba(70, 63, 122, .6);
  --border-checkbox: hsl(248, 100%, 87%);
  --shadow: 0 14px 40px rgba(5, 4, 16, .6);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(84%) sepia(23%) saturate(477%) hue-rotate(205deg) brightness(101%) contrast(92%);
  --icon-brand-color: hsl(248, 62%, 90%);
  --title-color: hsl(248, 62%, 90%);
  --search-background: hsl(246, 44%, 9%);
  --chip: rgba(188, 108, 255, .18);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 90%, white 5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 2%);
  --table-row-hlt: rgba(188, 108, 255, .18);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: rgba(236, 106, 160, .28);

  /* Overlays & background treatment */
  --overlay-bg: rgba(5, 4, 16, .55);
  --bg-gradient-spot: hsl(250, 44%, 17%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(276, 100%, 71%);
  --highlight-rgb: 188, 108, 255;
}

/* ============================= */
/* THEME: NEONWAVE               */
/* ============================= */
[data-theme="neonwave"] {
  /* Base surfaces */
  --bg: hsl(231, 33%, 8%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(231, 30%, 14%);
  --panel-in: color-mix(in hsl, var(--panel), white 2.5%);
  --card: hsl(227deg 30% 19%);
  --input: hsl(234, 34%, 19%);
  --soft: hsl(234, 34%, 19%);
  --section: hsl(233, 40%, 12%);
  --scrollbar: hsl(223, 41%, 25%);
  --secondary: transparent;
  --button: hsl(219, 100%, 93%);
  --button-acc: hsl(219, 100%, 93%);

  /* Text */
  --text: hsl(219, 100%, 93%);
  --text-on: hsl(222, 100%, 97%);
  --muted: hsl(212, 42%, 72%);
  --text-color: hsl(222, 100%, 88%);
  --text-color-active: hsl(222, 100%, 97%);

  /* Accents & Borders */
  --acc: hsl(229, 33%, 17%);
  --acc-on: hsl(229, 30%, 25%);
  --accent-color: hsl(189, 100%, 59%);
  --accent-bg: hsl(195, 53%, 25%);
  --border: hsl(230, 33%, 26%);
  --border-soft: rgba(69, 87, 136, .6);
  --border-checkbox: hsl(197, 100%, 77%);
  --shadow: 0 16px 44px rgba(6, 10, 28, .65);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(1052%) hue-rotate(175deg) brightness(101%) contrast(91%);
  --icon-brand-color: hsl(197, 100%, 77%);  
  --title-color: hsl(219, 100%, 93%);
  --search-background: hsl(233, 41%, 11%);
  --chip: rgba(47, 225, 255, .18);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 90%, white 5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 90%, var(--accent-color) 2%);
  --table-row-hlt: rgba(47, 225, 255, .18);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: rgba(236, 111, 176, .26);

  /* Overlays & background treatment */
  --overlay-bg: rgba(7, 12, 26, .58);
  --bg-gradient-spot: hsl(232, 44%, 22%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(189, 100%, 59%);
  --highlight-rgb: 47, 225, 255;
}

/* ============================= */
/* THEME: PEARL                  */
/* ============================= */
[data-theme="pearl"] {
  /* Base surfaces */
  --bg: hsl(214, 40%, 89%);
  --bg-menu: hsl(220deg 23.95% 94.39%);
  --panel: hsl(214.29, 38.89%, 92.94%);
  --panel-in: color-mix(in hsl, var(--panel) 50%, #fdfdff 50%);
  --card: hsl(214.29deg 40% 94%);
  --input: hsl(235.04deg 100% 97.48%);
  --soft: hsl(235.04deg 100% 97.48%);
  --button: hsl(225, 30.43%, 18.04%);
  --button-acc: hsl(225, 45%, 97%);
  --secondary: hsla(0, 0%, 0%, 0);
  --scrollbar: hsl(222.86, 16.75%, 40.98%);

  /* Text */
  --text: hsl(225, 30.43%, 18.04%);
  --text-on: hsl(220.5, 27.03%, 29.02%);
  --muted: hsl(222.86, 10.55%, 39.02%);
  --text-color: hsl(224.21, 18.63%, 40%);
  --text-color-active: hsl(218.82, 13.39%, 24.9%);

  /* Accents & Borders */
  --acc: hsl(222.86, 17.95%, 54.12%);
  --acc-on: hsl(223.5, 21.74%, 63.92%);
  --accent-color: hsl(224.8, 31.91%, 53.92%);
  --accent-bg: hsl(223.64, 33.33%, 87.06%);
  --accent-bg: hsl(222, 27%, 90%);
  --border: hsl(219, 26.44%, 83%);
  --border-soft: hsl(220, 18.99%, 30.98%);
  --border-checkbox: hsl(222.27, 20.95%, 41.18%);
  --shadow: 0 12px 30px rgba(0,0,0,.08);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(26%) sepia(7%) saturate(3756%) hue-rotate(184deg) brightness(92%) contrast(82%);
  --icon-brand-color: hsl(225, 20.95%, 41.18%);
  --title-color: hsl(225, 20.95%, 41.18%);
  --search-background: hsl(240, 100%, 99.02%);
  --chip: hsl(223.64, 33.33%, 87.06%);
  
  /* Tables */
  --table-row-hover: color-mix(in hsl, color-mix(in hsl, hsl(214.29, 38.89%, 92.94%) 50%, white 50%) 95%, hsl(222.86, 16.75%, 40.98%) 2.5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 4%);
  --table-row-alt: hsl(214.29, 38.89%, 92.94%);
  --table-row-hlt: hsl(224, 35%, 96%);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: hsl(347.5, 38.71%, 87.84%);

  /* Overlays & background treatment */
  --overlay-bg: rgb(236 236 236 / 25%);
  --bg-gradient-spot: hsl(230, 60%, 96%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, hsl(220.8deg 35.05% 93.28%) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(226, 100%, 96%);
  --highlight-light: 235, 240, 255;
  --highlight-dark: 36, 40, 54;
  --highlight-rgb: 235, 240, 255;
  --highlight: 235, 240, 255;
}

/* ============================= */
/* THEME: SAGEPAPER              */
/* ============================= */
[data-theme="sagepaper"] {
  /* Base surfaces */
  --bg: hsl(152, 32%, 96%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(0, 0%, 100%);
  --panel-in: color-mix(in hsl, var(--panel) 60%, white 40%);
  --card: hsl(152, 24%, 93%);
  --input: hsl(152, 24%, 93%);
  --soft: hsl(152, 24%, 93%);
  --section: hsl(152, 18%, 90%);
  --scrollbar: hsl(164, 18%, 38%);
  --secondary: transparent;
  --button: hsl(168, 22%, 14%);
  --button-acc: hsl(0, 0%, 100%);

  /* Text */
  --text: hsl(168, 22%, 14%);
  --text-on: hsl(0, 0%, 100%);
  --muted: hsl(168, 10%, 40%);
  --text-color: hsl(168, 18%, 22%);
  --text-color-active: hsl(168, 22%, 14%);

  /* Accents & Borders */
  --acc: hsl(164, 18%, 38%);
  --acc-on: hsl(164, 18%, 50%);
  --accent-color: hsl(170, 58%, 40%);
  --accent-bg: hsl(152, 22%, 88%);
  --border: hsl(152, 18%, 82%);
  --border-soft: hsl(168 10% 28% / 55%);
  --border-checkbox: hsl(164, 18%, 38%);
  --shadow: 0 18px 48px rgba(12, 32, 24, .10);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(22%) sepia(10%) saturate(2150%) hue-rotate(132deg) brightness(92%) contrast(90%);
  --icon-brand-color: hsl(170, 58%, 32%);
  --title-color: hsl(168, 22%, 20%);
  --search-background: hsl(170deg 47.34% 67.44% / 14%); 
  --chip: hsl(170 58% 40% / 14%);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 95%, var(--acc) 2.5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 4%);
  --table-row-hlt: hsl(170 58% 40% / 14%);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: hsl(351, 82%, 95%);

  /* Overlays & background treatment */
  --overlay-bg: hsl(152 22% 88% / 45%);
  --bg-gradient-spot: hsl(170, 30%, 86%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(170, 58%, 92%);
  --highlight-rgb: 219, 246, 238;
}

/* ============================= */
/* THEME: SAPCLOUD               */
/* ============================= */
[data-theme="sapcloud"] {
  /* Base surfaces */
  --bg: hsl(219.04deg 100% 97.22%);
  --bg-menu: hsl(222.86deg 100% 98.41%);
  --panel: hsl(212.73, 80.49%, 91.96%);
  --panel-in: hsl(222.86deg 100% 98.41%);
  --card: hsl(222.86deg 100% 98.41%);
  --input: hsl(200, 38%, 94%);
  --soft: hsl(220deg 72.82% 98.09%);
  --section: hsl(226, 36%, 95%);
  --scrollbar: hsl(222.86deg 100% 98.41%);
  --secondary: hsl(200, 38%, 94%);
  --button: hsl(228deg 29.58% 40.85%);
  --button-acc: hsl(228deg 56.21% 27.54%);

  /* Text */
  --text: hsl(213deg 59.05% 23.33%);
  --text-on: hsl(229.29deg 37.35% 21.76%);
  --muted: hsl(232deg 18.53% 30.89%);
  --text-color: hsl(217.5deg 39.08% 18.55%);
  --text-color-active: hsl(222deg 50.74% 17.69%);

  /* Accents & Borders */
  --acc: hsl(200, 38%, 94%);;
  --acc-on: hsl(220deg 72.82% 98.09%);
  --accent-color: hsl(217, 51%, 42%);
  --accent-bg: hsl(220deg 100% 95.72%);
  --border: hsl(209deg, 42%, 78%);
  --border-soft: hsl(240deg 40.74% 55.71%);
  --border-checkbox: hsl(209deg, 42%, 78%);
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(79%) sepia(7%) saturate(1494%) hue-rotate(193deg) brightness(101%) contrast(92%);
  --icon-brand-color: hsl(217, 51%, 42%);
  --title-color: hsl(211deg 24.26% 54.48%);
  --search-background: hsl(0deg 0% 100%);
  --chip: hsl(200, 38%, 94%);

  /* Tables */
  --table-row-hover: hsl(231.95deg 58.79% 85.91% / 8%);
  --table-row-alt: hsl(220deg 79.85% 95.64%);
  --table-row-hlt: hsl(212.73, 80.49%, 91.96%);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: hsl(353.63deg 100% 68.05% / 22%);

  /* Overlays & background treatment */
  --overlay-bg: rgba(0, 0, 0, .25);
  --bg-gradient-spot: hsl(0, 0%, 100%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, hsl(0, 0%, 100%) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(226, 100%, 96%);
  --highlight-light: 235, 240, 255;
  --highlight-dark: 36, 40, 54;
  --highlight-rgb: 124, 232, 164;

  /* Radius Shapes */
  --custom-radius-panel: 8px;
  --custom-radius-button: 8px;
  --custom-radius-input: 8px;
  --custom-radius-card: 8px;
  --custom-radius-menu: 8px;
  --custom-radius-modal: 8px;
}

/* ============================= */
/* THEME: SLATE                  */
/* ============================= */
[data-theme="slate"] {
  /* Base surfaces */
  --bg: hsl(239.22deg 2.65% 21.86%);
  --bg-menu: hsl(220deg 4.87% 38.41%);
  --panel: hsl(240deg 3.57% 26.81%);
  --panel-in: hsl(222.86deg 2.92% 33.11%);  
  --card: hsl(229.45deg 3.44% 32.05%);
  --input: hsl(222.86deg 4.1% 30.93%);
  --soft: hsl(220deg 4.87% 38.41%);
  --section: hsl(226, 36%, 95%);
  --scrollbar: hsl(225, 4.76%, 50.59%);
  --secondary: hsl(222.86deg 4.1% 30.93%);
  --button: hsl(213, 33%, 91%);
  --button-acc: hsl(225, 45%, 97%);

  /* Text */
  --text: hsl(213deg 46.67% 95.69%);
  --text-on: hsl(229.29deg 36.72% 85.67%);
  --muted: hsl(232deg 13.09% 79.19%);
  --text-color: hsl(217.5, 40%, 88.24%);
  --text-color-active: hsl(222, 45%, 86%);

  /* Accents & Borders */
  --acc: hsl(220deg 4.87% 38.41%);
  --acc-on: hsl(220deg 3.97% 46.96%);
  --accent-color: hsl(197.8deg 19.78% 88.68%);
  --accent-bg: hsl(222.86deg 2.92% 35.27%);
  --border: hsl(0deg 0% 14.68%);
  --border-soft: hsl(240, 7.69%, 10.2%);
  --border-checkbox: hsl(224, 24%, 79%);
  --shadow: 0 6px 24px rgba(0, 0, 0, .35);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(79%) sepia(7%) saturate(1494%) hue-rotate(193deg) brightness(101%) contrast(92%);
  --icon-brand-color: hsl(216.92, 15.29%, 83.33%);
  --title-color: hsl(229.09, 15.07%, 85.69%);
  --search-background: hsl(220deg 4.87% 38.41%);
  --chip: hsl(222.86deg 4.1% 30.93%);

  /* Tables */
  --table-row-hover: hsla(220deg 2.92% 44.2% / 60%);
  --table-row-alt: hsl(220deg 3.05% 35.39%);
  --table-row-hlt: hsla(212.73, 4.6%, 46.86%, 0.039);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: hsl(353.63deg 72.7% 71.42% / 22%);

  /* Overlays & background treatment */
  --overlay-bg: rgba(0, 0, 0, .25);
  --bg-gradient-spot: hsl(240, 1.96%, 10%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, hsl(240deg 1.12% 22.99%) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(226, 100%, 96%);
  --highlight-rgb: 36, 40, 54;
  --highlight-light: 235, 240, 255; /* legacy helper */
  --highlight-dark: 36, 40, 54;     /* legacy helper */
}

/* ============================= */
/* THEME: SOLSTICE               */
/* ============================= */
[data-theme="solstice"] {
  /* Base surfaces */
  --bg: hsl(25, 84%, 97%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(0, 100%, 100%);
  --panel-in: color-mix(in hsl, var(--panel) 50%, white 50%);
  --card: hsl(24, 72%, 94%);
  --input: hsl(24, 72%, 94%);
  --soft: hsl(24, 72%, 94%);
  --section: hsl(27, 62%, 87%);
  --scrollbar: hsl(20, 53%, 56%);
  --secondary: transparent;
  --button: hsl(14, 24%, 19%);
  --button-acc: hsl(29.29deg 45% 97%);

  /* Text */
  --text: hsl(14, 24%, 19%);
  --text-on: hsl(12, 28%, 15%);
  --muted: hsl(16, 16%, 46%);
  --text-color: hsl(12, 24%, 25%);
  --text-color-active: hsl(12, 28%, 15%);

  /* Accents & Borders */
  --acc: hsl(20, 53%, 56%);
  --acc-on: hsl(20, 58%, 61%);
  --accent-color: hsl(16, 100%, 67%);
  --accent-bg: hsl(14, 100%, 94%);
  --border: hsl(23, 68%, 81%);
  --border-soft: rgba(235, 192, 163, .65);
  --border-checkbox: hsl(20, 53%, 56%);
  --shadow: 0 16px 44px rgba(182, 116, 76, .18);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(29%) sepia(35%) saturate(612%) hue-rotate(329deg) brightness(94%) contrast(87%);
  --icon-brand-color: hsl(20, 53%, 56%);  
  --title-color: hsl(14, 24%, 19%);
  --search-background: hsl(27, 62%, 87%);
  --chip: rgba(255, 131, 86, .16);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 95%, var(--acc) 2.5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 4%);
  --table-row-hlt: rgba(255, 162, 118, .16);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: rgba(224, 92, 74, .24);

  /* Overlays & background treatment */
  --overlay-bg: rgba(253, 245, 239, .7);
  --bg-gradient-spot: hsl(22, 78%, 88%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(22, 100%, 91%);
  --highlight-rgb: 255, 224, 207;
}

/* ============================= */
/* THEME: VALENTINE              */
/* ============================= */
[data-theme="valentine"] {
  /* Base surfaces */
  --bg: hsl(326.67, 48.21%, 21.96%);
  --bg-menu: hsl(322.5, 39.13%, 36.08%);
  --panel: hsl(319.25, 39.85%, 26.08%);
  --panel-in: color-mix(in hsl, var(--panel) 90%, white 8%);
  --card: hsl(316deg 42.76% 21%);
  --input: hsl(315.6deg 42.76% 20.41%);
  --soft: hsl(315.6deg 42.76% 20.41%);
  --section: hsl(308.05deg 18% 90%);
  --scrollbar: hsl(315.48, 32.98%, 36.86%);
  --secondary: transparent;
  --button: hsl(300.86deg 78% 91%);
  --button-acc: hsl(0, 0%, 100%);

  /* Text */
  --text: hsl(311.79deg 78% 91%);
  --text-on: hsl(288, 100%, 97.06%);
  --muted: hsl(296.13, 44.93%, 72.94%);
  --text-color: hsl(305.36, 100%, 89.02%);
  --text-color-active: hsl(312, 100%, 97.06%);

  /* Accents & Borders */
  --acc: hsl(322.5, 39.13%, 36.08%);
  --acc-on: hsl(308.42deg 25.48% 45.94%);
  --accent-color: hsl(336.08, 100%, 69.02%);
  --accent-bg: hsl(310.48, 38.65%, 31.96%);
  --border: hsl(324.55, 43.14%, 20%);
  --border-soft: hsla(307.87, 34.08%, 35.1%, 0.65);
  --border-checkbox: hsl(316.48deg 100% 91%);
  --shadow: 0 12px 36px rgba(5, 9, 28, .55);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(537%) hue-rotate(190deg) brightness(105%) contrast(92%);
  --icon-brand-color: hsl(315deg 90% 86%);
  --title-color: hsl(287.27, 80.49%, 91.96%);
  --search-background: hsl(313.33, 46.39%, 19.02%);
  --chip: hsl(324.78, 45.1%, 20%);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 60%, var(--acc) 30%);
  --table-row-alt: hsla(312, 38.46%, 28.04%, 0.97);
  --table-row-hlt: hsla(293.23, 100%, 73.92%, 0.18);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: hsla(328.87, 63.86%, 67.45%, 0.28);

  /* Overlays & background treatment */
  --overlay-bg: rgba(8, 11, 24, .55);
  --bg-gradient-spot: hsl(313.33, 46.39%, 19.02%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, hsl(313.33, 46.39%, 19.02%) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(170, 58%, 92%);
  --highlight-rgb: 138, 123, 255;
}

/* ============================= */
/* THEME: VERDANT                */
/* ============================= */
[data-theme="verdant"] {
  /* Base surfaces */
  --bg: hsl(147, 29%, 8%);
  --bg-menu: color-mix(in hsl, var(--bg) 94%, var(--panel) 4%);
  --panel: hsl(153, 24%, 10%);
  --panel-in: color-mix(in hsl, var(--panel), white 2.5%);
  --card: hsl(158, 21%, 15%);
  --input: hsl(158, 21%, 15%);
  --soft: hsl(158, 21%, 15%);
  --section: hsl(154, 22%, 10%);
  --scrollbar: hsl(152, 30%, 20%);
  --secondary: transparent;
  --button: hsl(145, 30%, 84%);
  --button-acc: hsl(145deg 30.2% 88.56%);

  /* Text */
  --text: hsl(145, 30%, 84%);
  --text-on: hsl(154, 100%, 95%);
  --muted: hsl(155, 20%, 64%);
  --text-color: hsl(149, 23%, 80%);
  --text-color-active: hsl(154, 100%, 95%);

  /* Accents & Borders */
  --acc: hsl(162, 21%, 15%);
  --acc-on: hsl(156, 23%, 20%);
  --accent-color: hsl(152, 49%, 52%);
  --accent-bg: hsl(153, 36%, 20%);
  --border: hsl(155, 29%, 20%);
  --border-soft: rgba(36, 64, 48, .65);
  --border-checkbox: hsl(149, 51%, 83%);
  --shadow: 0 12px 36px rgba(5, 14, 9, .55);

  /* Features */
  --icon-color: brightness(0) saturate(100%) invert(82%) sepia(8%) saturate(965%) hue-rotate(88deg) brightness(101%) contrast(91%);
  --icon-brand-color: hsl(147, 55%, 84%);
  --title-color: hsl(145, 30%, 84%);
  --search-background: rgba(71, 193, 135, .18);
  --chip: rgba(71, 193, 135, .18);

  /* Tables */
  --table-row-hover: color-mix(in hsl, var(--panel-in) 90%, white 5%);
  --table-row-alt: color-mix(in hsl, var(--panel) 95%, var(--accent-color) 3%);
  --table-row-hlt: rgba(71, 193, 135, .18);
  --table-row-selected: color-mix(in srgb, var(--table-row-hlt, transparent) 70%, var(--accent-bg, transparent) 30%);
  --table-row-match: rgba(223, 109, 96, .26);

  /* Overlays & background treatment */
  --overlay-bg: rgba(7, 16, 11, .55);
  --bg-gradient-spot: hsl(162, 26%, 15%);
  --bg-gradient: radial-gradient(1400px 800px at 20% -10%, var(--bg-gradient-spot) 0%, var(--bg) 60%) no-repeat fixed;

  /* Highlight */
  --highlight-hex: hsl(151, 63%, 68%);
  --highlight-rgb: 122, 226, 170;
}

/* ===================================================================== */
/* Source: utilities/aops_utilities.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_UTILITIES.CSS             */
/* ============================== */

.hidden { display: none !important; }
.flex { display:flex; gap:8px; align-items:center }
.all-caps { text-transform: uppercase }
.wrap-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wrap-gap, 8px);
  align-items: var(--wrap-align, center);
}
.spacer { flex: 1 1 auto; }
.grow {  /* search */
  flex:1 1 260px; 
  min-width:200px; 
  max-width:520px;
} 
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pill-gap, 6px);
  border-radius: var(--custom-radius-button, var(--circle));
  border: var(--pill-border, 1px solid var(--border));
  line-height: var(--pill-line-height, 1.2);
  font-size: var(--pill-font-size, 0.82rem);
  padding: var(--pill-padding, 0);
  background: var(--pill-bg, transparent);
  color: var(--pill-color, inherit);
}
.icon-button {
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  --icon-button-size: auto;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
}
.icon-button--circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0 !important;
}

.aops-tooltip {
  position: fixed;
  pointer-events: none;
  z-index: 999999;
  padding: 8px 10px;
  border-radius: 8px;
  font: var(--fs) system-ui, sans-serif;
  background: color-mix(in hsl, var(--bg) 50%, var(--panel) 40%);
  color: var(--text);
  transform: translate(-50%, -120%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease;
}

.aops-tooltip.is-visible {
  opacity: 1;
}

/* ===================================================================== */
/* Source: utilities/aops_typography.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_TYPOGRAPHY.CSS            */
/* ============================== */

/* Typography helpers */
.hint { color:var(--muted); padding:10px 14px }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.small {
  /*font-size: clamp(12px, 1vw + 0.2px, 14px);*/
  color: var(--muted);
  white-space:nowrap;
}

/* ===================================================================== */
/* Source: utilities/aops_theme.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_THEME.CSS                 */
/* ============================== */


/* ============================== */
/* THEME ICON TRANSITION          */
/* ============================== */
#themeIcon {
  height: 24px;
  width: 24px;
  transition: background-color 0.9s ease;
}

/* ===================================================================== */
/* Source: components/aops_buttons.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_BUTTONS.CSS               */
/* ============================== */


/* ============================== */
/* BUTTONS                        */
/* ============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--control-pad-y) var(--control-pad-x);
  padding-inline: clamp(0.6rem, 2vw + 0.2rem, 0.9rem);
  border-radius: var(--radius-button);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font: 600 var(--custom-font-control, var(--fs)) var(--ffss);
  transition: background 0.2s ease, border 0.4s ease, color 0.2s ease;
}

.btn.is-pill,
.btn.is-primary {
  background: var(--acc);
  /*border-color: transparent;*/
  border: none;
  color: var(--button-acc);
}

.btn.is-pill:hover,
.btn.is-primary:hover {
  background: var(--acc-on);
  color: var(--button-acc);
}

#refreshLogBtn.is-primary {
  background: color-mix(in hsl, var(--accent-color) 40%, var(--acc) 60%);
}

.btn.is-ghost {
  background: var(--secondary);
  border: 1px solid var(--border);
  color: var(--button);
}

.btn.is-ghost:hover {
  background: var(--soft);
  color: var(--button);
}

.btn.is-tab {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--border);
  border-bottom: 3px solid var(--panel);
  border-radius: var(--radius-button) var(--radius-button) 0 0;
  margin-bottom: -1px;
  box-shadow: inset 0 -1px 0 var(--panel);
}

.btn.is-tab:hover {
  background: color-mix(in oklab, var(--soft) 90%, white);
}

.btn.saved-recall-btn {
  padding: 0.35rem 0.75rem;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-button);
  background: var(--soft);
  color: var(--text);
  gap: 0.3rem;
}

.btn.saved-recall-btn:hover {
  background: color-mix(in oklab, var(--soft) 90%, white);
}

.btn--wide {
  min-width: clamp(140px, 24vw, 180px);
}

.btn-mini {
  padding: 0.4rem 1rem;
  cursor: pointer;
  user-select: none;
}

.btn:is(:disabled, [disabled]) {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
  user-select: none;
  filter: saturate(0.3);
}

/* ===================================================================== */
/* Source: components/aops_cards.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_CARDS.CSS                 */
/* ============================== */


/* ============================== */
/* CARDS                          */
/* ============================== */
:root {
  --aops-card-intrinsic-size: auto 240px;
}
.card-grid {
  overflow: auto;
  max-height: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
  gap: 12px;
  padding: clamp(10px, 0.3rem, 12px);
  margin-top: 0.2rem;
}

.card-grid--logs-overview {
  display: block;
}

.card {
  position: relative;
  font-size: var(--text-fs);
  user-select: none;
  touch-action: pan-y;
  perspective: 1500px;
  border-radius: var(--radius-card);
  overflow: visible; /* ensure flip edges can extend over grid gaps */
}

.card__flip {
  display: grid;
  min-height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.68s cubic-bezier(0.2, 0.8, 0.25, 1);
}

.card__face {
  grid-area: 1 / 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 13px 13px;
  display: flex;
  flex-direction: column;
  gap: clamp(0.1rem, 1vw, 0.2rem);
  backface-visibility: hidden;
  box-shadow: 1px 1px 5px rgba(15, 23, 42, 0.12);
  transition: border .25s ease;
}

.card__face--back {
  transform: rotateY(180deg);
  gap: 0.85rem;
}

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

.card--flipped.card--flip-left .card__flip {
  transform: rotateY(-180deg);
}

.card--flipped.card--flip-right .card__flip {
  transform: rotateY(180deg);
}

.card--flip-no-transition .card__flip {
  transition: none !important;
}

.card__indicator {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  border-radius: var(--circle);
  pointer-events: auto;
  cursor: pointer;
  backface-visibility: hidden;
  z-index: 2;
}

:where(.card__control-slot, .card .row:first-child .card-select, .card__control-slot .card-select) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__control-slot {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-left: 8px;
}

.card__indicator--backorder {
  background: rgba(214, 92, 104, 0.9);
  box-shadow: 0 0 0 2px rgba(214, 92, 104, 0.2);
  animation: backorder-pulse 1.8s ease-in-out infinite;
  will-change: transform, box-shadow, opacity;
}

@keyframes backorder-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(214, 92, 104, 0.2);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(214, 92, 104, 0.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(214, 92, 104, 0.2);
    opacity: 0.9;
  }
}

.card:hover .card__face {
  border: 1px solid var(--accent-color);
  box-shadow: 2px 2px 4px rgba(15, 23, 42, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .card__flip {
    transition-duration: 0.25s;
  }

  .card__indicator--backorder {
    animation: none;
  }
}

.card-title {
  margin-bottom: clamp(0.6em, 1.8vw, 0.96em);
  color: var(--text-color-active);
}

.card .row:first-child .card-title {
  flex: 1 1 auto;
  min-width: 0;
}

.card .row:first-child .card-select {
  flex: 0 0 auto;
  margin-left: 0;
}

.card .row:first-child .card-select input[type="checkbox"] {
  flex: 0 0 auto;
}

.card__control-slot .card-select {
  width: 100%;
  height: 100%;
}

.card__control-slot .card__indicator {
  position: absolute;
}

.card__control-slot .card-select:not(.hidden) + .card__indicator {
  display: none;
}
.card .title { font-weight:700 }
.card .row {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  gap: 1.94px;
}
.card-label {
  font-weight: 500;
  font-size: var(--text-fs);
  margin-right: 2.4rem;
}
.card-text {
  color: var(--text-color);
  font-weight: 700;
}
.card-title,
.title,
.card-text.q-fill {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
  font-weight: 700;

}
.card-title:hover,
.title:hover,
.card-text.q-fill:hover {
  text-decoration: underline;
  opacity: .9;
}

.card-back__note {
  flex: 1 1 auto; 
  min-height: 60px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  color: var(--text-color);
  font: inherit;
  font-size: clamp(0.85rem, 1.8vw, 0.96rem);
  padding: 0.65rem 0.8rem;
  resize: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.card-back__note:focus {
  outline: none;
  border: 2px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
  background: color-mix(in srgb, var(--panel-in) 80%, var(--soft) 20%);
}

.card-back__actions {
  margin-top: auto;              /* push this block to the bottom */
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (max-width: 900px) {      /* tweak breakpoint as needed */
  .card-back__actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.card-back__btn {
  border-radius: var(--radius-button);
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel-in) 70%, transparent);
  color: var(--text-color);
  font: inherit;
  font-weight: 600;
  padding: 0.55rem 0.9rem;
  font-size: clamp(0.82rem, 1.8vw, 0.95rem);
  cursor: pointer;
  transition:
    transform 0.25s cubic-bezier(0.2, 0.8, 0.25, 1),
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.card-back__btn:hover,
.card-back__btn:focus-visible {
  background-color: color-mix(in srgb, var(--accent-color) 45%, transparent);
  color: var(--button-acc);
}

.card-back__btn:focus-visible {
  outline: none;
  box-shadow:
    0 14px 30px rgba(15, 23, 42, 0.18),
    0 0 0 2px color-mix(in srgb, var(--accent-color) 45%, transparent);
}

.card-back__btn {
  background: color-mix(in srgb, var(--panel) 85%, transparent);
}

.card-back__btn--back {
  color: var(--muted);
}

.card-back__btn--busy {
  opacity: 0.6;
  pointer-events: none;
}

/* ============================== */
/* COMPACT                        */
/* ============================== */
.card--unique-compact {
  perspective: none;
}

.card--unique-compact .card__face {
  padding: 12px 16px;
  transition: padding .25s ease, box-shadow .25s ease;
}

.card--unique-compact:hover .card__face {
  padding: 9.7px 10px;
}

.card--unique-compact[data-expanded="true"] .card__face {
  padding: 12px 14px;
}

.card--unique-compact__toggle {
  cursor: pointer;
}

.card--unique-compact__toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent-color) 55%, transparent);
  outline-offset: 3px;
  border-radius: .55rem;
}

.card--unique-compact__row {
  display: grid;
  grid-template-columns: minmax(60px, 0.2fr) minmax(0, 1fr);
  align-items: center;
  column-gap: 0;
  transition: column-gap .3s ease;
}

.card--unique-compact:hover .card--unique-compact__row {
  column-gap: 7px;
}

.card--unique-compact__number,
.card--unique-compact__description {
  font-weight: 700;
  line-height: 1.25;
}

.card--unique-compact__number {
  justify-self: start;
  white-space: nowrap;
  color: color-mix(in hsl, var(--text) 60%, var(--accent-color) 40%);
  transition: color .3s ease-in-out, padding .3s ease;
}

.card--unique-compact__description {
  min-width: 0;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  text-align: left;
}

.card--unique-compact__details {
  margin-top: .55rem;
  padding-top: .5rem;
  border-top: 1px dashed color-mix(in srgb, var(--text) 26%, transparent);
  display: grid;
  gap: .25rem;
  animation: compactCardExpand .24s ease;
}

.card--unique-compact__details[hidden] {
  display: none !important;
}

.card--unique-compact__detail-row {
  display: flex;
  justify-content: space-between;
  gap: .4rem;
  font-size: .84rem;
}

.card--unique-compact__detail-label {
  color: color-mix(
    in hsl,
    color-mix(in hsl, var(--text) 70%, var(--accent-color) 30%) 80%,
    transparent 20%
  );
}

.card--unique-compact__detail-value {
  font-weight: 600;
  color: color-mix(in srgb, var(--accent-color) 35%, var(--text) 65%);
}

.card--unique-compact__detail-value--warehouse {
  text-align: right;
  color: color-mix(in hsl, var(--text) 60%, var(--accent-color) 40%);
  transition: padding .3s ease;
}

.card:hover .card--unique-compact__detail-value--warehouse,
.card:hover .card--unique-compact__number {
  border-radius: .6rem;
  padding: 0.12em 0.42em;
  border: 1px dashed currentColor;
  color: var(--accent-color);
  animation: uniqueCompactPulse 3s ease-in-out infinite;
}

.card:hover .card--unique-compact__detail-value--warehouse:hover,
.card:hover .card--unique-compact__number:hover {
  animation-play-state: paused;
  color: color-mix(in hsl, var(--text) 20%, var(--accent-color) 80%);
  background-color: color-mix(in hsl, var(--card) 95%, var(--text) 5%);
  border: 1px dashed currentColor;
  box-shadow: 2px 4px 4px rgba(15, 23, 42, 0.12);
}

@keyframes uniqueCompactPulse {
  0%, 100% {
    border: 1px dashed transparent;
  }
  50% {
    color: color-mix(in hsl, var(--text) 20%, var(--accent-color) 80%);
    background-color: color-mix(in hsl, var(--card) 95%, var(--text) 5%);
    border: 1px dashed currentColor;
    box-shadow: 2px 4px 4px rgba(15, 23, 42, 0.12);
  }
}

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

/* ===================================================================== */
/* Source: components/aops_checkbox.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_CHECKBOX.CSS              */
/* ============================== */


/* ============================== */
/* CHECKBOX                       */
/* ============================== */
.checkbox { transform:translateY(-.5px) }

.checkbox,
input[type="radio"].checkbox,
.small .input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-top: .42rem;
  width: 18px;
  height: 18px;
  border-radius: var(--control-radius);
  border: 1px solid var(--border-checkbox);
  background: var(--soft);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  transition: background 0.2s, border-color 0.2s;
}
.checkbox:hover,
input[type="radio"].checkbox:hover {
  border-color: var(--text);
}
.checkbox:checked,
input[type="radio"].checkbox:checked {
  background: var(--text);
  border: 1px solid var(--border-checkbox);
  position: relative;
}
.checkbox:checked::after,
input[type="radio"].checkbox:checked::after {
  content: "";
}

/* ============================== */
/* MOD: KEEP STYLE IN LI          */
/* ============================== */
.cols,
.cols li {
  list-style: none;
  margin: 0;
  padding-left: 0.1rem;
}

.cols .col-divider {
  margin: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  height: 0;
}

.col-toggle-label.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.col-toggle-label.is-disabled input {
  cursor: not-allowed;
}

/* ===================================================================== */
/* Source: components/aops_controls.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_CONTROLS.CSS              */
/* ============================== */


/* ============================== */
/* STICKY BAR                     */
/* ============================== */
.sticky-controls{
  position: sticky;
  flex: 0 0 auto;
  top: 0;
  z-index: 20; /* ensure above content; filter row sits under but visible */
  background: var(--panel);
  border-radius: var(--radius);
}
.controls{
  position: relative;
  display:flex;
  flex-wrap: nowrap;
  align-items:center;
  padding: var(--control-pad-y) var(--control-pad-x);
  border-bottom:1px solid var(--border);
  gap: var(--control-gap);
}

/* ============================== */
/* CONTROLS - INPUT               */
/* ============================== */
.controls input[type="search"],
.controls input[type="text"],
.controls input[type="number"],
.controls input:not([type]),
.controls select,
#pageSize {
  padding: var(--control-pad-y) var(--control-pad-x);
  border-radius: var(--radius-input);
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  font: var(--custom-font-input, var(--fs)) var(--ffs);
  outline: none;
  box-sizing: border-box;
  gap: var(--control-gap);
  -webkit-appearance: none;
}
#pageSize {
  padding: var(--min-input-pad);
  font: var(--custom-font-control, --fs) var(--ffss);
  text-align: center;
  user-select: none;
}
/* ============================== */
/* CONTROLS - SEARCH              */
/* ============================== */
.controls input[type="search"] {
  font-weight: 500;
  letter-spacing: 0.01rem;
  padding-left: calc(var(--control-pad-x) + 2.05rem);
  padding-right: calc(var(--control-pad-x) + 2.05rem);
}
.controls input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}
.controls input[type="search"]::-webkit-search-cancel-button:hover,
.controls input[type="search"]::-webkit-search-cancel-button:active {
  opacity: 0.9;
}
.controls input:hover[type="search"] {
  box-shadow: inset 0 0 0 0.15px var(--accent-color);
}
.controls input:focus[type="search"] {
  box-shadow: inset 0 0 0 0.15px var(--accent-color);
  background-color: var(--search-background);
}

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

/* ============================== */
/* CONTROLS - OTHER               */
/* ============================== */
.controls select {
  cursor: pointer;
}

.panel .controls #q,
.panel .controls #histSearch,
.panel .controls #analysisSelector, 
.panel .controls #logsSelector {
  flex: 1 1 auto;
  width: 100%;
  transition: flex-basis 200ms ease, max-width 200ms ease;
}

.panel .controls #q,
.panel .controls #histSearch {
  min-width: 9.5rem;
}

.panel .controls #analysisSelector,
.panel .controls #logsSelector {
  min-width: 0;
}

.search-box-shell {
  --search-shell-min: 9.5rem;
  --search-shell-max: 22rem;
  position: relative;
  flex: 1 1 auto;
  min-width: 9.5rem;
  overflow-y: visible;
}

body:not(.aops-workspace-mobile) .panel .controls #q {
  min-width: var(--search-shell-min, 9.5rem);
  max-width: 100%;
  transition: none;
}

.search-history-toggle {
  position: absolute;
  left: calc(var(--control-pad-x) * 0.45);
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--custom-radius-input, 50px);
  background: transparent;
  color: #8792a6;
  padding: 0;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.search-history-toggle svg {
  width: 1rem;
  height: 1rem;
}

.search-box-shell:hover .search-history-toggle,
.search-history-toggle:focus-visible {
  color: var(--text);
  background-color: color-mix(in oklab, var(--soft, #1f2634) 65%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-color) 35%, transparent);
}

.search-box-shell[data-history-open="true"] #searchHistoryToggle,
.search-box-shell[data-filter-open="true"] #searchOpsToggle {
  color: var(--text);
  background-color: color-mix(in oklab, var(--accent-color) 20%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-color) 65%, transparent);
}

.fval-mode-toggle.search-history-toggle {
  position: absolute;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--custom-radius-input, 50px);
  background: transparent;
  color: #8792a6;
  padding: 0;
  cursor: pointer;
  transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}
.fval-mode-toggle:hover {
  color: var(--text);
  background-color: color-mix(in oklab, var(--soft, #1f2634) 65%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-color) 35%, transparent);
}
.fval-mode-toggle:focus {
  color: var(--text);
  background-color: color-mix(in oklab, var(--accent-color) 20%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-color) 65%, transparent);  
}

.search-ops-toggle {
  left: auto;
  right: calc(var(--control-pad-x) * 0.45);
}

.controls button.btn-full {
  border-radius: var(--custom-radius-button, 50px);
  min-height: 45px;
  min-width: 45px;
}

.controls input.input-full,
.controls select.input-full {
  border-radius: var(--custom-radius-input, 50px);
  height: 45px;
  margin: .08rem 0;
}

/* ============================== */
/* CONTROLS - SORT/MENU           */
/* ============================== */
.sort-controls {
  position: relative;
}
.sort-menu {
  width: clamp(12rem, 32vw, 16rem);
  padding: 4px;
}
.sort-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sort-menu li label {
  width: 100%;
}
.sort-menu__divider {
  margin: 4px;
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--border, #4a4f58) 60%, transparent);
}
.sort-menu input[type="radio"]:not(.checkbox) {
  accent-color: var(--text);
}

/* ============================== */
/* FILTER ROW/OPERATOR            */
/* ============================== */
#filterRow {
  position: relative;
  z-index: 12;
}
#filterRow.ctrl-row.open {
  overflow: visible;
}
#fCol { flex: 1 1 34%; }
#fVal { flex: 1 1 50%; }
#fValWrap, #fOpWrap {
  position: relative;
  overflow: visible;
}
#fVal,
#fValCol {
  padding-right: 40px;
}
#fValModeMenu, #fOpMenu {
  top: calc(100% + 6px);
  z-index: 10020;
}
#fValModeMenu {
  left: auto;
  right: 0;
}
#fOpMenu {
  left: 0;
  right: auto;
}
#fCol, #fOp {
  color: var(--text);
  border: 1px solid var(--border);
  background: var(--input);
  white-space: nowrap;
}
#fCol:hover, #fOp:hover, #fOp:focus {
  background-color: var(--search-background);
}

/* ============================== */
/* CONTROLS - MOBILE WORKSPACE    */
/* ============================== */
.mobile-workspace-search {
  display: contents;
  padding: .4em 0 0;
}

.mobile-workspace-menu-toggle {
  display: none;
  width: var(--control-height, 52px);
  height: var(--control-height, 52px);
  border-radius: var(--custom-radius-button, var(--radius));
  border: 1px solid var(--border);
  background: var(--soft);
  color: var(--text);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 150ms ease, box-shadow 180ms ease;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}

.mobile-workspace-menu-toggle:hover,
.mobile-workspace-menu-toggle:focus {
  background-color: var(--search-background);
  box-shadow: inset 0 0 0 0.15px var(--accent-color);
}

.mobile-workspace-menu-toggle svg {
  width: 22px;
  height: 22px;
}

.mobile-workspace-menu-toggle .menu-line {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform 420ms cubic-bezier(0.32, 0.72, 0, 1), opacity 240ms ease;
  will-change: transform;
}

.mobile-workspace-menu-toggle[aria-expanded="true"] .menu-line--top {
  transform: translateY(4px) rotate(-45deg);
}

.mobile-workspace-menu-toggle[aria-expanded="true"] .menu-line--middle {
  opacity: 0;
  transform: scaleX(0);
}

.mobile-workspace-menu-toggle[aria-expanded="true"] .menu-line--bottom {
  transform: translateY(-4px) rotate(45deg);
}

.mobile-workspace-menu-toggle:active {
  transform: scale(0.98);
}

@media (max-width: 920px) and (min-width: 921px) {
  body:not(.aops-workspace-mobile) .panel .controls #q,
  body:not(.aops-workspace-mobile) .search-box-shell {
    min-width: 7.25rem;
    max-width: 14rem;
    width: clamp(7.25rem, 38vw, 14rem);
  }

  body:not(.aops-workspace-mobile) .search-box-shell #searchHistoryToggle {
    display: none;
  }

  body:not(.aops-workspace-mobile) .search-box-shell #q {
    padding-left: var(--control-pad-x);
    padding-right: calc(var(--control-pad-x) + 1.85rem);
  }

  body:not(.aops-workspace-mobile) .search-box-shell #searchOpsToggle {
    width: 1.75rem;
    height: 1.75rem;
    right: calc(var(--control-pad-x) * 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-workspace-menu-toggle .menu-line {
    transition-duration: 0ms;
  }
}

.mobile-workspace-drawer {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  transition: max-height 300ms ease, opacity 200ms ease, transform 240ms ease;
  margin: 0 var(--control-pad-x);
  pointer-events: none;
}

.mobile-workspace-drawer.is-open {
  max-height: 280px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-workspace-drawer__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 2px 10px;
}

.mobile-workspace-pill {
  height: 48px;
  border-radius: var(--custom-radius-button, 16px);
  border: 1px solid var(--border);
  background: var(--soft);
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 1px 1px 3px rgba(15, 23, 42, 0.12);
  transition: transform 150ms ease;
}

.mobile-workspace-pill:hover {
  box-shadow: 2px 2px 4px rgba(15, 23, 42, 0.12);
}

.mobile-workspace-pill:active {
  transform: scale(0.99);
  box-shadow: 1px 1px 1px rgba(15, 23, 42, 0.12);
}

.mobile-workspace-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mobile-workspace-calculator {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px var(--control-pad-x) 18px;
}

.mobile-workspace-calculator__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.mobile-workspace-calculator__grid .mobile-workspace-pill {
  height: 56px;
}

.mobile-workspace-calculator__divider {
  height: 1px;
  margin: 4px 6px 8px;
  border-radius: 999px;
  background: var(--border);
  opacity: 0.7;
}

.mobile-workspace-calculator__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

body.aops-workspace-mobile .controls.sticky-controls {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

body.aops-workspace-mobile .controls.sticky-controls > * {
  display: none !important;
}

body.aops-workspace-mobile .controls.sticky-controls .mobile-workspace-search {
  display: grid !important;
  grid-template-columns: 1fr var(--control-height, 52px);
  gap: 12px;
  width: 100%;
}

body.aops-workspace-mobile .controls.sticky-controls .search-box-shell {
  min-width: 0;
  max-width: none;
  width: 100%;
  flex: 1 1 auto;
  overflow: visible;
}

body.aops-workspace-mobile .controls.sticky-controls #q {
  display: block;
  margin: 0;
  width: 100%;
  min-width: 0;
  height: var(--control-height, 52px);
  flex: 1 1 auto;
  padding-left: calc(var(--control-pad-x) + 1.75rem);
  padding-right: calc(var(--control-pad-x) + 1.75rem);
  font-weight: 600;
  font-size: var(--fm);
  color: var(--text-on);
}

body.aops-workspace-mobile.mobile-workspace-calculator-active .controls.sticky-controls #q {
  text-align: right;
  font-variant-numeric: tabular-nums;
  min-height: var(--control-height, 52px);
}

body.aops-workspace-mobile.mobile-workspace-calculator-active .controls.sticky-controls .mobile-workspace-search {
  grid-template-columns: 1fr;
}

body.aops-workspace-mobile.mobile-workspace-calculator-active .controls.sticky-controls .mobile-workspace-menu-toggle {
  display: none !important;
}

body.aops-workspace-mobile.mobile-workspace-calculator-active .controls.sticky-controls #searchHistoryToggle,
body.aops-workspace-mobile.mobile-workspace-calculator-active .controls.sticky-controls #searchOpsToggle,
body.aops-workspace-mobile.mobile-workspace-calculator-active .controls.sticky-controls #dataBtn,
body.aops-workspace-mobile.mobile-workspace-calculator-active .controls.sticky-controls #dataToggleBtn,
body.aops-workspace-mobile.mobile-workspace-calculator-active .controls.sticky-controls #moreBtn {
  display: none !important;
}

body.aops-workspace-mobile .controls.sticky-controls .mobile-workspace-menu-toggle {
  display: inline-flex;
}

body.aops-workspace-mobile .controls.sticky-controls > #moreMenu.open {
  display: block !important;
}

body.aops-workspace-mobile .mobile-workspace-drawer.is-open {
  max-height: 280px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--border);
}

body.aops-workspace-mobile #filterRow,
body.aops-workspace-mobile #footer,
body.aops-workspace-mobile #tableWrap {
  display: none !important;
}

/* ============================== */
/* CONTROLS - MOBILE              */
/* ============================== */
@media (max-width: 920px) {
  /* -- Filters move into More menu -- */
  #filterToggleBtn {
    display: none !important;
  }

  /* -- Upgraded Mobile Controls --*/
  .panel .controls #q {
    flex: 1 1 100%;
  }
  .btn:not(.btn-chart, #fOp, #addFilter) {
    border-radius: var(--custom-radius-button, 50px);
    min-height: 45px;
    min-width: 45px;
  }
  .controls input[type="search"],
  .controls input[type="text"],
  .controls input[type="number"],
  .controls input:not([type]),
  .controls select {
    font-size: var(--custom-font-input, .98rem);
    border-radius: var(--custom-radius-input, 50px);
    height: 45px;
    margin: .15rem 0;
  }
  #pageSize {
    height: 36px;
  }
  #count {
    font-size: var(--custom-font-input, var(--fs)) !important;
  }
  .spacer {
    display: none;
  }
  
  /* -- Search Expands --*/
  body.aops-mobile-search-active #filterToggleBtn,
  body.aops-mobile-search-active #dataBtn {
    display: none !important;
  }

  /* -- Search Font */
  .controls input[type="search"] {
    font-weight: 600;
  }
  /* -- Filters Mobile UI --*/
  #fCol,
  #fOp,
  #fVal {
    min-width:2.5rem;
    max-height:2.4rem;
    border-radius: 0.8rem;
  }
  #addFilter {
    padding: 0.7rem;
    height: 2.4rem;
    width: 2.4rem;
  }
  #closeFilters {
    display: none !important;
  }
  /* Focus: Filter Value */
  body:has(#fVal:focus) #fCol,
  body:has(#fVal:focus) #fOp,
  body:has(#fVal:focus) .op-select {
    display: none !important;
  }
  /* Search Active: Full */
  body.aops-mobile-search-active .panel .controls #q {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* ===================================================================== */
/* Source: components/aops_chips.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_CHIPS.CSS                 */
/* ============================== */


/* ============================== */
/* CHIPS WRAP                     */
/* ============================== */
.chips,
.chips__filters {
  --wrap-gap: var(--control-gap);
  --wrap-align: center;
}

.chips {
  padding: calc(var(--control-pad-y) - .4rem) var(--control-pad-x) calc(var(--control-pad-y) - .13rem); /* adjusted for control bar extra whitespace */
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  user-select: none;
}

/* ============================== */
/* CHIP BASE                      */
/* ============================== */
.chip {
  --pill-gap: var(--text-gap);
  --pill-bg: var(--chip);
  --pill-color: var(--text);
  --pill-padding: 6px 12px;
  --pill-border: 1px solid var(--border);
  --pill-font-size: 12px;
  --pill-line-height: 1;
  min-height: 22px;
}

/* ============================== */
/* CHIPS BUTTON                   */
/* ============================== */
.chip button {
  color: var(--muted);
  font-size: 14px;
  padding: 0;
}

/* ============================== */
/* CHIP LOGIC                     */
/* ============================== */
.chip--logic {
  --pill-bg: var(--chip);
  --pill-border: 1px solid var(--border);
  --pill-color: var(--muted-strong, var(--muted));
  font-weight: 700;
  letter-spacing: 0.08em;
  pointer-events: auto;
}

.chip--logic-btn {
  --pill-bg: transparent;
  --pill-border: 1.4px dashed var(--border);
  --pill-color: var(--accent, var(--text));
  cursor: pointer;
  font-weight: 600;
  letter-spacing: 0.08em;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.chip--logic-btn:hover,
.chip--logic-btn:focus-visible {
  color: var(--text-strong, var(--text));
  border-color: var(--accent, var(--border-strong, var(--border)));
  background-color: var(--soft);
}

.chip--logic-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.chip--logic-btn .icon {
  width: 18px;
  height: 18px;
  color: var(--icon-brand-color);
}

.chip--logic-pending {
  border-style: dashed;
  color: var(--text-on);

}

/* ============================== */
/* CHIPS ELEMENTS                 */
/* ============================== */
.chip__remove {
  margin-left: 0.25em;
  padding-left: 2px;
}

.chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chip__remove .icon,
.chip__icon .icon {
  width: 16px;
  height: 16px;
  display: block;
}

.chip__label {
  font-weight: 600;
  letter-spacing: 0.08em;
}

@media (max-width: 720px) {
  .chip {
    --pill-padding: 4px 12px;
    --pill-font-size: 14px;
    min-height: 34px;
  }

  .chip button {
    width: 30px;
    height: 30px;
    padding: 1px;
    font-size: 12px;
    border-radius: 999px;
    touch-action: manipulation;
  }

  .chip__remove {
    margin-left: 0.45em;
    padding-left: 6px;
  }

  .chip__remove .icon {
    width: 22px;
    height: 22px;
    pointer-events: none;
  }

  .chip__icon .icon {
    width: 20px;
    height: 20px;
  }

  .chip--logic-btn {
    padding: 8px 14px;
    min-height: 34px;
    font-size: 14px;
  }

  .chip--logic-btn .icon {
    width: 22px;
    height: 22px;
  }
}

/* ===================================================================== */
/* Source: components/aops_dropzone.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_DROPZONE.CSS              */
/* ============================== */

/* ============================== */
/* DATA AREA (IN-PANEL)           */
/* ============================== */
#dataArea {
  position:relative;
  min-height:420px; 
}

/* ============================== */
/* DROPZONE                       */
/* ============================== */
.dropzone {
  position: absolute;
  inset: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 260px;           /* makes the empty state visible */
  gap: 12px;
  border: 2px dashed var(--border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), transparent);
  cursor: pointer;
  user-select: none;
  transition:
    border-color .15s ease,
    background .15s ease,
    transform .05s ease;
}

body[data-startup-intro] #dropzone,
.dropzone[data-startup-hidden] {
  display: none !important;
}

.dropzone[data-startup-prompts-hidden] [data-dropzone-prompt] {
  display: none !important;
}

.dropzone[data-processing] > :not(.dz-input) {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.dropzone:hover{border-color:var(--muted)}
.dropzone.dragover{border-color:var(--acc);background:rgba(110,168,254,.08);transform:translateY(-1px)}
.dz-icon{font-size:42px;opacity:.8}
.dz-title{
  font-weight: 600;
  font-size: 1.2em;
  font-color: var(--text);
}
.dz-sub{color:var(--muted)}
.dz-badge{margin-left:.4rem;padding:.15rem .45rem;border-radius:999px;border:1px solid var(--border);background:var(--soft);font-size:11px;color:var(--muted)}
.dz-input{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ===================================================================== */
/* Source: components/aops_edit.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_EDIT.CSS                  */
/* ============================== */


/* ============================== */
/* LINT                           */
/* ============================== */

#onlySelectedToggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.8rem;
  margin-right: 1rem;
  cursor: pointer;
}

#onlySelectedToggle .checkbox {
  margin: 0;
}

#editRow > .btn:last-of-type { margin-left: auto; }

/* ===================================================================== */
/* Source: components/aops_file_browser.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_FILE_BROWSER.CSS          */
/* ============================== */

#fileListArea {
  width: 100%;
}

#fileListArea.hidden {
  display: none;
}

#fileListArea .table-wrap {
  display: block;
}

.file-browser__toolbar {
  margin-bottom: 0.65rem;
}

.file-browser__name {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 600;
}

.file-browser__table tbody tr.is-dir:hover,
.file-browser__table tbody tr.is-file:hover {
  cursor: pointer;
}

.file-browser__table tbody tr.is-dir .file-browser__name::before {
  content: '📁';
}

.file-browser__table tbody tr.is-file .file-browser__name::before {
  content: '📄';
}

.file-browser__table tbody tr.is-dir .file-browser__name {
    color: color-mix(in hsl, var(--text) 50%, var(--accent-color) 50%);
    font-size: calc(var(--custom-font-body, var(--fxs)) + .05rem);
    letter-spacing: .5px;
}

/* ===================================================================== */
/* Source: components/aops_file_editor.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_FILE_EDITOR.CSS           */
/* ============================== */

.aops-file-editor-modal {
  --modal-w: 980px;
}

.aops-file-editor {
  display: flex;
  flex-direction: column;
  min-height: clamp(320px, 60vh, 620px);
}

.aops-file-editor__textarea {
  flex: 1 1 auto;
  min-height: clamp(320px, 60vh, 620px);
  border-radius: 10px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--panel-in, rgba(0, 0, 0, 0.2));
  color: var(--text, #e6e6e6);
  padding: 14px;
  font: 500 0.92rem/1.5 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  resize: none;
}

.aops-file-editor__textarea:focus {
  background: var(--search-background);
  outline: 2px solid color-mix(in oklab, var(--acc, #3b82f6) 55%, transparent);
  outline-offset: 2px;
}

.aops-file-editor__textarea:disabled {
  opacity: 0.7;
  cursor: progress;
}

/* ===================================================================== */
/* Source: components/aops_filters.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_FILTERS.CSS               */
/* ============================== */

/* LINT - REMOVE TIMED */

/* ===================================================================== */
/* Source: components/aops_icons.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_ICONS.CSS                 */
/* ============================== */


/* ============================== */
/* LOGO                           */
/* ============================== */
#logo {
  animation: spin 6s linear infinite;
}
#logo:hover {
  animation: spin 0.8s linear infinite;
}
#logo.spin-fast {
  animation: spin 0.5s linear infinite;
}

/* ============================== */
/* SVG ICON                       */
/* ============================== */
.svg-icon {
  will-change: transform, stroke;
  width: 64px;
  height: 64px;
  filter: var(--icon-color);
  margin: 0rem auto 1.5rem;
  transition: stroke 0.3s ease;
}
.svg-icon--stroke {
  stroke-width: 2;
  stroke: var(--text, #000);
  fill: none;
}
.svg-icon--fill {
  fill-width: 2;
  fill: var(--text, #000);
  stroke: none;
}

/* ============================== */
/* THEME ICON                     */
/* ============================== */
.theme-toggle-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
}
.theme-toggle-btn .theme-toggle-icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  background-color: var(--icon-brand-color);
  -webkit-mask-image: var(--theme-icon-src, url('../svg/sun.svg'));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: var(--theme-icon-src, url('../svg/sun.svg'));
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color 0.3s ease;
}

.theme-toggle-btn .theme-toggle-icon--custom {
  background-color: transparent;
  -webkit-mask-image: none;
  mask-image: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-brand-color);
}

.theme-toggle-btn .theme-toggle-icon--custom svg {
  width: 24px;
  height: 24px;
  stroke-width: 1.8;
  transition: transform 0.3s ease;
  transform-origin: center;
  display: block;
}

.theme-toggle-btn:hover .theme-toggle-icon--custom svg {
  transform: scale(1.25);
}

.theme-toggle-menu {
  position: fixed;
  z-index: 9998;
  width: max-content;
  min-width: 160px;
  max-width: min(220px, calc(100vw - 16px));
  max-height: 78.5vh;
  overflow-y: auto;
  padding: 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-menu);
  background: var(--bg-menu);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
}

.theme-toggle-menu__item {
  display: block;
  width: 100%;
  border: 0;
  border-radius: calc(var(--radius-menu) - 6px);
  margin: .2rem 0;
  gap: var(--em-gap);
  padding: var(--em-pad);
  background: transparent;
  color: inherit;
  text-align: left;
  white-space: nowrap;
  font: inherit;
  font-size: var(--menu-fs);
  letter-spacing: .5px;
  cursor: pointer;
}

.theme-toggle-menu__item:hover,
.theme-toggle-menu__item:focus-visible {
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  outline: none;
}

.theme-toggle-menu__item[aria-checked="true"] {
  background: color-mix(in srgb, var(--accent-color) 32%, transparent);
  color: var(--text);
  font-weight: 600;
}

/* ============================== */
/* ANIMATION                      */
/* ============================== */
@keyframes spin {
to { transform: rotate(360deg); }
}

/* ===================================================================== */
/* Source: components/aops_kpi.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_KPI.CSS                   */
/* ============================== */

/* ============================== */
/* KPI LAYOUT                     */
/* ============================== */
.kpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 20px;
}

.kpi {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height: clamp(0.01rem, 10vw, 4rem);
  padding: .6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel-in, rgba(255,255,255,0.04));
  box-shadow: var(--elev-1, 0 1px 2px rgba(0,0,0,.14));
  text-align:center;
  transition: background .3s ease;
  user-select: none;
}

.kpi-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
}

.kpi-value {
  font-weight:600;
  font-size: clamp(.9rem, 1.2vw + .2rem, 1.1rem);
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-label {
  opacity: .8;
  font-size: clamp(.75rem, 1.2vw + .02rem, 0.9rem);
}

.kpi-label .sub{
  opacity: .9;
  font-size: clamp(.75rem, 1.2vw + .02rem, 0.9rem);
  margin-left: .5em;
}

.kpi--action {
  cursor: pointer;
}

.kpi--action:hover {
  background: color-mix(in srgb, var(--panel-in) 95%, var(--accent-color) 5%);
  box-shadow: var(--elev-1, 0 3px 4px rgba(0,0,0,.14));
  -webkit-transform: translateY(-0.05rem);
  transform: translateY(-0.05rem);
}



/* ===================================================================== */
/* Source: components/aops_loader.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_LOADER.CSS                */
/* ============================== */


/* ============================== */
/* LOADER / OVERLAY               */
/* ============================== */
.data-loader.hidden { display: none !important; }

.data-loader {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 14px;
  background: var(--overlay-bg);
  backdrop-filter: blur(2px);
  border: 1px dashed var(--border);
  z-index: 5; /* above table/cards, below sticky controls */
}

.data-loader .msg {
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .2px;
}

.data-loader .detail {
  color: var(--muted);
  font-weight: 500;
  letter-spacing: .2px;
}

.data-loader .spinner {
  --loader-cube-size: clamp(2rem, 2vw + 1.5rem, 4rem);
  --loader-cube-face: calc(var(--loader-cube-size) / 2);
  --loader-cube-color: var(--icon-brand-color, var(--acc));
  --loader-cube-alpha: color-mix(in srgb, var(--loader-cube-color) 12%, transparent);

  position: relative;
  display: grid;
  place-items: center;
  width: var(--loader-cube-size);
  height: var(--loader-cube-size);
  margin-bottom: 22px;
}

.data-loader .spinner-ring {
  width: clamp(1.8rem, 2vw + 1.2rem, 3rem);
  height: clamp(1.8rem, 2vw + 1.2rem, 3rem);
  border-radius: 50%;
  border: clamp(.2rem, 2vw + .1rem, .4rem) solid var(--border);
  border-top-color: var(--acc);
  animation: aops-spin 0.9s linear infinite;
}

.data-loader .spinner-cube {
  position: relative;
  width: var(--loader-cube-size);
  height: var(--loader-cube-size);
  transform-style: preserve-3d;
  animation: aops-cube-rotate 2s infinite linear;
}

.data-loader .spinner-cube div {
  position: absolute;
  inset: 0;
  display: block;
  height: 100%;
  width: 100%;
  border: 3px solid var(--loader-cube-color);
  background-color: var(--loader-cube-alpha);
}

.data-loader .spinner-cube div:nth-of-type(1) { transform: translateZ(calc(var(--loader-cube-face) * -1)) rotateY(180deg); }
.data-loader .spinner-cube div:nth-of-type(2) { transform: rotateY(-270deg) translateX(50%); transform-origin: top right; }
.data-loader .spinner-cube div:nth-of-type(3) { transform: rotateY(270deg) translateX(-50%); transform-origin: center left; }
.data-loader .spinner-cube div:nth-of-type(4) { transform: rotateX(90deg) translateY(-50%); transform-origin: top center; }
.data-loader .spinner-cube div:nth-of-type(5) { transform: rotateX(-90deg) translateY(50%); transform-origin: bottom center; }
.data-loader .spinner-cube div:nth-of-type(6) { transform: translateZ(var(--loader-cube-face)); }

.data-loader[data-style="cube"] .spinner {
  width: var(--loader-cube-size);
  height: var(--loader-cube-size);
}

.data-loader[data-style="cube"] .spinner-ring {
  display: none;
}

.data-loader:not([data-style="cube"]) .spinner-cube {
  display: none;
}

#dataArea.dnd-active::after {
  content: "Drop file to replace data";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: .2px;
  background: rgba(0,0,0,.25);
  border: 2px dashed var(--acc);
  border-radius: 14px;
  pointer-events: none; /* don't block clicks */
}

/* ============================== */
/* ANIMATION                      */
/* ============================== */
@keyframes aops-spin {
  to { transform: rotate(360deg); }
}

@keyframes aops-cube-rotate {
  0% { transform: rotate(0deg) rotateX(0deg) rotateY(0deg); }
  50% { transform: rotate(180deg) rotateX(180deg) rotateY(180deg); }
  100% { transform: rotate(360deg) rotateX(360deg) rotateY(360deg); }
}

/* ===================================================================== */
/* Source: components/aops_modals.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_MODALS.CSS                */
/* ============================== */

@property --modal-slide-offset {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --modal-pad-top {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --modal-pad-bottom {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@property --modal-shift-duration {
  syntax: '<time>';
  inherits: true;
  initial-value: 160ms;
}

@property --slider-fill {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

:root {
  /* Canonical modal token mapping for legacy modal-overlay surfaces. */
  --z-modal: 2000;
  --modal-margin: clamp(16px, 4vw, 48px);
  --modal-pad-top: 0px;
  --modal-pad-x: 0px;
  --modal-pad-bottom: 0px;
  --modal-w: 520px;
  --modal-w-s: 380px;
  --modal-w-m: 540px;
  --modal-w-l: 920px;
  --modal-w-xl: 1080px;
  --modal-backdrop: rgba(0, 0, 0, 0.55);
  --modal-backdrop-blur: none;
  --modal-shift-duration: 160ms;
  --startup-intro-duration: 1.1s;
  --startup-intro-ease: cubic-bezier(0.24, 0.82, 0.22, 1);
  --startup-intro-bloom-duration: 900ms;
  --startup-dialog-duration: 520ms;
  --startup-dialog-ease: cubic-bezier(0.3, 0.9, 0.32, 1);
  --startup-backdrop-blur: 2px;
  --startup-backdrop-tint: color-mix(in srgb, var(--overlay-bg) 75%, transparent);
}

/* Ensure custom modal elements don't flash unstyled content before the
   web component definition hydrates on startup. */
aops-modal:not(:defined) {
  display: none;
}

/* ============================== */
/* MODAL OVERLAY                  */
/* ============================== */
.modal_overlay,
.startup-overlay,
.group-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-items: center;
  justify-content: center;
  padding: var(--modal-margin);
  z-index: var(--z-modal);
}

.modal-overlay.is-open,
.startup-overlay.is-open,
.group-overlay.is-open {
  display: flex;
}

body.has-modal-overlay,
body.has-startup-overlay,
body.has-group-overlay{
  overflow: hidden;
}

/* ============================== */
/* STARTUP OVERLAY                */
/* ============================== */
.startup-overlay__backdrop {
  --modal-backdrop: var(--startup-backdrop-tint, var(--overlay-bg));
  --modal-backdrop-blur: blur(var(--startup-backdrop-blur));
  position: absolute;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: var(--modal-backdrop-blur);
  -webkit-backdrop-filter: var(--modal-backdrop-blur);
}

.startup-overlay__dialog {
  position: relative;
  max-height: 90vh;
  width: min(560px, 100%);
  padding: clamp(16px, 3vw, 32px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: clamp(16px, 3vw, 24px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 32px);
  color: var(--text);
  will-change: transform, opacity, filter;
  transform-origin: center top;
  animation: none;
}

.startup-overlay.is-open .startup-overlay__dialog {
  animation: startupDialogIn var(--startup-dialog-duration) var(--startup-dialog-ease) both;
}

.startup-overlay.is-intro-transition {
  pointer-events: none;
}

.startup-overlay[data-startup-transition='intro'],
.startup-overlay[data-startup-transition='intro-active'] {
  display: flex;
}

.startup-overlay[data-startup-transition='intro'] .startup-overlay__dialog {
  animation: none;
  transform-origin: center;
}

.startup-overlay[data-startup-transition='intro'] .startup-overlay__backdrop {
  animation: startupOverlayFade 420ms ease forwards;
}

.startup-overlay[data-startup-transition='intro-active'] .startup-overlay__dialog {
  animation: startupDialogHandoff 680ms cubic-bezier(0.24, 0.82, 0.22, 1) forwards;
}

.modal-overlay__header,
.startup-overlay__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 18px);
}

.startup-overlay__heading-actions {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 12px);
}

.startup-overlay__heading-primary {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  flex: 1;
  min-width: 0;
}

.startup-overlay__theme-toggle {
  --icon-button-size: 36px;
  padding: 0;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--border);
  transition: background 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}

.startup-overlay__theme-toggle[hidden] {
  display: none;
}

.startup-overlay__theme-toggle:hover {
  box-shadow: inset 0 0 0 1px var(--accent-color);
}

.startup-overlay__theme-toggle:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--accent-color);
}

.startup-overlay__heading-primary .startup-overlay__text {
  flex: 1;
  min-width: 0;
}

.startup-overlay__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(44px, 8vw, 60px);
  height: clamp(44px, 8vw, 60px);
  border-radius: 16px;
  background: var(--card);
  color: var(--accent-color);
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border);
}

/* ============================== */
/* DATASET UPDATE SUMMARY         */
/* ============================== */
.dataset-update__summary-msg {
  font-size: 0.95rem;
  line-height: 1.55;
}

.dataset-update__unmatched-wrap { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }

.dataset-update__unmatched-note { font-size: 0.9rem; color: var(--text-muted); }

.dataset-update__unmatched-actions { display: flex; justify-content: flex-end; }

.dataset-update__add-all-btn { gap: 6px; font-size: 0.85rem; }

.dataset-update__unmatched-table-wrap { overflow: visible; border: none; border-radius: 0; background: transparent; }

.dataset-update__unmatched-table { width: 100%; border-collapse: collapse; font-size: inherit; min-width: 0; }

.dataset-update__unmatched-table th,
.dataset-update__unmatched-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border-subtle, var(--border)); background: transparent; }

.dataset-update__unmatched-table th { font-weight: 600; color: var(--text-strong, var(--text)); cursor: pointer; }

.dataset-update__unmatched-table tbody tr:last-child td { border-bottom: none; }

.dataset-update__unmatched-table tbody tr[data-added='true'] { background: color-mix(in srgb, var(--accent-color) 12%, transparent); }

.dataset-update__action-header,
.dataset-update__action-cell { text-align: right; white-space: nowrap; }

.dataset-update__add-btn { font-size: 0.78rem; padding: 4px 10px; line-height: 1.2; }

.dataset-compare-summary__empty-text,
.dataset-compare-summary__unknown-row {
  opacity: 0.7;
}

.dataset-compare-summary__preview-wrap {
  max-height: 320px;
  overflow: auto;
  margin-top: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  border-radius: 8px;
}

.dataset-compare-summary__preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.dataset-compare-summary__preview-header-row {
  background: var(--panel-muted, rgba(255, 255, 255, 0.04));
}

.dataset-compare-summary__preview-header,
.dataset-compare-summary__preview-cell {
  text-align: left;
  padding: 6px 8px;
}

.dataset-compare-summary__preview-header {
  border-bottom: 1px solid var(--border, rgba(255, 255, 255, 0.14));
}

.dataset-compare-summary__preview-cell {
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  vertical-align: top;
}

.dataset-compare-summary__helper-note {
  margin-top: 8px;
  font-size: 0.85rem;
  opacity: 0.75;
}

.dataset-compare-summary__missing-block {
  margin-top: 12px;
}

.dataset-compare-summary__missing-list {
  margin: 6px 0 0;
  padding: 0 0 0 20px;
  max-height: 200px;
  overflow: auto;
}

/* ============================== */
/* RECALL LIST MODAL              */
/* ============================== */
.recall-modal {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recall-modal__summary {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklab, var(--soft) 92%, transparent);
}

@media (min-width: 600px) {
  .recall-modal__summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.recall-modal__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.recall-modal__label {
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.recall-modal__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.recall-modal__textarea-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
}

.recall-modal__textarea {
  min-height: 100px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--panel) 96%, transparent);
  color: var(--text);
  resize: unset;
  line-height: 1.45;
  font-size: 0.95rem;
}

.recall-modal__textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent-color) 70%, transparent);
}

.recall-modal__hint {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.recall-modal__error {
  min-height: 1.1rem;
  font-size: 0.82rem;
  color: var(--danger, #ef4444);
}

.recall-details__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.recall-details__meta strong {
  color: var(--text);
}

.recall-details__table-wrap {
  max-height: clamp(200px, 45vh, 360px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in oklab, var(--soft) 94%, transparent);
}

.recall-details__table {
  width: 100%;
  border-collapse: collapse;
}

.recall-details__table th,
.recall-details__table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
  text-align: left;
}

.recall-details__table th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.recall-details__table tbody tr:last-child td {
  border-bottom: none;
}

.dataset-update__add-btn.is-added {
  color: var(--text-muted);
  pointer-events: none;
}

.dataset-update__empty-value {
  color: var(--text-muted);
  font-style: italic;
}



.startup-overlay__text h2 {
  margin: 0;
  font-size: clamp(1rem, 2vw + .5rem, 1.6rem);
  font-weight: 600;
  color: var(--text-color);
}

.startup-overlay__text p {
  margin: 4px 0 0;
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  color: var(--muted);
}

.startup-overlay__steps {
  display: block;
}

.startup-overlay__step {
  display: none;
}

.startup-overlay__step.is-active {
  display: block;
}

.startup-overlay__back-btn {
  appearance: none;
  border: none;
  border-radius: var(--circle);
  background: var(--soft);
  color: var(--muted);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.startup-overlay__back-btn[hidden] {
  display: none;
}

.startup-overlay__back-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.startup-overlay__back-btn:hover,
.startup-overlay__back-btn:focus-visible {
  background: color-mix(in oklab, var(--soft) 65%, white);
  color: var(--text-color);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 25%, transparent);
}


.startup-overlay__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  grid-template-rows: repeat(2, auto); /* optional */
  gap: clamp(16px, 3vw, 24px);
  
}

.startup-overlay__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.5vw, 18px);
  padding: 20px;
  aspect-ratio: 1 / 1;
  border-radius: clamp(18px, 2.8vw, 28px);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text-color);
  font-size: clamp(0.9rem, 2.8vw, 1.1rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
}

.startup-overlay__tile.is-selected {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
}

.startup-overlay__tile.is-selected .startup-overlay__tile-icon {
  color: var(--accent-color);
}

.startup-overlay__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 12vw, 72px);
  height: clamp(48px, 12vw, 72px);
  color: var(--text-color);
}

.startup-overlay__tile-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.startup-overlay__tile:focus-visible {
  outline: 3px solid var(--accent-color);
  outline-offset: 4px;
}

.startup-overlay__tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.18);
  border-color: var(--accent-color);
}

.startup-overlay__tile:active {
  transform: translateY(0);
  box-shadow: none;
}

.startup-overlay__tile-label {
  text-align: center;
}


.startup-overlay::after {
  content: none;
}

body[data-startup-intro] .wrap {
  position: relative;
  isolation: isolate;
  transform-origin: center 12vh;
  will-change: transform, opacity, filter;
}

body[data-startup-intro='pending'] .wrap {
  opacity: 0;
  transform: perspective(1700px) rotateX(18deg) scale3d(0.68, 0.68, 1) translateY(4vh);
  filter: saturate(0.9) blur(12px);
}

body[data-startup-intro='animating'] .wrap {
  animation: startupWorkspaceExpand var(--startup-intro-duration) var(--startup-intro-ease) forwards;
}

body[data-startup-intro] .panel {
  position: relative;
  isolation: isolate;
}

body[data-startup-intro] .panel::after {
  content: '';
  position: absolute;
  inset: clamp(-12px, -2vw, -20px);
  border-radius: clamp(18px, 3vw, 26px);
  background: radial-gradient(circle at 50% 15%, color-mix(in srgb, var(--accent-color) 35%, transparent) 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  filter: blur(16px);
  transform: scale(0.8) translateY(12%);
  will-change: transform, opacity, filter;
  z-index: -1;
}

body[data-startup-intro='pending'] .panel {
  opacity: 1;
  transform: none;
  filter: none;
}

body[data-startup-intro='pending'] .panel .sticky-controls,
body[data-startup-intro='pending'] .panel .ctrl-row,
body[data-startup-intro='pending'] .panel .chips,
body[data-startup-intro='pending'] .panel .content-area,
body[data-startup-intro='pending'] .panel #footer {
  opacity: 0;
}

body[data-startup-intro='animating'] .panel::after {
  animation: startupWorkspaceBloom var(--startup-intro-bloom-duration) ease-out forwards 90ms;
}

body[data-startup-intro='animating'] .panel .sticky-controls {
  animation: startupControlsReveal 420ms cubic-bezier(0.21, 0.88, 0.4, 1) forwards 120ms;
  will-change: transform, opacity;
}

body[data-startup-intro='animating'] .panel .ctrl-row,
body[data-startup-intro='animating'] .panel .chips {
  animation: startupControlsReveal 420ms cubic-bezier(0.21, 0.88, 0.4, 1) forwards 220ms;
  will-change: transform, opacity;
}

body[data-startup-intro='animating'] .panel .content-area {
  animation: startupContentUnfold 720ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards 180ms;
  will-change: transform, opacity;
}

body[data-startup-intro='animating'] .panel #footer {
  animation: startupFooterLift 520ms cubic-bezier(0.24, 0.82, 0.22, 1) forwards 260ms;
  will-change: transform, opacity;
}

body[data-startup-intro='animating'] .panel .table-wrap,
body[data-startup-intro='animating'] .panel .card-grid {
  animation: startupTableReveal 680ms cubic-bezier(0.25, 0.8, 0.25, 1) forwards 260ms;
  will-change: transform, opacity, filter;
}

@keyframes startupOverlayFade {
  0% {
    opacity: 1;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
  }
  100% {
    opacity: 0;
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
  }
}

@keyframes startupDialogHandoff {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) saturate(1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border-radius: clamp(16px, 3vw, 24px);
  }
  32% {
    transform: translate3d(0, -12px, 0) scale(0.94);
    filter: blur(3px) saturate(1.08);
  }
  68% {
    transform: perspective(1500px) rotateX(10deg) scale3d(0.8, 0.8, 1) translate3d(0, -6vh, 0);
    filter: blur(8px) saturate(1.12);
  }
  100% {
    opacity: 0;
    transform: perspective(1500px) rotateX(18deg) scale3d(0.68, 0.68, 1) translate3d(0, -14vh, 0);
    filter: blur(12px) saturate(1.16);
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.35);
    border-radius: clamp(12px, 2vw, 18px);
  }
}

@keyframes startupDialogIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.92);
    filter: blur(10px);
  }
  55% {
    opacity: 1;
    transform: translate3d(0, -6px, 0) scale(1.02);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes startupWorkspaceExpand {
  0% {
    opacity: 0;
    transform: perspective(1600px) rotateX(14deg) scale3d(0.76, 0.76, 1);
    filter: saturate(0.86) blur(9px);
  }
  45% {
    opacity: 1;
    transform: perspective(1400px) rotateX(4deg) scale3d(1.02, 1.02, 1);
    filter: blur(3px);
  }
  72% {
    transform: perspective(1200px) rotateX(1deg) scale3d(0.995, 0.995, 1);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) rotateX(0deg) scale3d(1, 1, 1);
    filter: blur(0);
  }
}

@keyframes startupWorkspaceBloom {
  0% {
    opacity: 0.05;
    transform: scale(0.85) translateY(12%);
    filter: blur(16px) saturate(1.06);
  }
  45% {
    opacity: 0.5;
    transform: scale(1.05) translateY(-6%);
    filter: blur(9px) saturate(1.1);
  }
  100% {
    opacity: 0;
    transform: scale(1.18) translateY(-14%);
    filter: blur(18px) saturate(1);
  }
}

@keyframes startupControlsReveal {
  0% {
    opacity: 0;
    transform: translateY(-18px) scaleY(0.88);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: blur(0);
  }
}

@keyframes startupContentUnfold {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(18px);
    filter: blur(7px);
  }
  60% {
    opacity: 1;
    transform: scale(1.02) translateY(-6px);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
  }
}

@keyframes startupFooterLift {
  0% {
    opacity: 0;
    transform: translateY(22px) scaleY(0.9);
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scaleY(1);
    filter: blur(0);
  }
}

@keyframes startupTableReveal {
  0% {
    opacity: 0;
    transform: scale3d(0.82, 0.9, 1);
    filter: blur(9px);
  }
  55% {
    opacity: 1;
    transform: scale3d(1.03, 1.02, 1);
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .startup-overlay__dialog {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }

  .startup-overlay[data-startup-transition] .startup-overlay__backdrop,
  .startup-overlay[data-startup-transition] .startup-overlay__dialog {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  body[data-startup-intro] .wrap,
  body[data-startup-intro] .panel,
  body[data-startup-intro] .panel::after,
  body[data-startup-intro] .panel .sticky-controls,
  body[data-startup-intro] .panel .ctrl-row,
  body[data-startup-intro] .panel .chips,
  body[data-startup-intro] .panel .content-area,
  body[data-startup-intro] .panel #footer,
  body[data-startup-intro] .panel .table-wrap,
  body[data-startup-intro] .panel .card-grid {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ============================== */
/* GROUP FILTER OVERLAY           */
/* ============================== */
.group-overlay__backdrop {
  --modal-backdrop: var(--overlay-bg);
  --modal-backdrop-blur: blur(3px);
  position: absolute;
  inset: 0;
  background: var(--modal-backdrop);
  backdrop-filter: var(--modal-backdrop-blur);
  -webkit-backdrop-filter: var(--modal-backdrop-blur);
}

.group-overlay__dialog {
  position: relative;
  width: min(720px, 100%);
  padding: clamp(18px, 3vw, 28px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: clamp(calc(var(--radius-modal) / 3), 3vw, var(--radius-modal));
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.5vw, 24px);
  color: var(--text);
  max-height: min(520px, 85vh);
  overflow: hidden;
}

.group-overlay__heading-text {
  display: grid;
  gap: 6px;
}

.group-overlay__heading-text h2 {
  margin: 0;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  font-weight: 600;
  color: var(--text-color);
}

.group-overlay__description {
  margin: 0;
  font-size: clamp(0.85rem, 2.2vw, 0.95rem);
  color: var(--muted);
}

.group-overlay__close {
  appearance: none;
  border: none;
  cursor: pointer;
}

.group-overlay__close--head-action {
  appearance: none;
  border: none;
  border-radius: var(--circle);
  background: var(--soft);
  color: var(--muted);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.group-overlay__close--head-action::before {
  content: 'x';
  font-size: 1.2rem;
  font-weight: 600;
}

.group-overlay__close--head-action:hover,
.group-overlay__close--head-action:focus-visible {
  background: color-mix(in oklab, var(--soft) 70%, white);
  color: var(--text);
  outline: none;
}

.group-overlay__header {
  display: flex;
  align-items: flex-start;
  gap: clamp(12px, 2vw, 18px);
}

.group-overlay__header > .group-overlay__close {
  margin-left: auto;
}

.group-overlay__content,
.shortcut-filter-modal__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable both-edges;
}

.group-overlay__grid {
  display: grid;
  padding: 0 0.4rem 1rem 0;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.group-overlay__tile {
  appearance: none;
  border: 1px solid var(--border);
  border-radius: clamp(12px, 2vw, 16px);
  background: var(--card);
  color: var(--text);
  min-height: 96px;
  padding: clamp(12px, 2vw, 16px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.group-overlay__tile:hover,
.group-overlay__tile:focus-visible,
.group-overlay__tile.is-selected {
  border-color: color-mix(in oklab, var(--border) 60%, var(--accent-color));
  background: color-mix(in oklab, var(--soft) 80%, var(--accent-color));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  transform: translateY(-2px);
  outline: none;
}

.group-overlay__tile:active {
  transform: translateY(0);
  box-shadow: none;
}

.group-overlay__tile-label {
  display: block;
  font-size: clamp(0.85rem, 2.2vw, 0.95rem);
  line-height: 1.35;
}

.group-overlay__empty {
  margin: 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--muted);
}

@media (max-width: 480px) {
  .group-overlay__dialog {
    gap: 16px;
  }

  .group-overlay__grid {
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  }

  .group-overlay__tile {
    min-height: 88px;
  }
}

/* ============================== */
/* PROMPT MODAL                   */
/* ============================== */
aops-modal.modal-prompt--mobile {
  --modal-pad-bottom: clamp(180px, 35svh, 360px);
  --modal-pad-top: 24px;
}

.modal-prompt__visually-hidden {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.modal-prompt__input-label {
  display: block;
  margin: 0 0 6px;
  opacity: 0.9;
}

.modal-prompt__input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font: 500 0.95rem/1 ui-sans-serif, system-ui;
}

.modal-confirm__body {
  display: grid;
  gap: 10px;
}

.modal-confirm__field {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
}

.session-login-form {
  display: grid;
  gap: 10px;
}

.session-login-form__field {
  align-items: flex-start;
  gap: clamp(1px, 1vw, 14px);
}

.session-login-form__label {
  flex: 0 0 92px;
  min-width: 92px;
  white-space: nowrap;
  line-height: 1.2;
  padding-top: 10px;
}

.session-login-form .modal-prompt__input {
  flex: 1 1 auto;
  min-width: 0;
}

.modal-confirm__select-label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  opacity: 0.9;
}

.modal-confirm__select {
  margin-bottom: 0;
  width: auto;
  min-width: 200px;
  max-width: 100%;
  flex: 1 1 260px;
  padding-right: 38px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5cee0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-origin: padding-box;
  background-size: 13px 13px;
}

.modal-confirm__message {
  margin: 6px 0 0;
  white-space: pre-line;
  font-size: 0.95rem;
  line-height: 1.5;
}

.modal-prompt__message {
  margin: 0;
  white-space: pre-line;
}

.modal-prompt__error {
  color: var(--danger, #ef4444);
  min-height: 1.2em;
  margin-top: 6px;
  font: 600 0.85rem/1 ui-sans-serif, system-ui;
}

.session-prompt__current-section {
  width: 100%;
  box-sizing: border-box;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border, rgba(255, 255, 255, 0.14));
  display: grid;
  gap: 8px;
  font-size: 0.85rem;
}
.session-prompt__subtitle {
  display: block;
  width: 100%;
  box-sizing: border-box;
}
.session-prompt__title-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.session-prompt__current-title {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #a9b0b7);
}

.session-prompt__current-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.session-prompt__current-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--circle);
  background: var(--soft, rgba(255, 255, 255, 0.08));
  color: var(--text, #e6e6e6);
}
.session-prompt__current-item--actionable { cursor: pointer; }
.session-prompt__current-item--selected { outline: 1px solid var(--accent-color, #557cff); background: color-mix(in srgb, var(--accent-color, #557cff) 20%, transparent); }
.session-prompt__premium-panel { margin-top: 8px; padding: 10px; border: 1px solid var(--border, rgba(255,255,255,.14)); border-radius: 12px; display: grid; gap: 8px; width: 100%; box-sizing: border-box; }
.session-prompt__premium-target,.session-prompt__premium-info,.session-prompt__premium-preview,.session-prompt__premium-note { margin: 0; font-size: .82rem; }
.session-prompt__premium-note { color: var(--muted,#a9b0b7); }
.session-prompt__premium-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.session-prompt__premium-status { font-size: .78rem; font-weight: 600; color: var(--muted, #a9b0b7); }

.session-prompt__current-id {
  font-weight: 600;
  letter-spacing: 0.01em;
}

.session-prompt__current-badge {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-color, #557cff);
}

#aopsSessionPremiumStatus {
  white-space: nowrap;
  font-weight: 500;
  color: color-mix(in hsl, var(--text) 90%, var(--accent-color) 10%); 
}

/* ============================== */
/* PUSH SAVED ITEMS MODAL         */
/* ============================== */
.session-push-modal {
  display: grid;
  gap: 12px;
  font: 14px/1.4 system-ui, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text, #e6e6e6);
}

.session-push-modal__label {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--muted, #a9b0b7);
}

.session-push-modal__dropdown {
  position: relative;
}

.session-push-modal__dropdown.is-disabled {
  opacity: 0.5;
}

.session-push-modal__dropdown-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  background: var(--soft, rgba(255, 255, 255, 0.06));
  color: var(--text, #e6e6e6);
  font: inherit;
  line-height: 1.35;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  position: relative;
  justify-content: space-between;
}

.session-push-modal__dropdown-toggle::after {
  content: '\25BE';
  font-size: 0.8rem;
  opacity: 0.8;
  margin-left: auto;
}

.session-push-modal__dropdown.is-open .session-push-modal__dropdown-toggle,
.session-push-modal__dropdown-toggle:focus {
  outline: none;
  border-color: var(--accent-color, #557cff);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent-color, #557cff) 35%, transparent);
}

.session-push-modal__dropdown.is-open .session-push-modal__dropdown-toggle {
  background: color-mix(in oklab, var(--accent-color, #557cff) 10%, transparent);
}

.session-push-modal__dropdown-toggle:disabled {
  cursor: not-allowed;
}

.session-push-modal__dropdown-menu {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  max-height: min(240px, 45vh);
  overflow-y: auto;
  padding: 8px;
  border-radius: 12px;
  background: var(--panel, rgba(17, 17, 17, 0.96));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.45);
  z-index: 15;
}

.session-push-modal__dropdown.is-open .session-push-modal__dropdown-menu {
  display: grid;
  gap: 6px;
}

.session-push-modal__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
  color: var(--text, #e6e6e6);
}

.session-push-modal__option:hover {
  background: color-mix(in oklab, var(--accent-color, #557cff) 18%, transparent);
}

.session-push-modal__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-color, #557cff);
}

.session-push-modal__chips {
  --wrap-gap: 8px;
  --wrap-align: stretch;
}

.session-push-modal__chips:empty {
  display: none;
}

.session-push-modal__chips:not(:empty) {
  margin-top: 10px;
}

.session-push-modal__chips-empty {
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted, #a9b0b7);
}

.session-push-modal__chip {
  --pill-padding: 4px 10px;
  --pill-bg: var(--soft, rgba(255, 255, 255, 0.08));
  --pill-border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  --pill-font-size: 0.82rem;
}

.session-push-modal__chip-remove {
  padding: 0;
  color: inherit;
  font-size: 0.9rem;
}

.session-push-modal__chip-remove:hover,
.session-push-modal__chip-remove:focus {
  color: var(--accent-color, #557cff);
}

.session-push-modal__empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #a9b0b7);
}

/* ============================== */
/* ITEM INFO MODAL               */
/* ============================== */
.item-info-modal {
  display: grid;
  padding-top: clamp(4px, 1vw, 10px);
  gap: 12px;
  font-size: var(--text-fs);
  line-height: 1.45;
  font:14px/1.45 system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
  user-select: none; 
}

.item-info-modal__intro {
  margin: 0;
  color: var(--muted, #a9b0b7);
  font-size: clamp(0.84rem, 1.8vw, 0.96rem);
  line-height: 1.5;
  font-weight: 500;
}

.item-info-modal__preview {
  padding: 0;
  pointer-events: none;
}

.item-info-modal__status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  box-sizing: border-box;
  width: 100%;
  font-weight: 600;
  font-size: clamp(0.86rem, 1.7vw, 0.98rem);
  background: var(--panel, rgba(0, 0, 0, 0.35));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  color: var(--text, #e6e6e6);
  box-shadow: var(--elev-1, 0 1px 2px rgba(0, 0, 0, 0.14));
}

.item-info-modal__status--backorder {
  background: var(--table-row-match, rgba(214, 92, 104, 0.24));
  border: 1px solid rgba(214, 92, 104, 0.35);
  color: var(--text, #e6e6e6);
}

.item-info-modal__status--interactive {
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.item-info-modal__status--interactive:hover,
.item-info-modal__status--interactive:focus-visible {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12), var(--elev-2, 0 8px 22px rgba(0, 0, 0, 0.3));
  outline: none;
  transform: translateY(-1px);
}

.item-info-modal__status-dot {
  width: 12px;
  height: 12px;
  border-radius: var(--circle);
  background: rgba(214, 92, 104, 0.9);
  box-shadow: 0 0 0 2px rgba(214, 92, 104, 0.2);
  flex-shrink: 0;
  animation: backorder-pulse 1.8s ease-in-out infinite;
  will-change: transform, box-shadow, opacity;
}

@keyframes backorder-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(214, 92, 104, 0.2);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 6px rgba(214, 92, 104, 0.12);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(214, 92, 104, 0.2);
    opacity: 0.9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .item-info-modal__status-dot {
    animation: none;
  }
}

.item-info-modal__status-text {
  letter-spacing: 0.01em;
}

.item-info-modal__preview .card {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}

.item-info-modal__label {
  font-size: var(--text-fs);
  font-weight: 600;
  color: var(--muted, #a9b0b7);
}

.item-info-modal__note {
  width: 100%;
  min-height: 60px;
  box-sizing: border-box;
  resize: none;
  border-radius: 12px;
  padding: 12px;
  margin: clamp(0px, 1vw + 1px, 8px) 0 10px;
  font-size: var(--text-fs);
  font:14px/1.45 system-ui,Segoe UI,Roboto,Inter,Arial,sans-serif;
  line-height: 1.45;
  font-weight: 500;
  background: var(--soft);
  color: var(--text, #e6e6e6);
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
}

.item-info-modal__share-btn {
  background: var(--panel, rgba(255, 255, 255, 0.08));
  border-color: var(--border, rgba(255, 255, 255, 0.15));
  color: var(--text, #fff);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.item-info-modal__copy-btn {
  background: var(--soft, rgba(255, 255, 255, 0.06));
  border-color: var(--border-strong, rgba(255, 255, 255, 0.24));
  color: var(--text, #fff);
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}

.item-info-modal__share-btn:hover,
.item-info-modal__share-btn:focus-visible {
  background: var(--hover, rgba(255, 255, 255, 0.16));
  border-color: var(--text-muted, rgba(255, 255, 255, 0.4));
  color: var(--text, #fff);
}

.item-info-modal__copy-btn:hover,
.item-info-modal__copy-btn:focus-visible {
  background: var(--hover, rgba(255, 255, 255, 0.14));
  border-color: var(--text-muted, rgba(255, 255, 255, 0.4));
  color: var(--text, #fff);
}

.item-info-modal__share-btn:focus-visible {
  outline: 2px solid var(--accent, rgba(138, 180, 248, 0.9));
  outline-offset: 2px;
}

.item-info-modal__copy-btn:focus-visible {
  outline: 2px solid var(--accent, rgba(138, 180, 248, 0.9));
  outline-offset: 2px;
}

.item-info-modal__share-btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

.item-info-modal__copy-btn[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

.item-info-modal__send {
  margin-top: 4px;
  display: grid;
  gap: 8px;
}

.item-info-modal__send .session-push-modal__dropdown {
  align-self: start;
}

.item-info-modal__send .session-push-modal__label {
  margin: 0;
}

.item-info-modal__divider {
  width: 100%;
  height: 1px;
  background: var(--border, rgba(255, 255, 255, 0.16));
  border-radius: var(--circle);
  margin: 4px 0 8px;
}

.item-info-modal__send-intro {
  margin: 0;
  color: var(--muted, #a9b0b7);
  font-size: clamp(0.84rem, 1.8vw, 0.95rem);
  line-height: 1.5;
}

.item-info-modal__send-intro strong {
  color: var(--text, #e6e6e6);
  font-weight: 600;
}

.item-info-modal__note:focus {
  outline: 2px solid var(--soft);
  background: var(--bg-gradient)
}

@media (max-width: 480px) {
  .item-info-modal__preview {
    padding: 0;
  }
}

/* ============================== */
/* BULK EDIT MODAL                */
/* ============================== */
.bulk-edit-modal {
  display: grid;
  gap: 20px;
  font: 14px/1.45 system-ui, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text, #e6e6e6);
}

.bulk-edit-modal__section {
  display: grid;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(12, 18, 32, 0.4);
  background: color-mix(in srgb, var(--panel, rgba(0, 0, 0, 0.35)) 82%, rgba(255, 255, 255, 0.04));
  border: 1px solid rgba(255, 255, 255, 0.14);
  border: 1px solid color-mix(in srgb, var(--border, rgba(255, 255, 255, 0.16)) 80%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.bulk-edit-modal__section-body {
  display: grid;
  gap: 16px;
}

.bulk-edit-modal__rows {
  display: grid;
  gap: 12px;
}

.bulk-edit-modal__intro {
  margin: 0;
  color: var(--muted, #a9b0b7);
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  line-height: 1.5;
}

.bulk-edit-modal__row {
  display: grid;
  gap: 14px;
}

.bulk-edit-modal__field {
  display: grid;
  gap: 6px;
}

.bulk-edit-modal__field--compact {
  min-width: 140px;
}

.bulk-edit-modal__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted, #a9b0b7);
}

.bulk-edit-modal__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  background: var(--panel, rgba(0, 0, 0, 0.35));
  color: inherit;
  font: inherit;
  line-height: 1.35;
}

.bulk-edit-modal__input:focus {
  outline: 2px solid var(--muted, rgba(59, 130, 246, 0.65));
  outline-offset: 2px;
}

.bulk-edit-modal__value-toggle {
  align-self: end;
  justify-self: start;
  min-width: 44px;
  height: 42px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.bulk-edit-modal__value-toggle svg {
  width: 18px;
  height: 18px;
}

.bulk-edit-modal__options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: flex-end;
  justify-content: flex-start;
}

.bulk-edit-modal__adder {
  align-self: start;
  width: min(240px, 100%);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed var(--border, rgba(255, 255, 255, 0.2));
  background: var(--panel, rgba(0, 0, 0, 0.28));
  color: var(--muted, #9aa2ab);
  font: inherit;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.bulk-edit-modal__adder:hover {
  color: var(--text, #e6e6e6);
  border-color: color-mix(in srgb, var(--border, rgba(255, 255, 255, 0.2)) 70%, transparent);
}

.bulk-edit-modal__adder:focus-visible {
  outline: 2px solid var(--muted, rgba(59, 130, 246, 0.65));
  outline-offset: 2px;
}

.bulk-edit-modal__checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text, #e6e6e6);
  font-size: 0.85rem;
}

.bulk-edit-modal__note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted, #9aa2ab);
}

@media (min-width: 640px) {
  .bulk-edit-modal__row {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    align-items: end;
  }
}

@media (min-width: 768px) {
  .bulk-edit-modal__row--match {
    grid-template-columns: minmax(180px, 1fr) minmax(160px, 0.9fr) minmax(200px, 1.1fr) minmax(44px, auto) minmax(200px, 1fr);
  }

  .bulk-edit-modal__row--replace {
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) minmax(220px, 1.2fr);
  }

  .bulk-edit-modal__row--match .bulk-edit-modal__options {
    grid-column: auto;
    justify-self: start;
    align-self: end;
  }
}

/* ============================== */
/* REPLENISHMENT PLANNER MODAL    */
/* ============================== */
.replenishment-modal {
  display: grid;
  gap: 20px;
  font: 14px/1.45 system-ui, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color: var(--text, #e6e6e6);
}

.replenishment-modal__section {
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.12));
  background: var(--panel, rgba(0, 0, 0, 0.35));
}

.replenishment-modal__grid {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.replenishment-modal__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.replenishment-modal__cell--span {
  grid-column: span 2;
}

.replenishment-modal__label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--muted, #a0aab4);
}

.replenishment-modal__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #f3f4f6);
  word-break: break-word;
}

.replenishment-modal__demand {
  display: grid;
  gap: 20px;
  align-items: start;
}

@media (min-width: 760px) {
  .replenishment-modal__demand {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
}

.replenishment-modal__usage {
  display: grid;
  gap: 12px;
}

.replenishment-modal__usage-heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text, #e6e6e6);
}

.replenishment-modal__usage-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.replenishment-modal__usage-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-weight: 600;
  color: var(--text, #dfe3e8);
  font-size: 0.9rem;
}

.replenishment-modal__usage-note {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--muted, #9ca3af);
}

.replenishment-modal__controls {
  display: grid;
  gap: 16px;
}

.replenishment-modal__control {
  display: grid;
  gap: 6px;
}

.replenishment-modal__control-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted, #a0aab4);
}

.replenishment-modal__control-value {
  font-size: 0.85rem;
  color: var(--muted, #9ca3af);
}

.replenishment-modal__controls input[type="range"],
.replenishment-modal__controls select,
.custom-theme__range {
  width: 100%;
}

.replenishment-modal__controls input[type="range"],
.custom-theme__range {
  appearance: none;
  height: 24px;
  margin: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--circle);
  accent-color: var(--accent-color, #557cff);
  --slider-fill: 0%;
  --slider-track-bg: color-mix(in srgb, var(--soft, #f1f3f9) 70%, var(--panel, #ffffff) 30%);
  --slider-track-border: color-mix(in srgb, var(--border, rgba(0, 0, 0, 0.3)) 60%, transparent);
  --slider-thumb-bg: var(--panel, #ffffff);
  --slider-thumb-border: var(--accent-color, #557cff);
  --slider-thumb-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
  transition: outline-color 0.2s ease;
}

.replenishment-modal__controls input[type="range"]:focus-visible,
.custom-theme__range:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-color, #557cff) 45%, transparent);
  outline-offset: 2px;
}

.replenishment-modal__controls input[type="range"]::-webkit-slider-runnable-track,
.custom-theme__range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--circle);
  background:
    linear-gradient(var(--accent-color, #557cff), var(--accent-color, #557cff)) 0/var(--slider-fill, 0%) 100% no-repeat,
    var(--slider-track-bg);
  border: 1px solid var(--slider-track-border);
  transition: background-size 0.2s ease;
}

.replenishment-modal__controls input[type="range"]::-webkit-slider-thumb,
.custom-theme__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-thumb-bg);
  border: 2px solid var(--slider-thumb-border);
  box-shadow: var(--slider-thumb-shadow);
  margin-top: calc((6px - 16px) / 2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.replenishment-modal__controls input[type="range"]::-webkit-slider-thumb:hover,
.custom-theme__range::-webkit-slider-thumb:hover {
  transform: scale(1.05);
}

.replenishment-modal__controls input[type="range"]::-webkit-slider-thumb:active,
.custom-theme__range::-webkit-slider-thumb:active {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color, #557cff) 35%, transparent);
}

.replenishment-modal__controls input[type="range"]::-moz-range-track,
.custom-theme__range::-moz-range-track {
  height: 6px;
  border-radius: var(--circle);
  background: var(--slider-track-bg);
  border: 1px solid var(--slider-track-border);
}

.replenishment-modal__controls input[type="range"]::-moz-range-progress,
.custom-theme__range::-moz-range-progress {
  height: 6px;
  border-radius: var(--circle);
  background: var(--accent-color, #557cff);
}

.replenishment-modal__controls input[type="range"]::-moz-range-thumb,
.custom-theme__range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--slider-thumb-bg);
  border: 2px solid var(--slider-thumb-border);
  box-shadow: var(--slider-thumb-shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.replenishment-modal__controls input[type="range"]::-moz-range-thumb:hover,
.custom-theme__range::-moz-range-thumb:hover {
  transform: scale(1.05);
}

.replenishment-modal__controls input[type="range"]::-moz-range-thumb:active,
.custom-theme__range::-moz-range-thumb:active {
  transform: scale(1.1);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color, #557cff) 35%, transparent);
}

.replenishment-modal__controls input[type="range"]::-moz-focus-outer {
  border: 0;
}

.replenishment-modal__controls select {
  appearance: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(255, 255, 255, 0.16));
  background: var(--panel, rgba(0, 0, 0, 0.35));
  color: var(--text, #f3f4f6);
  font: inherit;
}

.replenishment-modal__controls select:focus {
  outline: 2px solid var(--muted, rgba(59, 130, 246, 0.65));
  outline-offset: 2px;
}

.replenishment-modal__preview {
  display: grid;
  gap: 16px;
}

.replenishment-modal__preview-metric {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 10px;
}

.replenishment-modal__preview-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted, #9ca3af);
}

.replenishment-modal__preview-value {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text, #f9fafb);
}

.replenishment-modal__preview-delta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted, #9ca3af);
}

.replenishment-modal__preview-detail {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted, #a0aab4);
  display: grid;
  gap: 8px;
}

@media (max-width: 600px) {
  .replenishment-modal__section {
    padding: 16px;
  }

  .replenishment-modal__cell--span {
    grid-column: span 1;
  }

.replenishment-modal__preview-metric {
  grid-template-columns: repeat(2, minmax(0, auto));
  }
}

/* ============================== */
/* CUSTOM THEME MODAL             */
/* ============================== */

#customThemeModal {
  --custom-theme-modal-margin: clamp(12px, 4vw, 24px);
  --custom-theme-modal-width: min(920px, calc(100vw - var(--custom-theme-modal-margin) * 2));
  --modal-margin: var(--custom-theme-modal-margin);
  --modal-w: var(--custom-theme-modal-width);
  --modal-backdrop: transparent;
  --modal-backdrop-blur: none;
}

#customThemeModal::part(dialog) {
  top: 2rem;
  width: var(--custom-theme-modal-width);
  max-width: var(--custom-theme-modal-width);
  max-height: min(72vh, 720px);
  background: var(--panel-in);
}

#customThemeModal::part(body) {
  padding-inline: clamp(12px, 4vw, 20px);
}

#selectThemeModal {
  --modal-backdrop: transparent;
  --modal-backdrop-blur: none;
}

@media (max-width: 640px) {
  #customThemeModal {
    --custom-theme-modal-margin: clamp(8px, 5vw, 20px);
    --custom-theme-modal-width: min(720px, calc(100vw - var(--custom-theme-modal-margin) * 2));
  }
}

@media (max-width: 480px) {
  #customThemeModal {
    --custom-theme-modal-width: calc(100vw - var(--custom-theme-modal-margin) * 2);
  }
}

.custom-theme {
  display: grid;
  padding: 12px 0;
  gap: clamp(16px, 2.4vw, 20px);
  font-family: var(--font, ui-sans-serif, system-ui);
  width: min(100%, 880px);
  margin-inline: auto;
  box-sizing: border-box;
  min-width: 0;
}

.custom-theme__field {
  display: grid;
  gap: clamp(6px, 1vw, 8px);
  padding: clamp(10px, 1vw, 12px);
  background: color-mix(in oklab, var(--panel) 94%, var(--bg) 6%);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: clamp(10px, 1.6vw, 14px);
}

.custom-theme__field input[type="text"],
.custom-theme__field input[type="number"] {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: var(--input);
  color: var(--text);
  border-radius: 10px;
  padding: clamp(4.5px, 1vw, 8px) clamp(8px, 1.2vw, 12px);
  font: inherit;
  font-size: var(--input-fs);
  letter-spacing: clamp(.3px, 1vw, .8px);
  min-width: 0;
}

.custom-theme__field input[type="text"]:focus,
.custom-theme__field input[type="number"]:focus {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--soft, transparent) 55%, var(--input, transparent) 35%);
}

.custom-theme__label {
  font-size: 0.82rem;
  font-size: var(--fxs);
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.custom-theme__notice {
  margin: -4px 0 0;
  font-size: 0.75rem;
  color: var(--danger, #ef4444);
}

.custom-theme__notice[hidden] {
  display: none;
}

.custom-theme__section {
  display: grid;
  gap: clamp(12px, 2vw, 16px);
  padding: clamp(8px, 2vw, 24px);
  background: color-mix(in oklab, var(--panel) 90%, transparent 10%);
  border-radius: clamp(8px, 2vw, 18px);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  min-width: 0;
}

.custom-theme__section--secondary {
  background: color-mix(in oklab, var(--panel) 82%, transparent 18%);
  border-style: dashed;
}

.custom-theme__section-head {
  display: grid;
  gap: 4px;
}

.custom-theme__section-title {
  margin: 0;
  font-size: var(--fsm);
  font-weight: 600;
  color: var(--text);
}

.custom-theme__section-desc {
  margin: 0;
  font-size: var(--fxs);
  color: var(--muted);
}

.custom-theme__grid {
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.custom-theme__grid--stretch {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
}

@media (max-width: 1280px) {
  .custom-theme__grid {
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  }

  .custom-theme__grid--stretch {
    grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  }
}

@media (max-width: 700px) {
  .custom-theme__grid,
  .custom-theme__grid--stretch {
    grid-template-columns: minmax(0, 1fr);
  }
}

.custom-theme__inputs {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.custom-theme__color {
  appearance: none;
  width: 44px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: none;
  cursor: pointer;
  flex: 0 0 auto;
}

.custom-theme__color::-webkit-color-swatch,
.custom-theme__color::-webkit-color-swatch-wrapper {
  border-radius: 8px;
  border: none;
  padding: 0;
}

.custom-theme__color::-moz-color-swatch {
  border-radius: 8px;
  border: none;
}

.custom-theme__text {
  flex: 1 1 160px;
  min-width: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.custom-theme__range {
  flex: 1 1 200px;
  min-width: 120px;
}

.custom-theme__output {
  font-size: 0.78rem;
  color: var(--muted);
  min-width: 64px;
  text-align: right;
}

.custom-theme__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ============================== */
/* THEMES GALLERY MODALS          */
/* ============================== */
.themes-modal {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  user-select: none; 
}

.themes-modal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 20px);
  padding: .4rem 0;
}

.themes-modal__tile {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 20px);
  padding: clamp(16px, 2vw, 24px) clamp(16px, 2vw, 22px);
  border-radius: clamp(14px, 3vw, 18px);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--card) 88%, var(--panel));
  color: var(--text);
  text-align: left;
  letter-spacing: .6px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.themes-modal__tile:hover,
.themes-modal__tile:focus-visible {
  transform: translateY(-2px);
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  background: color-mix(in srgb, var(--accent-color) 16%, var(--panel) 10%);
  outline: none;
}

.themes-modal__tile:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 32%, transparent),
              0 12px 30px rgba(0, 0, 0, 0.16);
}

.themes-modal__tile:hover .themes-modal__tile-icon {
  background: color-mix(in srgb, var(--accent-bg) 12%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-color) 32%, transparent),
              0 6px 24px rgba(0, 0, 0, 0.10);
}

.themes-modal__tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(48px, 5vw, 60px);
  height: clamp(48px, 5vw, 60px);
  border-radius: clamp(14px, 3vw, 18px);
  background: var(--panel);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
  color: var(--accent-color);
  flex-shrink: 0;
}

.themes-modal__tile-icon .icon {
  width: clamp(22px, 3vw, 26px);
  height: clamp(22px, 3vw, 26px);
}

.themes-modal__tile-content {
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}

.themes-modal__tile-label {
  font-size: var(--fsl);
  font-weight: 600;
  color: var(--text-color);
}

.select-theme {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 24px);
  user-select: none; 
}

.select-theme__status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.select-theme__active {
  padding-top: .5rem;
  font-weight: 600;
  font-size: var(--fsm);
  color: var(--text-color);
}

.select-theme__custom {
  margin: 0;
  font-size: clamp(0.85rem, 2vw, 0.92rem);
  color: var(--muted);
}

.select-theme__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(12px, 2vw, 24px);
}

.theme-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 2vw, 16px);
  padding: clamp(14px, 2vw, 18px);
  border-radius: clamp(14px, 3vw, 18px);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.theme-card__preview {
  width: 100%;
  height: clamp(110px, 20vw, 140px);
  border-radius: clamp(12px, 2vw, 16px);
  background: linear-gradient(135deg,
    var(--theme-preview-a, #ffffff) 0%,
    var(--theme-preview-b, #cccccc) 55%,
    var(--theme-preview-c, #888888) 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border) 60%, transparent);
}

.theme-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.theme-card__title {
  font-weight: 600;
  font-size: var(--fsm);
  color: var(--text-color);
}

.theme-card__desc {
  font-size: var(--fxs);
  color: var(--muted);
  line-height: 1.45;
}

.theme-card__badge {
  position: absolute;
  top: clamp(10px, 2vw, 14px);
  right: clamp(10px, 2vw, 14px);
  padding: 4px 10px;
  border-radius: var(--circle);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  color: var(--accent-color);
  border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.theme-card:hover,
.theme-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--accent-color);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  outline: none;
}

.theme-card:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 32%, transparent),
              0 14px 36px rgba(0, 0, 0, 0.18);
}

.theme-card.is-active {
  border-color: var(--accent-color);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.2);
}

.theme-card.is-active .theme-card__badge {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .themes-modal__grid,
  .select-theme__grid {
    grid-template-columns: 1fr;
  }
}

/* ============================== */
/* VERSION MODAL                  */
/* ============================== */
.version-modal__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  user-select: none;
}

.version-modal__title-name {
  font-size: var(--fml);
  font-weight: 700;
}

.version-modal__title-version {
  font-size: var(--fsm);
  font-weight: 600;
  color: var(--muted);
}

.version-modal {
  position: relative;
  display: grid;
  gap: .4rem;
  padding: 10px 10px 10px 14px;
  background-color: color-mix(in hsl, var(--accent-color) 2.5%, transparent);
  border-radius: 10px;
}

.version-modal__updates {
  display: grid;
  gap: .6rem;
  max-height: min(60vh, 20rem);
  padding-right: 2.25rem;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-snap-type: y mandatory;
  scroll-padding: .2rem;
}

.version-modal__updates::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.version-modal__note {
  display: grid;
  gap: .15rem;
  margin-top: .1rem;
  padding: .65rem;
  font-size: var(--fsm);
  line-height: 1.35;
  background: color-mix(in srgb, var(--panel) 20%, var(--accent-color) 5%);
  border-radius: 8px;
  scroll-snap-align: start;
}

.version-modal__note-date {
  font-weight: 700;
  font-size: var(--fxs);
  color: var(--muted);
}

.version-modal__note-text {
  font-size: var(--fsm);
}

.version-modal__note--empty {
  text-align: center;
}

.version-modal__scroll-btn {
  position: absolute;
  right: 8px;
  --icon-button-size: 28px;
  border: 0;
  background: color-mix(in srgb, var(--panel, #1f2937) 85%, var(--accent-color) 15%);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, background-color .15s ease;
}

.version-modal__scroll-btn--up { top: 6px; }
.version-modal__scroll-btn--down { bottom: 6px; }
.version-modal__scroll-btn:disabled { opacity: .45; cursor: auto; }
.version-modal__scroll-btn:not(:disabled):hover {
  background: color-mix(in srgb, var(--accent-color) 30%, white 1%);
  transform: scale(1.05);
}

.version-modal__credit {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: auto;
  padding-top: .3rem;
  font-size: var(--fxs);
  color: var(--muted);
  line-height: 1.2;
  gap: .2rem;
  user-select: none; 
}

/* ============================== */
/* TIPS MODAL                     */
/* ============================== */
.tips-modal {
  display: flex;
  flex-direction: column;
  padding: clamp(.5rem, 1vw, 1rem)0;
  gap: clamp(8px, 2vw, 14px);
  max-height: min(70vh, 560px);
  scrollbar-gutter: stable both-edges;
}

.tips-modal__group {
  display: flex;
  flex-direction: column;
  border-radius: clamp(16px, 3vw, 22px);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.tips-modal__group[open] {
  border-color: color-mix(in srgb, var(--accent-color) 38%, transparent);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.18);
}

.tips-modal__group-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  padding: clamp(1px, 3.2vw, 4px) clamp(2px, 3.6vw, 18px);
  cursor: pointer;
  list-style: none;
  user-select: none;
  outline: none;
  border-radius: clamp(16px, 3vw, 22px);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

.tips-modal__group-summary:hover {
  border-radius: clamp(16px, 3vw, 22px);
  background: color-mix(in srgb, var(--soft) 82%, transparent);
}

.tips-modal__group-summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 55%, transparent);
}

.tips-modal__group-summary::-webkit-details-marker {
  display: none;
}

.tips-modal__group-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.tips-modal__group-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: clamp(22px, 3.2vw, 30px);
  aspect-ratio: 1 / 1;
  border-radius: var(--circle);
  color: var(--muted);
  background: color-mix(in srgb, var(--accent-color) 12%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 18%, transparent);
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tips-modal__group-indicator::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 2px solid currentColor;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}

.tips-modal__group[open] .tips-modal__group-indicator {
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 22%, transparent);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 38%, transparent);
}

.tips-modal__group[open] .tips-modal__group-indicator::before {
  transform: rotate(225deg);
}

.tips-modal__group-title {
  margin: 0;
  font-size: var(--fsm);
  font-weight: 600;
  color: var(--text);
}

.tips-modal__group-desc {
  margin: 0;
  font-size: var(--fxs);
  color: var(--muted);
  line-height: 1.5;
}

.tips-modal__sections {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2.5vw, 20px);
  padding: clamp(2px, 2.4vw, 28px) clamp(2px, 2vw, 32px) clamp(2px, 2vw, 34px);
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: clamp(16px, 3vw, 22px);
  background: color-mix(in srgb, var(--panel) 64%, transparent);
  box-sizing: border-box;
}

.tips-modal__group:not([open]) .tips-modal__sections {
  border-top-color: transparent;
}

.tips-section {
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vw, 10px);
  padding: clamp(14px, 2.8vw, 18px) clamp(14px, 2.8vw, 18px) clamp(18px, 2.8vw, 28px);
  border-radius: clamp(12px, 2.5vw, 16px);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}

.tips-section__header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tips-section__title {
  margin: 0;
  font-size: var(--fsm);
  font-weight: 600;
}

.tips-section__desc {
  margin: 0;
  font-size: var(--fxs);
  color: var(--muted);
  line-height: 1.45;
}

.tips-section__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.8vw, 12px);
}

.tips-section__list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--fxs);
  line-height: 1.55;
  color: var(--text);
}

.tips-section__list li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: var(--circle);
  background: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.tips-section__list code {
  font-size: 0.85em;
  font-family: 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
  padding: 0.05em 0.45em;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-color) 18%, transparent);
  color: var(--text);
}

@media (max-width: 640px) {
  .tips-modal {
    max-height: min(65vh, 520px);
  }

  .tips-section {
    padding: clamp(12px, 4vw, 16px);
  }
}

/* ============================== */
/* REPAIR MODAL                   */
/* ============================== */
.repair-summary-modal {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1rem);
  user-select: none; 
}

.repair-summary-modal__intro {
  display: grid;
  gap: 0.2rem;
}

.repair-summary-modal__heading {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  font-weight: 600;
}

.repair-summary-modal__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.4rem, 1.4vw, 0.86rem);
}

.repair-summary-modal__stat {
  display: grid;
  min-width: 92px;
  padding: clamp(0.50rem, 1.1vw, 0.65rem) clamp(0.75rem, 1.2vw, 1rem);
  border-radius: 12px;
  background: color-mix(in srgb, var(--soft) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.repair-summary-modal__stat-line {
  display: flex;
  align-items: baseline;
  width: 100%;
  font-size: clamp(0.78rem, 1vw, 0.86rem);
  color: var(--muted);
  white-space: nowrap;
}

.repair-summary-modal__stat-value {
  margin-left: auto;
  text-align: right;
  font-weight: 700;
  font-size: clamp(0.82rem, 1.05vw, 0.92rem);
  color: var(--text);
}

.repair-summary-modal__stat-label {
  font-size: clamp(0.78rem, 1vw, 0.86rem);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
}

.repair-summary-modal__table-wrapper {
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: clamp(12px, 2vw, 14px);
  overflow: auto;
  max-height: min(360px, 55vh);
  background: color-mix(in srgb, var(--panel) 96%, black);
}

.repair-summary-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: clamp(0.85rem, 1vw, 0.95rem);
}

.repair-summary-modal__table th,
.repair-summary-modal__table td {
  padding: clamp(0.55rem, 1vw, 0.75rem) clamp(0.7rem, 1vw, 0.9rem);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  text-align: left;
  vertical-align: top;
}

.repair-summary-modal__table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--panel) 94%, black);
  text-transform: uppercase;
  font-size: clamp(0.68rem, 0.9vw, 0.74rem);
  letter-spacing: 0.06em;
  color: var(--muted);
}

.repair-summary-modal__select-head,
.repair-summary-modal__select-cell {
  width: clamp(22px, 2vw, 28px);
  text-align: center;
  padding-left: clamp(0.2rem, 0.6vw, 0.35rem);
  padding-right: clamp(0.2rem, 0.6vw, 0.35rem);
}

.repair-summary-modal__checkbox-input {
  width: clamp(16px, 2vw, 18px);
  height: clamp(16px, 2vw, 18px);
  cursor: pointer;
  accent-color: var(--acc);
}

.repair-summary-modal__table tbody tr:last-child th,
.repair-summary-modal__table tbody tr:last-child td {
  border-bottom: 0;
}

.repair-summary-modal__row-label {
  display: block;
  font-weight: 600;
}

.repair-summary-modal__row-sub {
  display: block;
  margin-top: 0.15rem;
  font-size: clamp(0.72rem, 0.9vw, 0.78rem);
  color: var(--muted);
}

.repair-summary-modal__row {
  transition: background 0.25s ease, opacity 0.25s ease;
}

.repair-summary-modal__row.is-deselected {
  opacity: 0.65;
}

.repair-summary-modal__row--applied th,
.repair-summary-modal__row--applied td {
  background: color-mix(in srgb, var(--success, #22c55e) 16%, transparent);
}

.repair-summary-modal__row--skipped th,
.repair-summary-modal__row--skipped td {
  background: color-mix(in srgb, var(--danger, #ef4444) 12%, transparent);
}

.repair-summary-modal__value {
  display: inline-block;
  max-width: 28ch;
  white-space: pre-wrap;
  word-break: break-word;
}

.repair-summary-modal__value--empty {
  color: var(--muted);
  font-style: italic;
}

.repair-summary-modal__value--new {
  color: var(--accent-color);
  font-weight: 600;
}

.repair-summary-modal__meta {
  font-size: clamp(0.72rem, 1.4vw, 0.84rem);
  color: var(--muted);
  margin: .1rem;
}

.repair-summary-modal__download[disabled] {
  opacity: 0.65;
  cursor: progress;
}

/* ============================== */
/* MAINTENANCE EXPORT MODAL       */
/* ============================== */
.maintenance-export-modal .modal-prompt__input {
  margin: .6rem 0;
}

.maintenance-export-modal__fieldset {
  margin: .6rem 0 1rem;
  padding-top: .4rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.maintenance-export-modal__fieldset .checkbox {
  margin: .3rem .3rem .5rem .6rem;
}

.maintenance-export-modal__fieldset label:hover {
  font-weight: 600;
  cursor: pointer;
}

/* ============================== */
/* EXPORT SCOPE MODAL             */
/* ============================== */
.export-scope__fieldset {
  margin: 0;
  border: 0;
  padding: 0;
  gap: 0.55rem;
}

.export-scope__legend {
  margin-bottom: 0.75rem;
}

.export-scope__option-row {
  margin-bottom: 0.4rem;
  --wrap-gap: 0.55rem;
  --wrap-align: flex-start;
}

.export-scope__option-row > span {
  min-width: 0;
  flex: 1 1 auto;
}

@media (max-width: 520px) {
  .export-scope__option-row {
    --wrap-gap: 0.16rem;
    width: 100%;
  }
}

/* =============================== */
/* AOPS MODAL DENSITY: MOBILE FIX  */
/* =============================== */
@media (max-width: 520px) {
  /* Override the component's internal padding + type via CSS vars */
  #customThemeModal {
    --modal-margin: 10px;
    --pad-x: 10px;
    --pad-y: 10px;
    --modal-body-fs: 0.86rem;
    --modal-body-lh: 1.35;
    --radius-lg: 12px;
  }

  #customThemeModal::part(body) {
    padding: 10px var(--pad-x);
  }

  /* IMPORTANT: part name is "foot" (not footer) */
  #customThemeModal::part(foot) {
    padding: 8px var(--pad-x) var(--pad-y);
    gap: 6px;
  }

  /* Target slotted footer buttons directly */
  #customThemeModal [slot="footer"] {
    min-height: 32px;
    padding: 8px 8px;
    font-size: 0.82rem;
  }
}

/* ===================================================================== */
/* Source: components/aops_sections.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_SECTIONS.CSS              */
/* ============================== */

.section-head {
  font-size: 15px;
  padding-left: 0.4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  line-height: .2em;
}

.section-head--row {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.section-head--stack {
  display: grid;
  gap: 6px;
}

.section-head__spacer {
  flex: 1 1 auto;
}

.section-head--label {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted, #9aa2ab);
}

.section-head--title {
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 600;
  color: var(--text, #e6e6e6);
}

.section-subhead {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--muted, #9ca3af);
}

/* ===================================================================== */
/* Source: components/aops_table.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_TABLE.CSS                 */
/* ============================== */


/* ============================== */
/* WRAP                           */
/* ============================== */
#wrapBtn.wrap-btn--cards-hidden { display: none !important; }
.table-wrap{ overflow:visible }

/* ============================== */
/* TABLE                          */
/* ============================== */
table { 
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
thead th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  border-right: 0.1px solid var(--border);
  text-align: left;
  font-size: var(--custom-font-body, clamp(0.8rem, 2vw, 0.85rem));
  font-weight: 700;
  padding: clamp(0.2rem, 0.5vw, 0.6rem) clamp(0.6rem, 1.8vw, 0.8rem);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
tbody td {
  border-bottom:1px solid var(--border);
  padding: clamp(0.3rem, 1.2vw, 0.4rem) clamp(0.8rem, 1.8vw, 0.875rem);
  vertical-align:top;
  background: var(--panel-in, var(--panel));
  font: var(--custom-font-body, var(--fxs)) var(--ff);
  letter-spacing: 0.02rem;
  white-space: nowrap;
}

.table--analysis {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.table--analysis col.num {
  width: 9ch;
  min-width: 9ch;
}
.table--analysis col.compact {
  width: 14ch;
  min-width: 11ch;
}
.table--analysis col.flex {
  width: auto;
  min-width: 24ch;
}
.table--analysis.auto-layout {
  table-layout: auto;
  width: 100%;
  min-width: 100%;
}
.table--analysis.auto-layout col.num {
  width: auto;
  min-width: 9ch;
}
.table--analysis.auto-layout col.compact {
  width: auto;
  min-width: 11ch;
}
.table--analysis.auto-layout col.flex {
  width: auto;
  min-width: 24ch;
}
.table--analysis thead th {
  position: static;
  z-index: auto;
  top: auto;
  text-align: left;
  font-weight: 600;
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
  border-right: 0;
  white-space: nowrap;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
}
.table--analysis tbody td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px dashed var(--line, rgba(255,255,255,0.06));
  vertical-align: middle;
  text-align: left;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}
@media (max-width: 720px) {
  .table--analysis thead th,
  .table--analysis tbody td {
    white-space: nowrap;
    word-break: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
.table-wrap.wrap-td tbody td {
  white-space: normal;
}
body.wrap-td-fallback tbody td {
  white-space: normal;
}

/* alternate-on */
:root[data-table-row-differentiator="on"] table tbody tr:nth-child(even) > td {
  background: var(--table-row-alt, var(--panel-in, var(--panel)));
}
/* hover-on alternate */
:root[data-table-row-differentiator="on"] table tbody tr:hover > td{
  background: var(--table-row-hover);
}
/* hover-off alternate */
:root[data-table-row-differentiator="on"][data-table-row-hover="off"] table tbody tr:nth-child(odd):hover > td{
  background: var(--panel-in, var(--panel));
}

:root[data-table-row-differentiator="on"][data-table-row-hover="off"] table tbody tr:nth-child(even):hover > td{
  background: var(--table-row-alt, var(--panel-in, var(--panel)));
}

tbody tr:hover td,
tbody tr:hover { background: var(--table-row-hover); }
:root[data-table-row-hover="off"] table tbody tr:hover td,
:root[data-table-row-hover="off"] table tbody tr:hover { background: var(--panel-in, var(--panel)); }
:root[data-table-row-differentiator="on"][data-table-row-hover="off"] table tbody tr:nth-child(even):hover td,
:root[data-table-row-differentiator="on"][data-table-row-hover="off"] table tbody tr:nth-child(even):hover {
  background: var(--table-row-alt, var(--panel-in, var(--panel)));
}
tbody tr.row--fillrate-match { background: var(--table-row-match); }
tbody tr.row--fillrate-match:hover { background: var(--table-row-match); }
/* if zebra/other rules still override, force it */
.table-wrap table tbody tr.row--fillrate-match:nth-child(odd) > td,
.table-wrap table tbody tr.row--fillrate-match:nth-child(even) > td {
  background: var(--table-row-match) !important;
}

tbody tr.row--selected,
tbody tr.row--selected:hover {
  background: var(--table-row-selected) !important;
}
tbody tr.row--selected > td,
tbody tr.row--selected:hover > td {
  background: var(--table-row-selected) !important;
}

.index-cell { color:var(--muted);width:80px;white-space:nowrap }

/* ============================== */
/* TABLE EDIT MODE                */
/* ============================== */
.td-edit {
  border-bottom:1px dashed var(--border);
  border-right: 1px dashed var(--border);
  white-space: nowrap;
}

.value-error {
  color: #ff6b6b;
  font-weight: 500;
}

/* ============================== */
/* SORTED COLUMN                  */
/* ============================== */
th.sorted-col {
  background-color: var(--accent-bg);
  color: var(--accent-color);
}

/* ============================== */
/* SELECT COLUMN                  */
/* ============================== */
td.select-col > label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
th.select-col,
td.select-col {
  width: 36px;
  min-width: 32px;
  padding: 0 8px;
  text-align: center;
  white-space: nowrap;
}
td.select-col input[type="checkbox"] {
  transform-origin: center;
}

/* ============================== */
/* HIGHLIGHT (MATCHING)           */
/* ============================== */
.highlight {
  animation: aopsHighlightFade 2.5s ease-out;
  background-color: rgba(var(--highlight), 1);
}
@keyframes aopsHighlightFade {
  0%, 60% { background-color: rgba(var(--highlight), 1); }
  100%    { background-color: rgba(var(--highlight), 0); }
}

.match-highlight {
  background-color: color-mix(in hsl, var(--accent-color) 88%, white 12%);
  color: var(--soft);
  font-weight: 600;
  letter-spacing: .02rem;
  border-radius: .2rem;
  border: 1px solid var(--accent-color);
  padding: 0 0.14em;
  transition: background-color 0.2s ease-in-out;
}

.full-match-highlight {
  background-color: var(--accent-color);
  color: var(--soft);
  font-weight: 600;
  border-radius: .6rem;
  padding: 0.2em 0.6em;
  transform: translateY(-4px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: background-color 0.2s ease-in-out;
}

/* ============================== */
/* CUSTOM COLUMN TYPES            */
/* ============================== */
#tbody td.cell--column-pending {
  background: var(--table-row-hlt);
  font-weight: 500;
}

#tbody td.cell--column-pending-changed, 
#tbody tr:hover td.cell--column-pending-changed {
  font-weight: 800;
  background-color: color-mix(in oklab, var(--accent-color) 30%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-color) 30%, transparent);
}

#tbody td .cell-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.4rem;
}

#tbody td .cell-indicator__value {
  text-align: left;
}

#tbody td .cell-indicator__slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 12px;
  width: 12px;
  min-width: 12px;
}

#tbody td .cell-indicator__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
}

#tbody td .cell-indicator__icon--empty {
  visibility: hidden;
}

#tbody td .cell-indicator__icon .icon {
  width: 1.2rem;
  height: 1.2rem;
}

#tbody td.cell-indicator--up .cell-indicator__icon {
  color: color-mix(in oklab, lightgreen 70%, var(--text));
}

#tbody td.cell-indicator--down .cell-indicator__icon {
  color: color-mix(in oklab, orangered 70%, var(--text));}


/* ============================== */
/* HISTORY TYPES                  */
/* ============================== */
.type { font-weight: 600; }
.type.type--edit { color:#6ea8fe; }
.type.type--add  { color:#38d39f; }
.type.type--del  { color:#ff6b6b; }


/* ============================== */
/* ANALYSIS TABLES - CUSTOM TEMP  */
/* ============================== */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  min-width: 100%;
  border-collapse: collapse;
}


/* ============================== */
/* CONTENT AREA SETUP             */
/* ============================== */
.panel { display: flex; flex-direction: column; height: 100%; }
.content-area { flex: 1 1 auto; min-height: 0; overflow: auto; }
.view.hidden { display: none !important; }

/* ===================================================================== */
/* Source: components/aops_toasts.css */
/* ===================================================================== */
/* ============================= */
/* AOPS_TOASTS.CSS               */
/* ============================= */

@property --toast-swipe-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@property --toast-opacity {
  syntax: '<number>';
  inherits: false;
  initial-value: 0;
}

.toast-layer {
  position: fixed;
  top: clamp(16px, 4vw, 28px);
  right: clamp(16px, 4vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  width: min(360px, calc(100vw - clamp(32px, 8vw, 64px)));
  max-width: 100%;
  z-index: 4100;
  pointer-events: none;
}

.toast-layer:empty {
  display: none;
}

.toast {
  --toast-rgb: 85, 124, 255;
  --toast-border: rgba(var(--toast-rgb), 0.25);
  --toast-bg-accent: linear-gradient(135deg,
      rgba(var(--toast-rgb), 0.22) 0%,
      rgba(var(--toast-rgb), 0.08) 38%,
      rgba(var(--toast-rgb), 0.04) 100%);
  --toast-opacity: 0;
  --toast-translate-y: 12px;
  --toast-scale: 0.98;
  --toast-swipe-x: 0px;
  --toast-transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
      opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--radius);
  color: var(--text-color, var(--text));
  background: var(--panel);
  border: 1px solid var(--toast-border);
  box-shadow: 0 18px 36px rgba(10, 20, 60, 0.14), var(--shadow);
  pointer-events: auto;
  overflow: hidden;
  opacity: var(--toast-opacity);
  transform: translate3d(var(--toast-swipe-x), var(--toast-translate-y), 0) scale(var(--toast-scale));
  transition: var(--toast-transition);
  will-change: transform, opacity;
  touch-action: pan-y;
  user-select: none;
}

.toast::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--toast-bg-accent);
  opacity: 0.95;
  pointer-events: none;
}

/*
.toast::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  width: 4px;
  background: rgba(var(--toast-rgb), 0.6);
  pointer-events: none;
}
*/

.toast--visible {
  --toast-opacity: 1;
  --toast-translate-y: 0px;
  --toast-scale: 1;
}

.toast--leaving {
  --toast-opacity: 0;
  --toast-translate-y: -6px;
  --toast-scale: 0.96;
}

.toast--swiping {
  --toast-transition: none;
}

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

.toast--clickable {
  cursor: pointer;
}

.toast--clickable:focus-visible {
  outline: 2px solid rgba(var(--toast-rgb), 0.45);
  outline-offset: 3px;
}

.toast--clickable:hover::before {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .toast {
    --toast-transition: none;
    --toast-translate-y: 0px;
    --toast-scale: 1;
  }
  .toast--leaving {
    --toast-translate-y: 0px;
    --toast-scale: 1;
  }
}

.toast__icon {
  grid-row: 1 / span 2;
  align-self: flex-start;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--circle);
  background: rgba(var(--toast-rgb), 0.16);
  color: rgb(var(--toast-rgb));
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.04em;
  margin-top: 2px;
  z-index: 1;
}

.toast__body {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  z-index: 1;
}

.toast__title {
  font-weight: 600;
  font-size: clamp(0.88rem, 1.6vw, 0.98rem);
  line-height: 1.35;
  color: var(--title-color, currentColor);
  word-break: break-word;
}

.toast__desc {
  font-size: clamp(0.78rem, 1.6vw, 0.9rem);
  line-height: 1.45;
  color: var(--muted);
  word-break: break-word;
}

.toast__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.toast__action {
  --pill-padding: 6px 14px;
  --pill-bg: rgba(var(--toast-rgb), 0.14);
  --pill-color: rgb(var(--toast-rgb));
  --pill-font-size: clamp(0.76rem, 1.4vw, 0.86rem);
  --pill-border: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, transform 120ms ease;
}

.toast__action:hover {
  background: rgba(var(--toast-rgb), 0.24);
}

.toast__close {
  grid-column: 3;
  grid-row: 1;
  align-self: flex-start;
  color: var(--muted);
  --icon-button-size: 30px;
  transition: background 140ms ease, color 140ms ease, transform 120ms ease;
  z-index: 1;
}

.toast__close span {
  font-size: 18px;
  line-height: 1;
  font-weight: 600;
}

.toast__close:hover {
  background: rgba(var(--toast-rgb), 0.12);
  color: rgb(var(--toast-rgb));
}

.toast__action:focus-visible,
.toast__close:focus-visible {
  outline: 2px solid rgb(var(--toast-rgb));
  outline-offset: 2px;
}

.toast__action:active,
.toast__close:active {
  transform: translateY(1px);
}

.toast__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.toast__meta:empty {
  display: none;
}

.toast[data-variant="success"] {
  --toast-rgb: 46, 160, 106;
}

.toast[data-variant="warning"] {
  --toast-rgb: 228, 178, 64;
}

.toast[data-variant="danger"],
.toast[data-variant="error"] {
  --toast-rgb: 220, 82, 86;
}

.toast[data-variant="neutral"],
.toast[data-variant="info"] {
  --toast-rgb: 85, 124, 255;
}

[data-theme="dark"] .toast {
  background: rgba(21, 24, 33, 0.88);
  background: color-mix(in srgb, var(--panel) 78%, rgba(21, 24, 33, 0.4));
  border-color: rgba(var(--toast-rgb), 0.34);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .toast::before {
  opacity: 0.65;
}

[data-theme="dark"] .toast__icon {
  background: rgba(var(--toast-rgb), 0.28);
  color: rgba(var(--toast-rgb), 0.94);
}

[data-theme="dark"] .toast__action {
  background: rgba(var(--toast-rgb), 0.18);
  color: rgba(var(--toast-rgb), 0.92);
}

[data-theme="dark"] .toast__action:hover {
  background: rgba(var(--toast-rgb), 0.28);
}

[data-theme="dark"] .toast__close:hover {
  background: rgba(var(--toast-rgb), 0.18);
  color: rgba(var(--toast-rgb), 0.92);
}

[data-theme="dark"] .toast__desc {
  color: #aeb8d6;
}

@media (max-width: 720px) {
  .toast-layer {
    top: clamp(10px, 4vw, 18px);
    left: clamp(12px, 4vw, 20px);
    right: clamp(12px, 4vw, 20px);
    width: auto;
    align-items: stretch;
    gap: 10px;
  }

  .toast {
    min-height: 46px;
    gap: 10px;
    padding: 1px 4px;
    border-radius: var(--circle);
    box-shadow: 0 12px 28px rgba(10, 20, 60, 0.12), var(--shadow);
  }

  .toast__icon {
    margin-top: 0.5rem;
    margin-left: 0.4rem;
    width: 30px;
    height: 30px;
    font-size: 15px;
  }

  .toast__body {
    gap: 4px;
  }

  .toast__title {
    padding-top: 0.5rem;
    font-size: clamp(0.62rem, 4.4vw, 0.82rem);
    line-height: 1;
  }

  .toast__desc {
    font-size: clamp(0.52rem, 4vw, 0.76rem);
    line-height: 1;
  }

  .toast__footer {
    margin-top: 2px;
  }

  .toast__action {
    padding: 4px 12px;
    font-size: clamp(0.7rem, 3.6vw, 0.8rem);
  }

  .toast__close {
    grid-column: 3;
    align-self: flex-start;
    color: var(--muted);
    --icon-button-size: 34px;
    transition: background 140ms ease, color 140ms ease, transform 120ms ease;
    grid-row: 1 / span 2;
    display: grid;
    letter-spacing: -0.04em;
    margin-top: 5px;
    z-index: 1;
  }
}

.toast__progress {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 4px;
  background: rgba(var(--toast-rgb), 0.35);
  transform-origin: left;
  transform: scaleX(1);
  opacity: 0;
  transition: transform linear, opacity 120ms ease;
  pointer-events: none;
  z-index: 2;
}

.toast--timed .toast__progress {
  opacity: 1;
}

[data-theme="dark"] .toast-layer {
  z-index: 4300;
}

/* ===================================================================== */
/* Source: layout/aops_main.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_MAIN.CSS                  */
/* ============================== */


/* ============================== */
/* BASE LAYOUT                    */
/* ============================== */
html,body{ height:100%; overflow: hidden; }

body {
  margin:0;
  height:100%;
  min-width: 300px;
  background: var(--bg-gradient);
  color:var(--text);
  font:14px/1.45 var(--ff);
}
.wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 75rem;
  margin: 24px auto;
  padding: 0 16px 40px;
}
html.desktop-width-transition-ready .wrap {
  transition: max-width 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  html.desktop-width-transition-ready .wrap {
    transition: none;
  }
}
html[data-desktop-width='normal'] .wrap {
  max-width: 80rem;
}
html[data-desktop-width='large'] .wrap {
  max-width: 85%;
}
html[data-desktop-width='full'] .wrap {
  max-width: 95%;
}
.theme-toggle {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
}

/* ============================== */
/* HEADER / H1 / LOGO             */
/* ============================== */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 16px;
  flex: 0 0 auto;
}
h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.2px;
  user-select: none;
}
header h1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--title-color);
  font-size: clamp(1rem, 2vw + .5rem, 1.5rem);
}
header h1 .logo {
  inline-size: var(--logo-size);
  block-size: var(--logo-size);
  aspect-ratio: 1;
  display: inline-block;
  background-color: var(--icon-brand-color);
  -webkit-mask-image: url('/static/svg/aom.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url('/static/svg/aom.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  transition: background-color 0.3s ease;
  cursor: pointer;
}

/* ============================== */
/* COUNT                          */
/* ============================== */
#count {
  font-weight: 600;
  font-size: clamp(12px, 1vw + 0.2px, 14.4px);
  letter-spacing: .3px;
}

/* ============================== */
/* CONTENT AREA                   */
/* ============================== */
.content-area{
  position: relative;          /* host for the absolute loader */
  flex: 1 1 auto;              /* fill the panel between controls and footer */
  min-height: 240px;           /* avoid zero-height when empty */
  overflow: hidden;            /* keep overlay edges clean */
}
/* ============================== */
.content-area > #dataArea,
.content-area > #analysis{
  position: relative;
  height: 100%;
  overflow: auto;
  overscroll-behavior: auto;
  scroll-snap-type: y mandatory;
}

/* ============================== */
/* SNAP TARGETS */
/* ============================== */
#dataArea .card{
  scroll-snap-align: start;
  scroll-snap-stop: normal;
  scroll-margin-top: 8px;
}

/* ============================== */
/* NO RESULTS STATE               */
/* ============================== */
.search-no-results-state {
  min-height: 80%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  color: var(--text-color, #3c4c71);
}

.search-no-results-state__icon {
  width: 96px;
  height: 96px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.search-no-results-state__icon svg {
  width: 96px;
  height: 96px;
}

.search-no-results-state__title,
.search-no-results-state__text {
  margin: 0;
}

.search-no-results-state__title {
  font-weight: 700;
  font-size: 1.2rem;
}

.search-no-results-state__text {
  opacity: 0.85;
}

/* ============================== */
/* FOOTER                         */
/* ============================== */
.foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(var(--control-pad-y) - 2px) var(--control-pad-x);
  border-top: 1px solid var(--border);
}

.count-zone {
  display: inline-flex;
  align-items: center;
}

#count { margin-left:4px; opacity:.85; user-select: none; }

.count-zone:empty {
  display: none;
}

/* ============================== */
/* PANEL                          */
/* ============================== */
.panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0; /* allows children to flex-shrink */
  max-height: 88vh;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow);
}

/* ============================== */
/* DEBUG STATE TREE               */
/* ============================== */
.state-tree {
  display: grid;
  gap: 6px;
  max-height: min(70vh, 480px);
  overflow: auto;
  padding: 4px 2px;
}

.state-tree__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 10px;
  font: 500 0.8rem/1.4 var(--font, ui-sans-serif, system-ui);
  color: var(--muted, #a9b0b7);
}

.state-tree__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: var(--panel, rgba(255,255,255,.04));
  border-radius: var(--circle);
  padding: 4px 10px;
}

.state-tree__meta-sep {
  align-self: center;
  color: var(--muted, #6c737c);
}

.state-tree__branch {
  background: var(--panel, rgba(255,255,255,.04));
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.05);
  padding: 2px 2px 6px;
}

.state-tree__branch > summary {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  padding: 6px 8px;
  margin: 0;
  font: 600 0.85rem/1.4 var(--font, ui-sans-serif, system-ui);
  color: var(--muted, #a9b0b7);
  cursor: pointer;
  list-style: none;
}

.state-tree__branch[open] > summary {
  background: rgba(255,255,255,.02);
  border-radius: 8px;
}

.state-tree__children {
  display: grid;
  gap: 6px;
  padding: 4px 0 4px 18px;
}

.state-tree__leaf {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  background: var(--panel, rgba(255,255,255,.03));
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.05);
  padding: 6px 8px;
  font: 500 0.82rem/1.4 var(--font, ui-sans-serif, system-ui);
}

.state-tree__key {
  font-family: var(--mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  color: var(--text, #f3f4f6);
  word-break: break-word;
}

.state-tree__key::after {
  content: ':';
  margin-inline: 0.35rem;
  color: var(--muted, #8c939c);
  font-weight: 400;
}

.state-tree__branch > summary .state-tree__key::after {
  margin-inline-end: 0.25rem;
}

.state-tree__summary {
  font-family: var(--mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  color: var(--text, #e6e6e6);
}

.state-tree__value {
  font-family: var(--mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  color: var(--text, #f5f6f9);
  word-break: break-word;
  white-space: pre-wrap;
}

.state-tree__value--circular {
  color: #f4997d;
}

.state-tree__empty {
  margin: 0;
  padding: 6px 8px;
  border-radius: 8px;
  background: rgba(255,255,255,.02);
  font: 500 0.8rem/1.4 var(--font, ui-sans-serif, system-ui);
  color: var(--muted, #89919c);
}

.settings-choice--condensed {
  padding: 14px 16px;
  gap: 10px;
}

.settings-choice__options--inline {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
}

.settings-choice__option--inline {
  align-items: center;
  align-self: stretch;
}

.settings-choice__option--inline .settings-choice__option-text {
  gap: 2px;
}

.settings-options--notifications {
  gap: 12px;
}

.settings-notification-row {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) auto;
  align-items: center;
  gap: 6px 16px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  min-height: 0;
}

.settings-notification-row__legend {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  grid-column: 1;
}

.settings-notification-row__desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
  grid-column: 1;
}

.settings-notification-controls {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: inline-flex;
  justify-content: flex-end;
  gap: 8px;
}

.settings-segmented {
  display: inline-flex;
  align-items: stretch;
  gap: 6px;
  padding: 4px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.settings-segmented .settings-choice__option {
  padding: 8px 12px;
  gap: 6px;
  align-items: center;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
  min-height: 0;
}

.settings-segmented .settings-choice__option:hover {
  border-color: rgba(89, 120, 170, 0.3);
  background: transparent;
}

.settings-segmented__option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  min-width: 0;
}

.settings-segmented__option:hover {
  background: rgba(148, 163, 184, 0.12);
}

.settings-segmented__option:focus-within {
  box-shadow: 0 0 0 2px rgba(89, 120, 170, 0.3);
}

.settings-segmented__option--selected,
.settings-segmented .settings-choice__option--selected {
  background: var(--bg);
  border-color: var(--accent-color);
  color: var(--text, var(--accent-color));
  box-shadow: 0 0 0 1px rgba(89, 120, 170, 0.25);
}

.settings-segmented__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.settings-segmented__label {
  white-space: nowrap;
  line-height: 1.2;
}

@media (min-width: 960px) {
  .settings-options--notifications {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }
}

@media (max-width: 760px) {
  .settings-notification-row {
    grid-template-columns: 1fr;
    align-items: flex-start;
  }

  .settings-notification-controls {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
  }
}

/* ============================== */
/* GLOBALS                        */
/* ============================== */
/* === Kill the UA fcous ring === */
:where(a[href],
      div,
      button,
      input:not([type="hidden"]),
      select,
      textarea,
      summary,
      [tabindex]:not([tabindex="-1"]),
      [role="button"],
      [role="link"],
      [role="menuitem"],
      [role="tab"],
      [contenteditable="true"]):focus {
  outline: none;
}

/* ===================================================================== */
/* Source: layout/aops_menu.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_MENU.CSS                  */
/* ============================== */

:root {
  /* ==== ALIGNMENT ==== */
  --em-pad: clamp(8px, 1.5vw + 0.05px, 10px) clamp(10px, 1.5vw + 0.05px, 12px);
  --em-gap: clamp(8px, 1.5vw + 0.05px, 10px);
  --em-pady: clamp(8px, 1.5vw + 0.05px, 10px);
  --em-padx: clamp(10px, 1.5vw + 0.05px, 12px);

  --menu-fs: clamp(0.75rem, 1.5vw + 0.05rem, 0.85rem);
  --menu-padding: 12px 8px;
  --menu-item-radius: calc(var(--radius-menu) - 6px);
}

/* ============================== */
/* BASE: menu shell + primitives  */
/* ============================== */
/* Shell (absolute by default) */
.menu,
.main-menu,
.create-menu,
.more-menu,
.drop-menu,
.export-menu {
  position: absolute;
  z-index: 9999;
  min-width: 200px;
  width: clamp(10rem, 20vw + 1rem, 14rem);
  padding: var(--menu-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-menu);
  background: var(--bg-menu);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  display: none;
  gap: var(--em-gap);
  font-size: var(--menu-fs);
  overflow: hidden;
  user-select: none;
}

.menu__scroll,
.more-menu__scroll,
.drop-menu__scroll,
.main-menu__submenu-scroll,
.more-menu__submenu-scroll {
  max-height: 75.5vh;
  display: flex;
  flex-direction: column;
  gap: var(--em-gap);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Items */
.menu__item,
.main-menu__item,
.create-menu__item,
.more-menu__item,
.export-menu__item {
  display: flex;
  align-items: center;
  gap: var(--em-gap);
  padding: var(--em-pad);
  width: 100%;
  font: inherit;
  font-size: var(--menu-fs);
  text-align: left;
  border: 0;
  border-radius: var(--menu-item-radius);
  background: var(--btn);
  color: inherit;
  cursor: pointer;
  line-height: 1; /* tighten */
}

/* Disabled handling */
.menu__item[disabled],
.more-menu__item[disabled],
.export-menu__item:disabled,
.create-menu__item:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Separator */
.menu__sep {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}


/* Modifiers */
.menu--fixed,
.create-menu { position: fixed; }

.menu--list,
.more-menu { display: none; flex-direction: column; gap: 6px; }

.menu--grid,
.export-menu { display: grid; gap: 8px; }

.menu.open,
.more-menu.open,
.drop-menu.open { display: block; }

/* Search helper menus */
.search-helper-menu {
  position: absolute;
  z-index: 9999;
  min-width: 200px;
  max-width: 60vw;
  width: clamp(10rem, 20vw + 1rem, 14rem);
  padding: var(--menu-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-menu);
  background: var(--bg-menu);
  box-shadow: 0 6px 20px rgba(0,0,0,.25);
  gap: var(--em-gap);
  font-size: var(--menu-fs);
  overflow: hidden;
  user-select: none;
}

.search-helper-list {
  max-height: min(60vh, 24rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.search-ops-menu {
  left: auto;
  right: 0;
}

.search-helper-option {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 0;
  border-radius: calc(var(--radius-input) - 6px);
  background: transparent;
  color: var(--text);
  text-align: left;
  width: 100%;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  font: var(--custom-font-input, var(--fs)) var(--ffs);
}

.search-helper-option:hover,
.search-helper-option:focus-visible {
  background: hsl(from var(--accent-color) h s l / 8%);
  outline: none;
}

.search-filter-op {
  min-width: 1.65rem;
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  color: color-mix(in oklab, var(--accent-color) 80%, #ffffff 20%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.search-filter-label {
  flex: 1 1 auto;
}

.search-filter-option-icon {
  width: 1.1rem;
  min-width: 1.65rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: color-mix(in oklab, var(--accent-color) 80%, #ffffff 20%);
}

.search-filter-option-icon svg {
  width: 1rem;
  height: 1rem;
}


/* Width helpers (optional) */
.menu--sm  { width: clamp(9rem, 40vw, 11rem); }
.menu--md  { width: clamp(10rem, 50vw, 15rem); }
.menu--lg  { width: clamp(12rem, 60vw, 20rem); }

.menu__sep.hidden { display: none; }

/* Hover/Focus */
.menu__item:hover,
.menu__item:focus-visible,
.more-menu__item:hover,
.more-menu__item:focus-visible,
.main-menu__item:hover,
.export-menu__item:hover,
.create-menu__item:hover:not(:disabled),
.export-menu__opts:hover,
.drop-menu label:hover { 
  /* background: rgba(255,255,255,.04); Retiured for accent color */
  background: hsl(from var(--accent-color) h s l / 8%);
}

/* ============================== */
/* MAIN MENU (aliases + specifics)*/
/* ============================== */
.main-menu { gap: 8px; } /* already covered by base — kept for clarity */
.main-menu__item--update,
.menu__item--update { color: var(--accent-color); }
.main-menu__item--update svg { color: currentColor; }
.main-menu__item--update.hidden { display: none !important; }
.main-menu__item--update:hover,
.main-menu__item--update:focus-visible {
  color: var(--bg);
  background-color: color-mix(in srgb, var(--accent-color) 85%, var(--accent-bg) 10%);
}

.main-menu__item--dataset-active .icon,
.main-menu__item--dataset-active svg {
  color: var(--accent-color);
}

.main-menu__item--has-submenu {
  justify-content: space-between;
}

.main-menu__item-content {
  display: inline-flex;
  align-items: center;
  gap: var(--em-gap);
  min-width: 0;
}

.main-menu__item-chevron {
  margin-left: auto;
  font-size: 1rem;
  opacity: 0.7;
}

.main-menu__item--has-submenu.is-open .main-menu__item-chevron {
  transform: translateX(2px);
  opacity: 1;
}

.main-menu__submenu {
  position: fixed;
  z-index: 10005;
  min-width: 180px;
  width: clamp(9.5rem, 16vw + 1rem, 12.5rem);
  padding: var(--menu-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-menu);
  background: var(--bg-menu);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  display: none;
  gap: 6px;
  overflow: hidden;
}

.main-menu__submenu-item {
  justify-content: flex-start;
}

.main-menu__submenu-item--empty {
  opacity: 0.7;
  cursor: default;
}

/* Version block (unchanged) */
.main-menu__version {
  margin-top: 4px;
  padding: 4px 10px 2px;
  font: var(--ff);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .02rem;
  text-align: center;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  transition: color .2s ease, background .2s ease;
}
.main-menu__version:hover,
.main-menu__version:focus-visible { color: var(--text); }
.main-menu__version:focus { outline: none; }
.main-menu__version:focus-visible {
  outline: 2px solid var(--acc, #3b82f6);
  outline-offset: 2px;
}

/* ============================== */
/* CREATE MENU (position tweak)   */
/* ============================== */
.create-menu__item .create-menu__icon { display: inline-flex; align-items: center; justify-content: center; }

/* ============================== */
/* MOBILE ‘MORE’ MENU             */
/* ============================== */
.mobile-only { display: none; }

/* placement + sizing */
.more-menu {
  right: 0.75rem;
  top: 3.25rem;
  padding: var(--menu-padding);
  width: clamp(10rem, 50vw, 12rem);
  z-index: 10050;
}
.more-menu__list { display: flex; flex-direction: column; gap: 6px; }
.more-menu__label { flex: 1; }
.more-menu__item.is-active { background: var(--table-row-hover); font-weight: 600; }
.more-menu__group, .more-menu__admin-stack { display: flex; flex-direction: column; gap: 2px; }
.more-menu__item--column { padding-left: 2rem; }
.more-menu__item--has-submenu { justify-content: space-between; }
.more-menu__item-content {
  display: inline-flex;
  align-items: center;
  gap: var(--em-gap);
  min-width: 0;
}
.more-menu__item-chevron {
  margin-left: auto;
  font-size: 1rem;
  opacity: 0.7;
}
.more-menu__item--has-submenu.is-open .more-menu__item-chevron {
  transform: translateX(2px);
  opacity: 1;
}
.more-menu__submenu {
  position: fixed;
  z-index: 10060;
  min-width: 180px;
  width: clamp(10rem, 50vw, 12rem);
  padding: var(--menu-padding);
  border: 1px solid var(--border);
  border-radius: var(--radius-menu);
  background: var(--bg-menu);
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  display: none;
  gap: 6px;
}
.more-menu__submenu.open { display: flex; flex-direction: column; }
.more-menu__submenu-list { display: flex; flex-direction: column; gap: 6px; }

/* ============================== */
/* DROP MENU                      */
/* ============================== */
.drop-menu label {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--menu-item-radius); cursor: pointer;
}
.drop-menu .hint { padding:6px 10px 4px; }
.drop-menu .row {
  display:flex; justify-content: space-between; align-items:center; gap:8px;
}

/* ============================== */
/* EXPORT / FILE MENU             */
/* ============================== */
.export-menu__opts,
.export-menu__item { 
  text-align: left; 
  border: 0; 
  border-radius: 6px; 
  background: var(--btn); 
  color: inherit; 
  cursor: pointer; 
}

.export-menu__opts {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: var(--em-gap);
  line-height: 1;
  padding: var(--em-pady) var(--em-padx);
}
.export-menu__opts .checkbox {
  box-sizing: border-box; width: 16px; height: 16px; margin: 0; transform: none; display: inline-block;
}
.export-menu__opts label { cursor: pointer; user-select: none; line-height: 1; }
.export-menu__item { 
  display: flex; 
  align-items: center; 
  gap: var(--em-gap); 
}

#btnUploadFile {
  padding: var(--em-pady) var(--em-padx);
}

/* ===================================================================== */
/* Source: layout/aops_pager.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_PAGER.CSS                 */
/* ============================== */


/* ============================== */
/* PAGER WRAPPER (FOOTER)        */
/* ============================== */
.pager {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
}

/* ============================== */
/* PAGER BUTTON                   */
/* ============================== */
.pager button {
  padding: var(--min-control-pad-y) var(--min-control-pad-x);
  border-radius: var(--custom-radius-button, clamp(4px, 2.8vw + 2px, 14px));
  border: 1px solid var(--border);
  background: color-mix(in hsl, var(--input) 60%, var(--panel) 40%);
  font: var(--custom-font-control, --fs) var(--ffss);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  min-width: clamp(1.4rem, 2.8vw + 2px, 2.2rem);
}
.pager button:not(.active):hover {
  background: var(--table-row-hover);
}

/* ============================== */
/* PAGER ACTIVE                    */
/* ============================== */
.pager .active {
  background: hsl(from var(--accent-color) h s l / 15%);
  border-color: transparent;
  color: vr(--text-on);
}

/* ===================================================================== */
/* Source: layout/aops_responsive.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_RESPONSIVE.CSS            */
/* ============================== */


/* ============================== */
/* ROWS                           */
/* ============================== */
#debugRow {
  display: flex;
  flex-wrap: wrap;
}

/* ============================== */
/* BELOW 1000 PX                  */
/* ============================== */
@media (max-width: 1000px) {
  #panel { 
    margin-top: clamp(0.1rem, 1vw + .1rem, 1rem); 
  }
  header { margin: 0; padding-bottom: 0.2rem }
  /*.wrap { margin-top: clamp(0.8rem, 2.5vw, 1rem); } */
}


/* ============================== */
/* BELOW 920 PX                   */
/* ============================== */
@media (max-width: 920px){
  .mobile-only { display:inline-flex; }

  .controls .btn.mobile-hide-when-disabled:disabled {
    display: none !important;
  }

  #viewToggleBtn, #byGroupBtn, #sortControls, #editBtn, #selectToggleBtn, #onlySelectedToggle,
  #fileMenuBtn, #analyzeBtn, #items-label, #savedListBtn,
  #toolbar .spacer, .controls.ctrl-row .spacer {
    display:none !important; }

  body[data-view="analysis"] #fileMenuBtn:not(.hidden) {
    display: inline-flex !important;
  }

  #actionRow .spacer { display:block !important; }

  #fCol{ flex: 0 1 220px; }
  #fOp { flex: 0 0 80px;  }
  #fVal{ flex: 1 1 420px; }

  #filterRow{
    grid-template-columns: 1fr 64px 1.2fr auto;
    gap: var(--control-gap);
  }

  #fOp {
    width: clamp(2rem, 5vw + 1rem, 40rem);
    padding: var(--control-pad-y);
  }

  /* Closed state: hide the native text, show our glyph */
  .op-select:not(.open) select {
    color: transparent;          /* hide value text */
    caret-color: transparent;    /* avoid ghost caret */
    text-shadow: none;           /* be explicit */
  }
  .op-select:not(.open)::after {
    content: attr(data-sym);
    position: absolute;
    left: 0.8em;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.9;
  }

  /* Open state: restore normal text (dropdown uses full phrases) */
  .op-select.open select {
    color: inherit;
    caret-color: inherit;
    -webkit-text-fill-color: inherit; 
  }

  /* When opened, hide the overlay glyph completely */
  select.compact-op.open::after { content: none; }
  .op-select.open::after { content: ''; }  
}

/* ============================== */
/* BELOW 400 PX                   */
/* ============================== */
@media (max-width: 400px) {
  #panel { 
    max-height: 88.5%; 
    margin-top: clamp(0.2rem, 1vw + .1rem, 1rem); 
  }
}

/* ============================== */
/* ABOVE 720 PX                   */
/* ============================== */
@media (min-width: 920px) {
  #moreBtn { display: none !important; }
  [data-admin-mode="true"] #moreBtn,
  .is-admin-mode #moreBtn {
    display: inline-flex !important;
  }
}

/* ============================== */
/* RESPONSIVE TWEAKS              */
/* ============================== */
@media (max-width:900px){
  .grow{flex:1 1 200px;min-width:100px}
}

/* ============================== */
/* RESPONSIVE MENU SVG            */
/* ============================== */
#moreBtn svg { transition: transform 250ms ease; }
#moreBtn.open svg { transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  #moreBtn svg { transition: none; }
}

/* ===================================================================== */
/* Source: layout/aops_rows.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_ROWS.CSS                  */
/* ============================== */

@property --row-h {
  syntax: '<length>';
  inherits: false;
  initial-value: 140px;
}


/* ============================== */
/* CONTROL ROWS                   */
/* ============================== */
.ctrl-row {
  display: flex;
  align-items: center;
  gap: var(--control-gap);
  background: var(--panel);
  overflow: clip;

  /* collapsed state */
  max-height: 0;
  padding: 0;
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;

  transition:
    max-height 220ms ease,
    opacity 180ms ease,
    transform 220ms ease;
  will-change: max-height, opacity, transform;
}

/* ============================== */
/* CONTROL ROW - OPEN             */
/* ============================== */
.ctrl-row.open {
  border-top: 1px solid var(--border);
  border-bottom: 0;

  max-height: var(--row-h, 140px); /* dynamic height */
  padding: 8px 14px;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ============================== */
/* MULTI ROW HANDLING             */
/* ============================== */
.panel.row-open .sticky-controls { border-bottom: 0; }

/* Bottom-most row gets the bottom seam */
.ctrl-row.open.open-tail {
  border-bottom: 1px solid var(--border);
}

/* ============================== */
/* accessibility: no animation */
@media (prefers-reduced-motion: reduce){
  .ctrl-row { transition: none; }
}

/* ===================================================================== */
/* Source: layout/aops_scrollbar.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_SCROLLBAR.CSS             */
/* ============================== */


/* ============================== */
/* VARIABLES                      */
/* ============================== */
:root {
  --scroll-track: var(--panel);
  --scroll-thumb: var(--scrollbar);
  --scroll-thumb-hover: color-mix(in hsl, var(--scrollbar) 85%, var(--text));
  --scrollbar-size: 8px;

  --menu-scroll-track: var(--bg-menu);
  --menu-scroll-thumb: color-mix(in hsl, var(--bg-menu) 74%, var(--text) 6%);
  --menu-scroll-thumb-hover: var(--scroll-thumb-hover);
  --menu-scrollbar-size: var(--scrollbar-size);
}

/* ============================== */
/* LAYOUT & SCROLL CONTAINERS     */
/* ============================== */
#contentArea {
  display: flex;
  flex-direction: column;
  min-height: 0; /* internal scroll */
}

/* Main scroll areas */
:is(#dataArea, #historyArea, #savedArea, #analysis, .group-overlay__content, .chart-block) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;                 /* or: overflow-y:auto; overflow-x:hidden; */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}

.drop-menu__scroll,
.more-menu__scroll,
.more-menu__submenu-scroll,
.main-menu__submenu-scroll,
.menu__scroll,
.search-helper-list {
  /* Match custom scrollbar styling used throughout the app */
  scrollbar-width: thin;
  scrollbar-color: var(--menu-scroll-thumb) var(--menu-scroll-track);
}
/* If these are NOT scroll containers, keep overflow visible. */
.table-wrap,
.card-grid {
  overflow: visible;
  max-height: none;
}

.tbl thead th { position: sticky; top: 0; z-index: 1; }

/* ============================== */
/* WEBKIT SCROLLBARS              */
/* ============================== */
:is(#dataArea, #historyArea, #savedArea, .card-grid, .group-overlay__content, #analysis, .chart-block)::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
:is(#dataArea, #historyArea, #savedArea, .card-grid, .group-overlay__content, #analysis, .chart-block)::-webkit-scrollbar-track { background: var(--scroll-track); border-radius: 8px; }
:is(#dataArea, #historyArea, #savedArea, .card-grid, .group-overlay__content, #analysis, .chart-block)::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 8px;
  border: 2px solid var(--scroll-track);
}
:is(#dataArea, #historyArea, #savedArea, .card-grid, .group-overlay__content, #analysis, .chart-block)::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }

:is(.drop-menu__scroll, .more-menu__scroll, .more-menu__submenu-scroll, .main-menu__submenu-scroll, .menu__scroll, .search-helper-list)::-webkit-scrollbar { width: var(--menu-scrollbar-size); height: var(--menu-scrollbar-size); }
:is(.drop-menu__scroll, .more-menu__scroll, .more-menu__submenu-scroll, .main-menu__submenu-scroll, .menu__scroll, .search-helper-list)::-webkit-scrollbar-track { background: var(--menu-scroll-track); border-radius: 8px; }
:is(.drop-menu__scroll, .more-menu__scroll, .more-menu__submenu-scroll, .main-menu__submenu-scroll, .menu__scroll, .search-helper-list)::-webkit-scrollbar-thumb {
  background-color: var(--menu-scroll-thumb);
  border-radius: 8px;
  border: 2px solid var(--menu-scroll-track);
}
:is(.drop-menu__scroll, .more-menu__scroll, .more-menu__submenu-scroll, .main-menu__submenu-scroll, .menu__scroll, .search-helper-list)::-webkit-scrollbar-thumb:hover { background-color: var(--menu-scroll-thumb-hover); }

/* ============================== */
/* GLOBAL SCROLLBAR               */
/* ============================== */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--bg);
}
html::-webkit-scrollbar { width: var(--scrollbar-size); height: var(--scrollbar-size); }
html::-webkit-scrollbar-track { background: var(--bg); }
html::-webkit-scrollbar-thumb {
  background-color: var(--scroll-thumb);
  border-radius: 8px;
  border: 2px solid var(--bg);
}
html::-webkit-scrollbar-thumb:hover { background-color: var(--scroll-thumb-hover); }

/* Fixed-height non-scrollers */
#filterRow, .chips, .foot, .sticky-controls { flex: 0 0 auto; }

@supports (scrollbar-color: auto) {
  :is(#dataArea, #historyArea, #savedArea, #analysis, .group-overlay__content, .chart-block) {
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    scrollbar-width: thin;
  }
}

/* ===================================================================== */
/* Source: pages/aops_analysis.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_ANALYSIS.CSS              */
/* ============================== */

:root { --chart-density: min; }

/* ============================== */
/* ANALYSIS BASE                  */
/* ============================== */
#analysis {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;          /* allow children to shrink */
  overflow: auto;         /* scroll vertically */
  -webkit-overflow-scrolling: touch;
  padding: 0.75rem clamp(0.55rem, 1vw, 0.75rem);
  margin-top: .5rem;
}

.error { color: var(--danger, #e66); }

/* ============================== */
/* CHARTS                         */
/* ============================== */
.analysis-charts {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin-bottom: 20px;
}
.chart-wrap {
  width: 100%;
  height: clamp(180px, 32vh, 380px);
}
.chart {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px;
}
.chart-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}
.chart-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.chart-card,
.chart-block { position: relative; z-index: 0; }
.chart-rail { display:block; }

.chart-block {
  width: 100%;
  overflow: auto;
  margin-bottom: .75rem;
}
.analyzer-chart-block-spaced { margin-top: 0.5rem; }
.chart-block canvas {
  max-width: 100%;
  display: block;
  margin-top: 1rem;
}
.running-balance__title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.running-balance__mode {
  font-size: 12px;
  color: var(--muted);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: var(--circle);
}
.running-balance__chart { margin-top: 0.5rem; }
.running-balance__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.running-balance__meta strong { color: var(--text); font-weight: 600; }
.running-balance__hint {
  margin: 0.25rem 0 0;
  color: var(--muted);
}
.running-balance__empty { margin: 0; color: var(--muted); }

/* Two-column layout for chart + table; stacks on narrow screens */
.chart-table-grid{
  display:grid;
  grid-template-columns: minmax(360px, 1fr) minmax(340px, 520px);
  align-items:start;
  gap: 1.25rem 2rem;
}
.chart-table-grid .chart-side,
.chart-table-grid .table-side{
  display: block;
}
.chart-table-grid .chart-side .section{
  height: 100%;
}
.chart-table-grid .chart-side .chart-block canvas{
  /* ensure the pie isn’t tiny */
  min-height: 320px;
}
.movement-types-grid .table-scroll{
  margin-top: 0;
}

/* ============================== */
/* SECTIONS                       */
/* ============================== */
.analyzer-section-title { margin: 0; }
/* Make panel a vertical flex container */
section.panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.section-head__spacer { flex: 1 1 auto; }
.analyzer-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.analyzer-legend-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
}

.analyzer-legend-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.analyzer-legend-dot {
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--legend-color, #999);
  display: inline-block;
}

.two-col{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1rem;
}

/* ============================== */
/* CHART BUTTON                    */
/* ============================== */
.btn.btn-chart {
  font-size:var(--fsm);
  border: 1px solid var(--accent-color);
  padding: .4rem .7rem;
  line-height: 1.1;
}
/* ============================== */

@media (min-width: 900px){
  .analysis-charts { grid-template-columns: 1fr 1fr; }
}

/* ============================== */
/* PANE                           */
/* ============================== */
.analysis-pane { padding: 16px; }
.analysis-pane .ana-head h3 { margin: 0 0 4px; }
.analysis-pane .ana-section { margin-top: 16px; }
.analysis-pane .ana-table { width: 100%; border-collapse: collapse; }
.analysis-pane .ana-table th,
.analysis-pane .ana-table td { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
.analysis-pane .muted { color: var(--muted); }

/* ============================== */
/* TABLES                         */
/* ============================== */
.table-set {
  break-inside: avoid;
  display: block;
  margin-bottom: 1rem;
  position: relative; z-index: 1; /* sits above charts; no clipping */
}
.table-set__title {
  display:flex; align-items:center; gap:.6rem;
  font-weight:600;
  /*padding:.4rem .2rem .6rem;*/
  padding: clamp(0.1rem, 1vw, 0.4rem) .2rem clamp(0.2rem, 1vw, .6rem);
  border-bottom: 1px solid var(--line, rgba(255,255,255,0.08));
  margin-bottom:.4rem;
}

.an-table {
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  background: var(--panel, rgba(255,255,255,0.04));
  border-radius:10px;
  overflow: clip;
  table-layout: fixed;            /* keeps header & cells aligned */
  margin-bottom: 1.5rem;
}
.table--analysis thead th[data-sortable] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 1.5rem;
}
.table--analysis thead th[data-sortable]::after {
  content: '↕';
  position: absolute;
  right: 0.6rem;
  font-size: 0.75rem;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.table--analysis thead th[data-sortable][aria-sort="ascending"]::after {
  content: '▲';
  opacity: 0.85;
}
.table--analysis thead th[data-sortable][aria-sort="descending"]::after {
  content: '▼';
  opacity: 0.85;
}
.table--analysis thead th[data-sortable].is-sorted {
  color: var(--accent-color, #3fa9f5);
}
.table--analysis thead th[data-sortable]:focus-visible {
  outline: 2px solid var(--accent-color, #3fa9f5);
  outline-offset: 2px;
}

.usl-cell {
  white-space: nowrap;
}

.usl-cell .usl-tag {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  letter-spacing: 0.02em;
}

.usl-tag__code {
  font-weight: 600;
}

.usl-tag__assignment {
  color: var(--muted);
  font-size: 0.9em;
}

.usl-cell.is-missing,
.usl-cell.is-missing .usl-tag__code,
.usl-cell.is-missing .usl-tag__assignment {
  color: var(--accent-color);
  font-style: italic;
}

.usl-cell.is-missing .usl-tag {
  opacity: 0.95;
}

@media print {
  .usl-cell.is-missing,
  .usl-cell.is-missing .usl-tag__code,
  .usl-cell.is-missing .usl-tag__assignment {
  color: var(--accent-color);
  font-style: italic;
  }

  .usl-cell.is-missing .usl-tag {
    opacity: 0.32;
  }
}

.an-table thead th,
.an-table th.num {
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.an-table tr {
    border-bottom:1px solid var(--border);
}
.an-table tr:last-child td{ border-bottom:none; }
.an-table td.num,
.an-table th.num {
  font-variant-numeric: tabular-nums;   /* column edges stay straight */
}

.an-table td.num,
.an-table th.num {
  text-align:left;
}
.an-table.compact td,
.an-table.compact th { padding:.4rem .5rem; }

/* Masonry-like tables: tightly packed columns, no huge white gaps */
.masonry {
  columns: 2 360px;    /* up to 2 columns; auto drops to 1 below ~720px */
  column-gap: 1rem;
}
@media (max-width: 900px){
  .masonry{ columns: 1; }
}

/* ============================== */
/* BY ID                          */
/* ============================== */
/* Data pane consumes remaining space and can scroll */
#dataArea {
  flex: 1 1 auto;
  min-height: 0;                 /* allow inner overflow */
  overflow: auto;                /* vertical scroll when needed */
  -webkit-overflow-scrolling: touch;
}

/* Optional: unify inner layout so content flexes to width nicely */
#analysis .analysis-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: .5rem;
}

/* Rows/blocks that wrap to available width */
#analysis .row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-start;
}

/* Make any tall blocks inside analysis scroll independently if needed */
#analysis .scroll {
  min-height: 0;
  overflow: auto;
}

/* Keep stretch behavior scoped to explicit auto-layout analysis tables */
#analysis .table--analysis.auto-layout { width: 100%; }

/* Optional grid if you render multiple charts/KPIs */
#analysis .analysis-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Let the canvas fill its wrapper */
#analysis .chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;     /* maintainAspectRatio:false will use this */
  display: block;
  max-width: none !important;  /* remove any ~600px caps */
}

/* top bar analysis layout */
#topbarAnalysis .fields {
  display: flex;
  align-items: center;
  gap: .75rem;
}
#topbarAnalysis .spacer { flex: 1 1 auto; }
#topbarAnalysis .group.right {
  display: flex; align-items: center; gap: .5rem;
}
#topbarAnalysis .analysis-selector { min-width: 220px; }

@media (max-width: 900px){
  .chart-table-grid{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .chart-table-grid .chart-side .chart-block canvas{
    min-height: 260px;
  }
}


@media (max-width: 700px)  { :root { --chart-density: min; } }

/* ===================================================================== */
/* Source: pages/aops_maintenance.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_MAINTENANCE.CSS          */
/* ============================== */


/* ============================== */
/* MAINTENANCE TABLE WRAPPER     */
/* ============================== */
#maintenanceTableWrap {
  margin-top: 0;
}

#maintenanceTableWrap table {
  width: 100%;
}

#maintenanceTableWrap caption {
  font-weight: 600;
  text-align: left;
  padding-bottom: 0.5rem;
}

#maintenanceTableWrap th,
#maintenanceTableWrap td {
  padding: 0.5rem 0.75rem;
  align-content: center;
  border-bottom: 1px solid var(--border, #e5e5e5);
}

#maintenanceTableWrap th.select-col,
#maintenanceTableWrap td.select-col {
  border-right: 1px solid var(--border, #e5e5e5);
}


#maintenanceTableWrap td .cell-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.4rem;
}

#maintenanceTableWrap td .cell-indicator__value {
  text-align: left;
}

#maintenanceTableWrap td .cell-indicator__slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 12px;
  width: 12px;
  min-width: 12px;
}

#maintenanceTableWrap td .cell-indicator__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  min-width: 20px;
}

#maintenanceTableWrap td .cell-indicator__icon--empty {
  visibility: hidden;
}

#maintenanceTableWrap td .cell-indicator__icon .icon {
  width: 1.2rem;
  height: 1.2rem;
}

#maintenanceTableWrap td.cell-indicator--up .cell-indicator__icon {
  color: color-mix(in oklab, lightgreen 70%, var(--text));
}

#maintenanceTableWrap td.cell-indicator--down .cell-indicator__icon {
  color: color-mix(in oklab, orangered 70%, var(--text));
}

#maintenanceTableWrap td.maintenance-changed-cell,
#maintenanceTableWrap tr:hover td.maintenance-changed-cell {
  font-weight: 600;
  background-color: color-mix(in oklab, var(--accent-color) 5%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-color) 15%, transparent);
}

/* ============================== */
/* MAINTENANCE ACTION MENU        */
/* ============================== */
.maintenance-table {
  position: relative;
}

.maintenance-action-menu {
  width: clamp(8rem, 30vw, 12rem);
  padding: 8px;
}

.maintenance-action-menu .menu-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.maintenance-action-menu .menu-option:hover,
.maintenance-action-menu .menu-option.is-active {
  background: rgba(255, 255, 255, .04);
}

.maintenance-action-menu .menu-option:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent-color, #4c89ff) 70%, transparent);
  outline-offset: 1px;
}

td.maintenance-action-cell {
  cursor: pointer;
}

td.maintenance-action-cell.menu-open {
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent-color, #4c89ff) 65%, transparent);
}

td.maintenance-flag-cell {
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  user-select: none;
}

td.maintenance-flag-cell:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--accent-color, #4c89ff) 70%, transparent);
  outline-offset: 2px;
}

/* ============================== */
/* MAINTENANCE COLUMN TWEKAS      */
/* ============================== */
/* ACTION */
#maintenanceTableWrap th:nth-child(2),
#maintenanceTableWrap td:nth-child(2) {
  width: clamp(5.5ch, 8vw, 8ch);
}
/* FLAG */
#maintenanceTableWrap th:nth-child(10),
#maintenanceTableWrap td:nth-child(10) {
  width: clamp(2ch, 4vw, 5ch);
}
/* USAGE */
#maintenanceTableWrap th:nth-child(12),
#maintenanceTableWrap td:nth-child(12) {
  width: clamp(18ch, 4vw, 20ch);
}

/* ===================================================================== */
/* Source: pages/aops_pong.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_PONG.CSS                  */
/* ============================== */

.content-area.pong-active {
  background: var(--panel);
}

.content-area.pong-active > :not(.pong-overlay) {
  display: none !important;
}

.pong-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  border-radius: inherit;
  background: var(--panel);
  box-shadow: inset 0 0 0 1px var(--border);
  overflow: hidden;
}

.pong-close {
  position: absolute;
  top: clamp(10px, 2vw, 16px);
  right: clamp(10px, 2vw, 16px);
  width: 30px;
  height: 30px;
  border-radius: var(--circle);
  border: 1px solid var(--border);
  background: var(--soft);
  color: var(--muted);
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}

.pong-close:hover,
.pong-close:focus-visible {
  background: var(--accent-color);
  border-color: transparent;
  color: #fff;
  outline: none;
}

.pong-scoreboard {
  padding: clamp(16px, 3vw, 28px) clamp(20px, 4vw, 40px) clamp(12px, 2.5vw, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  color: var(--text-color-active);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  user-select: none;
  position: relative;
  z-index: 1;
}

.pong-scoreboard__scores {
  display: flex;
  align-items: baseline;
  gap: clamp(10px, 2vw, 20px);
  font-weight: 600;
}

.pong-score-label {
  font-size: clamp(0.68rem, 1.6vw, 0.82rem);
  color: var(--muted);
  letter-spacing: 0.12em;
}

.pong-score-value {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  color: var(--text-color-active);
  font-weight: 700;
}

.pong-score-divider {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  color: var(--muted);
}

.pong-scoreboard__hint {
  font-size: clamp(0.7rem, 1.5vw, 0.85rem);
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted);
  text-align: center;
}

.pong-canvas {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border-radius: clamp(12px, 2vw, 18px);
  background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 65%), var(--panel);
}

.pong-canvas.pong-awaiting-start {
  cursor: pointer;
}

.pong-canvas.pong-awaiting-start:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 4px;
}

/* ===================================================================== */
/* Source: pages/aops_quiz.css */
/* ===================================================================== */
/* ============================== */
/* AOPS_QUIZ.CSS                  */
/* ============================== */

/* ============================== */
/* QUIZ ROOT (Scoped Tokens)      */
/* ============================== */
.content-area.inventory-quiz-active{
  /* core palette / tokens */
  --quiz-hl: var(--highlight-rgb, 138, 123, 255); /* comma-form for rgba(var()) */
  --quiz-panel: var(--panel);
  --quiz-soft: var(--soft, rgba(255,255,255,.88));
  --quiz-overlay-bg: var(--overlay-bg, var(--quiz-panel));
  --quiz-accent: var(--accent-color, #635bff);
  --quiz-text: var(--text-color-active, #1d2233);
  --quiz-title: var(--title-color, var(--quiz-text));
  --quiz-muted: var(--muted);
  --quiz-border: var(--border, rgba(0,0,0,.08));
  --quiz-border-soft: var(--border-soft, var(--quiz-border));

  /* sizing */
  --quiz-shell-radius: clamp(18px, 3vw, 28px);
  --quiz-shell-pad: clamp(20px, 3.2vw, 36px);
  --quiz-overlay-pad: clamp(12px, 3vw, 28px);
  --quiz-gap: clamp(10px, 2.6vw, 28px);

  /* elevation */
  --quiz-elev-shell: var(--shadow, 0 24px 70px rgba(18,22,33,.25));
  --quiz-elev-btn: 0 10px 24px rgba(18,22,33,.18);
  --quiz-elev-btn-hover: 0 14px 30px rgba(18,22,33,.24);
  --quiz-elev-option: var(--shadow, 0 10px 24px rgba(18,22,33,.12));

  /* motion system */
  --quiz-motion: 1;
  --quiz-dur:      calc(var(--quiz-motion) * 160ms);
  --quiz-dur-fast: calc(var(--quiz-motion) * 80ms);
  --quiz-lift-1:   calc(var(--quiz-motion) * -1px);
  --quiz-lift-2:   calc(var(--quiz-motion) * -2px);
  --quiz-scale-105: calc(1 + (var(--quiz-motion) * .05));

  --quiz-trn-colors: background var(--quiz-dur) ease,
                     border-color var(--quiz-dur) ease,
                     color var(--quiz-dur) ease;
  --quiz-trn-lift:   transform var(--quiz-dur) ease,
                     box-shadow var(--quiz-dur) ease;
  --quiz-trn-base:   var(--quiz-trn-lift), var(--quiz-trn-colors);

  /* focus ring */
  --quiz-focus: 0 0 0 3px color-mix(in srgb, var(--quiz-accent) 40%, transparent);

  position: relative;
  background: var(--quiz-panel);
  border-radius: var(--radius, 18px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
  user-select: none;
}

.content-area.inventory-quiz-active > :not(.inventory-quiz-overlay){
  display: none !important;
}

/* ============================== */
/* OVERLAY + SHELL                */
/* ============================== */
.inventory-quiz-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--quiz-overlay-pad);
  overflow: hidden;

  background:
    radial-gradient(140% 140% at 10% 0%,
      rgba(var(--quiz-hl), .16) 0%,
      rgba(var(--quiz-hl), 0) 55%),
    radial-gradient(120% 120% at 85% 100%,
      rgba(var(--quiz-hl), .22) 0%,
      rgba(var(--quiz-hl), 0) 65%),
    var(--quiz-overlay-bg);
}

.inventory-quiz-shell{
  position: relative;
  width: 100%;
  max-height: 98%;
  display: flex;
  flex-direction: column;
  padding: var(--quiz-shell-pad);
  border-radius: var(--quiz-shell-radius);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  background:
    linear-gradient(150deg,
      rgba(var(--quiz-hl), .08) 0%,
      rgba(var(--quiz-hl), .02) 65%),
    var(--quiz-panel, rgba(255,255,255,.85));

  box-shadow: var(--quiz-elev-shell);
}

/* ============================== */
/* SHARED BASES                   */
/* ============================== */
:where(.inventory-quiz-close,
       .inventory-quiz-difficulty__option,
       .inventory-quiz-button,
       .inventory-quiz-option){
  transition: var(--quiz-trn-base);
}

:where(.inventory-quiz-close,
       .inventory-quiz-difficulty__option,
       .inventory-quiz-button,
       .inventory-quiz-option):focus-visible{
  outline: none;
  box-shadow: var(--quiz-focus), var(--quiz-elev-btn, none);
}

/* ============================== */
/* CLOSE BUTTON                   */
/* ============================== */
.inventory-quiz-close{
  position: absolute;
  top: clamp(12px, 2.4vw, 20px);
  right: clamp(12px, 2.4vw, 20px);
  width: 34px;
  height: 34px;
  border-radius: var(--circle);
  border: 1px solid var(--quiz-border);
  color: var(--quiz-text);
  background: var(--quiz-soft);

  font-size: 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  z-index: 2;
}

.inventory-quiz-close:is(:hover, :focus-visible){
  transform: scale(var(--quiz-scale-105));
  background: var(--quiz-accent);
  border-color: transparent;
  color: #fff;
}

/* ============================== */
/* TOP BAR                        */
/* ============================== */
.inventory-quiz-top{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.inventory-quiz-title{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(8px, 1.8vw, 16px);
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  font-weight: 700;
  color: var(--quiz-title);
  letter-spacing: .02em;
}

.inventory-quiz-title__label{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

/* difficulty pill */
.inventory-quiz-title__difficulty{
  --pill-bg: rgba(var(--quiz-hl), .16);
  --pill-border: rgba(var(--quiz-hl), .36);
  --pill-color: var(--quiz-accent);

  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--circle);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  color: var(--pill-color);

  font-size: clamp(.68rem, 1.6vw, .78rem);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
  white-space: nowrap;

  transition: var(--quiz-trn-colors);
}

.inventory-quiz-meta{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(16px, 2.4vw, 28px);

  margin-left: auto;
  flex: 1 1 auto;
  min-width: min(560px, 100%);
}

/* ============================== */
/* STATUS + TIMER                 */
/* ============================== */
.inventory-quiz-status{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 1.2rem;
  gap: clamp(12px, 2vw, 22px);
  color: var(--quiz-muted);
  flex: 0 0 auto;
  text-align: right;
}

.inventory-quiz-status > span{ white-space: nowrap; }

:where(.inventory-quiz-body-timer, .inventory-quiz-body-timer .inventory-quiz-timer-cluster){
  display: flex;
  justify-content: center;
}

.inventory-quiz-timer-cluster{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding-top: clamp(.2rem, 1.2vw, .9rem);
}

.inventory-quiz-timer{
  font-size: clamp(.96rem, 2.4vw, 1.2rem);
  font-weight: 700;
  color: var(--quiz-text);
  min-width: 72px;
}

.inventory-quiz-progress{
  position: relative;
  width: clamp(120px, 20vw, 200px);
  height: 6px;
  background: var(--quiz-border-soft);
  border-radius: var(--circle);
  overflow: hidden;
}

.inventory-quiz-progress__fill{
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform var(--quiz-dur-fast) linear;
  background: linear-gradient(90deg, var(--quiz-accent) 0%, rgba(var(--quiz-hl), .85) 100%);
}

.inventory-quiz-score,
.inventory-quiz-round,
.inventory-quiz-strikes{
  font-size: .9rem;
  font-weight: 600;
  color: var(--quiz-text);
}

/* ============================== */
/* DIFFICULTY SELECT              */
/* ============================== */
.inventory-quiz-difficulty{
  display: flex;
  flex-direction: column;
  min-width: 180px;
  flex: 0 0 auto;
  align-items: center;
  text-align: center;
}

.inventory-quiz-difficulty__label{
  display: none;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--quiz-muted);
}

.inventory-quiz-difficulty__options{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border-radius: var(--circle);
  border: 1px solid rgba(var(--quiz-hl), .25);
  background: linear-gradient(145deg, rgba(var(--quiz-hl), .20) 0%, rgba(255,255,255,.14) 100%);
}

.inventory-quiz-difficulty__status{
  display: block;
  min-height: .5rem;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--quiz-muted);
  text-align: center;
}

.inventory-quiz-difficulty__option{
  border: none;
  border-radius: var(--circle);
  padding: 6px 14px;
  background: transparent;
  color: var(--quiz-text);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

.inventory-quiz-difficulty__option[disabled]{ pointer-events: none; }

.inventory-quiz-difficulty__option:is(:hover, :focus-visible){
  background: rgba(var(--quiz-hl), .18);
  color: var(--quiz-accent);
}

.inventory-quiz-difficulty__option.is-active{
  background: var(--quiz-accent);
  color: #fff;
  box-shadow: 0 8px 16px rgba(var(--quiz-hl), .28);
}

.inventory-quiz-difficulty__option.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.inventory-quiz-difficulty--locked .inventory-quiz-difficulty__status{ color: var(--quiz-accent); }
.inventory-quiz-difficulty--locked .inventory-quiz-difficulty__options{ opacity: .9; }
.inventory-quiz-difficulty--locked .inventory-quiz-difficulty__option{ cursor: not-allowed; }
.inventory-quiz-difficulty--locked .inventory-quiz-difficulty__option.is-active{ opacity: 1; }

.inventory-quiz-difficulty-hidden{ display: none !important; }

/* ============================== */
/* BODY / INTRO / SUMMARY         */
/* ============================== */
.inventory-quiz-body{
  display: flex;
  flex-direction: column;
  gap: var(--quiz-gap);
  text-align: center;
}

:where(.inventory-quiz-intro, .inventory-quiz-summary){
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.inventory-quiz-intro{
  gap: clamp(14px, 2.2vw, 22px);
  padding: clamp(16px, 2.6vw, 28px) clamp(14px, 3.6vw, 40px);
}

:where(.inventory-quiz-intro__difficulty, .inventory-quiz-summary__difficulty){
  width: 100%;
  display: flex;
  justify-content: center;
}

.inventory-quiz-summary{
  gap: clamp(0rem, 2vw, .4rem);
  padding: clamp(2px, 2.4vw, 10px) clamp(8px, 2.6vw, 22px);
}

.inventory-quiz-summary__difficulty{ margin: 0; }

.inventory-quiz-intro__title{
  font-size: clamp(1.35rem, 3.2vw, 1.7rem);
  font-weight: 700;
  color: var(--quiz-text);
}

.inventory-quiz-summary__title{
  display: none;
  margin: 0;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 700;
  color: var(--quiz-text);
}

.inventory-quiz-summary__score{
  margin: 0;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 700;
  color: var(--quiz-accent);
}

.inventory-quiz-summary__actions{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 16px);
  margin-top: clamp(6px, 1.8vw, 18px);
}

/* ============================== */
/* PRIMARY/SECONDARY BUTTONS      */
/* ============================== */
.inventory-quiz-button{
  border-radius: var(--circle);
  font-weight: 600;
  cursor: pointer;
}

.inventory-quiz-button--primary{
  border: none;
  color: #fff;
  background: var(--quiz-accent);
  box-shadow: var(--quiz-elev-btn);
}

.inventory-quiz-intro__start{
  padding: .75rem 2.6rem;
  font-size: 1rem;
}

.inventory-quiz-summary__restart{
  padding: .62rem clamp(.9rem, 2.4vw, 2.05rem);
  font-size: .95rem;
}

.inventory-quiz-button--primary:is(:hover, :focus-visible){
  transform: translateY(var(--quiz-lift-1));
  box-shadow: var(--quiz-elev-btn-hover);
}

.inventory-quiz-summary__leaderboard{
  border: 1px solid color-mix(in srgb, var(--quiz-accent) 40%, transparent);
  padding: .62rem clamp(.9rem, 2.4vw, 2.05rem);
  font-size: .95rem;
  color: var(--quiz-text);
  background: color-mix(in hsla, var(--quiz-accent) 16%, transparent);
  box-shadow: 0 8px 20px rgba(18,22,33,.16);
}

.inventory-quiz-summary__leaderboard:is(:hover, :focus-visible){
  transform: translateY(var(--quiz-lift-1));
  box-shadow: 0 12px 26px rgba(18,22,33,.22);
}

.inventory-quiz-summary__leaderboard:disabled{
  cursor: wait;
  opacity: .7;
  box-shadow: none;
}

/* ============================== */
/* LEADERBOARD PANEL              */
/* ============================== */
.inventory-quiz-summary__leaderboard-panel{
  width: min(820px, 100%);
  padding: clamp(12px, 2.2vw, 18px);
  border-radius: 18px;
  text-align: left;
  background: color-mix(in srgb, var(--panel, #f7f1ea) 92%, var(--quiz-accent) 8%);
  box-shadow: 0 12px 30px rgba(18,22,33,.14);
}

.inventory-quiz-summary__leaderboard-title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: clamp(.8rem, 1.6vw + .2rem, 1rem);
  font-weight: 700;
  margin-bottom: .5rem;
}

.inventory-quiz-summary__leaderboard-title-label,
.inventory-quiz-summary__leaderboard-title-mode{
  color: var(--quiz-muted);
}

.inventory-quiz-summary__leaderboard-title-label{ padding-left: .2rem; }
.inventory-quiz-summary__leaderboard-title-mode{ padding-right: .2rem; }

.inventory-quiz-summary__leaderboard-status{ margin: 0 0 .4rem; }

.inventory-quiz-summary__leaderboard-table-wrap{ overflow-x: auto; }

.inventory-quiz-summary__leaderboard-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  color: var(--quiz-text);
}

.inventory-quiz-summary__leaderboard-table :is(th, td){
  padding: clamp(.1rem, 1.4vw, .4rem) .35rem;
  letter-spacing: .04em;
  text-align: center;
}

.inventory-quiz-summary__leaderboard-table th{
  letter-spacing: .08em;
  font-size: var(--fxs);
  color: var(--quiz-muted);
}

.inventory-quiz-summary__leaderboard-table tr:last-child td{ border-bottom: none; }

.inventory-quiz-summary__leaderboard-empty{
  text-align: center;
  font-size: .85rem;
  color: var(--quiz-muted);
  padding: .75rem .35rem;
}

/* ============================== */
/* DESCRIPTION / FEEDBACK         */
/* ============================== */
.inventory-quiz-intro__description{
  font-size: .98rem;
  color: var(--quiz-muted);
  max-width: 420px;
}

.inventory-quiz-description{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inventory-quiz-description__main{
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  font-weight: 600;
  color: var(--quiz-text);
}

.inventory-quiz-description__meta{
  font-size: .86rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--quiz-muted);
}

.inventory-quiz-feedback{
  font-size: .95rem;
  color: var(--quiz-accent);
}

/* ============================== */
/* OPTIONS GRID + OPTION BUTTONS  */
/* ============================== */
.inventory-quiz-options{
  display: grid;
  gap: clamp(12px, 2vw, 18px);
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  width: min(80%, 980px);
  margin-inline: auto;
  align-content: center;
}

.inventory-quiz-option{
  border: 1px solid var(--quiz-border-soft);
  border-radius: clamp(12px, 2vw, 16px);
  padding: clamp(14px, 2.4vw, 18px);

  background:
    linear-gradient(155deg, rgba(var(--quiz-hl), .12) 0%, rgba(255,255,255,.12) 100%),
    var(--quiz-soft);

  color: var(--quiz-text);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  font-weight: 700;
  cursor: pointer;

  box-shadow: var(--quiz-elev-option);
}

.inventory-quiz-option:is(:hover, :focus-visible){
  transform: translateY(var(--quiz-lift-2));
  box-shadow: 0 14px 28px rgba(18,22,33,.18);
  border-color: var(--quiz-accent);
}

.inventory-quiz-option--correct{
  background: rgba(77,192,148,.22);
  border-color: rgba(77,192,148,.6);
  color: var(--text-on, #0f3d2b);
  box-shadow: 0 12px 28px rgba(77,192,148,.28);
}

.inventory-quiz-option--incorrect{
  background: rgba(231,99,107,.22);
  border-color: rgba(231,99,107,.58);
  color: var(--text-on, #521a20);
  box-shadow: none;
}

.inventory-quiz-option--inactive{
  opacity: .6;
  transform: none;
  box-shadow: none;
}

.inventory-quiz-option:disabled{ cursor: default; }

/* ============================== */
/* DARK THEME OVERRIDES (vars)    */
/* ============================== */
[data-theme="dark"] .content-area.inventory-quiz-active{
  --quiz-text: var(--text-color-active, #f2f4ff);
  --quiz-title: var(--text-color-active, #f2f4ff);
  --quiz-elev-shell: var(--shadow, 0 12px 26px rgba(0,0,0,.45));
}

[data-theme="dark"] .inventory-quiz-title__difficulty{
  --pill-bg: rgba(var(--quiz-hl), .25);
  --pill-border: rgba(var(--quiz-hl), .55);
  --pill-color: var(--text-color-inverse, #f7f7ff);
}

[data-theme="dark"] .inventory-quiz-feedback{
  color: rgba(149,136,255,.92);
}

[data-theme="dark"] .inventory-quiz-button--primary{
  background: rgba(138,123,255,.95);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
[data-theme="dark"] .inventory-quiz-button--primary:is(:hover, :focus-visible){
  box-shadow: 0 18px 36px rgba(0,0,0,.52);
}

[data-theme="dark"] .inventory-quiz-summary__leaderboard{
  color: #fff;
  background: color-mix(in srgb, var(--quiz-accent) 28%, #1a1f2e);
  border-color: color-mix(in srgb, var(--quiz-accent) 50%, transparent);
  box-shadow: 0 12px 26px rgba(0,0,0,.45);
}

[data-theme="dark"] .inventory-quiz-summary__leaderboard-panel{
  background: color-mix(in srgb, var(--panel, #1b2130) 92%, var(--quiz-accent) 12%);
  box-shadow: 0 16px 34px rgba(0,0,0,.45);
}

[data-theme="dark"] .inventory-quiz-summary__leaderboard-title{ color: #fff; }

/* ============================== */
/* RESPONSIVE                     */
/* ============================== */
@media (max-width: 720px){
  .inventory-quiz-top{
    justify-content: center;
    text-align: center;
  }

  .inventory-quiz-meta{
    justify-content: center;
    margin-left: 0;
    text-align: center;
    flex: 1 1 100%;
  }

  .inventory-quiz-status{
    justify-content: center;
    text-align: center;
    width: 100%;
  }

  .inventory-quiz-shell{
    padding: clamp(4px, 4vw, 12px);
  }

  .inventory-quiz-options{
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    width: 100%;
  }
}

/* ============================== */
/* REDUCED MOTION                 */
/* ============================== */
@media (prefers-reduced-motion: reduce){
  .content-area.inventory-quiz-active{ --quiz-motion: 0; }
}