:root {
  color-scheme: only light;
  --paper: #fbfaf6;
  --ink: #1b1b1b;
  --muted: #6d6a63;
  --grid: #d8d4cc;
  --accent: #2c6cdf;
  --button-fill: #2e3541;
  --button-fill-hover: #3a4350;
  --button-fill-active: #252c36;
  --font-sans: "Inter", "Segoe UI", sans-serif;
  --panel-bg-primary: linear-gradient(
    180deg,
    rgba(20, 24, 31, 0.96) 0%,
    rgba(12, 15, 20, 0.98) 100%
  );
  --panel-bg-secondary: linear-gradient(
    180deg,
    rgba(30, 35, 44, 0.96) 0%,
    rgba(22, 26, 33, 0.98) 100%
  );
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-border-strong: rgba(255, 255, 255, 0.12);
  --panel-shadow: 0 18px 36px rgba(0, 0, 0, 0.45);
  --panel-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --panel-bg: var(--panel-bg-primary);
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/Inter-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #121419;
  font-family: var(--font-sans);
  color: var(--ink);
}

body.editor-shell {
  --controls-top: 88px;
}

body.editor-shell #controls {
  top: 88px;
  max-height: calc(100vh - 112px);
}

body.editor-shell #stage {
  padding-top: 96px;
  max-height: calc(100vh - 96px);
}

.editor-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgba(9, 14, 20, 0.88);
  color: #dfefff;
  transition: opacity 0.2s ease;
}

.editor-loading-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.editor-loading-spinner {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 3px solid rgba(98, 212, 255, 0.3);
  border-top-color: #32c5fd;
  animation: editor-loading-spin 0.85s linear infinite;
}

.editor-loading-text {
  font-size: 14px;
  letter-spacing: 0.01em;
}

@keyframes editor-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "left center right";
  align-items: center;
  gap: 24px;
  min-height: 56px;
  padding: 0 20px;
  background: #0f1115;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #f2f2f2;
  backdrop-filter: blur(10px);
}

.app-header-zone {
  min-width: 0;
  display: flex;
  align-items: center;
}

.app-header-zone-left {
  grid-area: left;
  justify-self: start;
}

.app-header-zone-center {
  grid-area: center;
  position: relative;
  justify-self: center;
  padding: 0 32px;
}

.app-header-zone-right {
  grid-area: right;
  justify-self: end;
}

.app-header-separator {
  display: none;
}

.app-header-zone-center::before,
.app-header-zone-center::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-50%);
}

.app-header-zone-center::before {
  left: 0;
}

.app-header-zone-center::after {
  right: 0;
}

.app-header-identity {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.app-header-document-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex-wrap: nowrap;
}

.app-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.app-logo img {
  display: block;
  height: 20px;
  width: auto;
}

.project-name-input {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  color: #f7f7f7;
  padding: 6px 10px;
  border-radius: 8px;
  width: clamp(180px, 22vw, 320px);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  min-height: 36px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.project-name-input:focus {
  outline: none;
  border-color: rgba(44, 183, 196, 0.42);
  background: rgba(255, 255, 255, 0.07);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(44, 183, 196, 0.18);
}

.project-name-input:hover:not(:focus) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.13);
}

.project-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(231, 238, 245, 0.82);
  white-space: nowrap;
}

.project-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #5bd38d;
  box-shadow: 0 0 0 4px rgba(91, 211, 141, 0.14);
}

.project-status-text {
  line-height: 1;
}

.project-status.is-saved .project-status-dot {
  background: #5bd38d;
  box-shadow: 0 0 0 4px rgba(91, 211, 141, 0.14);
}

.project-status.is-dirty .project-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.14);
}

.project-status.is-dirty {
  color: #f7c96a;
}

.project-status.is-saving {
  color: rgba(231, 238, 245, 0.72);
}

.project-status.is-saving .project-status-dot {
  display: none;
}

.project-status.is-error {
  color: #f08e8e;
}

.project-status.is-error .project-status-dot {
  background: #f08e8e;
  box-shadow: 0 0 0 4px rgba(240, 142, 142, 0.14);
}

.app-header-workspace,
.app-header-document-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.app-header .project-button {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  color: #e7edf4;
  padding: 6px 14px;
  min-height: 34px;
  font-weight: 500;
}

.app-header .project-button:hover,
.app-header .project-button:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  transform: none;
  text-decoration: none;
}

.app-header .project-button:active {
  transform: none;
  box-shadow: none;
}

.app-header-icon-button {
  min-width: 34px;
  width: 34px;
  padding: 0;
  justify-content: center;
  flex: 0 0 auto;
}

.app-header .audio-mute-button {
  font-size: 15px;
}

.header-selection-position {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 17, 21, 0.96);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.35);
}

.header-selection-kind {
  font-size: 11px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
  padding-right: 4px;
}

.header-position-field {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.header-position-field input[type="number"] {
  width: 84px;
  padding: 5px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 13px;
}

.header-position-field input[type="number"][data-scrub="true"] {
  cursor: ew-resize;
}

.header-position-field input[type="number"].is-scrubbing {
  user-select: none;
}

.app-header-menu {
  position: relative;
}

.interactivity-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 190px;
  background: #0b0b0b;
  border: 1px solid #2f2f2f;
  border-radius: 12px;
  padding: 10px;
  display: grid;
  gap: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 40;
}

.interactivity-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.interactivity-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #f1f1f1;
}

.interactivity-option input {
  accent-color: #38bdf8;
}

.project-button {
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  background: var(--button-fill);
  color: #f1f1f1;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.project-button:hover {
  background: var(--button-fill-hover);
  text-decoration: none;
  transform: translateY(-2px);
}

.project-button:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.35);
  background: var(--button-fill-active);
}

.project-button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.project-button.primary {
  background: #32c5fd;
  border: none;
  color: #0b141a;
  font-weight: 600;
}

.project-button.ghost {
  background: var(--button-fill);
}

.project-button-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.project-button.small {
  padding: 6px 10px;
  font-size: 12px;
}

.zoom-controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

.app-header-zoom-controls {
  display: inline-flex;
  align-items: center;
}

.zoom-button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}

.zoom-display {
  min-width: 42px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: rgba(231, 238, 245, 0.78);
  line-height: 1;
}

.audio-mute-button.is-active {
  background: rgba(240, 142, 142, 0.24);
  color: #ffd7d7;
}

.audio-mute-button.is-active:hover {
  background: rgba(240, 142, 142, 0.32);
}

.zoom-slider {
  width: 90px;
  height: 4px;
  appearance: none;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
}

.zoom-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.zoom-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.project-button.danger {
  border-color: rgba(240, 142, 142, 0.4);
  color: #f08e8e;
  background: rgba(32, 12, 12, 0.7);
}

body.project-dashboard {
  background: radial-gradient(circle at 10% 10%, #1a1b1f, #0f1013 55%, #0a0b0e 100%);
  color: #f2f2f2;
}

.project-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.project-header {
  position: relative;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.project-brand-link {
  display: inline-flex;
  align-items: center;
}

.project-logo {
  display: block;
  height: 20px;
  width: auto;
  max-width: 220px;
}

.project-topnav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}

.project-header-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.project-topnav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(226, 233, 242, 0.7);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.project-topnav-link:hover,
.project-topnav-link:focus-visible {
  color: rgba(247, 251, 255, 0.92);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  outline: none;
}

.project-topnav-link.is-active {
  color: #f7fbff;
  background: rgba(44, 183, 196, 0.12);
  border-color: rgba(44, 183, 196, 0.22);
}

.project-usage-widget-shell {
  position: relative;
  flex: 0 0 auto;
}

.project-usage-widget {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 212px;
  padding: 8px 0;
  border: none;
  background: transparent;
  color: rgba(233, 239, 246, 0.88);
  text-align: left;
  cursor: pointer;
  transition: color 140ms ease;
}

.project-usage-widget:hover,
.project-usage-widget:focus-visible,
.project-usage-widget-shell.is-open .project-usage-widget,
.project-usage-widget.is-active {
  color: #f7fbff;
  outline: none;
}

.project-usage-widget[data-usage-state="amber"] {
  color: rgba(249, 239, 217, 0.94);
}

.project-usage-widget[data-usage-state="warning"] {
  color: rgba(250, 234, 229, 0.94);
}

.project-usage-widget-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.project-usage-widget-value {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(245, 249, 252, 0.94);
}

.project-usage-widget-note {
  font-size: 11px;
  color: rgba(214, 224, 236, 0.52);
}

.project-usage-widget-progress {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.usage-popover {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(320px, calc(100vw - 32px));
  display: none;
  flex-direction: column;
  gap: 16px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 15, 24, 0.98);
  box-shadow: 0 24px 42px rgba(0, 0, 0, 0.34);
  z-index: 32;
}

.usage-popover.is-open {
  display: flex;
}

.usage-popover-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.usage-popover-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(247, 251, 255, 0.94);
}

.usage-popover-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 2px;
}

.usage-popover-label {
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(214, 224, 236, 0.44);
}

.usage-popover-meta {
  font-size: 12px;
  color: rgba(221, 230, 239, 0.7);
}

.usage-popover-helper {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(214, 224, 236, 0.6);
}

.usage-popover-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 2px;
}

.usage-popover-actions .project-button {
  width: 100%;
  justify-content: center;
}

.usage-popover-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  min-height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: rgba(240, 246, 252, 0.84);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.usage-popover-link:hover,
.usage-popover-link:focus-visible {
  color: #ffffff;
  outline: none;
}

.project-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  margin-left: 4px;
}

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

.ui-icon svg {
  width: 16px;
  height: 16px;
}

.project-main {
  flex: 1;
  padding: 32px 36px 48px;
}

.project-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-bottom: 24px;
}

.project-toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.project-toolbar-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -10px 0 14px;
}

.project-summary-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 4px 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.04);
}

.project-summary-view.is-my {
  border-color: rgba(50, 197, 253, 0.45);
  color: #9edfff;
}

.project-summary-view.is-all {
  border-color: rgba(171, 188, 214, 0.45);
  color: #d4deee;
}

.project-summary-view.is-team {
  border-color: rgba(111, 219, 164, 0.45);
  color: #a9e8bf;
}

.project-summary-view.is-shared {
  border-color: rgba(245, 194, 107, 0.48);
  color: #f5c26b;
}

.project-summary-view.is-trash {
  border-color: rgba(240, 142, 142, 0.48);
  color: #f08e8e;
}

.project-undo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: -10px 0 18px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(50, 197, 253, 0.34);
  background: rgba(8, 21, 34, 0.86);
}

.project-undo-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.92);
}

.project-undo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-search input {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 240px;
  color: #f1f1f1;
}

.project-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.7);
}

.project-filter select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 8px 12px;
  color: #f1f1f1;
}

.project-filter select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-row {
  display: grid;
  position: relative;
  --project-grid-columns: minmax(240px, 2.2fr)
    minmax(140px, 1fr)
    minmax(140px, 1fr)
    minmax(140px, 1fr)
    minmax(140px, 1fr)
    minmax(280px, 1.3fr);
  grid-template-columns: var(--project-grid-columns);
  gap: 16px;
  align-items: center;
  background: var(--panel-bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: var(--panel-shadow), var(--panel-inset);
}

.project-row-trashed {
  opacity: 0.9;
  border-color: rgba(245, 166, 35, 0.38);
}

.project-row-header {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 8px 18px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
}

.project-row-header > div:last-child {
  text-align: right;
}

.project-cell-title {
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 700;
}

.project-library-badge {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 2px 8px;
  width: fit-content;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
}

.project-library-badge.is-my {
  border-color: rgba(50, 197, 253, 0.4);
  color: #8fd6f6;
}

.project-library-badge.is-team {
  border-color: rgba(111, 219, 164, 0.42);
  color: #a9e8bf;
}

.project-library-badge.is-shared {
  border-color: rgba(245, 194, 107, 0.42);
  color: #f0ca87;
}

.project-library-badge.is-trash {
  border-color: rgba(240, 142, 142, 0.42);
  color: #f1a2a2;
}

.project-cell-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

.project-cell-submeta {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
}

.project-status-tag {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(241, 246, 252, 0.78);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  width: fit-content;
  background: rgba(255, 255, 255, 0.03);
}

.project-status-tag.is-draft {
  border-color: rgba(142, 178, 240, 0.26);
  color: rgba(194, 214, 244, 0.88);
  background: rgba(142, 178, 240, 0.06);
}

.project-status-tag.is-published {
  border-color: rgba(111, 219, 164, 0.24);
  color: rgba(190, 234, 208, 0.9);
  background: rgba(111, 219, 164, 0.06);
}

.project-status-tag.is-changed-since-publish {
  border-color: rgba(245, 194, 107, 0.28);
  color: rgba(243, 215, 161, 0.92);
  background: rgba(245, 194, 107, 0.08);
}

.project-status-tag.is-archived {
  border-color: rgba(180, 187, 199, 0.2);
  color: rgba(198, 206, 218, 0.82);
  background: rgba(180, 187, 199, 0.06);
}

.project-status-tag.is-readonly {
  border-color: rgba(159, 174, 192, 0.42);
  color: #bdc8d6;
  background: rgba(159, 174, 192, 0.08);
}

.project-status-tag.is-request-pending {
  border-color: rgba(245, 194, 107, 0.46);
  color: #f3cf93;
  background: rgba(245, 194, 107, 0.1);
}

.project-status-tag.is-request-rejected {
  border-color: rgba(240, 142, 142, 0.46);
  color: #f0abab;
  background: rgba(240, 142, 142, 0.1);
}

.project-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.project-row-actions-note {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 4px 8px;
}

.project-empty {
  margin-top: 60px;
  max-width: 360px;
  color: rgba(255, 255, 255, 0.7);
}

.project-empty-title {
  font-size: 20px;
  font-family: var(--font-sans);
  font-weight: 700;
  margin-bottom: 8px;
}

.project-workspace {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.project-sidebar {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 16px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(8, 16, 24, 0.94), rgba(7, 13, 20, 0.9));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.project-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-sidebar-heading {
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.46);
}

.project-sidebar-nav,
.project-sidebar-tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-sidebar-link,
.project-sidebar-folder-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease,
    box-shadow 140ms ease;
}

.project-sidebar-link:hover,
.project-sidebar-link:focus-visible,
.project-sidebar-folder-row:hover .project-sidebar-folder-body,
.project-sidebar-folder-row:focus-within .project-sidebar-folder-body {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: #f7fbff;
  outline: none;
}

.project-sidebar-link.is-active,
.project-sidebar-folder-row.is-active .project-sidebar-folder-body {
  background: linear-gradient(180deg, rgba(44, 183, 196, 0.14), rgba(44, 183, 196, 0.06));
  border-color: rgba(44, 183, 196, 0.28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  color: #f5fbff;
}

.project-sidebar-link-content {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.project-sidebar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: rgba(195, 210, 228, 0.56);
  flex: 0 0 auto;
}

.project-sidebar-icon svg {
  width: 16px;
  height: 16px;
}

.project-sidebar-link .ui-icon,
.project-topnav-link .ui-icon,
.auth-user-menu-item .ui-icon {
  color: currentColor;
}

.project-sidebar-link .ui-icon {
  color: rgba(195, 210, 228, 0.56);
}

.project-sidebar-link.is-active .project-sidebar-icon,
.project-sidebar-folder-row.is-active .project-sidebar-folder-icon,
.project-sidebar-link.is-active .ui-icon {
  color: rgba(193, 238, 242, 0.9);
}

.project-sidebar-folder-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.46);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms ease;
}

.project-sidebar-folder-toggle:hover,
.project-sidebar-folder-toggle:focus-visible {
  color: rgba(255, 255, 255, 0.72);
  outline: none;
}

.project-sidebar-folder-toggle[aria-expanded="false"] .project-sidebar-folder-toggle-icon {
  transform: rotate(-90deg);
}

.project-sidebar-folder-toggle-icon {
  color: rgba(255, 255, 255, 0.52);
  transition: transform 140ms ease;
}

.project-sidebar-tree[hidden] {
  display: none;
}

.project-sidebar-folder-panel[hidden] {
  display: none;
}

.project-sidebar-section-action {
  align-self: flex-start;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: rgba(199, 212, 228, 0.62);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 140ms ease;
}

.project-sidebar-section-action:hover,
.project-sidebar-section-action:focus-visible {
  color: rgba(240, 246, 252, 0.92);
  outline: none;
}

.project-sidebar-section-action:disabled {
  opacity: 0.42;
  cursor: default;
}

.project-sidebar-folder-row {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-sidebar-folder-body {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease,
    color 140ms ease;
}

.project-sidebar-folder-link {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 10px 10px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.project-sidebar-folder-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-sidebar-folder-icon {
  margin-top: 2px;
}

.project-sidebar-folder-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(247, 250, 255, 0.9);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.project-sidebar-folder-meta {
  font-size: 11px;
  color: rgba(189, 202, 219, 0.46);
}

.project-sidebar-folder-row.is-active .project-sidebar-folder-meta {
  color: rgba(213, 230, 235, 0.72);
}

.project-sidebar-folder-actions {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 8px 0 0;
}

.project-sidebar-folder-menu-trigger {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(197, 209, 223, 0.42);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms ease,
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
}

.project-sidebar-folder-row:hover .project-sidebar-folder-menu-trigger,
.project-sidebar-folder-row:focus-within .project-sidebar-folder-menu-trigger,
.project-sidebar-folder-menu-trigger[aria-expanded="true"] {
  opacity: 1;
  pointer-events: auto;
}

.project-sidebar-folder-menu-trigger:hover,
.project-sidebar-folder-menu-trigger:focus-visible,
.project-sidebar-folder-menu-trigger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(244, 248, 252, 0.9);
  outline: none;
}

.project-sidebar-folder-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 184px;
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(7, 15, 24, 0.98);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.3);
  z-index: 8;
}

.project-sidebar-folder-menu.is-open {
  display: flex;
}

.project-sidebar-folder-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(241, 246, 252, 0.86);
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.project-sidebar-folder-menu-item:hover,
.project-sidebar-folder-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.project-sidebar-folder-menu-item.is-separated {
  margin-top: 6px;
  padding-top: 11px;
  border-top-color: rgba(255, 255, 255, 0.08);
  border-top-style: solid;
  border-top-width: 1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.project-sidebar-folder-menu-item.is-danger {
  color: rgba(240, 171, 171, 0.9);
}

.project-sidebar-folder-menu-item.is-danger:hover,
.project-sidebar-folder-menu-item.is-danger:focus-visible {
  border-color: rgba(240, 142, 142, 0.22);
  background: rgba(240, 142, 142, 0.08);
}

.project-sidebar-folder-menu-item:disabled {
  opacity: 0.38;
  cursor: default;
}

.project-sidebar-folder-menu-item:disabled:hover,
.project-sidebar-folder-menu-item:disabled:focus-visible {
  background: transparent;
  border-color: transparent;
  color: inherit;
}

.project-sidebar-trash-section {
  padding-top: 6px;
}

.project-sidebar-link.is-trash {
  color: rgba(210, 220, 232, 0.64);
}

.project-content {
  position: relative;
  min-width: 0;
  min-height: 420px;
}

.project-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 20px;
  background: rgba(7, 13, 20, 0.74);
  backdrop-filter: blur(10px);
}

.project-loading-spinner {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 3px solid rgba(98, 212, 255, 0.22);
  border-top-color: #32c5fd;
  animation: editor-loading-spin 0.85s linear infinite;
}

.project-loading-text {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(235, 245, 255, 0.86);
}

.project-thumbnail-backfill-frame {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  left: -9999px;
  top: -9999px;
}

.project-toolbar-compact {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-bottom: 18px;
}

.project-toolbar-main {
  display: flex;
  align-items: center;
  gap: 14px;
}

.project-search-wide {
  flex: 1 1 auto;
}

.project-search-wide input {
  width: 100%;
  min-width: 0;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.project-filter-inline {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.project-filter-inline label {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.project-filter-inline select {
  min-width: 190px;
}

.project-toolbar-actions {
  margin-left: auto;
  align-items: center;
}

.project-filters-panel {
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(8, 18, 28, 0.92);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.24);
}

.project-filters-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
}

.project-filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.project-filter label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.68);
}

.project-filter select {
  width: 100%;
  min-width: 0;
  height: 40px;
}

.project-filters-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

.project-bulk-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(44, 183, 196, 0.28);
  background: rgba(7, 18, 28, 0.9);
}

.project-bulk-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-bulk-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
}

.project-bulk-meta {
  font-size: 12px;
  color: rgba(214, 224, 236, 0.56);
}

.project-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-list-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-list-meta {
  min-height: 18px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.48);
}

.project-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-row {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  background: var(--panel-bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: var(--panel-shadow), var(--panel-inset);
}

.project-row-header {
  display: none;
}

.project-row-thumbnail {
  position: relative;
  width: 384px;
  height: 384px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    radial-gradient(circle at 22% 18%, rgba(50, 197, 253, 0.14), transparent 42%),
    rgba(8, 16, 24, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 8px 16px rgba(0, 0, 0, 0.2);
}

.project-row-thumbnail.has-image {
  background: rgba(7, 13, 19, 0.98);
}

.project-row-thumbnail::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 38%),
    repeating-linear-gradient(
      to right,
      transparent,
      transparent 15px,
      rgba(255, 255, 255, 0.035) 15px,
      rgba(255, 255, 255, 0.035) 16px
    ),
    repeating-linear-gradient(
      to top,
      transparent,
      transparent 11px,
      rgba(255, 255, 255, 0.03) 11px,
      rgba(255, 255, 255, 0.03) 12px
    );
}

.project-row-thumbnail.has-image::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 42%);
}

.project-row-thumbnail::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 2;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  pointer-events: none;
}

.project-row-thumbnail-image {
  position: absolute;
  inset: 7px;
  z-index: 1;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
  object-fit: contain;
  object-position: center center;
  border-radius: 14px;
  background: rgba(8, 14, 21, 0.98);
  filter: saturate(0.94) contrast(1.02);
  display: block;
}

.project-row-thumbnail-icon {
  position: relative;
  z-index: 1;
  color: rgba(207, 239, 243, 0.92);
}

.project-row-thumbnail:not(.has-image) .project-row-thumbnail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    rgba(13, 23, 32, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.project-row-thumbnail.has-image .project-row-thumbnail-icon {
  opacity: 0;
}

.project-row-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-row-title-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.project-cell-title {
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-row-statusline,
.project-row-infoline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
}

.project-row-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding-left: 14px;
  font-size: 12px;
  color: rgba(219, 228, 238, 0.58);
}

.project-row-meta-item::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: rgba(184, 197, 212, 0.44);
  transform: translateY(-50%);
}

.project-row-infoline .project-row-meta-item:first-child {
  padding-left: 0;
}

.project-row-infoline .project-row-meta-item:first-child::before {
  display: none;
}

.project-row-meta-icon {
  width: 14px;
  height: 14px;
  color: rgba(194, 210, 224, 0.48);
}

.project-row-thumbnail .project-row-thumbnail-icon {
  width: 32px;
  height: 32px;
  color: rgba(207, 239, 243, 0.92);
}

.project-row-thumbnail-icon svg,
.project-row-meta-icon svg {
  width: 100%;
  height: 100%;
}

.project-row-submeta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.48);
}

.project-row-publication {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(6, 14, 22, 0.54);
}

.project-row-publication-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.project-row-publication-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.project-row-publication-key {
  font-size: 11px;
  color: rgba(184, 197, 212, 0.52);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex: 0 0 auto;
}

.project-row-publication-value {
  min-width: 0;
  font-size: 12px;
  color: rgba(236, 242, 248, 0.84);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-row-publication-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.project-status-tag.is-scheduled {
  border-color: rgba(153, 124, 255, 0.24);
  color: rgba(210, 194, 255, 0.88);
  background: rgba(153, 124, 255, 0.06);
}

.project-row-actions {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.project-row.is-menu-open {
  z-index: 30;
}

.project-row-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 15, 24, 0.98);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.3);
  z-index: 60;
}

.project-row-menu.is-open-above {
  top: auto;
  bottom: calc(100% + 8px);
}

.project-row-menu.is-open {
  display: flex;
}

.project-row-menu-trigger {
  min-width: 40px;
  padding-left: 0;
  padding-right: 0;
  font-size: 18px;
  line-height: 1;
}

.project-row-menu-item {
  justify-content: flex-start;
  width: 100%;
}

.project-row-menu-item.is-danger {
  color: #f0abab;
}

.project-row-menu-item.is-danger:hover {
  border-color: rgba(240, 142, 142, 0.3);
  background: rgba(240, 142, 142, 0.08);
}

.project-row-menu-note {
  margin-top: 4px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: rgba(214, 224, 236, 0.62);
  font-size: 11px;
  line-height: 1.45;
}

.project-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 6, 8, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 40;
}

.project-empty-sheet-modal {
  z-index: 80;
}

.project-modal.is-open {
  display: flex;
}

.media-source-popup {
  z-index: 1400;
}

.project-modal-card {
  background: var(--panel-bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 22px;
  width: min(420px, 90vw);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--panel-shadow), var(--panel-inset);
}

.project-modal-title {
  font-size: 18px;
  font-family: var(--font-sans);
  font-weight: 700;
}

.project-confirm-message {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
  line-height: 1.5;
}

.project-modal-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
}

.project-modal-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-modal-card input,
.project-modal-card select {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 8px 12px;
  color: #f1f1f1;
}

.project-modal-card select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23AEB8C8' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 12px;
}

.project-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

.media-source-modal-card {
  width: min(440px, 92vw);
  padding: 24px;
  gap: 18px;
}

.media-source-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.media-source-modal-title {
  margin: 0;
}

.media-source-modal-subtitle {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 13px;
}

.media-source-modal-close {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
}

.media-source-modal-close:hover {
  border-color: var(--panel-border-strong);
  background: rgba(255, 255, 255, 0.04);
}

.media-source-options {
  display: grid;
  gap: 10px;
}

.media-source-option-card {
  width: 100%;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px;
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: #f1f1f1;
}

.media-source-option-card:hover {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

.media-source-option-card:focus-visible {
  outline: none;
  border-color: rgba(50, 197, 253, 0.65);
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.26);
}

.media-source-option-card:active {
  transform: translateY(1px);
}

.media-source-option-card.is-active {
  border-color: rgba(50, 197, 253, 0.75);
  background: linear-gradient(180deg, rgba(50, 197, 253, 0.1), rgba(50, 197, 253, 0.01));
}

.media-source-option-icon {
  width: 22px;
  height: 22px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 2px;
}

.media-source-option-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.media-source-option-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.media-source-option-description {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.62);
}

.media-source-modal-actions {
  display: flex;
  justify-content: flex-start;
}

.media-source-modal-cancel {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.68);
  padding: 0;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.media-source-modal-cancel:hover {
  color: #f1f1f1;
}

.media-library-picker-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 16, 0.88);
  display: none;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  z-index: 1300;
}

.media-library-picker-modal.is-open {
  display: flex;
}

.media-library-picker-panel {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--panel-bg-primary);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}

.media-library-picker-header {
  padding: 16px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel-bg-secondary);
  border-bottom: 1px solid var(--panel-border);
}

.media-library-picker-title {
  font-size: 17px;
  font-family: var(--font-sans);
  font-weight: 700;
}

.media-library-picker-subtitle {
  margin-top: 4px;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
}

.media-library-picker-close {
  padding: 0;
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 8px;
  font-size: 18px;
  line-height: 1;
}

.media-library-picker-close:hover {
  border-color: var(--panel-border-strong);
}

.media-library-picker-frame {
  flex: 1;
  border: 0;
  width: 100%;
  min-height: 0;
  background: #060b12;
}

.media-library-picker-footer {
  padding: 10px 14px;
  display: flex;
  justify-content: flex-start;
  border-top: 1px solid var(--panel-border);
  background: var(--panel-bg-secondary);
}

.team-modal-card {
  width: min(980px, 96vw);
  max-height: 92vh;
  overflow: hidden;
}

.team-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.team-modal-subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

.team-modal-body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 14px;
  min-height: 420px;
}

.team-list-panel,
.team-editor-panel {
  background: var(--panel-bg-secondary);
  border: 1px solid var(--panel-border-strong);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}

.team-modal-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}

.team-modal-tab {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.team-modal-tab:hover {
  border-color: rgba(50, 197, 253, 0.45);
}

.team-modal-tab.is-active {
  border-color: rgba(50, 197, 253, 0.7);
  background: rgba(50, 197, 253, 0.16);
  color: #eaf9ff;
}

.team-modal-panel {
  display: none;
  min-height: 0;
}

.team-modal-panel.is-active {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-modal-panel .team-permissions-panel,
.team-modal-panel .team-audit-panel,
.team-modal-panel .team-governance-panel,
.team-modal-panel .team-identity-panel {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.team-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.team-list {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  overflow: auto;
  min-height: 0;
}

.team-list-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  padding: 8px 10px;
}

.team-list-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.03);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  color: #f1f1f1;
}

.team-list-item:hover {
  border-color: rgba(50, 197, 253, 0.45);
}

.team-list-item.is-active {
  border-color: rgba(50, 197, 253, 0.7);
  background: rgba(50, 197, 253, 0.16);
}

.team-list-item-name {
  font-size: 13px;
  font-weight: 600;
}

.team-list-item-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.62);
}

.team-member-list {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 230px;
  overflow: auto;
}

.team-member-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.88);
}

.team-member-item input {
  accent-color: #32c5fd;
}

.team-member-meta {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
}

.team-permissions-panel {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.team-folder-acl-list {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
}

.team-folder-template-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: end;
}

.team-folder-acl-summary {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.66);
  min-height: 16px;
}

.team-folder-acl-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  padding: 6px 8px;
}

.team-folder-acl-row {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-folder-acl-row-head {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.team-folder-acl-row-head select {
  min-width: 0;
}

.team-folder-acl-remove {
  white-space: nowrap;
}

.team-folder-acl-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.team-folder-acl-action {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
}

.team-folder-acl-action input {
  accent-color: #32c5fd;
}

.team-folder-acl-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.team-folder-acl-note {
  min-height: 14px;
}

.team-audit-panel {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-audit-list {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.team-audit-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  padding: 6px 8px;
}

.team-audit-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  padding: 7px 9px;
}

.team-audit-item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

.team-audit-item-action {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 2px;
}

.team-audit-item-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.54);
  margin-top: 2px;
}

.team-governance-panel {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-governance-panel select,
.team-governance-panel input {
  min-width: 0;
}

.team-governance-risk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.team-governance-risk-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  padding: 7px 8px;
}

.team-governance-risk-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.66);
}

.team-governance-risk-value {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
}

.team-identity-panel {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.team-identity-panel select,
.team-identity-panel input[type="text"] {
  min-width: 0;
}

.team-identity-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.86);
}

.team-identity-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
}

.team-identity-token-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.team-identity-token-status {
  flex: 1;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
}

.team-identity-token-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.team-identity-token-value {
  min-height: 0;
  border: 1px dashed rgba(120, 194, 255, 0.5);
  border-radius: 9px;
  background: rgba(33, 77, 133, 0.15);
  padding: 8px 10px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
  color: rgba(193, 226, 255, 0.95);
  word-break: break-all;
}

.team-identity-token-value:empty {
  display: none;
}

.team-modal-note {
  min-height: 16px;
  font-size: 12px;
  color: rgba(240, 142, 142, 0.95);
}

@media (max-width: 900px) {
  .team-modal-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .team-modal-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-folder-acl-row-head {
    grid-template-columns: 1fr;
  }

  .team-folder-template-row {
    grid-template-columns: 1fr;
  }

  .team-folder-acl-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .team-identity-token-row {
    flex-direction: column;
    align-items: stretch;
  }

  .team-identity-token-actions {
    justify-content: flex-start;
  }
}

.project-backup-modal-card {
  width: min(560px, 94vw);
}

.project-backup-list {
  min-height: 140px;
  max-height: 48vh;
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.project-backup-empty {
  padding: 16px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.66);
}

.project-backup-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.project-backup-item:last-child {
  border-bottom: none;
}

.project-backup-item-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.project-backup-time {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
}

.project-backup-id {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.58);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 340px;
}

.theme-modal {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 11, 0.82);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 45;
  backdrop-filter: blur(18px);
}

.theme-modal.is-open {
  display: flex;
}

.theme-modal-card {
  background: rgba(8, 11, 15, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 18px;
  width: min(1420px, 96vw);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.theme-modal-header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  padding: 2px 4px 0;
}

.theme-modal-copy {
  display: grid;
  gap: 6px;
  max-width: 760px;
}

.theme-modal-title {
  font-size: 24px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: #ffffff;
}

.theme-modal-subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

.theme-modal-body {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: 16px;
  flex: 1;
  overflow: hidden;
}

.theme-library,
.theme-editor {
  background: rgba(10, 14, 19, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.theme-modal.is-library-hidden .theme-library {
  display: none;
}

.theme-modal.is-library-hidden .theme-modal-body {
  grid-template-columns: 1fr;
}

.theme-library-header,
.theme-section-header,
.theme-editor-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.theme-library-header,
.theme-editor-header {
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.theme-library-copy,
.theme-editor-copy {
  display: grid;
  gap: 4px;
}

.controls-undo-redo,
.theme-undo-redo {
  display: flex;
  gap: 8px;
}

.theme-undo-redo-floating {
  position: absolute;
  top: var(--layout-floating-offset, 12px);
  left: calc(
    var(--layout-panel-width, 280px) +
    var(--layout-panel-gap, 12px) +
    var(--layout-floating-offset, 12px)
  );
  z-index: 8;
}

.controls-undo-redo-floating {
  position: fixed;
  top: var(--controls-top, 24px);
  left: calc(24px + clamp(260px, 28vw, 340px) + 12px);
  z-index: 21;
  transition: opacity 0.2s ease;
}

.controls-undo-redo .canvas-icon-button,
.theme-undo-redo .canvas-icon-button {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, #11161c 0%, #0b0f14 100%);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  color: #ffffff;
  font-size: 24px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.controls-undo-redo .canvas-icon-button svg,
.theme-undo-redo .canvas-icon-button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.controls-undo-redo .canvas-icon-button:disabled,
.theme-undo-redo .canvas-icon-button:disabled {
  cursor: not-allowed;
  color: #ffffff;
  background: rgba(11, 15, 20, 0.8);
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  opacity: 1;
}

body.controls-collapsed .controls-undo-redo-floating {
  opacity: 0;
  pointer-events: none;
}

body:not(.edit-mode) .controls-undo-redo-floating {
  opacity: 0;
  pointer-events: none;
}


.theme-library-title,
.theme-editor-title {
  font-size: 16px;
  font-weight: 600;
  color: #f8fafc;
}

.theme-library-subtitle,
.theme-editor-subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.6);
}

.theme-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
  padding-top: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.theme-list::-webkit-scrollbar,
.theme-editor-body::-webkit-scrollbar {
  width: 6px;
}

.theme-list::-webkit-scrollbar-track,
.theme-editor-body::-webkit-scrollbar-track {
  background: transparent;
}

.theme-list::-webkit-scrollbar-thumb,
.theme-editor-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.theme-list-item {
  appearance: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(17, 22, 28, 0.96), rgba(11, 15, 20, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
  text-align: left;
  color: inherit;
}

.theme-list-item.is-active {
  border-color: rgba(50, 197, 253, 0.48);
  background: linear-gradient(180deg, rgba(18, 35, 46, 0.98), rgba(10, 18, 25, 1));
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(50, 197, 253, 0.14);
}

.theme-list-item:hover,
.theme-list-item:focus-visible {
  border-color: rgba(50, 197, 253, 0.3);
  transform: translateY(-1px);
  outline: none;
}

.theme-list-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.theme-list-text {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.theme-list-name {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  color: #f8fafc;
}

.theme-list-meta {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.56);
}

.theme-list-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.theme-list-chip {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--theme-list-chip-color, #0f1217);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-list-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 600;
}

.theme-list-item.is-active .theme-list-badge {
  background: rgba(50, 197, 253, 0.14);
  border-color: rgba(50, 197, 253, 0.32);
  color: #e8f9ff;
}

.theme-editor-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
}

.theme-editor-meta {
  gap: 14px;
}

.theme-editor-meta-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}

.theme-editor-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.theme-editor-tab {
  transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.theme-editor-tab.is-active {
  background: rgba(50, 197, 253, 0.18);
  border-color: rgba(50, 197, 253, 0.6);
  color: #eaf9ff;
}

.theme-editor.has-tabs .theme-tab-panel {
  display: none;
}

.theme-editor.has-tabs .theme-tab-panel.is-active {
  display: block;
}

.theme-panel-stash {
  display: none;
}

.theme-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  overflow-x: hidden;
}

.theme-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-field label {
  font-size: 12px;
  color: #b7b7b7;
}

.theme-field input,
.theme-field textarea {
  background: #0f1217;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  color: #ffffff;
  font-size: 13px;
  font-family: var(--font-sans);
  resize: vertical;
}

.theme-section {
  display: grid;
  gap: 12px;
  background: linear-gradient(180deg, rgba(15, 18, 24, 0.96), rgba(10, 14, 19, 0.98));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.theme-default-font-row {
  display: flex;
  width: 100%;
}

.theme-default-font-row select {
  width: 100%;
  background: #0f1217;
  border: none;
  border-radius: 10px;
  padding: 10px 12px;
  color: #ffffff;
  font-size: 13px;
  font-family: var(--font-sans);
}

.theme-palette-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  overflow-x: hidden;
}

.theme-palette-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
}

.theme-palette-row.is-dragging {
  opacity: 0.5;
}

.theme-palette-row.is-drag-over {
  outline: 1px dashed rgba(50, 197, 253, 0.6);
  outline-offset: 2px;
}

.theme-background-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
}

.theme-signal-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
}

.theme-palette-row input,
.theme-background-row input,
.theme-signal-row input {
  background: var(--button-fill);
  border: none;
  border-radius: 10px;
  min-height: 34px;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 13px;
  font-family: var(--font-sans);
  min-width: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.theme-palette-row input:focus,
.theme-background-row input:focus,
.theme-signal-row input:focus {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 0 1px rgba(50, 197, 253, 0.22);
}

.theme-signal-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-signal-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.theme-signal-label {
  font-size: 12px;
  color: #b7b7b7;
}

.theme-palette-swatch {
  width: 100%;
  min-width: 0;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0;
  background: var(--swatch-color, #111111);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 8px 18px rgba(0, 0, 0, 0.18);
}

.theme-palette-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0) 45%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
}

.theme-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.theme-logo-card {
  background: rgba(15, 17, 20, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 22px rgba(0, 0, 0, 0.16);
}

.theme-logo-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.theme-logo-preview {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.06);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.theme-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.theme-logo-preview.is-empty {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}

.theme-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.theme-logo-placeholder svg {
  width: 44px;
  height: 34px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.theme-logo-placeholder svg rect {
  stroke-linejoin: round;
}

#theme-logo-light-preview .theme-logo-placeholder {
  color: rgba(20, 20, 20, 0.5);
}

#theme-logo-light-preview {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
}

.theme-logo-actions {
  display: flex;
  gap: 8px;
}

.theme-font-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-font-row {
  display: grid;
  grid-template-columns: 1.6fr auto auto;
  gap: 8px;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 10px 12px;
}

.theme-font-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-font-name {
  font-size: 13px;
  color: #f2f2f2;
}

.theme-font-file {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.theme-section-subtitle {
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.theme-media-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px;
}

.theme-media-item {
  background: rgba(15, 17, 20, 0.74);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 22px rgba(0, 0, 0, 0.16);
}

.theme-media-thumb {
  height: 78px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-media-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  word-break: break-word;
}

.theme-layout-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

.theme-layout-editor.is-fullscreen {
  position: fixed;
  inset: 24px;
  background: rgba(10, 10, 12, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 16px;
  z-index: 1200;
}

body.layout-editor-fullscreen {
  overflow: hidden;
}

.theme-layout-editor.is-fullscreen .layout-editor-body {
  flex: 1;
  min-height: 0;
}

.theme-layout-editor.is-fullscreen .layout-editor-canvas-wrap {
  min-height: 480px;
}

.layout-editor-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 12px;
  background: #0f1115;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.layout-editor-toolbar-brand {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-self: start;
}

.layout-editor-toolbar-logo-button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.layout-editor-toolbar-logo-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.35);
  border-radius: 8px;
}

.layout-editor-toolbar-logo {
  display: block;
  height: 22px;
  width: auto;
  object-fit: contain;
}

.layout-editor-toolbar-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(240, 245, 250, 0.88);
  white-space: nowrap;
}

.layout-editor-toolbar-group {
  display: flex;
  align-items: center;
}

.layout-editor-toolbar-center {
  display: flex;
  align-items: center;
  justify-self: center;
}

.layout-editor-toolbar-segment {
  display: flex;
  align-items: center;
}

.layout-editor-toolbar-document-actions {
  gap: 12px;
}

.layout-editor-toolbar-preview-actions,
.layout-editor-toolbar-view-actions {
  gap: 0;
}

.layout-editor-toolbar-toggle {
  margin-top: 0;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  gap: 12px;
  justify-content: flex-start;
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: #e5ebf3;
}

.layout-editor-toolbar .layout-editor-toolbar-toggle {
  font-size: 13px;
  line-height: 1;
  text-transform: none;
  letter-spacing: 0;
  color: #e5ebf3;
}

.layout-editor-toolbar-toggle span {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
}

.layout-editor-toolbar-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.88);
  transition: transform 0.2s ease, background 0.2s ease;
}

.layout-editor-toolbar-toggle input[type="checkbox"] {
  width: 38px;
  height: 22px;
  margin: 0;
  flex: 0 0 auto;
  align-self: center;
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
}

.layout-editor-toolbar-toggle input[type="checkbox"]:checked {
  background: rgba(30, 167, 253, 0.3);
  border-color: rgba(30, 167, 253, 0.55);
}

.layout-editor-toolbar-toggle input[type="checkbox"]:checked::after {
  transform: translateX(16px);
  background: #1ea7fd;
}

.layout-editor-toolbar-toggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(30, 167, 253, 0.35);
}

.layout-editor-toolbar-actions {
  justify-self: end;
  gap: 32px;
  min-width: 0;
}

.layout-editor-toolbar-zoom {
  gap: 0;
}

.layout-editor-zoom-controls {
  margin-left: 0;
}

@media (max-width: 1120px) {
  .layout-editor-toolbar {
    grid-template-columns: 1fr auto;
    row-gap: 12px;
    padding: 12px 16px;
  }

  .layout-editor-toolbar-center {
    grid-column: 1 / -1;
    order: 3;
    justify-self: start;
  }

  .layout-editor-toolbar-actions {
    gap: 20px;
    flex-wrap: wrap;
  }
}

@media (max-width: 760px) {
  .layout-editor-toolbar {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .layout-editor-toolbar-center,
  .layout-editor-toolbar-actions {
    justify-self: start;
  }

  .layout-editor-toolbar-actions {
    gap: 16px;
    flex-wrap: wrap;
  }

  .layout-editor-toolbar-brand {
    gap: 12px;
  }
}

.typography-section .controls-section-title {
  font-weight: 600;
  letter-spacing: 1px;
}

.typography-section .controls-section-title::after {
  content: none;
}

.typography-card {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 14px;
}

.typography-group {
  display: grid;
  gap: 8px;
}

.typography-group + .typography-group {
  margin-top: 12px;
}

.typography-group-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
}

.typography-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.6fr) minmax(0, 0.8fr);
  gap: 6px;
  align-items: center;
  padding: 2px 0;
}

.typography-row .controls-field {
  margin-top: 0;
  min-width: 0;
}

.typography-row label {
  font-size: 11px;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.8);
}

.typography-row.is-headline label {
  font-weight: 600;
  opacity: 0.95;
}

.typography-row.is-axis label {
  font-weight: 500;
  opacity: 0.8;
}

.typography-row.is-support label {
  font-weight: 500;
  opacity: 0.6;
}

.typography-control {
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #f1f1f1;
  font-size: 12px;
  padding: 4px 8px;
  width: 100%;
  min-width: 0;
}

.typography-control:focus {
  outline: none;
  border-color: rgba(50, 197, 253, 0.5);
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.12);
}

.typography-control-font {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.typography-control-size {
  text-align: center;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  min-width: 0;
  padding: 4px 6px;
}

.typography-control-size::-webkit-outer-spin-button,
.typography-control-size::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.typography-control-size[type="number"] {
  -moz-appearance: textfield;
}
.layout-zoom-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.layout-zoom-button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  background: transparent;
  color: rgba(240, 245, 250, 0.9);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}

.layout-zoom-button:hover {
  background: rgba(255, 255, 255, 0.06);
}

.layout-zoom-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 0;
  color: rgba(240, 245, 250, 0.86);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.project-button.is-muted {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
}


.layout-editor-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.layout-editor-mode-toggle.is-on {
  background: rgba(50, 197, 253, 0.16);
  border-color: rgba(50, 197, 253, 0.4);
}

.layout-editor-mode-toggle label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.layout-editor-mode-toggle input[type="checkbox"] {
  appearance: none;
  width: 28px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.layout-editor-mode-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease, background 0.2s ease;
}

.layout-mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(32, 36, 44, 0.96), rgba(16, 20, 26, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.45);
  width: fit-content;
  justify-self: start;
}

.layout-mode-option {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.layout-mode-option.is-active {
  color: #ffffff;
  background: #2f3540;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.layout-mode-option .mode-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.layout-mode-option .mode-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
}


.layout-editor-mode-toggle.is-on input[type="checkbox"] {
  background: rgba(50, 197, 253, 0.25);
  border-color: rgba(50, 197, 253, 0.5);
}

.layout-editor-mode-toggle.is-on input[type="checkbox"]::after {
  transform: translateX(12px);
  background: rgba(50, 197, 253, 0.9);
}

.layout-editor-save-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(240, 245, 250, 0.88);
  padding: 0;
}

.layout-editor-save-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #6bcf9c;
  box-shadow: 0 0 0 4px rgba(107, 207, 156, 0.14);
}

.layout-editor-save-status-text {
  white-space: nowrap;
}

.layout-editor-save-status.is-saved .layout-editor-save-status-dot {
  background: #6bcf9c;
  box-shadow: 0 0 0 4px rgba(107, 207, 156, 0.14);
}

.layout-editor-save-status.is-dirty {
  color: #f59e0b;
}

.layout-editor-save-status.is-dirty .layout-editor-save-status-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.16);
}

.layout-editor-save-status.is-saving {
  color: rgba(240, 245, 250, 0.7);
}

.layout-editor-save-status.is-saving .layout-editor-save-status-dot {
  display: none;
}

.theme-manager {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 8, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1305;
}

.theme-manager[hidden] {
  display: none;
}

.theme-manager-card {
  width: min(980px, 92vw);
  max-height: 86vh;
  background: #0f1116;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}

.theme-manager-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.theme-manager-title {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.75);
}

.theme-manager-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.theme-manager-search {
  flex: 1;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 8px 10px;
  color: #f2f2f2;
  font-size: 12px;
}

.theme-manager-toolbar-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.theme-manager-view-toggle {
  display: flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.theme-manager-view-button {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.65);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  cursor: pointer;
}

.theme-manager-view-button.is-active {
  background: rgba(50, 197, 253, 0.2);
  color: #eaf9ff;
}

.theme-manager-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.theme-manager-filter {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
}

.theme-manager-filter.is-active {
  border-color: rgba(50, 197, 253, 0.5);
  color: #eaf9ff;
  background: rgba(50, 197, 253, 0.16);
}

.theme-manager-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  overflow-y: auto;
  padding-right: 6px;
}

.theme-manager-grid.is-list {
  grid-template-columns: 1fr;
  gap: 8px;
}

.theme-manager-menu-portal {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1390;
}

.theme-manager-menu-portal .theme-card-menu {
  pointer-events: auto;
}

.theme-manager-empty {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  padding: 12px;
}

.theme-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.theme-card.is-list {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "meta";
  align-items: center;
  gap: 6px 16px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.02);
}

.theme-card.is-list:hover {
  background: rgba(255, 255, 255, 0.05);
}

.theme-card.is-list.is-active {
  box-shadow: none;
  border-color: rgba(50, 197, 253, 0.45);
}

.theme-card.is-list .theme-card-header {
  grid-area: header;
}

.theme-card.is-list .theme-card-meta {
  grid-area: meta;
}

.theme-card.is-list .theme-card-preview {
  display: none;
}

.theme-card.is-list .theme-card-type,
.theme-card.is-list .theme-card-tags {
  display: none;
}

.theme-card.is-list .theme-card-menu-button {
  position: absolute;
  top: 8px;
  right: 8px;
}


.theme-card.is-active {
  border-color: rgba(50, 197, 253, 0.6);
  box-shadow: 0 0 0 1px rgba(50, 197, 253, 0.3);
}

.theme-card.is-default:not(.is-active) {
  border-color: rgba(255, 255, 255, 0.25);
}

.theme-card.is-archived {
  opacity: 0.6;
}

.theme-card:focus-visible {
  outline: 2px solid rgba(50, 197, 253, 0.7);
  outline-offset: 2px;
}

.theme-card-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  padding-right: 34px;
}

.theme-card-name {
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 700;
}

.theme-card-badges {
  display: flex;
  gap: 6px;
}

.theme-card-badge {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 3px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}

.theme-card-badge.active {
  background: rgba(50, 197, 253, 0.2);
  color: rgba(50, 197, 253, 0.9);
}

.theme-card-badge.default {
  background: rgba(255, 255, 255, 0.12);
}

.theme-card-badge.archived {
  background: rgba(255, 255, 255, 0.1);
}

.theme-card-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
}

.theme-card-preview {
  display: grid;
  gap: 8px;
}

.theme-card-swatches {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.theme-card-swatch {
  width: 18px;
  height: 10px;
  border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

.theme-card-type {
  display: grid;
  gap: 2px;
}

.theme-card-type-heading {
  font-size: 12px;
}

.theme-card-type-body {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
}

.theme-card-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.theme-card-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
}

.theme-card-menu-button {
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.7);
  width: 28px;
  height: 28px;
  border-radius: 8px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

.theme-card:hover .theme-card-menu-button,
.theme-card:focus-visible .theme-card-menu-button,
.theme-card.is-active .theme-card-menu-button {
  opacity: 1;
  pointer-events: auto;
}

.theme-card-menu {
  position: absolute;
  top: 40px;
  right: 10px;
  min-width: 160px;
  background: rgba(12, 12, 14, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}

.theme-card-menu-item {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  padding: 6px 8px;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
}

.theme-card-menu-item:hover {
  background: rgba(50, 197, 253, 0.12);
}

.theme-card-menu-item.destructive {
  color: rgba(235, 87, 87, 0.9);
}

.theme-card-menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0;
}

.theme-card-rename {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(50, 197, 253, 0.5);
  border-radius: 8px;
  color: #f2f2f2;
  padding: 6px 8px;
  font-size: 14px;
}

.theme-card-rename-error {
  font-size: 10px;
  color: rgba(235, 87, 87, 0.9);
  margin-top: 4px;
}

.theme-manager-toast {
  position: absolute;
  right: 26px;
  bottom: 26px;
  background: rgba(12, 12, 14, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: #f2f2f2;
}

.theme-manager-confirm {
  position: absolute;
  inset: 0;
  background: rgba(5, 6, 8, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1400;
}

.theme-manager-confirm[hidden] {
  display: none;
}

.theme-manager-confirm-card {
  width: min(520px, 94vw);
  background: #0f1116;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #f2f2f2;
}

.theme-manager-confirm-title {
  font-size: 16px;
  font-family: var(--font-sans);
  font-weight: 700;
}

.theme-manager-confirm-body {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.theme-manager-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.theme-control-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.theme-builder-card {
  gap: 12px;
  border-radius: 12px;
  padding: 12px 14px;
}

.theme-builder-card-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
}

.theme-builder-card-body {
  display: grid;
  gap: 10px;
}

.theme-builder-card.is-collapsed .theme-builder-card-body {
  display: none;
}

.theme-builder-card-toggle {
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.theme-builder-card-toggle .controls-section-caret {
  margin-left: auto;
  top: 0;
}

.theme-builder-action-list {
  margin-top: 0;
}

.theme-builder-row-button {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  background: var(--button-fill);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.theme-builder-row-button.is-active,
.theme-builder-row-button[aria-expanded="true"] {
  background: rgba(50, 197, 253, 0.16);
  color: #eaf9ff;
}

.theme-builder-row-label {
  min-width: 0;
}

.theme-builder-row-chevron {
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

.theme-builder-format-stack {
  display: grid;
  gap: 10px;
}

.theme-section-header > :first-child {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
}

.theme-control-label {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
}

.theme-control-select {
  width: 100%;
  min-height: 42px;
  background: var(--button-fill);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-sans);
}

.layout-editor-toolbar label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.6);
}

.layout-editor-toolbar select,
.layout-editor-toolbar input:not([type="checkbox"]) {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  padding: 6px 8px;
  color: #f1f1f1;
  font-size: 12px;
  font-family: var(--font-sans);
}

.layout-editor-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  gap: 12px;
  position: relative;
  --layout-panel-width: 280px;
  --layout-panel-gap: 12px;
  --layout-floating-offset: 12px;
}

.layout-editor-panel {
  background: var(--panel-bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 240px;
  box-shadow: var(--panel-shadow), var(--panel-inset);
}

.layout-editor-control-panel {
  overflow: hidden;
  background: var(--panel-bg-secondary);
}

.layout-editor-inspector-panel {
  overflow: hidden;
  background: var(--panel-bg-secondary);
}

body.layout-editor-range-dragging,
body.layout-editor-range-dragging * {
  user-select: none;
  -webkit-user-select: none;
}

body.layout-editor-dragging,
body.layout-editor-dragging * {
  user-select: none;
  -webkit-user-select: none;
}

.layout-controls {
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding-right: 8px;
  overflow-x: hidden;
  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
  scrollbar-width: thin;
}

.layout-controls .controls-section-title {
  padding-right: 16px;
  line-height: 1;
}

.layout-controls::-webkit-scrollbar {
  width: 6px;
}

.layout-controls::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.layout-controls::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
}

.layout-editor-section-list {
  display: grid;
  gap: 6px;
}

.theme-control-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(12, 12, 14, 0.96);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
  z-index: 6;
}

.theme-control-menu[hidden] {
  display: none;
}

.theme-control-menu-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #f2f2f2;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
}

.theme-control-menu-item:hover {
  background: rgba(50, 197, 253, 0.12);
  border-color: rgba(50, 197, 253, 0.35);
}

.theme-control-menu-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.layout-editor-section-button {
  justify-content: flex-start;
  width: 100%;
}

.layout-editor-section-button.is-active {
  background: rgba(50, 197, 253, 0.18);
  border-color: rgba(50, 197, 253, 0.6);
  color: #eaf9ff;
}

.layout-editor-panel-title {
  width: fit-content;
  min-height: 32px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #0f0f0f;
  border: 1px solid #2f2f2f;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  color: #8f8f8f;
}

.layout-editor-canvas-wrap {
  position: relative;
  background: #0f1114;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  -ms-overflow-style: none;
}

.layout-editor-canvas-wrap.is-scrollable {
  overflow: auto;
}

.layout-editor-canvas-wrap.is-scroll-x {
  overflow-x: auto;
  justify-content: flex-start;
}

.layout-editor-canvas-wrap.is-scroll-y {
  overflow-y: auto;
  align-items: flex-start;
}

.layout-editor-canvas-wrap {
  scrollbar-width: none;
}

.layout-editor-canvas-wrap::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

.layout-editor-canvas-wrap.is-space-pan,
.layout-editor-canvas-wrap.is-space-pan * {
  cursor: grab;
}

.layout-editor-canvas-wrap.is-panning,
.layout-editor-canvas-wrap.is-panning * {
  cursor: grabbing;
}

body.layout-editor-panning {
  user-select: none;
  -webkit-user-select: none;
}

.layout-editor-canvas-frame {
  flex: 0 0 auto;
  transform-origin: center;
  will-change: transform;
}

.layout-editor-canvas {
  position: relative;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(5, 5, 7, 0.9);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.layout-editor-canvas.is-master-layout {
  background-image: none;
}

.theme-layout-editor.layout-mode-light .layout-editor-canvas {
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}

.layout-editor-preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  pointer-events: none;
  z-index: 1;
}

.layout-editor-guides-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

.layout-editor-guide-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 8px;
  background: rgba(12, 12, 14, 0.9);
  border: 1px solid rgba(50, 197, 253, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  transition: opacity 0.12s ease;
  z-index: 5;
}

#guide-handle {
  z-index: 7;
}

.layout-editor-guide-handle.is-visible {
  opacity: 1;
}

.layout-editor-guide-handle::before {
  content: "";
  width: 12px;
  height: 12px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
}

.layout-editor-guide-handle.is-vertical::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2332c5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='7 12 3 12 7 8'/><polyline points='17 12 21 12 17 16'/><line x1='3' y1='12' x2='21' y2='12'/></svg>");
}

.layout-editor-guide-handle.is-horizontal::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2332c5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='12 7 12 3 8 7'/><polyline points='12 17 12 21 16 17'/><line x1='12' y1='3' x2='12' y2='21'/></svg>");
}

.layout-editor-rulers-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 4;
}

.layout-editor-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.layout-editor-overlay * {
  pointer-events: auto;
}

.layout-editor-overlay,
.layout-editor-overlay * {
  user-select: none;
  -webkit-user-select: none;
}

.layout-editor-ruler {
  user-select: none;
  -webkit-user-select: none;
}

.layout-editor-preview-error {
  position: absolute;
  top: 28px;
  left: 28px;
  right: 28px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(12, 12, 14, 0.92);
  color: #f2f2f2;
  pointer-events: auto;
}

.layout-editor-preview-error-title {
  font-size: 13px;
  font-weight: 600;
}

.layout-editor-preview-error-body {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
}

.layout-editor-debug-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  background: rgba(7, 7, 9, 0.9);
  color: rgba(255, 255, 255, 0.8);
  font-size: 11px;
  display: grid;
  gap: 8px;
}

.layout-editor-debug-row {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
}

.layout-editor-debug-error {
  color: #fca5a5;
  min-height: 14px;
}

.layout-editor-debug-log {
  display: grid;
  gap: 4px;
  max-height: 140px;
  overflow: auto;
  padding-right: 4px;
}

.layout-editor-debug-log-row {
  font-family: "Source Code Pro", monospace;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
}

.layout-editor-safe-area {
  position: absolute;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.02);
  pointer-events: none;
}

.layout-editor-safe-exclusion {
  position: absolute;
  border: 1px dashed rgba(235, 87, 87, 0.35);
  background: rgba(235, 87, 87, 0.08);
  pointer-events: none;
}

.layout-editor-ruler {
  position: absolute;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  display: flex;
  align-items: center;
  overflow: visible;
  touch-action: none;
}

.layout-editor-ruler::before {
  content: "";
  position: absolute;
  background: rgba(15, 15, 18, 0.9);
}

.layout-editor-ruler.horizontal {
  top: -18px;
  left: 0;
  height: 36px;
  width: 100%;
}

.layout-editor-ruler.horizontal::before {
  left: 0;
  right: 0;
  top: 0;
  height: 18px;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.15) 1px,
    transparent 1px,
    transparent 12px
  );
}

.layout-editor-ruler.vertical {
  left: -18px;
  top: 0;
  width: 36px;
  height: 100%;
  writing-mode: vertical-rl;
  justify-content: center;
}

.layout-editor-ruler.vertical::before {
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.15),
    rgba(255, 255, 255, 0.15) 1px,
    transparent 1px,
    transparent 12px
  );
}

/* Transparent rulers */
.layout-editor-ruler::before,
.layout-editor-ruler.horizontal::before,
.layout-editor-ruler.vertical::before,
.theme-layout-editor.layout-mode-light .layout-editor-ruler::before,
.theme-layout-editor.layout-mode-light .layout-editor-ruler.horizontal::before,
.theme-layout-editor.layout-mode-light .layout-editor-ruler.vertical::before {
  background: transparent;
  background-image: none;
}

.layout-editor-ruler-tick {
  position: absolute;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, 0);
  white-space: nowrap;
  writing-mode: horizontal-tb;
}

.layout-editor-ruler-tick.vertical {
  transform: translate(0, -50%);
}

.layout-editor-guide {
  position: absolute;
  z-index: 6;
  background: transparent;
  touch-action: none;
}

.layout-editor-guide::after {
  content: "";
  position: absolute;
  background: rgba(50, 197, 253, 0.6);
}

.layout-editor-guide.horizontal {
  height: 8px;
  width: 100%;
  cursor: row-resize;
}

.layout-editor-guide.horizontal::after {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.layout-editor-guide.vertical {
  width: 8px;
  height: 100%;
  cursor: col-resize;
}

.layout-editor-guide.vertical::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.layout-editor-element {
  position: absolute;
  border: 2px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: move;
  user-select: none;
  box-sizing: border-box;
  pointer-events: auto;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.layout-editor-element.is-locked {
  cursor: not-allowed;
  opacity: 0.6;
}

.layout-editor-element.is-hovered {
  border-color: rgba(59, 130, 246, 0.45);
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.18);
}

.layout-editor-element.is-selected {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.28);
}

.layout-editor-element-label {
  pointer-events: none;
}

.layout-editor-element-badge {
  display: none;
}

.layout-editor-element-content {
  display: none;
}

.layout-editor-element.is-master-preview .layout-editor-element-content {
  display: flex;
}

.layout-editor-master-text {
  display: block;
}

.layout-editor-master-logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  min-height: 36px;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.58);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.layout-editor-element.chart {
  background: transparent;
}

.layout-editor-element.logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.layout-editor-element.playbar {
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.layout-editor-playbar {
  --playbar-bg: rgba(0, 0, 0, 0.65);
  --playbar-text: #ffffff;
  --playbar-accent: #32c5fd;
  --playbar-radius: 999px;
  --playbar-border: rgba(255, 255, 255, 0.18);
  --playbar-surface-elevated: var(--playbar-bg);
  --playbar-surface-strong: var(--playbar-bg);
  --playbar-surface-soft: var(--playbar-bg);
  --playbar-surface-border: var(--playbar-border);
  --playbar-surface-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
  --playbar-surface-shadow-soft: 0 10px 18px rgba(0, 0, 0, 0.24);
  --playbar-surface-shadow-cinematic: 0 16px 30px rgba(0, 0, 0, 0.36);
  --playbar-track-fill-bg: color-mix(in srgb, var(--playbar-accent) 78%, rgba(255, 255, 255, 0.18));
  --playbar-thumb-border: rgba(255, 255, 255, 0.8);
  --playbar-muted-text: var(--playbar-text);
  --playbar-button-bg-hover: var(--playbar-button-bg);
  --playbar-accent-contrast: #ffffff;
  --playbar-main-button-bg: rgba(50, 197, 253, 0.2);
  --playbar-main-button-border: rgba(151, 227, 255, 0.55);
  --playbar-main-button-shadow: 0 0 0 1px rgba(50, 197, 253, 0.25), 0 10px 20px rgba(0, 0, 0, 0.35);
  --playbar-size-scale: 1;
  --playbar-width-scale: 1;
  --playbar-track-base-size: 3px;
  --playbar-track-hover-base-size: 6px;
  --playbar-knob-base-size: 12px;
  --playbar-track-size: calc(var(--playbar-track-base-size) * var(--playbar-size-scale));
  --playbar-track-size-hover: calc(var(--playbar-track-hover-base-size) * var(--playbar-size-scale));
  --playbar-knob-size: calc(var(--playbar-knob-base-size) * var(--playbar-size-scale));
  --playbar-knob-scale: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--playbar-text);
  background: transparent;
  border: none;
  padding: 0;
  box-sizing: border-box;
  pointer-events: none;
  overflow: visible;
  container-type: inline-size;
}

.layout-editor-element.playbar.is-hovered,
.layout-editor-element.playbar.is-selected {
  border-color: transparent;
  box-shadow: none;
}

.layout-editor-playbar .playbar-layout-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(8px * var(--playbar-size-scale));
  outline: 1px solid transparent;
  outline-offset: 1px;
  transition: outline-color 160ms ease, box-shadow 160ms ease;
  margin: 0 auto;
}

.layout-editor-element.playbar.is-hovered .layout-editor-playbar .playbar-layout-root {
  outline-color: rgba(255, 255, 255, 0.34);
}

.layout-editor-element.playbar.is-selected .layout-editor-playbar .playbar-layout-root {
  outline-color: rgba(124, 212, 255, 0.92);
}

.layout-editor-playbar .playbar-track-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(8px * var(--playbar-size-scale));
}

.layout-editor-playbar .playbar-control-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8px * var(--playbar-size-scale));
}

.layout-editor-playbar .playbar-controls-left {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--playbar-size-scale));
  flex: 0 0 auto;
}

.layout-editor-playbar .playbar-transport-scrub {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--playbar-size-scale));
  flex: 1;
  min-width: 0;
}

.layout-editor-playbar .playbar-label-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--playbar-size-scale));
}

.layout-editor-playbar .playbar-unused-controls {
  display: none !important;
}

.layout-editor-playbar-button {
  border: none;
  background: transparent;
  color: var(--playbar-text);
  font-size: calc(16px * var(--playbar-size-scale));
  line-height: 1;
  min-width: calc(24px * var(--playbar-size-scale));
  min-height: calc(24px * var(--playbar-size-scale));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 0 0 auto;
}

.layout-editor-playbar-seek {
  flex: 1;
  width: 100%;
  min-width: 0;
  appearance: none;
  background: transparent;
  height: calc(20px * var(--playbar-size-scale));
}

.layout-editor-playbar-seek::-webkit-slider-runnable-track {
  height: var(--playbar-track-size);
  border-radius: 999px;
  background: var(--playbar-track-fill-bg);
}

.layout-editor-playbar-seek::-webkit-slider-thumb {
  appearance: none;
  width: var(--playbar-knob-size);
  height: var(--playbar-knob-size);
  margin-top: calc((var(--playbar-track-size) - var(--playbar-knob-size)) / 2);
  border-radius: 999px;
  background: var(--playbar-accent);
  border: 1px solid var(--playbar-thumb-border);
  transform: scale(var(--playbar-knob-scale));
}

.layout-editor-playbar-seek::-moz-range-track {
  height: var(--playbar-track-size);
  border-radius: 999px;
  background: var(--playbar-track-fill-bg);
}

.layout-editor-playbar-seek::-moz-range-thumb {
  width: var(--playbar-knob-size);
  height: var(--playbar-knob-size);
  border-radius: 999px;
  background: var(--playbar-accent);
  border: 1px solid var(--playbar-thumb-border);
  transform: scale(var(--playbar-knob-scale));
}

.layout-editor-playbar:hover {
  --playbar-track-size: var(--playbar-track-size-hover);
  --playbar-knob-scale: 1.08;
}

.layout-editor-playbar-label,
.layout-editor-playbar-time-end {
  font-size: calc(10px * var(--playbar-size-scale));
  color: var(--playbar-text);
  min-width: calc(40px * var(--playbar-size-scale));
  white-space: nowrap;
  text-align: right;
}

.layout-editor-playbar.playbar-hide-label .layout-editor-playbar-label,
.layout-editor-playbar.playbar-hide-label .layout-editor-playbar-time-end {
  display: none;
}

.layout-editor-playbar.playbar-preset-pill {
  --playbar-track-base-size: 3px;
  --playbar-track-hover-base-size: 6px;
  --playbar-knob-base-size: 12px;
}

.layout-editor-playbar.playbar-preset-pill .playbar-layout-root {
  background: var(--playbar-bg);
  border: 1px solid var(--playbar-border);
  border-radius: var(--playbar-radius);
  padding: calc(6px * var(--playbar-size-scale)) calc(10px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-pill .playbar-control-row-pill {
  justify-content: flex-start;
  gap: calc(8px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-pill .layout-editor-playbar-button {
  border: 1px solid var(--playbar-button-border);
  background: var(--playbar-button-bg);
  border-radius: 999px;
  padding: calc(4px * var(--playbar-size-scale)) calc(10px * var(--playbar-size-scale));
  font-size: calc(11px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-pill .layout-editor-playbar-seek {
  min-width: calc(120px * var(--playbar-width-scale));
}

.layout-editor-playbar.playbar-preset-pill .layout-editor-playbar-label {
  min-width: calc(56px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-timeline {
  --playbar-track-base-size: 3px;
  --playbar-track-hover-base-size: 6px;
  --playbar-knob-base-size: 12px;
}

.layout-editor-playbar.playbar-preset-minimal {
  --playbar-track-base-size: 2px;
  --playbar-track-hover-base-size: 4px;
  --playbar-knob-base-size: 10px;
}

.layout-editor-playbar.playbar-preset-minimal .playbar-control-row {
  justify-content: flex-start;
}

.layout-editor-playbar.playbar-preset-minimal .playbar-action-play {
  font-size: calc(14px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-transport {
  --playbar-track-base-size: 3px;
  --playbar-track-hover-base-size: 6px;
  --playbar-knob-base-size: 12px;
}

.layout-editor-playbar.playbar-preset-transport .playbar-layout-root {
  background: var(--playbar-bg);
  border: 1px solid var(--playbar-border);
  border-radius: var(--playbar-radius);
  padding: calc(6px * var(--playbar-size-scale)) calc(10px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-cinematic {
  --playbar-track-base-size: 4px;
  --playbar-track-hover-base-size: 8px;
  --playbar-knob-base-size: 14px;
}

.layout-editor-playbar.playbar-preset-cinematic .playbar-action-play {
  width: calc(56px * var(--playbar-size-scale));
  height: calc(56px * var(--playbar-size-scale));
  border-radius: 999px;
  background: var(--playbar-accent);
  color: #ffffff;
  font-size: calc(28px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-transport .playbar-action-play {
  font-size: calc(18px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-compact .playbar-layout-root {
  gap: 4px;
}

.layout-editor-playbar.playbar-compact .layout-editor-playbar-time-end {
  display: none;
}

.layout-editor-playbar.playbar-preset-pill.playbar-compact .playbar-action-pause,
.layout-editor-playbar.playbar-preset-pill.playbar-compact .playbar-action-reset {
  display: none;
}

.layout-editor-playbar.playbar-size-small {
  --playbar-size-scale: 0.88;
  --playbar-width-scale: 0.76;
}

.layout-editor-playbar.playbar-size-medium {
  --playbar-size-scale: 1;
  --playbar-width-scale: 1;
}

.layout-editor-playbar.playbar-size-large {
  --playbar-size-scale: 1.14;
  --playbar-width-scale: 1.14;
}

.layout-editor-playbar.playbar-size-small .playbar-layout-root {
  width: 76%;
}

.layout-editor-playbar.playbar-size-medium .playbar-layout-root {
  width: 88%;
}

.layout-editor-playbar.playbar-size-large .playbar-layout-root {
  width: 100%;
}

/* Premium playbar preset refinement (layout editor preview) */
.layout-editor-playbar .layout-editor-playbar-button {
  width: calc(30px * var(--playbar-size-scale));
  height: calc(30px * var(--playbar-size-scale));
  min-width: calc(30px * var(--playbar-size-scale));
  min-height: calc(30px * var(--playbar-size-scale));
  border: 1px solid var(--playbar-button-border);
  background: var(--playbar-button-bg);
  border-radius: 999px;
  font-size: calc(13px * var(--playbar-size-scale));
  line-height: 1;
  padding: 0;
}

.layout-editor-playbar .layout-editor-playbar-button:hover {
  border-color: var(--playbar-button-border-hover);
  background: var(--playbar-button-bg-hover);
}

.layout-editor-playbar .layout-editor-playbar-button.is-play-icon,
.layout-editor-playbar .layout-editor-playbar-button.is-pause-icon,
.interactive-playbar .playbar-button.is-play-icon,
.interactive-playbar .playbar-button.is-pause-icon {
  font-size: 0;
  line-height: 0;
}

.layout-editor-playbar .playbar-button-icon,
.interactive-playbar .playbar-button-icon {
  width: calc(13px * var(--playbar-size-scale));
  height: calc(13px * var(--playbar-size-scale));
  display: block;
  flex: 0 0 auto;
}

.layout-editor-playbar .playbar-button-icon--play,
.interactive-playbar .playbar-button-icon--play {
  transform: translateX(calc(0.5px * var(--playbar-size-scale)));
}

.layout-editor-playbar .playbar-action-main .playbar-button-icon,
.interactive-playbar .playbar-action-main .playbar-button-icon {
  width: calc(16px * var(--playbar-size-scale));
  height: calc(16px * var(--playbar-size-scale));
}

.layout-editor-playbar .playbar-controls-center,
.layout-editor-playbar .playbar-control-cluster,
.layout-editor-playbar .playbar-inline-scrub {
  display: flex;
  align-items: center;
}

.layout-editor-playbar .playbar-control-cluster {
  gap: calc(6px * var(--playbar-size-scale));
}

.layout-editor-playbar .playbar-inline-scrub {
  flex: 1;
  gap: calc(8px * var(--playbar-size-scale));
  min-width: 0;
}

.layout-editor-playbar.playbar-preset-pill .playbar-layout-root,
.layout-editor-playbar.playbar-preset-transport .playbar-layout-root {
  background: var(--playbar-surface-elevated);
  border: 1px solid var(--playbar-surface-border);
  box-shadow: var(--playbar-surface-shadow);
}

.layout-editor-playbar.playbar-preset-pill .playbar-control-row-pill {
  align-items: center;
  gap: calc(9px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-pill .layout-editor-playbar-label {
  font-size: calc(11px * var(--playbar-size-scale));
  color: var(--playbar-muted-text);
}

.layout-editor-playbar.playbar-preset-timeline .playbar-layout-root {
  padding: calc(8px * var(--playbar-size-scale)) calc(12px * var(--playbar-size-scale));
  border-radius: calc(16px * var(--playbar-size-scale));
  border: 1px solid var(--playbar-surface-border);
  background: var(--playbar-surface-strong);
  box-shadow: var(--playbar-surface-shadow);
  gap: calc(10px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-timeline .playbar-track-row {
  gap: calc(10px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-timeline .playbar-controls-center {
  justify-content: center;
  gap: calc(10px * var(--playbar-size-scale));
  width: 100%;
}

.layout-editor-playbar.playbar-preset-timeline .playbar-action-main {
  width: calc(38px * var(--playbar-size-scale));
  height: calc(38px * var(--playbar-size-scale));
  min-width: calc(38px * var(--playbar-size-scale));
  min-height: calc(38px * var(--playbar-size-scale));
  font-size: calc(16px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-minimal .playbar-layout-root {
  padding: calc(5px * var(--playbar-size-scale)) calc(9px * var(--playbar-size-scale));
  border-radius: 999px;
  border: 1px solid var(--playbar-surface-border);
  background: var(--playbar-surface-soft);
  box-shadow: var(--playbar-surface-shadow-soft);
  gap: calc(6px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-minimal .layout-editor-playbar-button {
  width: calc(26px * var(--playbar-size-scale));
  height: calc(26px * var(--playbar-size-scale));
  min-width: calc(26px * var(--playbar-size-scale));
  min-height: calc(26px * var(--playbar-size-scale));
  font-size: calc(12px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-minimal .layout-editor-playbar-label {
  font-size: calc(10px * var(--playbar-size-scale));
  min-width: calc(34px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-minimal .layout-editor-playbar-seek {
  min-width: calc(110px * var(--playbar-width-scale));
}

.layout-editor-playbar.playbar-preset-transport .playbar-controls-left {
  gap: calc(7px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-cinematic .playbar-layout-root {
  padding: calc(10px * var(--playbar-size-scale)) calc(14px * var(--playbar-size-scale));
  border-radius: calc(18px * var(--playbar-size-scale));
  border: 1px solid var(--playbar-surface-border);
  background: linear-gradient(
    180deg,
    var(--playbar-surface-strong),
    var(--playbar-surface-soft)
  );
  box-shadow: var(--playbar-surface-shadow-cinematic);
  gap: calc(11px * var(--playbar-size-scale));
}

.layout-editor-playbar.playbar-preset-cinematic .playbar-controls-cinematic {
  justify-content: center;
  gap: calc(12px * var(--playbar-size-scale));
  width: 100%;
}

.layout-editor-playbar.playbar-preset-cinematic .playbar-action-main {
  width: calc(48px * var(--playbar-size-scale));
  height: calc(48px * var(--playbar-size-scale));
  min-width: calc(48px * var(--playbar-size-scale));
  min-height: calc(48px * var(--playbar-size-scale));
  border-radius: 999px;
  color: var(--playbar-accent-contrast);
  font-size: calc(20px * var(--playbar-size-scale));
  border-color: var(--playbar-main-button-border);
  background: var(--playbar-main-button-bg);
  box-shadow: var(--playbar-main-button-shadow);
}

.layout-editor-playbar.playbar-compact .playbar-action-reset-extra,
.layout-editor-playbar.playbar-preset-minimal .playbar-action-pause {
  display: none;
}

.layout-editor-element.is-compact .layout-editor-element-label {
  opacity: 0;
}

.layout-editor-element.is-compact:hover .layout-editor-element-label {
  opacity: 1;
}

.layout-editor-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border: 2px solid #3b82f6;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.22);
}

.layout-editor-handle.top-left {
  left: -6px;
  top: -6px;
  cursor: nwse-resize;
}

.layout-editor-handle.top-right {
  right: -6px;
  top: -6px;
  cursor: nesw-resize;
}

.layout-editor-handle.bottom-left {
  left: -6px;
  bottom: -6px;
  cursor: nesw-resize;
}

.layout-editor-handle.bottom-right {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}

.layout-editor-handle.top {
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.layout-editor-handle.bottom {
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  cursor: ns-resize;
}

.layout-editor-handle.left {
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.layout-editor-handle.right {
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  cursor: ew-resize;
}

.layout-editor-element-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
}

.layout-editor-element-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: #0f1217;
  cursor: pointer;
}

.layout-editor-element-label-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.layout-editor-element-item.is-selected {
  border-color: rgba(50, 197, 253, 0.6);
  background: rgba(50, 197, 253, 0.12);
}

.layout-editor-element-item label {
  font-size: 12px;
  color: #f2f2f2;
}

.layout-editor-element-badge-text {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(50, 197, 253, 0.28);
  background: rgba(50, 197, 253, 0.1);
  color: #9edfff;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.layout-element-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 34px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.layout-element-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.layout-element-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.2s ease, background 0.2s ease;
}

.layout-element-toggle input:checked + .layout-element-toggle-knob {
  transform: translateX(14px);
  background: rgba(50, 197, 253, 0.9);
}

.layout-element-toggle input:checked {
  outline: none;
}

.layout-element-toggle.is-on {
  background: rgba(50, 197, 253, 0.2);
  border-color: rgba(50, 197, 253, 0.4);
}

.layout-editor-inspector {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 2px;
  padding-left: 0;
  overflow-x: hidden;
  scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
  scrollbar-width: thin;
}

.layout-editor-inspector::-webkit-scrollbar {
  width: 5px;
}

.layout-editor-inspector::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.layout-editor-inspector::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}

.layout-editor-inspector-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.layout-editor-inspector-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.layout-editor-inspector-field label {
  font-size: 12px;
  font-weight: 400;
  color: #b7b7b7;
}

.layout-editor-inspector-field input,
.layout-editor-inspector-field select,
.layout-editor-inspector-field textarea {
  width: 100%;
  background: #0f1217;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  color: #ffffff;
  font-size: 13px;
  font-family: var(--font-sans);
  font-weight: 400;
}

.layout-editor-inspector-field textarea {
  resize: vertical;
  min-height: 64px;
}

.layout-editor-inspector .controls-section {
  gap: 10px;
  margin-top: 12px;
}

.layout-editor-inspector .controls-section:first-of-type {
  margin-top: 0;
}

.layout-editor-inspector .controls-section-title {
  min-height: 38px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0f1217;
  color: rgba(255, 255, 255, 0.82);
  text-transform: none;
  letter-spacing: 0.24px;
  font-size: 12px;
}

.layout-editor-inspector .controls-group {
  gap: 10px;
  margin-top: 8px;
}

.layout-editor-inspector .controls-buttons {
  margin-top: 8px;
}

.layout-editor-inspector .controls-field {
  gap: 6px;
}

.layout-editor-inspector .inspector-card .controls-field {
  gap: 6px;
}

.layout-editor-inspector .controls-field label {
  font-size: 12px;
  font-weight: 400;
  color: #b7b7b7;
}

.layout-editor-inspector .controls-field input[type="number"],
.layout-editor-inspector .controls-field input[type="text"],
.layout-editor-inspector .controls-field select,
.layout-editor-inspector .controls-field textarea {
  width: 100%;
  min-height: 40px;
  background: #0f1217;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
}

.layout-editor-inspector .controls-field select {
  appearance: none;
  background-color: var(--button-fill);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1.5 1.5l4.5 4 4.5-4' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 7px;
  padding-right: 38px;
}

.layout-editor-inspector .controls-field textarea {
  resize: vertical;
  min-height: 72px;
}

.layout-editor-inspector .controls-field input[type="range"] {
  width: 100%;
  margin: 2px 0 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  outline: none;
}

.layout-editor-inspector .controls-field input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.layout-editor-inspector .controls-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border-radius: 50%;
  border: none;
  background: #32c5fd;
  box-shadow: 0 0 0 3px rgba(50, 197, 253, 0.22);
}

.layout-editor-inspector .controls-field input[type="range"]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
}

.layout-editor-inspector .controls-field input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #32c5fd;
  box-shadow: 0 0 0 3px rgba(50, 197, 253, 0.22);
}

.layout-editor-inspector .controls-field input[type="number"]:focus,
.layout-editor-inspector .controls-field input[type="text"]:focus,
.layout-editor-inspector .controls-field select:focus,
.layout-editor-inspector .controls-field textarea:focus {
  outline: none;
  box-shadow: 0 0 0 1px rgba(50, 197, 253, 0.32);
}

.theme-layout-editor input[type="number"][data-scrub="true"] {
  cursor: ew-resize;
}

.theme-layout-editor input[type="number"].is-scrubbing {
  user-select: none;
  -webkit-user-select: none;
}

.layout-editor-inspector-divider {
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin: 2px 0 4px;
}

.layout-editor-selection-card {
  gap: 12px;
}

.theme-file-input {
  display: none;
}

.theme-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 0;
  padding-top: 4px;
}

@media (max-width: 1180px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "left right"
      "center center";
    row-gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .app-header-zone-center {
    justify-self: center;
    padding: 0;
  }

  .app-header-zone-center::before,
  .app-header-zone-center::after,
  .app-header-separator {
    display: none;
  }
}

@media (max-width: 720px) {
  .app-header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "left"
      "center"
      "right";
    justify-items: stretch;
    gap: 10px;
    padding: 10px 16px;
    min-height: 56px;
  }

  .app-header-zone-left,
  .app-header-zone-center,
  .app-header-zone-right {
    justify-self: stretch;
  }

  .app-header-zone-center {
    padding: 0;
  }

  .app-header-identity,
  .app-header-document-meta,
  .app-header-workspace,
  .app-header-document-actions {
    flex-wrap: wrap;
  }

  .app-header-workspace,
  .app-header-document-actions {
    justify-content: flex-start;
  }

  .app-header-zone-center::before,
  .app-header-zone-center::after,
  .app-header-separator {
    display: none;
  }

  .project-name-input {
    width: min(100%, 260px);
  }

  .header-selection-position {
    position: static;
    transform: none;
    width: fit-content;
    max-width: 100%;
    margin-top: 4px;
  }

  .project-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .project-header-status,
  .project-header-actions {
    width: 100%;
    margin-left: 0;
  }

  .project-header-actions {
    justify-content: space-between;
  }

  .project-workspace {
    grid-template-columns: 1fr;
  }

  .project-sidebar {
    position: static;
  }

  .project-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .project-toolbar-main {
    flex-wrap: wrap;
  }

  .project-toolbar-actions {
    margin-left: 0;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .project-filters-grid {
    grid-template-columns: 1fr;
  }

  .project-undo-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-bulk-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .project-row {
    grid-template-columns: 24px 220px minmax(0, 1fr);
    gap: 8px;
  }

  .project-row-header {
    display: none;
  }

  .admin-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .admin-row-header {
    display: none;
  }

  .admin-row .project-button {
    justify-self: start;
  }

  .layout-editor-body {
    grid-template-columns: 1fr;
  }

  .theme-undo-redo-floating {
    left: var(--layout-floating-offset, 12px);
    top: var(--layout-floating-offset, 12px);
  }

  .project-row-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  .project-row-publication-meta {
    grid-template-columns: 1fr;
  }

  .theme-modal-body {
    grid-template-columns: 1fr;
  }

  .theme-modal-header {
    flex-direction: column;
  }

  .theme-editor-meta-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .project-row {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .project-row-thumbnail {
    display: none;
  }

  .project-row-actions {
    grid-column: 1 / -1;
  }

  .project-filter-inline {
    width: 100%;
  }

  .project-filter-inline select {
    width: 100%;
    min-width: 0;
  }
}


#stage {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: auto;
  max-width: 100vw;
}

#stage.is-space-pan,
#stage.is-space-pan * {
  cursor: grab;
}

#stage.is-panning,
#stage.is-panning * {
  cursor: grabbing;
}

#canvas-workspace {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  flex: 0 0 auto;
}

body.export-mode #stage {
  min-height: auto;
  padding: 0;
  align-items: flex-start;
  justify-content: flex-start;
}

body.embed-mode #stage {
  min-height: 100vh;
  width: 100vw;
  height: 100vh;
  max-height: none;
  padding: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#canvas-wrapper {
  --canvas-width: min(92vmin, 1080px);
  --canvas-height: var(--canvas-width);
  --ruler-size: 36px;
  position: relative;
  width: calc(var(--canvas-width) + var(--ruler-size));
  height: calc(var(--canvas-height) + var(--ruler-size));
  padding-top: var(--ruler-size);
  padding-left: var(--ruler-size);
  overflow: visible;
  user-select: none;
  touch-action: none;
}


body.export-mode #canvas-wrapper {
  --ruler-size: 0px;
  padding: 0;
}

body.embed-mode #canvas-wrapper {
  --ruler-size: 0px;
  padding: 0;
}

#controls,
#export-modal,
#data-editor,
#chart-digitiser-modal {
  transition: opacity 0.2s ease;
}

body.export-mode #controls {
  opacity: 0;
  pointer-events: none;
}

body.export-mode .controls-undo-redo-floating {
  display: none;
}

body.embed-mode {
  background: transparent;
  overflow: hidden;
}

body.embed-mode #controls,
body.embed-mode .app-header,
body.embed-mode #export-modal,
body.embed-mode #data-editor,
body.embed-mode #chart-digitiser-modal,
body.embed-mode .controls-toggle-button,
body.embed-mode .canvas-toolbar,
body.embed-mode .controls-undo-redo-floating {
  display: none;
  opacity: 0;
  pointer-events: none;
}

body.preview-mode {
  background: transparent;
  overflow: hidden;
}

body.preview-mode #controls,
body.preview-mode .app-header,
body.preview-mode #export-modal,
body.preview-mode #data-editor,
body.preview-mode #chart-digitiser-modal,
body.preview-mode .controls-toggle-button,
body.preview-mode .canvas-toolbar,
body.preview-mode .controls-undo-redo-floating {
  display: none;
  opacity: 0;
  pointer-events: none;
}

body.preview-mode #stage {
  min-height: 100vh;
  width: 100vw;
  padding: 0;
  align-items: center;
  justify-content: center;
}

body.canvas-zoomed #stage {
  align-items: flex-start;
  justify-content: flex-start;
}

body.preview-mode #canvas-wrapper {
  --ruler-size: 0px;
  padding: 0;
}

body.preview-mode #editor,
body.preview-mode #guides,
body.preview-mode #rulers,
body.preview-mode #guide-handle {
  display: none;
}

body.export-mode .app-header {
  display: none;
}

body.export-mode #export-modal {
  display: none;
}

body.export-mode #rulers,
body.export-mode #guides,
body.export-mode #editor {
  display: none;
}

body.embed-mode #rulers,
body.embed-mode #guides,
body.embed-mode #editor {
  display: none;
}

#rulers {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: none;
  z-index: 5;
}

body.rulers-on #rulers {
  display: block;
}

#chart {
  display: block;
  width: var(--canvas-width);
  height: var(--canvas-height);
  background: #000000;
  border: none;
  box-shadow: none;
  position: relative;
  z-index: 1;
}

body.embed-mode #chart {
  box-shadow: none;
}

.interactive-playbar {
  --playbar-bg: rgba(0, 0, 0, 0.65);
  --playbar-text: #ffffff;
  --playbar-accent: #32c5fd;
  --playbar-radius: 999px;
  --playbar-border: rgba(255, 255, 255, 0.18);
  --playbar-surface-elevated: var(--playbar-bg);
  --playbar-surface-strong: var(--playbar-bg);
  --playbar-surface-soft: var(--playbar-bg);
  --playbar-surface-border: var(--playbar-border);
  --playbar-surface-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
  --playbar-surface-shadow-soft: 0 10px 18px rgba(0, 0, 0, 0.24);
  --playbar-surface-shadow-cinematic: 0 16px 30px rgba(0, 0, 0, 0.36);
  --playbar-track-fill-bg: color-mix(in srgb, var(--playbar-accent) 78%, rgba(255, 255, 255, 0.22));
  --playbar-thumb-border: rgba(255, 255, 255, 0.88);
  --playbar-muted-text: var(--playbar-text);
  --playbar-button-bg-hover: var(--playbar-button-bg);
  --playbar-accent-contrast: #ffffff;
  --playbar-main-button-bg: rgba(50, 197, 253, 0.24);
  --playbar-main-button-border: rgba(151, 227, 255, 0.58);
  --playbar-main-button-shadow: 0 0 0 1px rgba(50, 197, 253, 0.25), 0 10px 20px rgba(0, 0, 0, 0.35);
  --playbar-size-scale: 1;
  --playbar-width-scale: 1;
  --playbar-track-base-size: 3px;
  --playbar-track-hover-base-size: 6px;
  --playbar-knob-base-size: 12px;
  --playbar-track-size: calc(var(--playbar-track-base-size) * var(--playbar-size-scale));
  --playbar-track-size-hover: calc(var(--playbar-track-hover-base-size) * var(--playbar-size-scale));
  --playbar-knob-size: calc(var(--playbar-knob-base-size) * var(--playbar-size-scale));
  --playbar-knob-scale: 1;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  z-index: 7;
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(0);
  touch-action: auto;
  width: min(calc(520px * var(--playbar-width-scale)), calc(var(--canvas-width) - 24px));
  color: var(--playbar-text);
  container-type: inline-size;
}

.interactive-playbar.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
}

.interactive-playbar.is-selected {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.9);
}

.interactive-playbar.is-layout-hovered .playbar-layout-root {
  outline: 1px solid rgba(255, 255, 255, 0.34);
  outline-offset: 2px;
}

.interactive-playbar.is-layout-selected .playbar-layout-root {
  outline: 2px solid rgba(124, 212, 255, 0.92);
  outline-offset: 2px;
}

.playbar-handle {
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.15);
}

.interactive-playbar.is-editable .playbar-handle {
  display: none;
}

.playbar-hide {
  display: none;
}

.interactive-playbar.is-editable .playbar-hide {
  display: inline-flex;
}

.playbar-button {
  border: none;
  background: transparent;
  color: var(--playbar-text);
  border-radius: 999px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  min-width: 28px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.interactive-playbar .playbar-layout-root {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: calc(10px * var(--playbar-size-scale));
  margin: 0 auto;
}

.interactive-playbar .playbar-track-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--playbar-size-scale));
}

.interactive-playbar .playbar-control-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(12px * var(--playbar-size-scale));
}

.interactive-playbar .playbar-controls-left {
  display: flex;
  align-items: center;
  gap: calc(8px * var(--playbar-size-scale));
  flex: 0 0 auto;
}

.interactive-playbar .playbar-transport-scrub {
  display: flex;
  align-items: center;
  gap: calc(10px * var(--playbar-size-scale));
  flex: 1;
  min-width: 0;
}

.interactive-playbar .playbar-label-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(12px * var(--playbar-size-scale));
}

.interactive-playbar .playbar-unused-controls {
  display: none !important;
}

.interactive-playbar.is-scrub .playbar-button:not(.playbar-hide) {
  display: none;
}

#playbar-seek {
  flex: 1;
  width: 100%;
  min-width: 0;
  appearance: none;
  background: transparent;
  height: calc(22px * var(--playbar-size-scale));
}

#playbar-seek::-webkit-slider-runnable-track {
  height: var(--playbar-track-size);
  border-radius: 999px;
  background: var(--playbar-track-fill-bg);
}

#playbar-seek::-webkit-slider-thumb {
  appearance: none;
  width: var(--playbar-knob-size);
  height: var(--playbar-knob-size);
  margin-top: calc((var(--playbar-track-size) - var(--playbar-knob-size)) / 2);
  border-radius: 999px;
  background: var(--playbar-accent);
  border: 1px solid var(--playbar-thumb-border);
  transform: scale(var(--playbar-knob-scale));
}

#playbar-seek::-moz-range-track {
  height: var(--playbar-track-size);
  border-radius: 999px;
  background: var(--playbar-track-fill-bg);
}

#playbar-seek::-moz-range-thumb {
  width: var(--playbar-knob-size);
  height: var(--playbar-knob-size);
  border-radius: 999px;
  background: var(--playbar-accent);
  border: 1px solid var(--playbar-thumb-border);
  transform: scale(var(--playbar-knob-scale));
}

.interactive-playbar:hover {
  --playbar-track-size: var(--playbar-track-size-hover);
  --playbar-knob-scale: 1.08;
}

.playbar-time,
.playbar-label {
  font-size: calc(12px * var(--playbar-size-scale));
  color: var(--playbar-text);
  min-width: calc(48px * var(--playbar-size-scale));
  text-align: right;
  white-space: nowrap;
}

.interactive-playbar.playbar-hide-label .playbar-time,
.interactive-playbar.playbar-hide-label .playbar-label {
  display: none;
}

.interactive-playbar.playbar-preset-pill {
  --playbar-track-base-size: 3px;
  --playbar-track-hover-base-size: 6px;
  --playbar-knob-base-size: 12px;
}

.interactive-playbar.playbar-preset-pill .playbar-layout-root {
  background: var(--playbar-bg);
  border: 1px solid var(--playbar-border);
  border-radius: var(--playbar-radius);
  padding: calc(8px * var(--playbar-size-scale)) calc(12px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-pill .playbar-control-row-pill {
  justify-content: flex-start;
  gap: calc(10px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-pill .playbar-button {
  border: 1px solid var(--playbar-button-border);
  background: var(--playbar-button-bg);
  border-radius: 999px;
  padding: calc(6px * var(--playbar-size-scale)) calc(12px * var(--playbar-size-scale));
  font-size: calc(12px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-pill .playbar-button:hover {
  border-color: var(--playbar-button-border-hover);
}

.interactive-playbar.playbar-preset-pill #playbar-seek {
  min-width: calc(120px * var(--playbar-width-scale));
}

.interactive-playbar.playbar-preset-pill .playbar-label {
  min-width: calc(72px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-timeline {
  --playbar-track-base-size: 3px;
  --playbar-track-hover-base-size: 6px;
  --playbar-knob-base-size: 12px;
}

.interactive-playbar.playbar-preset-minimal {
  --playbar-track-base-size: 2px;
  --playbar-track-hover-base-size: 4px;
  --playbar-knob-base-size: 10px;
}

.interactive-playbar.playbar-preset-minimal .playbar-control-row {
  justify-content: flex-start;
}

.interactive-playbar.playbar-preset-minimal #playbar-play {
  font-size: calc(14px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-transport {
  --playbar-track-base-size: 3px;
  --playbar-track-hover-base-size: 6px;
  --playbar-knob-base-size: 12px;
}

.interactive-playbar.playbar-preset-transport .playbar-layout-root {
  background: var(--playbar-bg);
  border: 1px solid var(--playbar-border);
  border-radius: var(--playbar-radius);
  padding: calc(8px * var(--playbar-size-scale)) calc(12px * var(--playbar-size-scale));
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}

.interactive-playbar.playbar-preset-cinematic {
  --playbar-track-base-size: 4px;
  --playbar-track-hover-base-size: 8px;
  --playbar-knob-base-size: 14px;
}

.interactive-playbar.playbar-preset-cinematic #playbar-play {
  width: calc(56px * var(--playbar-size-scale));
  height: calc(56px * var(--playbar-size-scale));
  border-radius: 999px;
  background: var(--playbar-accent);
  color: #ffffff;
  font-size: calc(28px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-transport #playbar-play {
  font-size: calc(20px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-compact .playbar-layout-root {
  gap: 5px;
}

.interactive-playbar.playbar-compact .playbar-time-end {
  display: none;
}

.interactive-playbar.playbar-preset-pill.playbar-compact #playbar-pause,
.interactive-playbar.playbar-preset-pill.playbar-compact #playbar-reset {
  display: none;
}

.interactive-playbar.playbar-size-small {
  --playbar-size-scale: 0.88;
  --playbar-width-scale: 0.76;
}

.interactive-playbar.playbar-size-medium {
  --playbar-size-scale: 1;
  --playbar-width-scale: 1;
}

.interactive-playbar.playbar-size-large {
  --playbar-size-scale: 1.14;
  --playbar-width-scale: 1.14;
}

.interactive-playbar.playbar-size-small .playbar-layout-root {
  width: 76%;
}

.interactive-playbar.playbar-size-medium .playbar-layout-root {
  width: 88%;
}

.interactive-playbar.playbar-size-large .playbar-layout-root {
  width: 100%;
}

/* Premium playbar preset refinement (runtime/editor) */
.interactive-playbar .playbar-button {
  width: calc(34px * var(--playbar-size-scale));
  height: calc(34px * var(--playbar-size-scale));
  min-width: calc(34px * var(--playbar-size-scale));
  min-height: calc(34px * var(--playbar-size-scale));
  border: 1px solid var(--playbar-button-border);
  background: var(--playbar-button-bg);
  border-radius: 999px;
  font-size: calc(14px * var(--playbar-size-scale));
  line-height: 1;
  padding: 0;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.interactive-playbar .playbar-button:hover {
  border-color: var(--playbar-button-border-hover);
  background: var(--playbar-button-bg-hover);
  transform: translateY(-1px);
}

.interactive-playbar .playbar-controls-center,
.interactive-playbar .playbar-control-cluster,
.interactive-playbar .playbar-inline-scrub {
  display: flex;
  align-items: center;
}

.interactive-playbar .playbar-control-cluster {
  gap: calc(8px * var(--playbar-size-scale));
}

.interactive-playbar .playbar-inline-scrub {
  flex: 1;
  min-width: 0;
  gap: calc(9px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-pill .playbar-layout-root,
.interactive-playbar.playbar-preset-transport .playbar-layout-root {
  background: var(--playbar-surface-elevated);
  border: 1px solid var(--playbar-surface-border);
  box-shadow: var(--playbar-surface-shadow);
}

.interactive-playbar.playbar-preset-pill .playbar-control-row-pill {
  align-items: center;
  gap: calc(10px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-pill .playbar-label {
  color: var(--playbar-muted-text);
}

.interactive-playbar.playbar-preset-timeline .playbar-layout-root {
  padding: calc(10px * var(--playbar-size-scale)) calc(14px * var(--playbar-size-scale));
  border-radius: calc(18px * var(--playbar-size-scale));
  border: 1px solid var(--playbar-surface-border);
  background: var(--playbar-surface-strong);
  box-shadow: var(--playbar-surface-shadow);
  gap: calc(12px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-timeline .playbar-track-row {
  gap: calc(12px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-timeline .playbar-controls-center {
  justify-content: center;
  gap: calc(12px * var(--playbar-size-scale));
  width: 100%;
}

.interactive-playbar.playbar-preset-timeline .playbar-action-main {
  width: calc(42px * var(--playbar-size-scale));
  height: calc(42px * var(--playbar-size-scale));
  min-width: calc(42px * var(--playbar-size-scale));
  min-height: calc(42px * var(--playbar-size-scale));
  font-size: calc(18px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-minimal .playbar-layout-root {
  padding: calc(6px * var(--playbar-size-scale)) calc(10px * var(--playbar-size-scale));
  border-radius: 999px;
  border: 1px solid var(--playbar-surface-border);
  background: var(--playbar-surface-soft);
  box-shadow: var(--playbar-surface-shadow-soft);
  gap: calc(7px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-minimal .playbar-button {
  width: calc(28px * var(--playbar-size-scale));
  height: calc(28px * var(--playbar-size-scale));
  min-width: calc(28px * var(--playbar-size-scale));
  min-height: calc(28px * var(--playbar-size-scale));
  font-size: calc(12px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-minimal .playbar-time {
  min-width: calc(40px * var(--playbar-size-scale));
  font-size: calc(11px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-minimal #playbar-seek {
  min-width: calc(170px * var(--playbar-width-scale));
}

.interactive-playbar.playbar-preset-transport .playbar-controls-left {
  gap: calc(8px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-cinematic .playbar-layout-root {
  padding: calc(12px * var(--playbar-size-scale)) calc(16px * var(--playbar-size-scale));
  border-radius: calc(20px * var(--playbar-size-scale));
  border: 1px solid var(--playbar-surface-border);
  background: linear-gradient(
    180deg,
    var(--playbar-surface-strong),
    var(--playbar-surface-soft)
  );
  box-shadow: var(--playbar-surface-shadow-cinematic);
  gap: calc(12px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-cinematic .playbar-track-row {
  gap: calc(12px * var(--playbar-size-scale));
}

.interactive-playbar.playbar-preset-cinematic .playbar-controls-cinematic {
  justify-content: center;
  gap: calc(14px * var(--playbar-size-scale));
  width: 100%;
}

.interactive-playbar.playbar-preset-cinematic .playbar-action-main {
  width: calc(52px * var(--playbar-size-scale));
  height: calc(52px * var(--playbar-size-scale));
  min-width: calc(52px * var(--playbar-size-scale));
  min-height: calc(52px * var(--playbar-size-scale));
  border-radius: 999px;
  color: var(--playbar-accent-contrast);
  font-size: calc(22px * var(--playbar-size-scale));
  border-color: var(--playbar-main-button-border);
  background: var(--playbar-main-button-bg);
  box-shadow: var(--playbar-main-button-shadow);
}

.interactive-playbar.playbar-preset-cinematic #playbar-play.playbar-action-main {
  width: calc(52px * var(--playbar-size-scale));
  height: calc(52px * var(--playbar-size-scale));
  min-width: calc(52px * var(--playbar-size-scale));
  min-height: calc(52px * var(--playbar-size-scale));
  font-size: calc(22px * var(--playbar-size-scale));
  color: var(--playbar-accent-contrast);
  border-color: var(--playbar-main-button-border);
  background: var(--playbar-main-button-bg);
}

.interactive-playbar.playbar-compact .playbar-action-reset-extra,
.interactive-playbar.playbar-preset-minimal .playbar-action-pause {
  display: none;
}

@container (max-width: 420px) {
  .layout-editor-playbar.playbar-size-small .playbar-layout-root,
  .interactive-playbar.playbar-size-small .playbar-layout-root {
    width: 84% !important;
  }

  .layout-editor-playbar.playbar-size-medium .playbar-layout-root,
  .interactive-playbar.playbar-size-medium .playbar-layout-root {
    width: 92% !important;
  }

  .layout-editor-playbar.playbar-size-large .playbar-layout-root,
  .interactive-playbar.playbar-size-large .playbar-layout-root {
    width: 100% !important;
  }

  .layout-editor-playbar .playbar-track-row,
  .layout-editor-playbar .playbar-control-row,
  .layout-editor-playbar .playbar-controls-left,
  .layout-editor-playbar .playbar-transport-scrub,
  .layout-editor-playbar .playbar-control-cluster,
  .layout-editor-playbar .playbar-inline-scrub,
  .interactive-playbar .playbar-track-row,
  .interactive-playbar .playbar-control-row,
  .interactive-playbar .playbar-controls-left,
  .interactive-playbar .playbar-transport-scrub,
  .interactive-playbar .playbar-control-cluster,
  .interactive-playbar .playbar-inline-scrub {
    gap: 6px;
  }

  .layout-editor-playbar.playbar-preset-pill .playbar-layout-root,
  .layout-editor-playbar.playbar-preset-transport .playbar-layout-root,
  .layout-editor-playbar.playbar-preset-timeline .playbar-layout-root,
  .layout-editor-playbar.playbar-preset-minimal .playbar-layout-root,
  .layout-editor-playbar.playbar-preset-cinematic .playbar-layout-root,
  .interactive-playbar.playbar-preset-pill .playbar-layout-root,
  .interactive-playbar.playbar-preset-transport .playbar-layout-root,
  .interactive-playbar.playbar-preset-timeline .playbar-layout-root,
  .interactive-playbar.playbar-preset-minimal .playbar-layout-root,
  .interactive-playbar.playbar-preset-cinematic .playbar-layout-root {
    padding: 6px 8px;
  }

  .layout-editor-playbar.playbar-preset-pill .playbar-control-row-pill,
  .interactive-playbar.playbar-preset-pill .playbar-control-row-pill {
    display: grid;
    grid-template-columns: auto auto auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .layout-editor-playbar .layout-editor-playbar-button,
  .interactive-playbar .playbar-button {
    width: calc(28px * var(--playbar-size-scale));
    height: calc(28px * var(--playbar-size-scale));
    min-width: calc(28px * var(--playbar-size-scale));
    min-height: calc(28px * var(--playbar-size-scale));
    font-size: calc(12px * var(--playbar-size-scale));
  }

  .layout-editor-playbar.playbar-preset-timeline .playbar-action-main,
  .layout-editor-playbar.playbar-preset-cinematic .playbar-action-main,
  .interactive-playbar.playbar-preset-timeline .playbar-action-main,
  .interactive-playbar.playbar-preset-cinematic .playbar-action-main {
    width: calc(36px * var(--playbar-size-scale));
    height: calc(36px * var(--playbar-size-scale));
    min-width: calc(36px * var(--playbar-size-scale));
    min-height: calc(36px * var(--playbar-size-scale));
    font-size: calc(16px * var(--playbar-size-scale));
  }

  .layout-editor-playbar.playbar-preset-cinematic #playbar-play.playbar-action-main,
  .interactive-playbar.playbar-preset-cinematic #playbar-play.playbar-action-main {
    width: calc(40px * var(--playbar-size-scale));
    height: calc(40px * var(--playbar-size-scale));
    min-width: calc(40px * var(--playbar-size-scale));
    min-height: calc(40px * var(--playbar-size-scale));
    font-size: calc(17px * var(--playbar-size-scale));
  }

  .layout-editor-playbar-label,
  .layout-editor-playbar-time-end,
  .interactive-playbar .playbar-label,
  .interactive-playbar .playbar-time {
    min-width: 0;
    flex: 0 1 auto;
    font-size: calc(10px * var(--playbar-size-scale));
  }

  .layout-editor-playbar.playbar-preset-pill .layout-editor-playbar-label,
  .interactive-playbar.playbar-preset-pill .playbar-label {
    min-width: calc(32px * var(--playbar-size-scale));
  }

  .layout-editor-playbar.playbar-preset-pill .layout-editor-playbar-seek,
  .interactive-playbar.playbar-preset-pill #playbar-seek {
    min-width: calc(72px * var(--playbar-width-scale));
  }

  .layout-editor-playbar.playbar-preset-minimal .layout-editor-playbar-seek,
  .interactive-playbar.playbar-preset-minimal #playbar-seek {
    min-width: calc(92px * var(--playbar-width-scale));
  }
}

@container (max-width: 340px) {
  .layout-editor-playbar.playbar-size-small .playbar-layout-root,
  .interactive-playbar.playbar-size-small .playbar-layout-root {
    width: 86% !important;
  }

  .layout-editor-playbar.playbar-size-medium .playbar-layout-root,
  .interactive-playbar.playbar-size-medium .playbar-layout-root {
    width: 93% !important;
  }

  .layout-editor-playbar.playbar-size-large .playbar-layout-root,
  .interactive-playbar.playbar-size-large .playbar-layout-root {
    width: 100% !important;
  }

  .layout-editor-playbar .layout-editor-playbar-button,
  .interactive-playbar .playbar-button {
    width: calc(26px * var(--playbar-size-scale));
    height: calc(26px * var(--playbar-size-scale));
    min-width: calc(26px * var(--playbar-size-scale));
    min-height: calc(26px * var(--playbar-size-scale));
    font-size: calc(11px * var(--playbar-size-scale));
  }

  .layout-editor-playbar.playbar-preset-timeline .playbar-action-main,
  .layout-editor-playbar.playbar-preset-cinematic .playbar-action-main,
  .interactive-playbar.playbar-preset-timeline .playbar-action-main,
  .interactive-playbar.playbar-preset-cinematic .playbar-action-main {
    width: calc(32px * var(--playbar-size-scale));
    height: calc(32px * var(--playbar-size-scale));
    min-width: calc(32px * var(--playbar-size-scale));
    min-height: calc(32px * var(--playbar-size-scale));
    font-size: calc(14px * var(--playbar-size-scale));
  }

  .layout-editor-playbar.playbar-preset-cinematic #playbar-play.playbar-action-main,
  .interactive-playbar.playbar-preset-cinematic #playbar-play.playbar-action-main {
    width: calc(36px * var(--playbar-size-scale));
    height: calc(36px * var(--playbar-size-scale));
    min-width: calc(36px * var(--playbar-size-scale));
    min-height: calc(36px * var(--playbar-size-scale));
    font-size: calc(15px * var(--playbar-size-scale));
  }

  .layout-editor-playbar .playbar-button-icon,
  .interactive-playbar .playbar-button-icon {
    width: 11px;
    height: 11px;
  }

  .layout-editor-playbar .playbar-action-main .playbar-button-icon,
  .interactive-playbar .playbar-action-main .playbar-button-icon {
    width: 14px;
    height: 14px;
  }

  .layout-editor-playbar-label,
  .layout-editor-playbar-time-end,
  .interactive-playbar .playbar-label,
  .interactive-playbar .playbar-time {
    min-width: 0;
    flex: 0 1 auto;
    font-size: calc(9px * var(--playbar-size-scale));
  }

  .layout-editor-playbar.playbar-preset-pill .layout-editor-playbar-label,
  .interactive-playbar.playbar-preset-pill .playbar-label {
    min-width: calc(28px * var(--playbar-size-scale));
  }

  .layout-editor-playbar.playbar-preset-pill .layout-editor-playbar-seek,
  .interactive-playbar.playbar-preset-pill #playbar-seek {
    min-width: calc(56px * var(--playbar-width-scale));
  }

  .layout-editor-playbar.playbar-preset-minimal .layout-editor-playbar-seek,
  .interactive-playbar.playbar-preset-minimal #playbar-seek {
    min-width: calc(72px * var(--playbar-width-scale));
  }
}

.interactive-playbar.is-editable {
  cursor: grab;
}

.interactive-playbar.is-dragging {
  cursor: grabbing;
}

body.export-mode .interactive-playbar {
  display: none;
}

#rulers {
  background: transparent;
}

#guides {
  position: absolute;
  top: var(--ruler-size);
  left: var(--ruler-size);
  width: var(--canvas-width);
  height: var(--canvas-height);
  pointer-events: none;
  display: none;
  z-index: 4;
}

body.rulers-on #guides {
  display: block;
}

body.safe-area-on:not(.preview-mode):not(.export-mode):not(.embed-mode) #guides {
  display: block;
}

#editor {
  position: absolute;
  top: var(--ruler-size);
  left: var(--ruler-size);
  width: var(--canvas-width);
  height: var(--canvas-height);
  pointer-events: none;
  z-index: 6;
}

body.edit-mode #editor {
  pointer-events: auto;
}

#controls {
  position: fixed;
  top: 24px;
  left: 24px;
  z-index: 20;
  color: #ffffff;
  font-family: var(--font-sans);
  width: clamp(240px, 24vw, 320px);
  max-height: calc(100vh - 48px);
  overflow: auto;
  transition: transform 0.2s ease, opacity 0.2s ease;
  background: var(--panel-bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: var(--panel-shadow), var(--panel-inset);
  scrollbar-color: #2a2a2a #0b0b0b;
}

#controls::-webkit-scrollbar {
  width: 10px;
}

#controls::-webkit-scrollbar-track {
  background: #0b0b0b;
  border-radius: 10px;
}

#controls::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 10px;
}

#controls::-webkit-scrollbar-thumb:hover {
  background: #3a3a3a;
}

body.controls-collapsed #controls {
  transform: translateX(calc(-100% - 32px));
  opacity: 0;
  pointer-events: none;
}

#controls details {
  background: var(--panel-bg-secondary);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 180px;
  margin-bottom: 0;
}

.controls-section {
  display: grid;
  gap: 14px;
  margin-top: 16px;
  padding-top: 0;
  border-top: none;
}

.controls-section:first-of-type {
  margin-top: 14px;
  padding-top: 0;
  border-top: none;
}

.controls-section-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #8f8f8f;
  background: #0f0f0f;
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  padding: 8px 12px;
  margin: 0 0 10px;
  min-height: 32px;
  display: flex;
  align-items: center;
}

.controls-section-title.controls-section-toggle {
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
}

.controls-section-caret {
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  margin-left: 8px;
  margin-right: 0;
  position: relative;
  top: -2px;
}

.controls-section.is-collapsed .controls-section-caret {
  transform: rotate(-45deg);
}

.controls-section.is-collapsed > .controls-card,
.controls-section.is-collapsed > .controls-subsection,
.controls-section.is-collapsed > .controls-group {
  display: none;
}

.controls-section-title-compact {
  position: static;
  padding: 0;
  margin: 0 0 6px;
  border-bottom: none;
  background: transparent;
}

.controls-quick {
  display: grid;
  gap: 8px;
  margin: 12px 0 4px;
  padding: 10px 12px;
  border: 1px solid #1f1f1f;
  border-radius: 12px;
  background: rgba(10, 10, 10, 0.75);
}

.controls-quick-toggles {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.controls-quick-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #101010;
  border: 1px solid #272727;
  font-size: 12px;
  color: #e6e6e6;
}

.controls-quick-toggle input[type="checkbox"] {
  appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid #3a3a3a;
  background: #1c1c1c;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.controls-card {
  display: grid;
  gap: 14px;
  background: var(--panel-bg-secondary);
  border: 1px solid var(--panel-border-strong);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--panel-shadow), var(--panel-inset);
}

.inspector-card {
  gap: 10px;
  padding: 14px 16px;
}

.inspector-card .controls-field {
  gap: 4px;
}

.inspector-card .controls-row {
  gap: 10px;
  margin-top: 8px;
}

.controls-card-title {
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: #ffffff;
}

.controls-card-title.inspector-card-title {
  font-size: 12px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

.controls-card > .controls-buttons,
.controls-card > .controls-group,
.controls-card > .controls-helper,
.controls-card > .controls-row,
.controls-card > .controls-stack,
.controls-card > .controls-toggle,
.controls-card > .controls-field {
  margin-top: 0;
}

.controls-card > .safe-area-presets {
  margin-top: 10px;
}

.safe-area-presets {
  gap: 8px;
}

#safe-area-card {
  margin-top: 12px;
  gap: 6px;
}

.safe-area-row {
  margin-top: 0;
  gap: 8px;
}

.safe-area-row.is-single {
  grid-template-columns: minmax(0, 1fr);
}

.safe-area-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(64px, auto) auto;
  grid-template-areas:
    "top top top"
    "left box right"
    "bottom bottom bottom";
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}

.safe-area-diagram.is-disabled {
  opacity: 0.55;
}

.safe-area-diagram-box {
  grid-area: box;
  border-radius: 10px;
  border: 1px dashed rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.02);
  min-height: 64px;
}

.safe-area-field {
  display: grid;
  gap: 4px;
}

#controls .safe-area-field label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.safe-area-field input {
  text-align: center;
}

.safe-area-field-top {
  grid-area: top;
}

.safe-area-field-right {
  grid-area: right;
}

.safe-area-field-bottom {
  grid-area: bottom;
}

.safe-area-field-left {
  grid-area: left;
}

.inspector-advanced {
  margin-top: 8px;
}

.inspector-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 6px 4px;
  list-style: none;
}

.inspector-advanced > summary::-webkit-details-marker {
  display: none;
}

.inspector-advanced > summary::after {
  content: "›";
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease, color 0.2s ease;
}

.inspector-advanced[open] > summary::after {
  transform: rotate(90deg);
  color: rgba(255, 255, 255, 0.85);
}

.inspector-advanced-card {
  margin-top: 6px;
}

.inspector-advanced-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inspector-advanced-panel .controls-helper {
  margin-top: 2px;
}

#controls .controls-subsection {
  margin-bottom: 0;
  position: relative;
}

#controls .controls-subsection.is-attention {
  border-color: rgba(50, 197, 253, 0.72);
  box-shadow: 0 0 0 1px rgba(50, 197, 253, 0.35);
}

#controls .controls-subsection > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

#controls .controls-subsection > summary::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'><path d='M8.5 1.5L3 9l5.5 7.5' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 14px;
  transform: rotate(180deg);
  transition: transform 0.2s ease, filter 0.2s ease;
}

#controls .controls-subsection[open] > summary::after {
  transform: rotate(270deg);
}

#controls .controls-section > .controls-subsection + .controls-subsection::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 6px;
  right: 6px;
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
}

#controls .controls-section > .controls-subsection + .controls-subsection {
  margin-top: 0;
}

#controls .axis-basics {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.axis-flyout-trigger-grid {
  display: grid;
  gap: 8px;
}

#axis-controls-panel {
  position: relative;
  min-height: 0;
}

#axis-controls-panel .axis-flyout {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 4;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel-bg-secondary);
  box-shadow: var(--panel-shadow), var(--panel-inset);
  padding: 10px 12px;
  overflow: hidden;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  box-sizing: border-box;
  flex-direction: column;
  gap: 10px;
  overscroll-behavior: contain;
}

#axis-controls-panel .axis-flyout.is-open {
  display: flex;
}

#axis-controls-panel .axis-flyout-header {
  display: flex;
  align-items: center;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 10px;
}

#axis-controls-panel .axis-flyout-title {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}

#axis-controls-panel .axis-flyout-back {
  background: var(--button-fill);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

#axis-controls-panel .axis-flyout-back:hover {
  background: var(--button-fill-hover);
}

#axis-controls-panel .axis-flyout-body {
  display: grid;
  gap: 10px;
  min-height: 0;
  flex: 1 1 auto;
  overflow-x: hidden;
  overflow: auto;
  padding-right: 4px;
  padding-bottom: 4px;
}

#axis-controls-panel .axis-flyout-subsection {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: rgba(15, 17, 20, 0.7);
  padding: 10px 12px;
}

#axis-controls-panel .axis-flyout-subsection + .axis-flyout-subsection {
  margin-top: 2px;
}

#axis-controls-panel .axis-flyout-subsection > summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}

#axis-controls-panel .axis-flyout-subsection > summary::-webkit-details-marker {
  display: none;
}

#axis-controls-panel .axis-flyout-subsection > summary::marker {
  content: "";
}

#axis-controls-panel .axis-flyout-subsection > summary::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'><path d='M8.5 1.5L3 9l5.5 7.5' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 14px;
  transform: rotate(180deg);
  transition: transform 0.2s ease, filter 0.2s ease;
}

#axis-controls-panel .axis-flyout-subsection[open] > summary::after {
  transform: rotate(270deg);
}

#axis-controls-panel .axis-flyout-subsection > summary:hover::after {
  filter: brightness(1.2);
}

#axis-controls-panel .axis-flyout-subsection-body {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

#y-axis-secondary-series {
  display: grid;
  gap: 8px;
}

#y-axis-secondary-series.is-disabled {
  opacity: 0.6;
}

.axis-secondary-series-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #cfcfcf;
}

.axis-secondary-series-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #32c5fd;
}


#controls .axis-advanced {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#controls .axis-advanced > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #a8a8a8;
}

#controls .axis-advanced > summary::after {
  content: "+";
  font-size: 12px;
  color: #9a9a9a;
  transition: color 0.2s ease;
}

#controls .axis-advanced[open] > summary::after {
  content: "-";
  color: #cfcfcf;
}

#controls .axis-advanced-body {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.area-only {
  display: none;
}

body.chart-area .area-only {
  display: block;
}

body.chart-area .controls-card.area-only {
  display: grid;
}

.controls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.controls-title {
  font-size: 13px;
  font-weight: 400;
  color: #b7b7b7;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin: 0;
}

.data-button {
  width: 100%;
  margin-bottom: 10px;
  background: var(--button-fill);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.data-button-stack.compact .data-button {
  margin-bottom: 10px;
}

.data-button-stack.compact .data-button:last-child {
  margin-bottom: 0;
}

.data-button:hover {
  background: var(--button-fill-hover);
}

.controls-toggle-button {
  position: fixed;
  left: 24px;
  top: 50%;
  z-index: 21;
  background: var(--button-fill);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 0;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, background 0.2s ease, left 0.2s ease, top 0.2s ease;
}

.controls-toggle-button:hover {
  background: var(--button-fill-hover);
}

.controls-toggle-button::before {
  content: "";
  width: 12px;
  height: 12px;
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'><path d='M8.5 1.5L3 9l5.5 7.5' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 14px;
  transform: rotate(0deg);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.controls-toggle-button:hover::before {
  filter: brightness(1.2);
}

body.controls-collapsed .controls-toggle-button::before {
  transform: rotate(180deg);
}

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

body.export-mode .controls-toggle-button {
  display: none;
}

.data-button.is-active {
  background: #32c5fd;
  border-color: #32c5fd;
  color: #0b141a;
}

#btn-save {
  background: #2cb7c4;
  border-color: #2cb7c4;
  color: #ffffff;
  font-weight: 600;
}

#btn-save:hover {
  background: #35c3cf;
  border-color: #35c3cf;
}

#export-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  padding: 8px;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 30;
}

#export-modal.open {
  opacity: 1;
  pointer-events: auto;
}

.export-panel {
  width: min(560px, calc(100vw - 16px));
  background: var(--panel-bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 0;
  height: auto;
  max-height: min(78dvh, calc(100vh - 16px), 720px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: #ffffff;
  font-family: var(--font-sans);
  box-shadow: var(--panel-shadow), var(--panel-inset);
}

.export-header {
  position: sticky;
  top: 0;
  inset-inline: 0;
  z-index: 5;
  flex: 0 0 auto;
  background: var(--panel-bg-primary);
  border-bottom: 1px solid var(--panel-border);
}

.export-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 20px 14px;
  display: grid;
  gap: 12px;
  scroll-behavior: smooth;
}

.export-scroll-content {
  display: grid;
  gap: 12px;
  min-height: 0;
}

.export-status-group {
  display: grid;
  gap: 10px;
}

.export-header {
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  padding: 18px 20px;
  z-index: 4;
}

.export-section-title {
  font-size: 13px;
  color: #f0f0f0;
  margin-bottom: 6px;
}

.export-cost-note {
  font-size: 12px;
  color: rgba(214, 224, 236, 0.6);
  margin-bottom: 10px;
}

.export-credit-balance {
  font-size: 12px;
  color: rgba(221, 230, 239, 0.74);
  margin-bottom: 12px;
}

.export-options {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.export-layout {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 14px;
  margin: 0;
}

.export-tab-list {
  display: grid;
  gap: 7px;
  align-content: start;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--panel-bg-primary);
  padding: 6px 0;
}

.export-tab {
  border-radius: 10px;
  border: none;
  padding: 0 12px;
  height: 36px;
  display: flex;
  align-items: center;
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  color: #cfcfcf;
  background: var(--button-fill);
  text-align: left;
}

.export-tab.is-active {
  color: #ffffff;
  background: rgba(50, 197, 253, 0.18);
}

.export-tab-panels {
  min-height: 0;
}

.export-tab-panel {
  display: none;
}

.export-tab-panel.is-active {
  display: block;
}

.export-image {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--panel-border-strong);
  background: var(--panel-bg-secondary);
  box-shadow: var(--panel-inset);
  margin-bottom: 16px;
}

.export-quality-value,
.export-frame-label {
  font-size: 12px;
  color: #8b8b8b;
  margin-top: 6px;
}

.export-frame-actions {
  display: grid;
  gap: 8px;
  align-content: end;
}

.export-frame-actions button {
  border-radius: 10px;
  border: 1px solid #2f2f2f;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  color: #ffffff;
  background: #141414;
}

.export-embed {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid #232323;
  background: #0f0f0f;
  margin-bottom: 16px;
}

.export-embed-title {
  font-size: 13px;
  color: #f0f0f0;
}

.export-publish-status {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(237, 243, 249, 0.82);
  font-size: 12px;
}

.export-publish-fields {
  display: grid;
  gap: 10px;
}

.export-field-full {
  grid-column: 1 / -1;
}

.export-publish-fields input {
  width: 100%;
  background: #0b0b0b;
  color: #e5e5e5;
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  font-family: "SFMono-Regular", "Consolas", "Courier New", monospace;
}

#export-embed-code {
  width: 100%;
  background: #0b0b0b;
  color: #e5e5e5;
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  padding: 10px;
  font-size: 12px;
  font-family: "SFMono-Regular", "Consolas", "Courier New", monospace;
  resize: vertical;
  min-height: 52px;
  max-height: 96px;
}

.export-embed-subtitle {
  font-size: 12px;
  font-weight: 600;
  color: rgba(240, 245, 250, 0.92);
  margin-bottom: 8px;
}

.export-embed-subnote {
  font-size: 12px;
  color: rgba(214, 224, 236, 0.6);
  margin-top: 6px;
  margin-bottom: 4px;
}

.export-embed-behaviour {
  display: grid;
  gap: 10px;
}

.export-embed-advanced {
  display: grid;
  gap: 12px;
}

.export-details {
  border: 1px solid #252525;
  border-radius: 12px;
  background: #0f0f0f;
}

#export-modal .export-details:not([open]) > *:not(summary) {
  display: none;
}

#export-modal .export-details[open] > *:not(summary) {
  display: block;
}

.export-details > summary {
  list-style: none;
  padding: 10px 12px;
  cursor: pointer;
  color: #efefef;
  font-size: 12px;
  line-height: 1.25;
  user-select: none;
}

.export-details > summary::-webkit-details-marker {
  display: none;
}

.export-details[open] > summary {
  border-bottom: 1px solid #252525;
}

.export-details .export-embed-advanced,
.export-details .export-embed-behaviour,
.export-details #export-embed-code,
.export-details .export-embed-subnote,
.export-details .export-embed-actions {
  padding: 0 12px 12px;
}

.export-status-content {
  display: grid;
  gap: 10px;
  padding: 8px 12px 12px;
}

.export-embed-actions-inline {
  gap: 8px;
}

.export-embed-actions-inline button {
  flex: 1 1 calc(33.333% - 5.3px);
  min-width: 0;
}

.export-details summary + div,
.export-details summary + .export-embed-advanced {
  padding-top: 4px;
}

#export-embed-code {
  height: 56px;
  min-height: 48px;
  max-height: 140px;
}

.export-behaviour-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #232323;
  background: #0b0b0b;
  cursor: pointer;
}

.export-behaviour-option input {
  margin-top: 3px;
}

.export-behaviour-copy {
  display: grid;
  gap: 2px;
}

.export-behaviour-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(240, 245, 250, 0.94);
}

.export-behaviour-note {
  font-size: 11px;
  line-height: 1.45;
  color: rgba(214, 224, 236, 0.62);
}

.export-embed-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.export-embed-actions button {
  border-radius: 10px;
  border: 1px solid #2f2f2f;
  padding: 8px 14px;
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  color: #ffffff;
  background: #141414;
}

.export-embed-actions button:disabled {
  opacity: 0.4;
  cursor: default;
}

.export-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.export-field {
  display: grid;
  gap: 6px;
}

.export-field label {
  font-size: 12px;
  color: #b7b7b7;
}

.export-field select {
  width: 100%;
  background: #0f0f0f;
  color: #ffffff;
  border: 1px solid #2f2f2f;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
}

.export-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #2f2f2f;
  background: #0f0f0f;
}

.export-toggle label {
  font-size: 12px;
  color: #b7b7b7;
}

.export-toggle input[type="checkbox"] {
  appearance: none;
  width: 34px;
  height: 18px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.export-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  transition: transform 0.2s ease, background 0.2s ease;
}

.export-toggle input[type="checkbox"]:checked {
  background: rgba(50, 197, 253, 0.25);
  border-color: rgba(50, 197, 253, 0.5);
}

.export-toggle input[type="checkbox"]:checked::after {
  transform: translateX(14px);
  background: rgba(50, 197, 253, 0.9);
}

.export-render-profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.export-render-advanced {
  display: grid;
  gap: 10px;
}

.export-workers-value {
  font-size: 12px;
  color: #8b8b8b;
  margin-top: 6px;
}

.export-engine-status {
  font-size: 12px;
  color: #8b8b8b;
  margin-top: -4px;
}

.export-start {
  border-radius: 10px;
  border: 1px solid #32c5fd;
  padding: 9px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
  color: #0b141a;
  background: #32c5fd;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.export-start:hover:not(:disabled),
.export-start:focus-visible {
  border-color: #62d4ff;
}

.export-start:disabled {
  opacity: 0.4;
  cursor: default;
}

.export-status {
  font-size: 14px;
  color: #cfcfcf;
  margin-bottom: 10px;
}

.export-status-group {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding-top: 12px;
}

.export-status-group.is-active {
  display: block;
}

.export-status-group .export-queue-title {
  margin-top: 4px;
}

.export-status-group .export-percent {
  margin-bottom: 18px;
}

.export-queue {
  font-size: 12px;
  color: #8b8b8b;
  margin-top: -12px;
  margin-bottom: 14px;
  min-height: 16px;
  transition: opacity 0.2s ease;
}

.export-queue-title {
  font-size: 12px;
  color: #c0cfe0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.export-queue-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  max-height: 160px;
  overflow: auto;
}

.export-queue-empty {
  font-size: 12px;
  color: #77889b;
  padding: 8px 10px;
  border: 1px dashed #2a2a2a;
  border-radius: 10px;
}

.export-queue-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid #232323;
  border-radius: 12px;
  background: #0f0f0f;
}

.export-queue-info {
  display: grid;
  gap: 4px;
}

.export-queue-label {
  font-size: 13px;
  color: #f0f0f0;
}

.export-queue-meta {
  font-size: 11px;
  color: #8b8b8b;
}

.export-queue-cancel {
  border-radius: 8px;
  border: 1px solid #3a1f1f;
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  color: #fca5a5;
  background: #271111;
}

.export-queue-cancel[disabled] {
  opacity: 0.4;
  cursor: default;
}

.export-progress {
  height: 12px;
  background: #151515;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #2f2f2f;
}

.export-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #1d4ed8, #38bdf8);
  transition: width 0.15s ease;
}

.export-percent {
  margin-top: 10px;
  font-size: 14px;
  color: #c7c7c7;
}

.export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--panel-border);
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  flex: 0 0 auto;
  background: var(--panel-bg-primary);
  z-index: 4;
  justify-content: flex-end;
}

.export-panel-footer {
  min-height: 0;
}

@media (max-height: 860px) {
  .export-panel {
    border-radius: 12px;
  }

  .export-header {
    padding: 14px 16px;
    font-size: 18px;
  }

  .export-panel-scroll {
    padding: 10px 14px 12px;
  }

  .export-actions {
    padding: 10px 14px;
    gap: 8px;
  }

  .export-tab {
    height: 32px;
    font-size: 12px;
  }

  .export-start {
    padding: 8px 12px;
    font-size: 13px;
  }
}

.export-download,
.export-close,
.export-cancel,
.export-clear {
  border-radius: 10px;
  border: 1px solid #2f2f2f;
  padding: 8px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: none;
  color: #ffffff;
  background: #141414;
}

.export-download-preview {
  display: none;
}

.export-download-final {
  display: none;
}

.export-download-preview.is-visible {
  display: inline-flex;
}

.export-download-final.is-visible {
  display: inline-flex;
}

.export-library-link {
  display: none;
}

.export-library-link.is-visible {
  display: inline-flex;
}

.export-cancel {
  background: #271111;
  border-color: #4b1b1b;
  color: #fca5a5;
}

.export-clear {
  background: #1a1a1a;
  border-color: #2f2f2f;
  color: #e5e5e5;
}

.export-download[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.export-close[disabled],
.export-cancel[disabled],
.export-clear[disabled] {
  opacity: 0.4;
  cursor: default;
}

summary {
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  list-style: none;
  outline: none;
  display: block;
}

summary::marker {
  content: none !important;
  display: none !important;
}

summary::-webkit-details-marker {
  display: none !important;
}

.controls-buttons {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.controls-buttons.controls-buttons-inline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.controls-buttons.controls-buttons-inline .controls-icon-button {
  flex: 1;
  width: auto;
}

.controls-scrub {
  display: grid;
  gap: 6px;
}

.controls-scrub input[type="range"] {
  margin: 0;
}

.controls-scrub-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: #9a9a9a;
}

.controls-group {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.controls-helper {
  font-size: 12px;
  color: #9a9a9a;
  margin-top: 8px;
}

.controls-helper.is-warning {
  color: #f2c94c;
}

.controls-spacer {
  height: 10px;
}

.controls-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 8px 0 6px;
}

.gridlines-controls {
  display: grid;
  gap: 10px;
}

.lines-controls {
  display: grid;
  gap: 10px;
}

.gridlines-toggle-stack {
  gap: 0;
}

.gridlines-toggle-stack .controls-toggle {
  margin-top: 0 !important;
}

.gridlines-style-row .gridlines-span-2 {
  grid-column: span 2;
}

.controls-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

#axis-controls-panel .data-labels-subsection .data-labels-flyout-body.data-labels-end-dot-controls {
  row-gap: 14px;
}

#axis-controls-panel .data-labels-subsection .data-labels-flyout-body.data-labels-end-dot-controls .controls-toggle {
  margin-top: 0;
}

#axis-controls-panel .data-labels-subsection .data-labels-flyout-body.data-labels-text-controls {
  gap: 12px;
}

#axis-controls-panel .data-labels-subsection .data-labels-row {
  column-gap: 32px;
  margin-top: 0;
}

#axis-controls-panel .data-labels-subsection #dot-fill-settings,
#axis-controls-panel .data-labels-subsection #dot-outline-settings {
  display: grid;
  row-gap: 8px;
  padding-top: 4px;
}

#axis-controls-panel .data-labels-subsection .data-labels-color-row {
  grid-template-columns: 92px 1fr;
  gap: 24px;
}

.controls-row.controls-row-2-1 {
  grid-template-columns: 2fr 1fr;
}

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

.controls-stack {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

#animation-timing-card .controls-stack {
  gap: 6px;
  margin-top: 6px;
}

#animation-type-card .controls-toggle {
  margin-top: 0;
  padding-block: 6px;
}

#export-settings-card .export-settings-body {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

#export-settings-card .export-settings-group {
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(15, 17, 20, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  padding: 10px 12px;
}

#export-settings-card .export-settings-group > summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}

#export-settings-card .export-settings-group > summary::-webkit-details-marker {
  display: none;
}

#export-settings-card .export-settings-group > summary::marker {
  content: "";
}

#export-settings-card .export-settings-group > summary::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 6px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'><path d='M8.5 1.5L3 9l5.5 7.5' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 14px;
  transform: rotate(180deg);
  transition: transform 0.2s ease, filter 0.2s ease;
}

#export-settings-card .export-settings-group[open] > summary::after {
  transform: rotate(270deg);
}

#export-settings-card .export-settings-group > summary:hover::after {
  filter: brightness(1.2);
}

#export-settings-card .export-settings-group-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

#export-settings-card .export-settings-subsection {
  display: grid;
  gap: 10px;
}

#export-settings-card .export-settings-subsection + .export-settings-subsection {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 12px;
}

#export-settings-card .export-settings-subsection-tight {
  gap: 8px;
}

#export-settings-card .export-settings-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

#export-settings-card .controls-group,
#export-settings-card .controls-toggle,
#export-settings-card .controls-row,
#export-settings-card .controls-buttons {
  margin-top: 0;
}

#export-settings-card .controls-row {
  gap: 10px;
}

#export-settings-card .controls-helper {
  margin-top: 0;
}

#export-settings-card .controls-button {
  width: auto;
}

.export-audio-source-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.export-audio-source-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(237, 243, 249, 0.84);
  font-size: 13px;
  cursor: pointer;
}

.export-audio-source-option input {
  margin: 0;
  accent-color: #32c5fd;
}

.export-audio-source-option span {
  color: inherit;
}

#video-audio-source-upload:checked + span,
#video-audio-source-library:checked + span {
  color: #ffffff;
}

.format-group-card {
  background: #0f1217;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  gap: 10px;
}

.format-group-card + .format-group-card {
  margin-top: 12px;
}

.format-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.format-group-title {
  font-size: 12px;
  color: #b7b7b7;
}

.format-group-body {
  display: grid;
  gap: 10px;
}

.format-group-card.is-collapsed .format-group-body {
  display: none;
}

.format-accordion-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  cursor: pointer;
}

.format-accordion-chevron {
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255, 255, 255, 0.6);
  border-bottom: 2px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.format-group-card.is-collapsed .format-accordion-chevron {
  transform: rotate(-45deg);
}

.format-subtitle {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.controls-subtitle {
  font-size: 13px;
  color: #b7b7b7;
  text-transform: none;
  letter-spacing: normal;
  margin-top: 4px;
  margin-bottom: 10px;
}

.format-merged-subtitle {
  margin-top: 18px;
}

.video-audio-subtitle {
  margin-top: 14px;
}

.video-audio-library-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

#video-audio-library-upload {
  margin-top: 8px;
}

#video-audio-library-upload-trigger {
  margin-top: 0;
  justify-self: start;
}

#video-audio-library-status {
  min-height: 16px;
}

.data-label-ease-preview {
  margin-top: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 6px;
  background: rgba(9, 12, 17, 0.65);
}

#data-label-stack-ease-preview {
  display: block;
  width: 100%;
  height: 84px;
}

#data-label-stack-ease-preview-guide {
  fill: none;
  stroke: rgba(183, 183, 183, 0.4);
  stroke-width: 1.25;
  stroke-dasharray: 4 4;
}

#data-label-stack-ease-preview-path {
  fill: none;
  stroke: #32c5fd;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.format-two-col {
  margin-top: 0;
}

.format-safe-row {
  margin-top: 0;
}

.video-audio-waveform-wrap {
  position: relative;
  width: 100%;
  height: 132px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 28, 20, 0.75);
  overflow: hidden;
  cursor: default;
}

#video-audio-waveform {
  width: 100%;
  height: 100%;
  display: block;
}

.video-audio-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  border-left: 2px solid rgba(126, 208, 118, 0.95);
  border-right: 2px solid rgba(126, 208, 118, 0.95);
  background: rgba(146, 209, 132, 0.22);
  cursor: grab;
}

.video-audio-selection.is-dragging {
  cursor: grabbing;
}

.video-audio-handle {
  position: absolute;
  top: 0;
  width: 14px;
  height: 100%;
  border: none;
  border-radius: 0;
  background: rgba(106, 188, 98, 0.95);
  cursor: ew-resize;
  padding: 0;
}

.video-audio-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(8, 12, 9, 0.62);
}

.video-audio-handle-start {
  left: -7px;
}

.video-audio-handle-end {
  right: -7px;
}

.video-audio-time-row {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  color: #9a9a9a;
}

.video-audio-placement-track {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(11, 15, 20, 0.9);
  overflow: hidden;
}

.video-audio-placement-clip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 20%;
  min-width: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #6fbd67 0%, #53a84d 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  cursor: grab;
}

.video-audio-placement-clip.is-dragging {
  cursor: grabbing;
}

.video-audio-placement-clip.is-locked {
  cursor: not-allowed;
  opacity: 0.92;
}

.theme-color-picker-button {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f0f0f;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b7b7b7' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M2 22l1-4 9-9 3 3-9 9-4 1z'/><path d='M14 4l6 6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.theme-color-picker-button:hover {
  border-color: rgba(50, 197, 253, 0.6);
}

@media (max-width: 1100px) {
  .controls-row.format-two-col {
    grid-template-columns: 1fr;
  }
}

.controls-field {
  display: grid;
  gap: 6px;
}

#controls label {
  font-size: 12px;
  font-weight: 400;
  color: #b7b7b7;
}

#controls label.controls-card-title {
  font-size: 14px;
  color: #ffffff;
}

#controls input[type="number"],
#controls input[type="color"],
#controls input[type="text"],
#controls select,
#controls textarea {
  width: 100%;
  background: #0f1217;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
}

.layout-controls input[type="number"],
.layout-controls input[type="color"],
.layout-controls input[type="text"],
.layout-controls select,
.layout-controls textarea {
  width: 100%;
  background: #0f1217;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
}

#controls select,
.layout-controls select {
  appearance: none;
  background-color: var(--button-fill);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1.5 1.5l4.5 4 4.5-4' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px 7px;
  padding-right: 38px;
}

#controls .axis-label-size-input {
  appearance: auto;
  -moz-appearance: auto;
}

#controls .axis-label-size-input::-webkit-outer-spin-button,
#controls .axis-label-size-input::-webkit-inner-spin-button {
  -webkit-appearance: auto;
  margin: 0;
}



.layout-controls .controls-toggle input[type="checkbox"]::after,
.layout-controls .controls-quick-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s ease;
}

.layout-controls .controls-toggle input[type="checkbox"]:checked,
.layout-controls .controls-quick-toggle input[type="checkbox"]:checked {
  background: #32c5fd;
  border-color: #32c5fd;
}

.layout-controls .controls-toggle input[type="checkbox"]:checked::after,
.layout-controls .controls-quick-toggle input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

.layout-controls .controls-toggle input[type="checkbox"]:focus-visible,
.layout-controls .controls-quick-toggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.35);
}

#controls textarea {
  resize: vertical;
  min-height: 64px;
}

#controls input[type="color"] {
  padding: 4px;
  height: 36px;
}

.color-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 10px;
  align-items: center;
}

.color-row input[type="color"] {
  width: 48px;
  padding: 0;
  border-radius: 8px;
}

.color-row .controls-color-button {
  width: 48px;
  height: 36px;
  border-radius: 8px;
  border: none;
  padding: 0;
  background: #0f1217;
  cursor: pointer;
}

.color-row .controls-color-button:hover {
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.25);
}

.color-row .controls-color-button:disabled {
  cursor: not-allowed;
  box-shadow: none;
  opacity: 0.55;
}

.color-row input[type="text"] {
  min-width: 0;
}

#controls input[type="range"] {
  width: 100%;
  accent-color: #32c5fd;
}

.layout-editor-control-panel input[type="range"],
.layout-editor-inspector input[type="range"] {
  width: 100%;
  accent-color: #32c5fd;
}

.scale-row {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 10px;
  align-items: center;
}

.range-value {
  font-size: 12px;
  color: #b7b7b7;
}

#controls input[type="number"]:focus,
#controls select:focus,
#controls textarea:focus {
  outline: none;
  border-color: #5a5a5a;
}

.canvas-toolbar {
  position: fixed;
  left: 24px;
  top: 160px;
  width: 300px;
  background: #1e222a;
  border: none;
  border-radius: 14px;
  color: #f5f5f5;
  font-family: var(--font-sans);
  box-shadow: var(--panel-shadow), var(--panel-inset);
  z-index: 40;
  user-select: none;
}

.canvas-toolbar.is-hidden {
  display: none;
}

.canvas-toolbar-handle {
  padding: 10px 12px;
  font-size: 13px;
  color: #cfcfcf;
  border-bottom: 1px solid var(--panel-border);
  cursor: grab;
}

.canvas-toolbar-handle:active {
  cursor: grabbing;
}

.canvas-toolbar-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.canvas-toolbar-submenu-stack {
  display: grid;
  gap: 6px;
}

.canvas-toolbar-submenu {
  margin: 0;
}

.canvas-toolbar-body .canvas-toolbar-submenu + .canvas-toolbar-submenu {
  margin-top: 0;
}

.canvas-toolbar-button-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.canvas-toolbar-body button {
  background: var(--button-fill);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 14px;
  font-family: var(--font-sans);
  font-weight: 400;
  cursor: pointer;
}

.canvas-toolbar-body button:hover {
  background: var(--button-fill-hover);
}

.canvas-toolbar-media-source-menu {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.canvas-toolbar-media-source-menu.is-hidden {
  display: none;
}

.canvas-toolbar-button.is-active {
  background: #32c5fd;
  color: #061320;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.canvas-toolbar-button.is-active:hover {
  background: #32c5fd;
}

.canvas-toolbar-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.canvas-toolbar-button .canvas-toolbar-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
}

.canvas-toolbar-file {
  display: none;
}

.canvas-toolbar-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.canvas-toolbar-submenu {
  border: none;
  border-radius: 12px;
  background: var(--panel-bg-secondary);
  padding: 10px 12px;
}

.canvas-toolbar-submenu.is-hidden {
  display: none;
}

.canvas-toolbar-submenu summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}

.canvas-toolbar-submenu summary::-webkit-details-marker {
  display: none;
}

.canvas-toolbar-submenu summary::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'><path d='M8.5 1.5L3 9l5.5 7.5' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 14px;
  transform: rotate(180deg);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.canvas-toolbar-submenu summary:hover::after {
  filter: brightness(1.2);
}

.canvas-toolbar-submenu[open] summary::after {
  transform: rotate(270deg);
}

.canvas-toolbar-submenu .canvas-toolbar-section {
  margin-top: 10px;
}

.canvas-toolbar-body::-webkit-scrollbar {
  width: 10px;
}

.canvas-toolbar-body::-webkit-scrollbar-track {
  background: rgba(10, 10, 10, 0.6);
  border-radius: 999px;
}

.canvas-toolbar-body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  border: 2px solid rgba(10, 10, 10, 0.6);
}

.canvas-toolbar-body {
  scrollbar-color: rgba(255, 255, 255, 0.2) rgba(10, 10, 10, 0.6);
  scrollbar-width: thin;
}

.canvas-toolbar-section.is-hidden {
  display: none;
}

.canvas-toolbar-field.is-hidden {
  display: none;
}

.canvas-toolbar-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.canvas-toolbar-actions select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--button-fill)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1.5 1.5l4.5 4 4.5-4' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 18px center;
  background-size: 12px 7px;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  padding-right: 38px;
  font-size: 13px;
  font-family: var(--font-sans);
}

.canvas-toolbar-actions button {
  padding: 6px 8px;
  font-size: 12px;
}

.canvas-toolbar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #9e9e9e;
}

.canvas-toolbar-subtitle {
  margin-top: 2px;
  margin-bottom: 8px;
}

.canvas-toolbar-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  gap: 10px;
}

.canvas-toolbar .controls-toggle {
  margin-top: 12px;
  font-size: 14px;
  color: #ffffff;
}

.canvas-toolbar .controls-toggle label {
  color: #ffffff;
  font-weight: 400;
}

.canvas-toolbar-color {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
}

.canvas-toolbar-color input[type="color"] {
  width: 100%;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  padding: 0;
}

.canvas-toolbar-color input[type="text"] {
  background: #0f1217;
  border: none;
  color: #ffffff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
}

.canvas-toolbar-rgb {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.canvas-toolbar-rgb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
}

.canvas-toolbar-rgb-field input[type="number"] {
  background: #0f1217;
  border: none;
  color: #ffffff;
  border-radius: 8px;
  padding: 6px 6px;
  font-size: 12px;
}

.canvas-toolbar-opacity {
  display: grid;
  grid-template-columns: 90px 1fr 52px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}

.canvas-toolbar-opacity input[type="range"] {
  width: 100%;
  accent-color: #32c5fd;
}

.canvas-toolbar-opacity input[type="number"] {
  background: #0f1217;
  border: none;
  color: #ffffff;
  border-radius: 8px;
  padding: 5px 6px;
  font-size: 11px;
}

.canvas-toolbar-bg-position {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 11px;
}

.canvas-toolbar-bg-position-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.canvas-toolbar-bg-position-field {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 8px;
  align-items: center;
}

.canvas-toolbar-bg-position-field label {
  font-size: 11px;
  color: #cfcfcf;
}

.canvas-toolbar-bg-position-field input[type="number"] {
  background: #0f1217;
  border: none;
  color: #ffffff;
  border-radius: 8px;
  padding: 5px 6px;
  font-size: 11px;
}

.canvas-toolbar-bg-position-field input[type="range"] {
  width: 100%;
  accent-color: #32c5fd;
}

.canvas-toolbar .controls-field label {
  font-size: 12px;
  font-weight: 400;
  color: #b7b7b7;
}

.canvas-toolbar .controls-field input[type="number"],
.canvas-toolbar .controls-field input[type="text"],
.canvas-toolbar .controls-field input[type="color"],
.canvas-toolbar .controls-field textarea,
.canvas-toolbar .controls-field select {
  width: 100%;
  background: #0f1217;
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
}

.canvas-toolbar .controls-field select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--button-fill)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1.5 1.5l4.5 4 4.5-4' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 18px center;
  background-size: 12px 7px;
  padding-right: 38px;
}

.canvas-toolbar .controls-field input[type="color"] {
  padding: 4px;
  height: 36px;
}

.canvas-toolbar .controls-field input[type="range"] {
  width: 100%;
  accent-color: #32c5fd;
}

.canvas-toolbar .controls-field input[type="number"] {
  font-size: 13px;
  padding: 8px 10px;
  min-height: 36px;
  line-height: normal;
}

.canvas-toolbar .controls-field input[data-scrub="true"] {
  cursor: ew-resize;
}

.canvas-toolbar .controls-field input.is-scrubbing {
  user-select: none;
}

.canvas-toolbar .controls-row {
  margin-top: 0;
  gap: 10px;
}

.canvas-toolbar select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--button-fill)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1.5 1.5l4.5 4 4.5-4' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 18px center;
  background-size: 12px 7px;
  padding-right: 38px;
}

.canvas-toolbar select:focus {
  outline: none;
  box-shadow: none;
}

.canvas-toolbar-selection {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel-bg-secondary);
  padding: 10px 12px;
  gap: 0;
}

.canvas-toolbar-selection.is-plain {
  border: none;
  background: transparent;
  padding: 0;
}

.canvas-toolbar-selection-body {
  display: grid;
  gap: 8px;
  padding-left: 0;
}

.canvas-toolbar-inspector-section {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(28, 33, 42, 0.96), rgba(17, 21, 28, 0.98)),
    var(--panel-bg-secondary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.canvas-toolbar-inspector-section > summary {
  font-weight: 500;
  letter-spacing: 0.01em;
}

.canvas-toolbar-inspector-section-body {
  gap: 10px;
}

.canvas-toolbar-inspector-section .canvas-toolbar-field > label {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #c3cedd;
}

.canvas-toolbar-custom-text-section .canvas-toolbar-field > label,
.canvas-toolbar-custom-text-section .canvas-toolbar-value-preview-label,
.canvas-toolbar-custom-text-section .canvas-toolbar-value-selected {
  letter-spacing: 0;
  text-transform: none;
}

.canvas-toolbar-custom-text-section .canvas-toolbar-value-selected {
  font-size: 12px;
  font-weight: 500;
  color: #eef4fb;
}

.canvas-toolbar-animated-value-block {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.42);
}

.canvas-toolbar-value-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(80, 192, 255, 0.16);
  background:
    linear-gradient(180deg, rgba(17, 24, 35, 0.98), rgba(10, 15, 23, 0.98));
}

.canvas-toolbar-value-preview-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8ea3bc;
}

.canvas-toolbar-value-preview-value {
  color: #f6fbff;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.canvas-toolbar-value-keyframe-timeline {
  height: 38px;
}

.canvas-toolbar-value-anchor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.canvas-toolbar-value-anchor-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(8, 12, 18, 0.42);
}

.canvas-toolbar-value-anchor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.canvas-toolbar-value-anchor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0b141a;
}

.canvas-toolbar-value-anchor-card[data-role="in"] .canvas-toolbar-value-anchor-badge {
  background: #36c88a;
}

.canvas-toolbar-value-anchor-card[data-role="out"] .canvas-toolbar-value-anchor-badge {
  background: #ff6b6b;
}

.canvas-toolbar-value-anchor-helper {
  font-size: 11px;
  color: #8ea3bc;
  text-align: right;
}

.canvas-toolbar-value-extra-body {
  gap: 10px;
  padding-top: 8px;
}

.canvas-toolbar-value-keyframe-summary-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
}

.canvas-toolbar-value-keyframe-summary {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}

.canvas-toolbar-value-keyframe-summary.is-selected {
  border-color: rgba(50, 197, 253, 0.55);
  background: rgba(50, 197, 253, 0.1);
}

.canvas-toolbar-value-keyframe-summary-time {
  font-size: 11px;
  color: #8ea3bc;
  letter-spacing: 0.04em;
}

.canvas-toolbar-value-keyframe-summary-value {
  font-size: 13px;
  color: #f6fbff;
  font-variant-numeric: tabular-nums;
}

.canvas-toolbar-body .canvas-toolbar-value-keyframe,
.canvas-toolbar-body .canvas-toolbar-value-keyframe:hover {
  background: #32c5fd;
  border-color: rgba(255, 255, 255, 0.92);
}

.canvas-toolbar-body .canvas-toolbar-value-keyframe[data-role="in"],
.canvas-toolbar-body .canvas-toolbar-value-keyframe[data-role="in"]:hover {
  background: #36c88a;
}

.canvas-toolbar-body .canvas-toolbar-value-keyframe[data-role="out"],
.canvas-toolbar-body .canvas-toolbar-value-keyframe[data-role="out"]:hover {
  background: #ff6b6b;
}

.canvas-toolbar-body .canvas-toolbar-value-keyframe[data-role="mid"],
.canvas-toolbar-body .canvas-toolbar-value-keyframe[data-role="mid"]:hover {
  background: #32c5fd;
}

.canvas-toolbar-hint {
  font-size: 12px;
  color: #9ea6b5;
  line-height: 1.4;
}

.canvas-toolbar-advanced {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(6, 10, 16, 0.35);
  padding: 6px 8px;
}

.canvas-toolbar-advanced > summary {
  list-style: none;
  cursor: pointer;
  font-size: 12px;
  color: #c9d0dc;
}

@media (max-width: 1180px) {
  .canvas-toolbar-value-anchor-grid {
    grid-template-columns: 1fr;
  }
}

.canvas-toolbar-advanced > summary::-webkit-details-marker {
  display: none;
}

.canvas-toolbar-advanced > summary::after {
  content: "▾";
  float: right;
  opacity: 0.85;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}

.canvas-toolbar-advanced[open] > summary::after {
  transform: rotate(0deg);
}

.canvas-toolbar-advanced-body {
  margin-top: 8px;
  display: grid;
  gap: 8px;
}

#canvas-toolbar-selection-title {
  padding-left: 0;
  margin-bottom: 10px;
  font-size: 14px;
  color: #ffffff;
  font-weight: 400;
}

.canvas-toolbar-selection.is-plain #canvas-toolbar-selection-title {
  margin-bottom: 6px;
}

.canvas-toolbar-selection.is-plain .canvas-toolbar-selection-body {
  gap: 6px;
}

#axis-controls-panel:not(.axis-controls-floating) {
  display: none;
}

#axis-controls-panel.axis-controls-floating {
  display: block;
  min-height: min(460px, calc(100vh - 240px));
}

.axis-controls-floating {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  position: relative;
}

.axis-controls-floating .controls-section-title {
  display: none;
}

.axis-controls-floating .controls-subsection {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  background: var(--panel-bg-secondary);
  padding: 10px 12px;
  margin-top: 0;
}

.axis-controls-floating .controls-subsection > summary {
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  text-transform: none;
  letter-spacing: normal;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
}

.axis-controls-floating .controls-subsection > summary::-webkit-details-marker {
  display: none;
}

.axis-controls-floating .controls-subsection > summary::after {
  content: "";
  width: 12px;
  height: 12px;
  margin-right: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'><path d='M8.5 1.5L3 9l5.5 7.5' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 14px;
  transform: rotate(180deg);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.axis-controls-floating .controls-subsection[open] > summary::after {
  transform: rotate(270deg);
}

.axis-controls-floating .controls-subsection > summary:hover::after {
  filter: brightness(1.2);
}

.axis-controls-floating .axis-basics {
  margin-top: 10px;
}

.axis-controls-floating .controls-subtitle {
  font-size: 13px;
  color: #cfcfcf;
  margin-bottom: 10px;
}

.axis-controls-floating .controls-row {
  align-items: end;
}

.axis-controls-floating .controls-row > .controls-group,
.axis-controls-floating .controls-row > .controls-field {
  margin-top: 0;
}

.axis-controls-floating .controls-row input[type="number"],
.axis-controls-floating .controls-row select {
  min-height: 36px;
}

.axis-controls-floating .controls-row select {
  padding-top: 8px;
  padding-bottom: 8px;
}

.axis-controls-floating .axis-advanced {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.axis-controls-floating .axis-advanced > summary {
  font-size: 13px;
  text-transform: none;
  letter-spacing: normal;
  color: #cfcfcf;
}

.axis-controls-floating .controls-field label,
.axis-controls-floating .controls-group label,
.axis-controls-floating .controls-toggle label {
  font-size: 11px;
  color: #cfcfcf;
}

.axis-controls-floating input,
.axis-controls-floating select,
.axis-controls-floating textarea,
.axis-controls-floating button.controls-button {
  background: #0f1217;
  border: none;
  color: #ffffff;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--font-sans);
}

.axis-controls-floating input[type="number"] {
  appearance: auto;
  -moz-appearance: auto;
}

.axis-controls-floating input[type="number"]::-webkit-outer-spin-button,
.axis-controls-floating input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: auto;
  opacity: 1;
  margin: 0;
}

.axis-controls-floating select {
  appearance: none;
  background-color: var(--button-fill);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1.5 1.5l4.5 4 4.5-4' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 7px;
  padding-right: 34px;
}

.axis-controls-floating button.controls-button {
  background: var(--button-fill);
  border: none;
}

.axis-controls-floating button.controls-button:hover {
  background: var(--button-fill-hover);
}

.axis-controls-floating textarea {
  resize: vertical;
  min-height: 60px;
}

.axis-controls-floating input[type="range"] {
  accent-color: #32c5fd;
  background: transparent;
  border: none;
  padding: 0;
}

.axis-controls-floating .controls-row input[type="number"] {
  width: 100%;
}

.axis-controls-floating .controls-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.2s ease, background 0.2s ease;
}

.axis-controls-floating .controls-toggle input[type="checkbox"] {
  width: 34px;
  height: 18px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.axis-controls-floating .controls-toggle input[type="checkbox"]:checked {
  background: rgba(50, 197, 253, 0.2);
  border-color: rgba(50, 197, 253, 0.4);
}

.axis-controls-floating .controls-toggle input[type="checkbox"]:checked::after {
  transform: translateX(14px);
  background: rgba(50, 197, 253, 0.9);
}

.axis-controls-floating .controls-toggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.35);
}

.axis-controls-floating .controls-section > .controls-subsection + .controls-subsection::before {
  display: none;
}

.axis-controls-floating .controls-section > .controls-subsection + .controls-subsection {
  margin-top: 6px;
}

.canvas-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #b7b7b7;
}

.canvas-toolbar-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.canvas-toolbar-row > .canvas-toolbar-field {
  min-width: 0;
}

.canvas-toolbar-field input,
.canvas-toolbar-field select,
.canvas-toolbar-field textarea {
  background: #0f1217;
  border: none;
  color: #ffffff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  width: 100%;
  min-width: 0;
}

.canvas-toolbar-field select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--button-fill)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7' fill='none'><path d='M1.5 1.5l4.5 4 4.5-4' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 18px center;
  background-size: 12px 7px;
  padding-right: 38px;
}

.canvas-toolbar-field textarea {
  resize: vertical;
  min-height: 60px;
}

.canvas-toolbar-color-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.canvas-toolbar-color-button {
  width: 40px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #2a2f38;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.canvas-toolbar-color-row input[type="text"] {
  min-width: 0;
}

.canvas-toolbar-color-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.45);
}

.canvas-toolbar-image-anchor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.canvas-toolbar-body button.canvas-toolbar-image-anchor-point {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 6px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: #0f1217;
}

.canvas-toolbar-body button.canvas-toolbar-image-anchor-point:hover {
  background: rgba(255, 255, 255, 0.08);
}

.canvas-toolbar-body button.canvas-toolbar-image-anchor-point.is-active {
  background: #32c5fd;
  border-color: rgba(50, 197, 253, 0.92);
}

.canvas-toolbar-image-anchor-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.canvas-toolbar-body button.canvas-toolbar-image-anchor-point.is-active .canvas-toolbar-image-anchor-dot {
  background: #061320;
}

.canvas-toolbar-slider {
  display: grid;
  grid-template-columns: 80px 1fr 84px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
  color: #cfcfcf;
}

.canvas-toolbar-slider input[type="range"] {
  width: 100%;
  accent-color: #32c5fd;
}

.canvas-toolbar-slider input[type="number"],
.canvas-toolbar-slider input[type="text"] {
  background: #0f1217;
  border: none;
  color: #ffffff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
}

.canvas-toolbar-animation-time {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(221, 225, 232, 0.78);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.canvas-toolbar-timeline-slider {
  --slider-progress: 0%;
  --timeline-track-height: 12px;
  --timeline-thumb-size: 20px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}

.canvas-toolbar-field input.canvas-toolbar-timeline-slider {
  height: var(--timeline-thumb-size);
  padding: 0;
  border-radius: 999px;
  border: none;
  background: transparent;
  box-sizing: border-box;
  overflow: hidden;
}

.canvas-toolbar-timeline-slider::-webkit-slider-runnable-track {
  height: var(--timeline-track-height);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #34bdf4 0%,
    #34bdf4 var(--slider-progress),
    rgba(74, 74, 78, 0.92) var(--slider-progress),
    rgba(74, 74, 78, 0.92) 100%
  );
  box-shadow: inset 0 0 0 2px rgba(229, 232, 238, 0.34);
}

.canvas-toolbar-timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: var(--timeline-thumb-size);
  height: var(--timeline-thumb-size);
  border-radius: 50%;
  background: #34bdf4;
  border: none;
  box-shadow: 0 2px 10px rgba(8, 14, 20, 0.5);
  margin-top: calc((var(--timeline-track-height) - var(--timeline-thumb-size)) / 2);
}

.canvas-toolbar-timeline-slider::-moz-range-track {
  height: var(--timeline-track-height);
  border-radius: 999px;
  background: rgba(74, 74, 78, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
}

.canvas-toolbar-timeline-slider::-moz-range-progress {
  height: var(--timeline-track-height);
  border-radius: 999px;
  background: #34bdf4;
}

.canvas-toolbar-timeline-slider::-moz-range-thumb {
  width: var(--timeline-thumb-size);
  height: var(--timeline-thumb-size);
  border-radius: 50%;
  background: #34bdf4;
  border: none;
  box-shadow: 0 2px 10px rgba(8, 14, 20, 0.5);
}

.canvas-toolbar-timeline-slider:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(52, 189, 244, 0.35);
}

.canvas-toolbar-keyframe-timeline {
  position: relative;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
  touch-action: none;
}

.canvas-toolbar-keyframe-timeline::before {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
}

.canvas-toolbar-body .canvas-toolbar-keyframe {
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
  box-sizing: border-box;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  line-height: 0;
  cursor: grab;
  z-index: 2;
  touch-action: none;
  user-select: none;
}

.canvas-toolbar-body .canvas-toolbar-keyframe:hover {
  border: 1px solid rgba(255, 255, 255, 0.85);
}

.canvas-toolbar-body .canvas-toolbar-keyframe[data-type="fade-in"],
.canvas-toolbar-body .canvas-toolbar-keyframe[data-type="fade-in"]:hover {
  background: #36c88a;
}

.canvas-toolbar-body .canvas-toolbar-keyframe[data-type="fade-out"],
.canvas-toolbar-body .canvas-toolbar-keyframe[data-type="fade-out"]:hover {
  background: #ff6b6b;
}

.canvas-toolbar-keyframe.is-selected {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
  z-index: 4;
}

.canvas-toolbar-keyframe.is-dragging {
  cursor: grabbing;
}

.canvas-toolbar-keyframe-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

body.export-mode .canvas-toolbar {
  display: none;
}

.controls-buttons button {
  background: var(--button-fill);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

.controls-icon-button {
  width: 42px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--button-fill);
  border: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.controls-icon-button svg {
  width: 18px;
  height: 18px;
  display: block;
}

.controls-icon-button:hover {
  background: var(--button-fill-hover);
  box-shadow: 0 0 0 1px var(--accent-shadow, rgba(50, 197, 253, 0.2));
  color: var(--accent-color, #32c5fd);
}

.controls-icon-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-shadow-strong, rgba(50, 197, 253, 0.35));
  color: var(--accent-color, #32c5fd);
}

.controls-icon-button:active {
  background: var(--button-fill-active);
  color: var(--accent-color, #32c5fd);
}

#btn-start {
  --accent-color: #36d183;
  --accent-shadow: rgba(54, 209, 131, 0.2);
  --accent-shadow-strong: rgba(54, 209, 131, 0.35);
}

#btn-pause {
  --accent-color: #f7c948;
  --accent-shadow: rgba(247, 201, 72, 0.2);
  --accent-shadow-strong: rgba(247, 201, 72, 0.35);
}

#btn-reset {
  --accent-color: #5b8cff;
  --accent-shadow: rgba(91, 140, 255, 0.2);
  --accent-shadow-strong: rgba(91, 140, 255, 0.35);
}

.controls-buttons button:not(.controls-icon-button):hover {
  background: var(--button-fill-hover);
}

.controls-button {
  background: var(--button-fill);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  width: 100%;
}

.controls-button:hover {
  background: var(--button-fill-hover);
}

.controls-slider {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.controls-slider label {
  font-size: 14px;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
}

.controls-toggle {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}

.controls-slider-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.controls-slider-row {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 8px;
  align-items: center;
}

.controls-slider-row input[type="range"] {
  width: 100%;
}

.controls-slider-row input[type="number"] {
  width: 100%;
}

.controls-field-label {
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}

.controls-radio-stack {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.controls-radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.controls-radio-option input[type="radio"] {
  margin: 0;
  accent-color: #32c5fd;
}

.controls-group.is-disabled {
  opacity: 0.5;
}

.controls-toggle input[type="checkbox"] {
  appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid #3a3a3a;
  background: #1c1c1c;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

#controls .controls-toggle input[type="checkbox"]::after,
#controls .controls-quick-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.2s ease, background 0.2s ease;
}

#controls .controls-toggle input[type="checkbox"],
#controls .controls-quick-toggle input[type="checkbox"] {
  width: 34px;
  height: 18px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

#controls .controls-toggle input[type="checkbox"]:checked,
#controls .controls-quick-toggle input[type="checkbox"]:checked {
  background: rgba(50, 197, 253, 0.2);
  border-color: rgba(50, 197, 253, 0.4);
}

#controls .controls-toggle input[type="checkbox"]:checked::after,
#controls .controls-quick-toggle input[type="checkbox"]:checked::after {
  transform: translateX(14px);
  background: rgba(50, 197, 253, 0.9);
}

#controls .controls-toggle input[type="checkbox"]:focus-visible,
#controls .controls-quick-toggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.35);
}

.canvas-toolbar .controls-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.2s ease, background 0.2s ease;
}

.canvas-toolbar .controls-toggle input[type="checkbox"] {
  width: 34px;
  height: 18px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
}

.canvas-toolbar .controls-toggle input[type="checkbox"]:checked {
  background: rgba(50, 197, 253, 0.2);
  border-color: rgba(50, 197, 253, 0.4);
}

.canvas-toolbar .controls-toggle input[type="checkbox"]:checked::after {
  transform: translateX(14px);
  background: rgba(50, 197, 253, 0.9);
}

.canvas-toolbar .controls-toggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.35);
}

.layout-editor-inspector .controls-toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.2s ease;
}

.layout-editor-inspector .controls-toggle input[type="checkbox"]:checked {
  background: #32c5fd;
  border-color: #32c5fd;
}

.layout-editor-inspector .controls-toggle input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}

.layout-editor-inspector .controls-toggle input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.35);
}

.layout-editor-toolbar .controls-toggle.layout-editor-toolbar-toggle {
  margin-top: 0;
  margin-bottom: 0;
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-content: flex-start;
  min-height: 32px;
  height: 32px;
  gap: 12px;
}

.layout-editor-toolbar .controls-toggle.layout-editor-toolbar-toggle input[type="checkbox"] {
  margin: 0;
  align-self: center;
  transform: none;
}

.layout-editor-toolbar .controls-toggle.layout-editor-toolbar-toggle span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

#data-editor {
  position: fixed;
  inset: 0;
  background: #0b0b0b;
  display: none;
  align-items: stretch;
  justify-content: stretch;
  z-index: 50;
}

#data-editor.open {
  display: flex;
}

#chart-digitiser-modal {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 16, 0.92);
  display: none;
  align-items: stretch;
  justify-content: stretch;
  z-index: 55;
}

#chart-digitiser-modal.open {
  display: flex;
}

.chart-digitiser-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #060b12;
  border: 0;
}

.chart-digitiser-header {
  height: 56px;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(140, 156, 184, 0.24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chart-digitiser-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.2px;
}

.chart-digitiser-close {
  background: #151e2e;
  color: #ffffff;
  border: 1px solid rgba(140, 156, 184, 0.5);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.chart-digitiser-close:hover {
  border-color: rgba(98, 212, 255, 0.75);
}

.chart-digitiser-frame {
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  border: 0;
  background: #060b12;
}

body.modal-open {
  overflow: hidden;
}

body.modal-open .canvas-toolbar {
  display: none;
}

.data-editor-panel {
  width: 100%;
  height: 100%;
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  background: #0b0b0b;
  border: 0;
  border-radius: 0;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  box-shadow: none;
}

.data-editor-panel.is-dragging {
  user-select: none;
}

.data-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid #1f1f1f;
  cursor: default;
}

.data-editor-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.data-editor-subtitle {
  font-size: 12px;
  color: #b7b7b7;
  margin-top: 4px;
}

.data-editor-close {
  background: #151515;
  color: #ffffff;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.data-editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-bottom: 1px solid #1f1f1f;
  flex-wrap: wrap;
}

.data-editor-actions button {
  background: #151515;
  color: #ffffff;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.data-editor-actions button:hover {
  border-color: #5a5a5a;
}

.data-editor-actions button.data-editor-apply {
  background: #1456c6;
  color: #ffffff;
  border-color: #1c63e2;
}

.data-editor-actions button.data-editor-apply:hover {
  border-color: #3b82f6;
}

.data-editor-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #b7b7b7;
}

.data-editor-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #32c5fd;
}

.data-editor-apply {
  background: #1456c6;
  color: #ffffff;
  border-color: #1c63e2;
}

.data-editor-import {
  display: none;
  padding: 16px 20px 18px;
  border-bottom: 1px solid #1f1f1f;
}

.data-editor-import.is-open {
  display: block;
}

.data-editor-import-content {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid rgba(96, 126, 162, 0.28);
  border-radius: 18px;
  padding: 18px 22px 20px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(19, 28, 41, 0.96), rgba(10, 16, 24, 0.98)),
    #0b0f16;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 10px 28px rgba(0, 0, 0, 0.24);
  cursor: pointer;
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

.data-editor-import-content:hover,
.data-editor-import-content:focus-visible,
.data-editor-import-content:focus-within {
  border-color: rgba(84, 173, 255, 0.54);
  background:
    linear-gradient(180deg, rgba(21, 32, 47, 0.98), rgba(11, 17, 26, 0.98)),
    #0d1420;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 14px 30px rgba(0, 0, 0, 0.28);
}

.data-editor-import-content[aria-disabled="true"] {
  cursor: progress;
}

.data-editor-import-content:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 1px rgba(83, 194, 255, 0.42),
    0 0 0 4px rgba(24, 193, 255, 0.12),
    0 14px 30px rgba(0, 0, 0, 0.28);
}

.data-editor-import.is-drag-over .data-editor-import-content {
  border-color: #37b7ff;
  background:
    linear-gradient(180deg, rgba(18, 42, 68, 0.98), rgba(9, 22, 37, 0.98)),
    #0c1723;
  box-shadow:
    0 0 0 1px rgba(55, 183, 255, 0.44),
    0 16px 34px rgba(0, 0, 0, 0.3);
  transform: translateY(-1px);
}

.data-editor-import[data-state="uploading"] .data-editor-import-content {
  border-color: rgba(65, 172, 255, 0.5);
  background:
    linear-gradient(180deg, rgba(20, 34, 52, 0.98), rgba(10, 17, 27, 0.98)),
    #0c141e;
}

.data-editor-import[data-state="success"] .data-editor-import-content {
  border-color: rgba(70, 196, 129, 0.48);
  background:
    linear-gradient(180deg, rgba(17, 34, 28, 0.98), rgba(9, 19, 16, 0.98)),
    #0d1513;
}

.data-editor-import[data-state="error"] .data-editor-import-content {
  border-color: rgba(241, 116, 116, 0.48);
  background:
    linear-gradient(180deg, rgba(41, 23, 28, 0.98), rgba(22, 12, 16, 0.98)),
    #160d10;
}

.data-editor-import-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 12px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.18), rgba(24, 193, 255, 0.08));
  border: 1px solid rgba(88, 173, 255, 0.24);
  color: #8dd6ff;
}

.data-editor-import-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.data-editor-import-title {
  font-size: 18px;
  font-weight: 700;
  color: #eaf2fb;
  margin-bottom: 8px;
}

.data-editor-import-copy {
  max-width: 360px;
  margin: 0 auto 16px;
  font-size: 14px;
  line-height: 1.55;
  color: #bbcad8;
}

.data-editor-import-button {
  min-width: 128px;
  background: rgba(14, 21, 31, 0.72);
  border: 1px solid rgba(108, 140, 177, 0.32);
  color: #e6eef7;
  border-radius: 11px;
  padding: 10px 15px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    border-color 200ms ease,
    background-color 200ms ease,
    transform 200ms ease,
    box-shadow 200ms ease;
}

.data-editor-import-button:hover,
.data-editor-import-button:focus-visible {
  border-color: rgba(104, 186, 255, 0.42);
  background: rgba(18, 29, 42, 0.9);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.data-editor-import-button:focus-visible {
  outline: none;
}

.data-editor-import-button:disabled {
  cursor: progress;
  opacity: 0.72;
  box-shadow: none;
}

.data-editor-import-support {
  margin-top: 14px;
  display: grid;
  gap: 5px;
}

.data-editor-import-formats {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #d2deea;
}

.data-editor-import-hint {
  font-size: 12px;
  line-height: 1.45;
  color: #7f93a8;
}

.data-editor-import-progress {
  display: none;
  width: 100%;
  max-width: 280px;
  height: 4px;
  margin: 14px auto 0;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(120, 145, 174, 0.16);
}

.data-editor-import-progress::before {
  content: "";
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #18c1ff, #6bd8ff);
  animation: data-editor-import-progress 1s ease-in-out infinite;
}

.data-editor-import[data-state="uploading"] .data-editor-import-progress {
  display: block;
}

.data-editor-import-status {
  max-width: 360px;
  margin: 12px auto 0;
  font-size: 12px;
  line-height: 1.45;
  color: #9cb0c4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-editor-import-status[hidden] {
  display: none;
}

.data-editor-import[data-state="success"] .data-editor-import-status {
  color: #91deb0;
}

.data-editor-import[data-state="error"] .data-editor-import-status {
  color: #f1a0a7;
}

.data-editor-import.is-drag-over .data-editor-import-copy {
  color: #d8ebf9;
}

.data-editor-import[data-state="uploading"] .data-editor-import-copy,
.data-editor-import[data-state="success"] .data-editor-import-copy,
.data-editor-import[data-state="error"] .data-editor-import-copy {
  margin-bottom: 12px;
}

.data-editor-import input[type="file"] {
  display: none;
}

@keyframes data-editor-import-progress {
  0% {
    transform: translateX(-125%);
  }
  100% {
    transform: translateX(335%);
  }
}

#data-editor-project-input {
  display: none;
}

.data-editor-sheet-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid #1f2937;
  background: #0b0c10;
  flex-wrap: wrap;
}

.data-editor-formula {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  background: #0f1118;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 5px 8px;
}

.data-editor-formula:focus-within {
  border-color: #38bdf8;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25);
}

.data-editor-cell-ref {
  min-width: 56px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #273244;
  background: #151922;
  color: #9aa4b2;
  font-size: 10pt;
  font-family: "Roboto", "Inter", "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  letter-spacing: 0.3px;
}

.data-editor-formula-label {
  color: #38bdf8;
  font-size: 10pt;
  font-weight: 600;
  font-family: "Roboto", "Inter", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0.2px;
}

.data-editor-formula input {
  flex: 1;
  background: transparent;
  border: none;
  color: #ffffff;
  font-size: 10pt;
  font-family: "Roboto", "Inter", "Helvetica Neue", Arial, sans-serif;
}

.data-editor-formula input::placeholder {
  color: #64748b;
}

.data-editor-formula input:focus {
  outline: none;
}

.data-editor-column-suggestion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 16px 0;
  padding: 8px 10px;
  border: 1px solid #243041;
  border-radius: 8px;
  background: #0f1722;
  color: #d7deeb;
  font-size: 12px;
}

.data-editor-column-suggestion[hidden] {
  display: none;
}

.data-editor-column-suggestion-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.data-editor-column-suggestion-actions button {
  background: #141c28;
  border: 1px solid #2a3749;
  border-radius: 7px;
  color: #e5edf8;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}

.data-editor-column-suggestion-actions button:hover {
  border-color: #42556f;
}

.data-editor-spacer {
  flex: 1;
}

.data-editor-error {
  min-height: 18px;
  padding: 0 20px 10px;
  color: #ff7b7b;
  font-size: 12px;
}

.data-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.data-editor-section-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #b7b7b7;
  margin-bottom: 10px;
}

.data-editor-table-wrap {
  position: relative;
  z-index: 1;
  overflow: auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #0b0c10;
  border: 0;
  border-radius: 0;
}

.data-editor-sheet {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: none;
}

.data-editor-table-wrap.is-sheet .data-editor-sheet {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.data-editor-table-wrap.is-sheet .data-editor-table {
  display: none;
}

.data-editor-table-wrap.is-sheet {
  overflow: hidden;
}

.data-editor-sheet .jexcel_container,
.data-editor-sheet .jspreadsheet_container {
  height: 100%;
  width: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.data-editor-sheet > .jtabs-content {
  height: 100% !important;
  min-height: 0;
  max-height: 100%;
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}

.data-editor-sheet > .jtabs-content > .jtabs-selected.jss_container {
  height: 100% !important;
  min-height: 0;
  max-height: 100%;
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  overflow: hidden;
}

.data-editor-sheet .jexcel_content,
.data-editor-sheet .jspreadsheet_content {
  height: 100%;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-x: auto !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.data-editor-sheet .jss_container {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.data-editor-sheet .jss_content {
  width: 100%;
  height: 100% !important;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  display: block !important;
  overflow-x: auto !important;
  overflow-y: scroll !important;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

.data-editor-table-wrap,
.data-editor-sheet .jss_content,
.data-editor-sheet .jexcel_content,
.data-editor-sheet .jspreadsheet_content,
.data-editor-mapping-body {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.55) transparent;
}

.data-editor-table-wrap::-webkit-scrollbar,
.data-editor-sheet .jss_content::-webkit-scrollbar,
.data-editor-sheet .jexcel_content::-webkit-scrollbar,
.data-editor-sheet .jspreadsheet_content::-webkit-scrollbar,
.data-editor-mapping-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.data-editor-table-wrap::-webkit-scrollbar-track,
.data-editor-sheet .jss_content::-webkit-scrollbar-track,
.data-editor-sheet .jexcel_content::-webkit-scrollbar-track,
.data-editor-sheet .jspreadsheet_content::-webkit-scrollbar-track,
.data-editor-mapping-body::-webkit-scrollbar-track {
  background: transparent;
}

.data-editor-table-wrap::-webkit-scrollbar-corner,
.data-editor-sheet .jss_content::-webkit-scrollbar-corner,
.data-editor-sheet .jexcel_content::-webkit-scrollbar-corner,
.data-editor-sheet .jspreadsheet_content::-webkit-scrollbar-corner,
.data-editor-mapping-body::-webkit-scrollbar-corner {
  background: transparent;
}

.data-editor-table-wrap::-webkit-scrollbar-thumb,
.data-editor-sheet .jss_content::-webkit-scrollbar-thumb,
.data-editor-sheet .jexcel_content::-webkit-scrollbar-thumb,
.data-editor-sheet .jspreadsheet_content::-webkit-scrollbar-thumb,
.data-editor-mapping-body::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.75);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

.data-editor-sheet .jss_pagination,
.data-editor-sheet .jss_about {
  display: none !important;
}

.data-editor-sheet .jexcel,
.data-editor-sheet .jspreadsheet {
  background: #0b0c10;
  color: #e5e7eb;
  font-family: "Roboto", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 12px;
}

.data-editor-sheet .jexcel thead tr,
.data-editor-sheet .jspreadsheet thead tr {
  background: #151922;
}

.data-editor-sheet .jexcel thead th,
.data-editor-sheet .jspreadsheet thead th,
.data-editor-sheet .jexcel thead td,
.data-editor-sheet .jspreadsheet thead td {
  font-weight: 600;
  color: #d1d5db;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #1f2937 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.data-editor-sheet .jexcel tbody td,
.data-editor-sheet .jspreadsheet tbody td {
  background: #0b0c10;
  color: #e5e7eb;
  border-color: #1f2937;
}

.data-editor-sheet .jexcel tbody tr:nth-child(even) td,
.data-editor-sheet .jspreadsheet tbody tr:nth-child(even) td {
  background: #0b0c10;
}

.data-editor-sheet .jexcel thead th.is-date-column,
.data-editor-sheet .jspreadsheet thead th.is-date-column,
.data-editor-sheet .jexcel thead td.is-date-column,
.data-editor-sheet .jspreadsheet thead td.is-date-column {
  background: #0f2a2a;
  color: #9fe7dd;
}

.data-editor-sheet .jexcel tbody td.is-date-column,
.data-editor-sheet .jspreadsheet tbody td.is-date-column {
  background: #0c2323;
  color: #9fe7dd;
}

.data-editor-sheet .jexcel tbody td.selected,
.data-editor-sheet .jspreadsheet tbody td.selected {
  outline: 2px solid rgba(50, 197, 253, 0.6);
  background: rgba(50, 197, 253, 0.08);
}

.data-editor-sheet .jss_spreadsheet {
  background: #0b0c10;
  color: #e5e7eb;
  font-family: "Roboto", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: 10pt;
}

.data-editor-sheet .jss_worksheet {
  font-size: 10pt !important;
}

.data-editor-sheet .jss_spreadsheet thead tr {
  background: #151922;
}

.data-editor-sheet .jss_spreadsheet thead th,
.data-editor-sheet .jss_spreadsheet thead td {
  font-weight: 600;
  font-size: 10pt;
  color: #d1d5db;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #1f2937 !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.data-editor-sheet .jss_spreadsheet thead th,
.data-editor-sheet .jss_spreadsheet thead td,
.data-editor-sheet .jss_worksheet thead th,
.data-editor-sheet .jss_worksheet thead td {
  position: sticky;
  top: 0;
  z-index: 6;
  background: #151922;
}

.data-editor-sheet .jss_spreadsheet tbody td.jss_row,
.data-editor-sheet .jss_worksheet tbody td.jss_row {
  position: sticky;
  left: 0;
  z-index: 5;
  background: #151922;
}

.data-editor-sheet .jss_spreadsheet thead td.jss_selectall,
.data-editor-sheet .jss_spreadsheet thead td.jss_corner,
.data-editor-sheet .jss_worksheet thead td.jss_selectall,
.data-editor-sheet .jss_worksheet thead td.jss_corner {
  left: 0;
  z-index: 7;
  background: #151922;
}

.data-editor-sheet .jss_worksheet thead th,
.data-editor-sheet .jss_worksheet thead td {
  font-size: 10pt !important;
}

.data-editor-sheet .jss_spreadsheet tbody td {
  background: #0b0c10;
  color: #e5e7eb;
  border-color: #1f2937;
  font-family: var(--font-sans);
  font-size: 10pt;
  font-weight: 400;
  line-height: 1.2;
}

.data-editor-sheet .jss_worksheet tbody td {
  font-size: 10pt !important;
}

.data-editor-sheet .jss_spreadsheet tbody tr:nth-child(even) td {
  background: #0b0c10;
}

.data-editor-sheet .jss_spreadsheet thead th.is-date-column,
.data-editor-sheet .jss_spreadsheet thead td.is-date-column {
  background: #0f2a2a;
  color: #9fe7dd;
}

.data-editor-sheet .jss_spreadsheet tbody td.is-date-column {
  background: #0c2323;
  color: #9fe7dd;
}

.data-editor-sheet .jss_spreadsheet tbody td.selected {
  outline: 2px solid rgba(50, 197, 253, 0.6);
  background: rgba(50, 197, 253, 0.08);
}

.data-editor-sheet .jspreadsheet tbody td.highlight-selected,
.data-editor-sheet .jexcel tbody td.highlight-selected,
.data-editor-sheet .jss_spreadsheet tbody td.highlight-selected,
.data-editor-sheet .jss_worksheet tbody td.highlight-selected {
  background: rgba(50, 197, 253, 0.12);
}

.data-editor-sheet .jss_spreadsheet tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right,
.data-editor-sheet .jexcel tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right,
.data-editor-sheet .jspreadsheet tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right,
.data-editor-sheet .jss_worksheet tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right {
  background: transparent !important;
}

.data-editor-sheet .jss_spreadsheet tbody td.highlight,
.data-editor-sheet .jexcel tbody td.highlight,
.data-editor-sheet .jspreadsheet tbody td.highlight,
.data-editor-sheet .jss_worksheet tbody td.highlight {
  background: rgba(50, 197, 253, 0.12) !important;
}

.data-editor-sheet .jss_spreadsheet tbody td.highlight-left,
.data-editor-sheet .jexcel tbody td.highlight-left,
.data-editor-sheet .jspreadsheet tbody td.highlight-left,
.data-editor-sheet .jss_worksheet tbody td.highlight-left {
  border-left-color: #38bdf8 !important;
}

.data-editor-sheet .jss_spreadsheet tbody td.highlight-right,
.data-editor-sheet .jexcel tbody td.highlight-right,
.data-editor-sheet .jspreadsheet tbody td.highlight-right,
.data-editor-sheet .jss_worksheet tbody td.highlight-right {
  border-right-color: #38bdf8 !important;
}

.data-editor-sheet .jss_spreadsheet tbody td.highlight-top,
.data-editor-sheet .jexcel tbody td.highlight-top,
.data-editor-sheet .jspreadsheet tbody td.highlight-top,
.data-editor-sheet .jss_worksheet tbody td.highlight-top {
  border-top-color: #38bdf8 !important;
}

.data-editor-sheet .jss_spreadsheet tbody td.highlight-bottom,
.data-editor-sheet .jexcel tbody td.highlight-bottom,
.data-editor-sheet .jspreadsheet tbody td.highlight-bottom,
.data-editor-sheet .jss_worksheet tbody td.highlight-bottom {
  border-bottom-color: #38bdf8 !important;
}

.data-editor-sheet td.editor > input,
.data-editor-sheet td.editor > textarea,
.data-editor-sheet.jss_spreadsheet td.editor > input,
.data-editor-sheet.jss_spreadsheet td.editor > textarea,
.data-editor-sheet .jss_worksheet td.editor > input,
.data-editor-sheet .jss_worksheet td.editor > textarea {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

.data-editor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 720px;
  table-layout: fixed;
  width: max-content;
}

.data-editor-table thead th {
  position: sticky;
  top: 0;
  background: #f3f4f6;
  color: #6b7280;
  font-weight: 500;
  text-align: left;
  padding: 2px 4px;
  border-bottom: 1px solid #e5e7eb;
  z-index: 2;
  box-sizing: border-box;
}

.data-editor-table thead th[data-col-index] {
  cursor: pointer;
}

.data-editor-table thead th.is-date-column {
  background: #d6f5f1;
  color: #0f4f4a;
}

.data-editor-table thead th.is-header-selected {
  background: #dbeafe;
  color: #1d4ed8;
}

.data-editor-col-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 2px;
  position: relative;
}

.data-editor-col-letter {
  font-size: 11px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #6f6f6f;
}

.data-editor-col-title {
  font-size: 12px;
  color: #e8e8e8;
}

.data-editor-col-title.is-muted {
  color: #7a7a7a;
}

.data-editor-col-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: #475569;
  font-size: 10px;
  font-weight: 600;
  vertical-align: middle;
}

.data-editor-col-menu-trigger {
  position: absolute;
  top: 4px;
  right: 0;
  border: none;
  background: transparent;
  color: #94a3b8;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease, background 120ms ease, color 120ms ease;
}

.data-editor-table thead th:hover .data-editor-col-menu-trigger,
.data-editor-table thead th:focus-within .data-editor-col-menu-trigger {
  opacity: 1;
}

.data-editor-col-menu-trigger:hover {
  background: rgba(148, 163, 184, 0.18);
  color: #334155;
}

.data-editor-table thead th .series-swatch {
  display: inline-block;
  width: 14px;
  height: 4px;
  border-radius: 6px;
  margin-right: 6px;
  vertical-align: middle;
}

.data-editor-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
}

.data-editor-table tbody tr:nth-child(even) {
  background: #ffffff;
}

.data-editor-table tbody tr:hover {
  background: #f8fafc;
}

.data-editor-table tbody td.is-date-column {
  background: #dcf7f3;
}

.data-editor-table tbody td.is-date-column input {
  color: #0f4f4a;
  background: transparent;
}

.data-editor-table td {
  padding: 0;
  border: 1px solid #e5e7eb;
}

.data-editor-table tbody tr.is-active-row td {
  background: #f3f4f6;
}

.data-editor-table tbody td.is-active-column {
  background: #f8fafc;
}

.data-editor-table thead th.is-active-header,
.data-editor-table .data-editor-row-header.is-active-header {
  background: #dbeafe;
  color: #1d4ed8;
}

.data-editor-table input {
  width: 100%;
  background: transparent;
  color: #111827;
  border: 0;
  border-radius: 0;
  padding: 4px 6px;
  font-size: 12px;
  font-family: var(--font-sans);
}

.data-editor-table input:focus {
  outline: none;
  background: #ffffff;
}

.data-editor-table .col-index {
  width: 36px;
  min-width: 36px;
  color: #6b7280;
  text-align: center;
  background: #f3f4f6;
}

#data-editor:not(.theme-light) .data-editor-table .col-index {
  background: #151922;
  color: #9aa4b2;
}

.data-editor-row-header {
  cursor: pointer;
}

.data-editor-row-header.is-header-selected {
  background: #dbeafe;
  color: #1d4ed8;
}

.data-editor-table td.is-date-column input {
  background: transparent;
}

.data-editor-table td.is-selected-range input {
  background: #edf2ff;
}

.data-editor-table td.is-selected input {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.9) inset;
}

.data-editor-table td.is-formula input {
  color: #2563eb;
}

.data-editor-table td.is-fill-range input {
  background: #edf2ff;
}

#data-editor-fill-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #3b82f6;
  border: 1px solid #0b1f3a;
  display: none;
  z-index: 4;
  cursor: default;
}

.data-editor-cell-error input {
  border-color: #ff7b7b;
}

.data-editor-schema-error input {
  border-color: #ff7b7b;
}

.data-editor-sheet td.data-editor-schema-error,
.data-editor-sheet td.data-editor-cell-error {
  box-shadow: inset 0 0 0 1px rgba(255, 123, 123, 0.9);
}

.data-editor-mapping {
  position: relative;
  display: flex;
  flex-direction: column;
  z-index: 2;
  border-left: 1px solid #1f2937;
  padding: 10px;
  background: #0d1017;
  min-height: 0;
  overflow: visible;
}

.data-editor-mapping-toggle {
  position: absolute;
  left: -22px;
  top: 50%;
  z-index: 40;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--button-fill);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  transform: translateY(-50%);
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, background 0.2s ease, left 0.2s ease, top 0.2s ease;
}

.data-editor-mapping-toggle:hover {
  background: var(--button-fill-hover);
}

.data-editor-mapping-toggle::before {
  content: "";
  width: 12px;
  height: 12px;
  display: block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'><path d='M8.5 1.5L3 9l5.5 7.5' stroke='%23d2d2d2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10px 14px;
  transform: rotate(180deg);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.data-editor-mapping-toggle:hover::before {
  filter: brightness(1.2);
}

.data-editor-mapping-body {
  min-height: 0;
  flex: 1;
  overflow: auto;
  overflow-x: hidden;
}

.data-editor-layout.is-mapping-collapsed {
  grid-template-columns: minmax(0, 1fr) 44px;
}

.data-editor-layout.is-mapping-collapsed .data-editor-mapping {
  overflow: visible;
  padding: 0;
  background: transparent;
  border-left: 0;
}

.data-editor-layout.is-mapping-collapsed .data-editor-mapping .data-editor-section-title {
  display: none;
}

.data-editor-layout.is-mapping-collapsed .data-editor-mapping-toggle::before {
  transform: rotate(0deg);
}

.data-editor-mapping-card {
  border: 1px solid #1f1f1f;
  border-radius: 10px;
  padding: 10px;
  background: #101114;
  margin-bottom: 12px;
}

.data-editor-schema-rules {
  margin: 0;
  padding-left: 16px;
  color: #9aa4b2;
  font-size: 11px;
  line-height: 1.4;
}

.data-editor-schema-rules li + li {
  margin-top: 4px;
}

.data-editor-mapping-card label {
  display: block;
  font-size: 12px;
  color: #b7b7b7;
  margin-bottom: 8px;
}

.data-editor-mapping-card select {
  width: 100%;
  background: #151515;
  color: #ffffff;
  border: 1px solid #3a3a3a;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--font-sans);
}

.data-editor-mapping-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #b7b7b7;
  margin-bottom: 8px;
}

.data-editor-text-button {
  background: transparent;
  border: none;
  color: #80b4ff;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.data-editor-mapping-row {
  display: grid;
  grid-template-columns: 16px 22px 20px minmax(0, 1fr) 52px 28px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.data-editor-mapping-row.is-axis-hidden {
  grid-template-columns: 16px 22px 20px minmax(0, 1fr) 28px;
}

.data-editor-mapping-row.is-group-child {
  margin-left: 6px;
}

.data-editor-mapping-row.is-group-header {
  margin-top: 8px;
  margin-bottom: 2px;
}

.data-editor-mapping-label-cell {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 6px;
}

.data-editor-mapping-label-cell input[type="text"] {
  min-width: 0;
  width: 100%;
  color: #ffffff;
  background: #0f0f0f;
}

.data-editor-mapping-placeholder {
  display: block;
  height: 24px;
  border-radius: 8px;
}

.data-editor-mapping-row.is-group-child .data-editor-mapping-letter {
  opacity: 0.6;
}

.data-editor-group-marker {
  width: 14px;
  height: 14px;
  position: relative;
  flex: 0 0 auto;
}

.data-editor-group-marker::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0;
  width: 0;
  height: 50%;
  border-left: 1px solid rgba(148, 163, 184, 0.65);
}

.data-editor-group-marker::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 50%;
  width: 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.65);
}

.data-editor-group-label-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}

.data-editor-group-label {
  color: #f8fafc;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
}

.data-editor-color-button.is-group-color {
  cursor: default;
}

.data-editor-mapping-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

.data-editor-mapping-letter {
  width: 24px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.data-editor-color-button {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 6px;
  border: 1px solid #262626;
  background: transparent;
  cursor: pointer;
}

.data-editor-color-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.4);
}

.data-editor-mapping-row input[type="text"] {
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 6px 8px;
  color: #ffffff;
  font-size: 12px;
  font-family: var(--font-sans);
}

.data-editor-axis-select {
  background: #0f0f0f;
  border: 1px solid #262626;
  border-radius: 8px;
  padding: 5px 3px;
  color: #ffffff;
  font-size: 11px;
  font-family: var(--font-sans);
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}

.data-editor-color-picker {
  position: fixed;
  z-index: 70;
  display: none;
}

.data-editor-color-picker.is-open {
  display: block;
}

.data-editor-color-picker-body {
  background: #1d2129;
  border: none;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  width: 320px;
  color: #d6d6d6;
  font-family: var(--font-sans);
}

.data-editor-color-picker-top {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 12px;
  align-items: stretch;
}

.data-editor-color-picker-sv {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: 10px;
  border: none;
  cursor: crosshair;
  overflow: hidden;
}

.data-editor-color-picker-sv-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
  transform: translate(-6px, -6px);
}

.data-editor-color-picker-sliders {
  display: grid;
  gap: 10px;
  align-content: start;
}

.data-editor-color-picker-slider {
  display: grid;
  gap: 6px;
  font-size: 11px;
  color: #9ca3af;
}

.data-editor-color-picker-slider input[type="range"] {
  width: 100%;
  height: 14px;
  border-radius: 999px;
  border: none;
  background:
    linear-gradient(
        to right,
        rgba(50, 197, 253, 0.2) 0%,
        rgba(50, 197, 253, 0.2) var(--slider-fill, 0%),
        rgba(255, 255, 255, 0.08) var(--slider-fill, 0%),
        rgba(255, 255, 255, 0.08) 100%
      ),
    var(--picker-track, #0f1217);
  cursor: pointer;
  accent-color: #32c5fd;
  -webkit-appearance: none;
  appearance: none;
}

.data-editor-color-picker-hue {
  --picker-track: linear-gradient(
      to right,
      #ff0000 0%,
      #ffff00 17%,
      #00ff00 33%,
      #00ffff 50%,
      #0000ff 67%,
      #ff00ff 83%,
      #ff0000 100%
    );
}

.data-editor-color-picker-saturation {
  --picker-track: linear-gradient(
      to right,
      hsl(var(--picker-hue, 180), 0%, var(--picker-lightness, 50)%),
      hsl(var(--picker-hue, 180), 100%, var(--picker-lightness, 50)%)
    );
}

.data-editor-color-picker-lightness {
  --picker-track: linear-gradient(
      to right,
      #000000 0%,
      hsl(var(--picker-hue, 180), 100%, 50%) 50%,
      #ffffff 100%
    );
}

.data-editor-color-picker-alpha {
  --picker-track: linear-gradient(
      to right,
      rgba(var(--picker-rgb, 255, 255, 255), 0),
      rgba(var(--picker-rgb, 255, 255, 255), 1)
    );
}

.data-editor-color-picker-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: inherit;
  background: inherit;
}

.data-editor-color-picker-slider input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: inherit;
  background: inherit;
}

.data-editor-color-picker-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -4px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(15, 17, 23, 0.35);
}

.data-editor-color-picker-slider input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(15, 17, 23, 0.35);
}

.data-editor-color-picker-swatch {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: none;
}

.data-editor-color-picker-values {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.data-editor-color-picker-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px;
  gap: 10px;
  align-items: end;
}

.data-editor-color-picker-palette {
  display: grid;
  gap: 6px;
}

.data-editor-color-picker-palette.is-empty {
  display: none;
}

.data-editor-color-picker-palette-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.data-editor-color-picker-palette-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18px, 1fr));
  gap: 6px;
}

.data-editor-color-picker-palette-swatch {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
  background: transparent;
}

.data-editor-color-picker-palette-swatch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(50, 197, 253, 0.35);
}

.data-editor-color-picker-hex-field input {
  text-transform: uppercase;
}

.data-editor-color-picker-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: #9ca3af;
}

.data-editor-color-picker-field input {
  background: #0f1217;
  border: none;
  border-radius: 8px;
  padding: 6px 8px;
  color: #ffffff;
  font-size: 12px;
  font-family: var(--font-sans);
  outline: none;
}

.data-editor-color-picker-field input[type="number"] {
  width: 100%;
}

.data-editor-color-picker-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.data-editor-color-picker-grid--rgb {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.data-editor-color-picker-grid--hsl {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.data-editor-color-picker-advanced {
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 8px 10px;
  color: #9ca3af;
  font-size: 11px;
}

.data-editor-color-picker-advanced summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #b7b7b7;
}

.data-editor-color-picker-advanced summary::-webkit-details-marker {
  display: none;
}

.data-editor-color-picker-advanced[open] summary {
  margin-bottom: 8px;
}

.data-editor-color-picker-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}

.data-editor-color-picker-actions button {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #b7b7b7;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
}

.data-editor-color-picker-eye {
  width: 34px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.data-editor-color-picker-eye svg {
  width: 18px;
  height: 18px;
}

.data-editor-color-picker-actions button:hover {
  border-color: #555555;
  color: #ffffff;
}

.data-editor-color-picker.is-light .data-editor-color-picker-body {
  background: #ffffff;
  border: none;
  color: #1c1c1c;
}

.data-editor-color-picker.is-light .data-editor-color-picker-sv,
.data-editor-color-picker.is-light .data-editor-color-picker-slider input[type="range"],
.data-editor-color-picker.is-light .data-editor-color-picker-swatch {
  border: none;
}

.data-editor-color-picker.is-light .data-editor-color-picker-slider input[type="range"]::-webkit-slider-thumb {
  background: #ffffff;
}

.data-editor-color-picker.is-light .data-editor-color-picker-slider input[type="range"]::-moz-range-thumb {
  background: #ffffff;
}

.data-editor-color-picker.is-light .data-editor-color-picker-field {
  color: #6b7280;
}

.data-editor-color-picker.is-light .data-editor-color-picker-field input {
  background: #ffffff;
  border: none;
  color: #111827;
}

.data-editor-color-picker.is-light .data-editor-color-picker-palette-label {
  color: #64748b;
}

.data-editor-color-picker.is-light .data-editor-color-picker-palette-swatch {
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.12);
}

.data-editor-color-picker.is-light .data-editor-color-picker-actions button {
  border-color: #cbd5e1;
  color: #4b5563;
}

.data-editor-color-picker.is-light .data-editor-color-picker-advanced {
  border-color: #e5e7eb;
  color: #6b7280;
}

.data-editor-color-picker.is-light .data-editor-color-picker-actions button:hover {
  border-color: #94a3b8;
  color: #111827;
}

.data-editor-mapping-remove {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #b7b7b7;
  border-radius: 8px;
  padding: 4px 6px;
  cursor: pointer;
}

.data-editor-mapping-remove:hover {
  border-color: #555555;
  color: #ffffff;
}

.data-editor-context-menu {
  position: absolute;
  min-width: 196px;
  background: #0f1116;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  padding: 6px 5px;
  display: none;
  z-index: 20;
  font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

.data-editor-context-menu.is-open {
  display: block;
}

.data-editor-context-menu button {
  display: block;
  width: 100%;
  background: transparent;
  color: #e6e6e6;
  border: none;
  text-align: left;
  padding: 7px 10px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.25;
  cursor: pointer;
}

.data-editor-context-section {
  padding: 8px 10px 4px;
  color: #7f8ba0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.data-editor-context-section[hidden] {
  display: none;
}

.data-editor-column-rename-panel {
  width: min(420px, 92vw);
}

.data-editor-context-menu button:hover {
  background: #1b1f2b;
}

.data-editor-context-menu button[hidden] {
  display: none;
}

.data-editor-context-menu button:disabled {
  color: #8c93a1;
  cursor: default;
}

.data-editor-context-menu button:disabled:hover {
  background: transparent;
}

.data-editor-context-divider {
  height: 1px;
  background: #1f1f1f;
  margin: 4px 0;
}

.data-editor-context-divider[hidden] {
  display: none;
}

.canvas-context-menu {
  position: fixed;
  min-width: 190px;
  background: #10151f;
  border: 1px solid rgba(143, 169, 220, 0.28);
  border-radius: 10px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.48);
  padding: 6px;
  display: none;
  z-index: 80;
}

.canvas-context-menu.is-open {
  display: block;
}

.canvas-context-menu button {
  width: 100%;
  background: transparent;
  color: #e7edf8;
  border: none;
  text-align: left;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 12px;
  cursor: pointer;
}

.canvas-context-menu button:hover {
  background: rgba(64, 111, 190, 0.22);
}

.canvas-context-menu button:disabled {
  color: rgba(231, 237, 248, 0.35);
  cursor: default;
}

.canvas-context-menu button:disabled:hover {
  background: transparent;
}

.canvas-context-menu-divider {
  height: 1px;
  background: rgba(147, 166, 199, 0.26);
  margin: 5px 0;
}

.data-editor-format-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 5, 0.55);
  z-index: 60;
}

.data-editor-format-modal.is-open {
  display: flex;
}

.data-editor-format-panel {
  width: min(520px, 92vw);
  background: var(--panel-bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  padding: 18px 20px 16px;
  color: #ffffff;
  box-shadow: var(--panel-shadow), var(--panel-inset);
}

.data-editor-format-header {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

.data-editor-format-body {
  display: grid;
  gap: 12px;
}

.data-editor-format-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.data-editor-format-column {
  display: grid;
  gap: 6px;
  font-size: 12px;
}

.data-editor-format-column select,
.data-editor-format-row input[type="number"],
.data-editor-format-row input[type="text"],
.data-editor-format-row select {
  width: 100%;
  background: #101114;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  color: #ffffff;
  padding: 6px 8px;
  font-size: 12px;
  font-family: var(--font-sans);
}

.data-editor-format-row {
  display: grid;
  gap: 6px;
  font-size: 12px;
  width: 100%;
  grid-column: 1 / -1;
}

.data-editor-format-options .data-editor-format-row[data-format-row="dynamic-precision"],
.data-editor-format-options .data-editor-format-row[data-format-row="thousands"] {
  width: 100%;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.data-editor-format-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #32c5fd;
}

.data-editor-format-sample {
  background: #111217;
  border: 1px solid #242424;
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
}

.data-editor-format-sample-label {
  font-size: 11px;
  color: #b7b7b7;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.data-editor-format-sample-value {
  font-size: 14px;
  color: #ffffff;
}

.data-editor-format-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.data-editor-format-actions button {
  background: #151515;
  color: #ffffff;
  border: 1px solid #3a3a3a;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.data-editor-format-actions button:hover {
  border-color: #5a5a5a;
}

.data-label-physics-body .data-editor-format-row input[type="range"] {
  width: 100%;
}

.data-label-physics-toggle {
  grid-template-columns: 1fr auto;
  align-items: center;
}


#data-editor.theme-light .data-editor-format-panel {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

#data-editor.theme-light .data-editor-format-column select,
#data-editor.theme-light .data-editor-format-row input[type="number"],
#data-editor.theme-light .data-editor-format-row input[type="text"],
#data-editor.theme-light .data-editor-format-row select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #111827;
}

#data-editor.theme-light .data-editor-format-row input[type="checkbox"] {
  accent-color: #2563eb;
}

#data-editor.theme-light .data-editor-format-sample {
  background: #f8fafc;
  border-color: #e5e7eb;
}

#data-editor.theme-light .data-editor-format-sample-label {
  color: #6b7280;
}


#data-editor.theme-light .data-editor-format-sample-value {
  color: #111827;
}

#data-editor.theme-light .data-editor-format-actions button {
  background: #ffffff;
  color: #111827;
  border-color: #cbd5e1;
}

#data-editor.theme-light .data-editor-format-actions button:hover {
  border-color: #94a3b8;
}

#data-editor.theme-light {
  background: rgba(15, 23, 42, 0.2);
}

#data-editor.theme-light .data-editor-panel {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12);
}

#data-editor.theme-light .data-editor-header,
#data-editor.theme-light .data-editor-actions,
#data-editor.theme-light .data-editor-sheet-tools,
#data-editor.theme-light .data-editor-import {
  border-color: #e5e7eb;
}

#data-editor.theme-light .data-editor-sheet-tools {
  background: #f8fafc;
}

#data-editor.theme-light .data-editor-subtitle {
  color: #6b7280;
}

#data-editor.theme-light .data-editor-close,
#data-editor.theme-light .data-editor-actions button {
  background: #ffffff;
  color: #111827;
  border-color: #cbd5e1;
}

#data-editor.theme-light .data-editor-actions button:hover,
#data-editor.theme-light .data-editor-close:hover {
  border-color: #94a3b8;
}

#data-editor.theme-light .data-editor-actions button.data-editor-apply {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
}

#data-editor.theme-light .data-editor-actions button.data-editor-apply:hover {
  border-color: #1e40af;
}

#data-editor.theme-light .data-editor-toggle {
  color: #6b7280;
}

#data-editor.theme-light .data-editor-toggle input[type="checkbox"] {
  accent-color: #2563eb;
}

#data-editor.theme-light .layout-mode-switch {
  background: #e5e7eb;
  border: 1px solid #cbd5e1;
  box-shadow: none;
}

#data-editor.theme-light .layout-mode-option {
  color: #475569;
}

#data-editor.theme-light .layout-mode-option.is-active {
  background: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.12);
}

#data-editor.theme-light .data-editor-apply,
#data-editor.theme-light .data-editor-import-button {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
}

#data-editor.theme-light .data-editor-import-content {
  background: #f8fafc;
  border-color: #cbd5e1;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    0 12px 24px rgba(15, 23, 42, 0.08);
}

#data-editor.theme-light .data-editor-import.is-drag-over .data-editor-import-content {
  border-color: #2563eb;
  box-shadow:
    0 0 0 1px rgba(37, 99, 235, 0.24),
    0 14px 26px rgba(15, 23, 42, 0.1);
}

#data-editor.theme-light .data-editor-import-icon {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.14), rgba(56, 189, 248, 0.08));
  border-color: rgba(37, 99, 235, 0.18);
  color: #1d4ed8;
}

#data-editor.theme-light .data-editor-import-title {
  color: #0f172a;
}

#data-editor.theme-light .data-editor-import-copy {
  color: #475569;
}

#data-editor.theme-light .data-editor-import-formats {
  color: #1e293b;
}

#data-editor.theme-light .data-editor-import-hint,
#data-editor.theme-light .data-editor-import-status {
  color: #64748b;
}

#data-editor.theme-light .data-editor-formula {
  background: #ffffff;
  border-color: #cbd5e1;
  border-radius: 8px;
  padding: 6px 10px;
  gap: 8px;
  box-shadow: none;
}

#data-editor.theme-light .data-editor-formula:focus-within {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
}

#data-editor.theme-light .data-editor-table-wrap {
  background: #ffffff;
  border-color: transparent;
}

#data-editor.theme-light .data-editor-sheet .jexcel,
#data-editor.theme-light .data-editor-sheet .jspreadsheet,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet {
  background: #ffffff;
  color: #1f1f1f;
}

#data-editor.theme-light .data-editor-sheet .jexcel thead tr,
#data-editor.theme-light .data-editor-sheet .jspreadsheet thead tr,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead tr {
  background: #f3f4f6;
}

#data-editor.theme-light .data-editor-sheet .jexcel thead th,
#data-editor.theme-light .data-editor-sheet .jspreadsheet thead th,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead th,
#data-editor.theme-light .data-editor-sheet .jexcel thead td,
#data-editor.theme-light .data-editor-sheet .jspreadsheet thead td,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead td {
  color: #333333;
  border-bottom-color: #e5e7eb !important;
}

#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead th,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead td,
#data-editor.theme-light .data-editor-sheet .jss_worksheet thead th,
#data-editor.theme-light .data-editor-sheet .jss_worksheet thead td,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.jss_row,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.jss_row {
  background: #f3f4f6;
}

#data-editor.theme-light .data-editor-sheet .jexcel tbody td,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody td,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td {
  background: #ffffff;
  color: #1f1f1f;
  border-color: #e5e7eb;
}

#data-editor.theme-light .data-editor-sheet .jexcel tbody tr:nth-child(even) td,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody tr:nth-child(even) td,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody tr:nth-child(even) td {
  background: #ffffff;
}

#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.highlight,
#data-editor.theme-light .data-editor-sheet .jexcel tbody td.highlight,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody td.highlight,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.highlight {
  background: #e8f0fe !important;
  color: #1f1f1f;
  border-top-color: #e5e7eb !important;
  border-bottom-color: #e5e7eb !important;
}

#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.highlight-selected,
#data-editor.theme-light .data-editor-sheet .jexcel tbody td.highlight-selected,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody td.highlight-selected,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.highlight-selected {
  background: #e8f0fe !important;
  color: #174ea6 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right,
#data-editor.theme-light .data-editor-sheet .jexcel tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right {
  background: transparent !important;
  color: #1f1f1f !important;
}

#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.highlight-left,
#data-editor.theme-light .data-editor-sheet .jexcel tbody td.highlight-left,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody td.highlight-left,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.highlight-left {
  border-left-color: #1a73e8 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.highlight-right,
#data-editor.theme-light .data-editor-sheet .jexcel tbody td.highlight-right,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody td.highlight-right,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.highlight-right {
  border-right-color: #1a73e8 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.highlight-top,
#data-editor.theme-light .data-editor-sheet .jexcel tbody td.highlight-top,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody td.highlight-top,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.highlight-top {
  border-top-color: #1a73e8 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.highlight-bottom,
#data-editor.theme-light .data-editor-sheet .jexcel tbody td.highlight-bottom,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody td.highlight-bottom,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.highlight-bottom {
  border-bottom-color: #1a73e8 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead td.selected,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead td.highlight,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead td.highlight-selected,
#data-editor.theme-light .data-editor-sheet .jss_worksheet thead td.selected,
#data-editor.theme-light .data-editor-sheet .jss_worksheet thead td.highlight,
#data-editor.theme-light .data-editor-sheet .jss_worksheet thead td.highlight-selected,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.jss_row.selected,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.jss_row.highlight,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.jss_row.highlight-selected,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.jss_row.selected,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.jss_row.highlight,
#data-editor.theme-light .data-editor-sheet .jss_worksheet tbody td.jss_row.highlight-selected {
  background: #dbe8fd !important;
  color: #174ea6 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_worksheet .selection-top {
  border-top-color: #1a73e8 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_worksheet .selection-left {
  border-left-color: #1a73e8 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_worksheet .selection-right {
  border-right-color: #1a73e8 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_worksheet .selection-bottom {
  border-bottom-color: #1a73e8 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_worksheet .copying-top {
  border-top-color: #3b82f6 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_worksheet .copying-left {
  border-left-color: #3b82f6 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_worksheet .copying-right {
  border-right-color: #3b82f6 !important;
}

#data-editor.theme-light .data-editor-sheet .jss_worksheet .copying-bottom {
  border-bottom-color: #3b82f6 !important;
}

#data-editor.theme-light .data-editor-sheet .jexcel thead th.is-date-column,
#data-editor.theme-light .data-editor-sheet .jspreadsheet thead th.is-date-column,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead th.is-date-column,
#data-editor.theme-light .data-editor-sheet .jexcel thead td.is-date-column,
#data-editor.theme-light .data-editor-sheet .jspreadsheet thead td.is-date-column,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet thead td.is-date-column {
  background: #d6f5f1;
  color: #0f4f4a;
}

#data-editor.theme-light .data-editor-sheet .jexcel tbody td.is-date-column,
#data-editor.theme-light .data-editor-sheet .jspreadsheet tbody td.is-date-column,
#data-editor.theme-light .data-editor-sheet .jss_spreadsheet tbody td.is-date-column {
  background: #dcf7f3;
  color: #0f4f4a;
}

#data-editor.theme-light .data-editor-col-indicator {
  background: #e2e8f0;
  color: #475569;
}

#data-editor.theme-light .data-editor-col-menu-trigger {
  color: #94a3b8;
}

#data-editor.theme-light .data-editor-col-menu-trigger:hover {
  background: #e2e8f0;
  color: #334155;
}

#data-editor.theme-light .data-editor-cell-ref {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #334155;
  min-width: 48px;
  padding: 4px 10px;
  font-size: 10pt;
  font-weight: 600;
  font-family: "Roboto", "Inter", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}

#data-editor.theme-light .data-editor-formula-label {
  color: #2563eb;
  font-size: 10pt;
  font-weight: 700;
  letter-spacing: 0;
}

#data-editor.theme-light .data-editor-formula input {
  color: #0f172a;
  font-size: 10pt;
  font-family: "Roboto", "Inter", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.35;
}

#data-editor.theme-light .data-editor-formula input::placeholder {
  color: #9ca3af;
}

#data-editor.theme-light .data-editor-column-suggestion {
  background: #f8fbff;
  border-color: #d8e1ec;
  color: #334155;
}

#data-editor.theme-light .data-editor-column-suggestion-actions button {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #334155;
}

#data-editor.theme-light .data-editor-column-suggestion-actions button:hover {
  border-color: #94a3b8;
}

#data-editor.theme-light .data-editor-mapping {
  background: #f8fafc;
  border-color: #e5e7eb;
}

#data-editor.theme-light .data-editor-mapping-toggle {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

#data-editor.theme-light .data-editor-mapping-toggle:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

#data-editor.theme-light .data-editor-mapping-toggle::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='18' viewBox='0 0 12 18' fill='none'><path d='M8.5 1.5L3 9l5.5 7.5' stroke='%23475569' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

#data-editor.theme-light .data-editor-table-wrap,
#data-editor.theme-light .data-editor-sheet .jss_content,
#data-editor.theme-light .data-editor-sheet .jexcel_content,
#data-editor.theme-light .data-editor-sheet .jspreadsheet_content,
#data-editor.theme-light .data-editor-mapping-body {
  scrollbar-color: rgba(71, 85, 105, 0.55) transparent;
}

#data-editor.theme-light .data-editor-table-wrap::-webkit-scrollbar-track,
#data-editor.theme-light .data-editor-sheet .jss_content::-webkit-scrollbar-track,
#data-editor.theme-light .data-editor-sheet .jexcel_content::-webkit-scrollbar-track,
#data-editor.theme-light .data-editor-sheet .jspreadsheet_content::-webkit-scrollbar-track,
#data-editor.theme-light .data-editor-mapping-body::-webkit-scrollbar-track {
  background: transparent;
}

#data-editor.theme-light .data-editor-table-wrap::-webkit-scrollbar-corner,
#data-editor.theme-light .data-editor-sheet .jss_content::-webkit-scrollbar-corner,
#data-editor.theme-light .data-editor-sheet .jexcel_content::-webkit-scrollbar-corner,
#data-editor.theme-light .data-editor-sheet .jspreadsheet_content::-webkit-scrollbar-corner,
#data-editor.theme-light .data-editor-mapping-body::-webkit-scrollbar-corner {
  background: transparent;
}

#data-editor.theme-light .data-editor-table-wrap::-webkit-scrollbar-thumb,
#data-editor.theme-light .data-editor-sheet .jss_content::-webkit-scrollbar-thumb,
#data-editor.theme-light .data-editor-sheet .jexcel_content::-webkit-scrollbar-thumb,
#data-editor.theme-light .data-editor-sheet .jspreadsheet_content::-webkit-scrollbar-thumb,
#data-editor.theme-light .data-editor-mapping-body::-webkit-scrollbar-thumb {
  background: rgba(71, 85, 105, 0.78);
  border-color: transparent;
}

#data-editor.theme-light .data-editor-error {
  color: #b91c1c;
}

#data-editor.theme-light .data-editor-table thead th {
  background: #f3f4f6;
  color: #6b7280;
  border-bottom-color: #e5e7eb;
}

#data-editor.theme-light .data-editor-col-letter {
  color: #6b7280;
}

#data-editor.theme-light .data-editor-col-title {
  color: #111827;
}

#data-editor.theme-light .data-editor-col-title.is-muted {
  color: #9ca3af;
}

#data-editor.theme-light .data-editor-table thead th.is-date-column {
  background: #d6f5f1;
  color: #0f4f4a;
}

#data-editor.theme-light .data-editor-table thead th.is-header-selected {
  background: #dbeafe;
  color: #1d4ed8;
}

#data-editor.theme-light .data-editor-table tbody tr {
  border-bottom-color: #e5e7eb;
}

#data-editor.theme-light .data-editor-table tbody tr:nth-child(even) {
  background: #ffffff;
}

#data-editor.theme-light .data-editor-table tbody tr:hover {
  background: #f3f4f6;
}

#data-editor.theme-light .data-editor-table input {
  background: transparent;
  color: #111827;
  border-color: transparent;
}

#data-editor.theme-light .data-editor-table input:focus {
  background: #ffffff;
}

#data-editor.theme-light .data-editor-row-header.is-header-selected {
  background: #dbeafe;
  color: #1d4ed8;
}

#data-editor.theme-light .data-editor-table td.is-date-column input {
  background: transparent;
}

#data-editor.theme-light .data-editor-table td.is-selected-range input {
  background: #e0ecff;
}

#data-editor.theme-light .data-editor-table td.is-selected input {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.9) inset;
}

#data-editor.theme-light .data-editor-table td.is-formula input {
  color: #1d4ed8;
}

#data-editor.theme-light .data-editor-table td.is-fill-range input {
  background: #dbeafe;
}

#data-editor:not(.theme-light) .data-editor-table-wrap {
  background: #0b0c10;
  border-color: transparent;
}

#data-editor:not(.theme-light) .data-editor-table thead th {
  background: #151922;
  color: #d1d5db;
  border-bottom-color: #1f2937;
}

#data-editor:not(.theme-light) .data-editor-table thead th.is-date-column {
  background: #0f2a2a;
  color: #9fe7dd;
}

#data-editor:not(.theme-light) .data-editor-table thead th.is-header-selected {
  background: #1e2a44;
  color: #bfdbfe;
}

#data-editor:not(.theme-light) .data-editor-table tbody tr {
  border-bottom-color: #1f2937;
}

#data-editor:not(.theme-light) .data-editor-table tbody tr:nth-child(even) {
  background: #0b0c10;
}

#data-editor:not(.theme-light) .data-editor-table tbody tr:hover {
  background: #0f1621;
}

#data-editor:not(.theme-light) .data-editor-table tbody td.is-date-column {
  background: #102f2c;
}

#data-editor:not(.theme-light) .data-editor-table tbody td.is-date-column input {
  color: #b6f2e8;
}

#data-editor:not(.theme-light) .data-editor-table td {
  border-color: #1f2937;
}

#data-editor:not(.theme-light) .data-editor-table input {
  color: #f8fafc;
}

#data-editor:not(.theme-light) .data-editor-table tbody tr.is-active-row td {
  background: #111827;
}

#data-editor:not(.theme-light) .data-editor-table tbody td.is-active-column {
  background: #0f172a;
}

#data-editor:not(.theme-light) .data-editor-table thead th.is-active-header,
#data-editor:not(.theme-light) .data-editor-table .data-editor-row-header.is-active-header {
  background: #1e2a44;
  color: #bfdbfe;
}

#data-editor:not(.theme-light) .data-editor-table td.is-selected-range input {
  background: #0b1526;
}

#data-editor:not(.theme-light) .data-editor-table td.is-selected input {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.9) inset;
}

#data-editor:not(.theme-light) .data-editor-table td.is-fill-range input {
  background: #0b1526;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_content,
#data-editor:not(.theme-light) .data-editor-sheet .jexcel_content,
#data-editor:not(.theme-light) .data-editor-sheet .jspreadsheet_content {
  background: #0b0c10 !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet {
  background: #0b0c10 !important;
  color: #e5e7eb !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet thead th,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel thead th,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet thead th,
#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet thead td,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel thead td,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet thead td {
  background: #151922 !important;
  color: #d1d5db !important;
  border-color: #1f2937 !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet tbody td,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel tbody td,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet tbody td {
  background: #0b0c10 !important;
  color: #e5e7eb !important;
  border-color: #1f2937 !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet tbody td.highlight,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel tbody td.highlight,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet tbody td.highlight {
  background: rgba(50, 197, 253, 0.12) !important;
  border-top-color: #1f2937 !important;
  border-bottom-color: #1f2937 !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet tbody td.highlight-selected,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel tbody td.highlight-selected,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet tbody td.highlight-selected {
  background: rgba(50, 197, 253, 0.08) !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet tbody td.highlight-selected.highlight-top.highlight-bottom.highlight-left.highlight-right {
  background: transparent !important;
  color: #e5e7eb !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet tbody td.highlight-left,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel tbody td.highlight-left,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet tbody td.highlight-left {
  border-left-color: #38bdf8 !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet tbody td.highlight-right,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel tbody td.highlight-right,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet tbody td.highlight-right {
  border-right-color: #38bdf8 !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet tbody td.highlight-top,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel tbody td.highlight-top,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet tbody td.highlight-top {
  border-top-color: #38bdf8 !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet tbody td.highlight-bottom,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel tbody td.highlight-bottom,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet tbody td.highlight-bottom {
  border-bottom-color: #38bdf8 !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet thead th.is-date-column,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel thead th.is-date-column,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet thead th.is-date-column,
#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet thead td.is-date-column,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel thead td.is-date-column,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet thead td.is-date-column {
  background: #0f2a2a !important;
  color: #9fe7dd !important;
}

#data-editor:not(.theme-light) .data-editor-sheet table.jss_worksheet tbody td.is-date-column,
#data-editor:not(.theme-light) .data-editor-sheet table.jexcel tbody td.is-date-column,
#data-editor:not(.theme-light) .data-editor-sheet table.jspreadsheet tbody td.is-date-column {
  background: #0c2323 !important;
  color: #9fe7dd !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_worksheet .selection-top {
  border-top-color: rgba(191, 219, 254, 0.9) !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_worksheet .selection-left {
  border-left-color: rgba(191, 219, 254, 0.9) !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_worksheet .selection-right {
  border-right-color: rgba(191, 219, 254, 0.9) !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_worksheet .selection-bottom {
  border-bottom-color: rgba(191, 219, 254, 0.9) !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_worksheet .copying-top {
  border-top-color: #7dd3fc !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_worksheet .copying-left {
  border-left-color: #7dd3fc !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_worksheet .copying-right {
  border-right-color: #7dd3fc !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_worksheet .copying-bottom {
  border-bottom-color: #7dd3fc !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_worksheet .dragline div {
  background: rgba(56, 189, 248, 0.65) !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_corner {
  background: #151922 !important;
  border-color: #1f2937 !important;
}

#data-editor:not(.theme-light) .data-editor-sheet .jss_selectall,
#data-editor:not(.theme-light) .data-editor-sheet .jexcel_selectall {
  background: #151922 !important;
  border-color: #1f2937 !important;
}

#data-editor.theme-light #data-editor-fill-handle {
  background: #2563eb;
  border-color: #1d4ed8;
}

#data-editor.theme-light .data-editor-mapping {
  background: #f8fafc;
  border-color: #e5e7eb;
}

#data-editor.theme-light .data-editor-section-title,
#data-editor.theme-light .data-editor-mapping-header,
#data-editor.theme-light .data-editor-mapping-card label {
  color: #475569;
}

#data-editor.theme-light .data-editor-mapping-letter {
  color: #64748b;
}

#data-editor.theme-light .data-editor-mapping-row.is-group-child .data-editor-mapping-letter {
  color: #94a3b8;
}

#data-editor.theme-light .data-editor-group-label {
  color: #334155;
}

#data-editor.theme-light .data-editor-group-marker::before,
#data-editor.theme-light .data-editor-group-marker::after {
  border-color: rgba(100, 116, 139, 0.75);
}

#data-editor.theme-light .data-editor-mapping-card {
  background: #ffffff;
  border-color: #e5e7eb;
}

#data-editor.theme-light .data-editor-schema-rules {
  color: #64748b;
}

#data-editor.theme-light .data-editor-mapping-card select,
#data-editor.theme-light #data-editor-date-column {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #111827;
}

#data-editor.theme-light .data-editor-mapping-row input[type="text"] {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #111827;
}

#data-editor.theme-light .data-editor-axis-select {
  background: #ffffff;
  border-color: #cbd5e1;
  color: #111827;
}

#data-editor.theme-light .data-editor-text-button {
  color: #2563eb;
}

#data-editor.theme-light .data-editor-text-button:hover {
  color: #1d4ed8;
}

#data-editor.theme-light .data-editor-color-button {
  border-color: #cbd5e1;
}

#data-editor.theme-light .data-editor-mapping-remove {
  border-color: #cbd5e1;
  color: #6b7280;
}

#data-editor.theme-light .data-editor-mapping-remove:hover {
  border-color: #94a3b8;
  color: #111827;
}

#data-editor.theme-light .data-editor-context-menu {
  background: #ffffff;
  border-color: #d8dce3;
  box-shadow: 0 6px 20px rgba(60, 64, 67, 0.28);
}

#data-editor.theme-light .data-editor-context-menu button {
  color: #1f2937;
}

#data-editor.theme-light .data-editor-context-menu button:hover {
  background: #f1f3f4;
}

#data-editor.theme-light .data-editor-context-menu button:disabled {
  color: #94a3b8;
}

#data-editor.theme-light .data-editor-context-menu button:disabled:hover {
  background: transparent;
}

#data-editor.theme-light .data-editor-context-divider {
  background: #e5e7eb;
}

.edit-text-input {
  position: absolute;
  z-index: 7;
  background: transparent;
  color: #ffffff;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  resize: none;
  outline: none;
  user-select: text;
  overflow: hidden;
  scrollbar-width: none;
}

.edit-text-input::-webkit-scrollbar {
  display: none;
}

@media (max-width: 900px) {
  .data-editor-layout {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .data-editor-mapping {
    max-height: 32vh;
    border-left: 0;
    border-top: 1px solid #1f2937;
  }

  .data-editor-layout.is-mapping-collapsed {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) 44px;
  }

  .data-editor-sheet-tools {
    padding: 8px 10px;
  }
}

/* Auth overlay */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 18, 0.45);
  backdrop-filter: blur(10px) saturate(1.1);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  z-index: 60;
}

.auth-overlay.is-open {
  display: flex;
}

.auth-card {
  width: min(1040px, 100%);
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  overflow: hidden;
  box-shadow: 0 36px 80px rgba(2, 6, 23, 0.55);
}

.auth-card.auth-card-single {
  width: min(620px, 100%);
  grid-template-columns: 1fr;
}

.auth-card.auth-card-single .auth-panel {
  padding: 44px 40px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.auth-hero {
  padding: 44px 48px;
  background: radial-gradient(circle at 15% 20%, rgba(34, 211, 238, 0.22), transparent 48%),
    radial-gradient(circle at 85% 10%, rgba(59, 130, 246, 0.28), transparent 46%),
    linear-gradient(140deg, #0b1220, #101826 55%, #141f36);
  color: #f8fafc;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-logo {
  width: 136px;
  height: auto;
}

.auth-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 16px;
}

.auth-brand-panel {
  margin-bottom: 36px;
}

.auth-brand-tagline {
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(248, 250, 252, 0.9);
}

.auth-hero-title {
  font-family: var(--font-sans);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 600;
  line-height: 1.18;
}

.auth-hero-copy {
  color: rgba(240, 246, 255, 0.75);
  font-size: 16px;
  line-height: 1.75;
}

.auth-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.auth-highlights li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.auth-highlights span {
  font-size: 15px;
  font-family: var(--font-sans);
  font-weight: 700;
}

.auth-highlights em {
  font-style: normal;
  font-size: 13px;
  color: rgba(226, 232, 240, 0.7);
  line-height: 1.5;
}

.auth-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
}

.auth-meta-item {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  background: rgba(15, 23, 42, 0.4);
}

.auth-panel {
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  background: var(--panel-bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: 16px;
  box-shadow: var(--panel-shadow), var(--panel-inset);
}

.auth-panel-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-title {
  font-size: 22px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: #f8fafc;
}

.auth-subtitle {
  color: rgba(226, 232, 240, 0.7);
  font-size: 13px;
  line-height: 1.6;
}

.auth-tabs {
  display: flex;
  gap: 8px;
}

.auth-tab {
  flex: 1;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(15, 23, 42, 0.8);
  color: rgba(226, 232, 240, 0.7);
  padding: 8px 0;
  cursor: pointer;
}

.auth-tab.is-active {
  background: #1f2937;
  color: #ffffff;
  border-color: rgba(148, 163, 184, 0.45);
}

.auth-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-providers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-providers.is-hidden {
  display: none;
}

.auth-provider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(15, 23, 42, 0.85);
  padding: 10px 14px;
  font-size: 13px;
  color: #f8fafc;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.auth-provider:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(2, 6, 23, 0.5);
}

.auth-provider.is-disabled {
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(15, 23, 42, 0.65);
  color: rgba(226, 232, 240, 0.55);
}

.auth-provider.is-disabled:hover {
  transform: none;
  box-shadow: none;
}

.auth-provider-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #ffffff;
}

.auth-provider-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.auth-provider.is-disabled .auth-provider-icon {
  opacity: 1;
}

.auth-provider.is-hidden {
  display: none;
}

.auth-divider {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(148, 163, 184, 0.7);
  display: flex;
  align-items: center;
  gap: 12px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.auth-divider.is-hidden {
  display: none;
}

.auth-provider-note {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.7);
  min-height: 16px;
}

.auth-form {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.auth-form.is-active {
  display: flex;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.7);
}

.auth-field input {
  background: #0b1220;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 12px;
  color: #f8fafc;
}

.auth-field input::placeholder {
  color: rgba(148, 163, 184, 0.6);
}

.auth-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.auth-input-row input {
  flex: 1;
}

.auth-toggle {
  border: none;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(226, 232, 240, 0.7);
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
}

.auth-hint {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.75);
}

.auth-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.auth-actions-row {
  align-items: center;
  justify-content: space-between;
}

.auth-submit {
  margin-top: 6px;
  align-self: flex-start;
  width: auto;
}

.auth-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: rgba(226, 232, 240, 0.7);
}

.auth-remember input {
  width: 16px;
  height: 16px;
  accent-color: #38bdf8;
}

.auth-link {
  font-size: 12px;
  color: rgba(148, 163, 184, 0.8);
}

.auth-legal {
  font-size: 11px;
  color: rgba(148, 163, 184, 0.7);
  line-height: 1.5;
}

.auth-note {
  min-height: 16px;
  font-size: 12px;
  color: rgba(248, 113, 113, 0.95);
}

.auth-invite-note {
  font-size: 12px;
  color: rgba(226, 232, 240, 0.8);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(14, 116, 144, 0.18);
  border: 1px solid rgba(14, 116, 144, 0.35);
}

.auth-invite-note.is-hidden {
  display: none;
}

.auth-user {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.auth-user-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.auth-user-trigger:hover,
.auth-user-trigger:focus-visible,
.auth-user.is-open .auth-user-trigger {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f4f8fc;
  outline: none;
}

.auth-user-avatar {
  width: 18px;
  height: 18px;
  color: rgba(198, 231, 235, 0.84);
}

.auth-user-caret {
  width: 14px;
  height: 14px;
  color: rgba(186, 200, 214, 0.54);
  transition: transform 140ms ease;
}

.auth-user.is-open .auth-user-caret {
  transform: rotate(180deg);
}

.auth-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 220px;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(7, 15, 24, 0.98);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.32);
  z-index: 80;
}

.auth-user-menu-header {
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 4px;
}

.auth-user-menu-email {
  font-size: 12px;
  font-weight: 600;
  color: rgba(247, 251, 255, 0.92);
  word-break: break-word;
}

.auth-user-menu.is-open {
  display: flex;
}

.auth-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: rgba(240, 246, 252, 0.82);
  font-size: 12px;
  font-family: inherit;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

.auth-user-menu-item:hover,
.auth-user-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  outline: none;
}

.auth-user-menu-item.is-danger {
  color: rgba(240, 171, 171, 0.9);
}

.auth-user-menu-item.is-danger:hover,
.auth-user-menu-item.is-danger:focus-visible {
  border-color: rgba(240, 142, 142, 0.22);
  background: rgba(240, 142, 142, 0.08);
}

.auth-user.is-hidden {
  display: none;
}

.auth-admin.is-hidden {
  display: none;
}

.auth-examples-admin.is-hidden {
  display: none;
}

.settings-page .project-main {
  flex: 1;
  padding: 40px 36px 56px;
}

.settings-shell {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings-page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.settings-page-kicker {
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.settings-page-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.settings-page-subtitle {
  max-width: 720px;
  margin-top: 8px;
  font-size: 14px;
  color: rgba(223, 231, 240, 0.64);
}

.usage-page-summary-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.usage-page-summary-line:first-child {
  margin-top: 0;
}

.usage-page-summary-note {
  margin-top: 8px;
  line-height: 1.5;
  color: rgba(223, 231, 240, 0.56);
}

.settings-hero-actions,
.settings-panel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.usage-stat-grid,
.settings-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.usage-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
  gap: 16px;
}

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

.usage-stat-card,
.settings-panel {
  background: var(--panel-bg-primary);
  border: 1px solid var(--panel-border);
  border-radius: 18px;
  padding: 20px 22px;
  box-shadow: var(--panel-shadow), var(--panel-inset);
}

.usage-stat-head,
.settings-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.usage-stat-label,
.settings-panel-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(232, 239, 246, 0.82);
}

.usage-stat-value {
  margin-top: 16px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.usage-stat-inline-value {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.usage-stat-meta,
.settings-panel-copy,
.settings-field-hint {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(214, 224, 236, 0.52);
}

.usage-stat-card-primary {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.usage-stat-split {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4px;
}

.usage-stat-inline-icon {
  width: 18px;
  height: 18px;
  color: rgba(207, 239, 243, 0.82);
}

.usage-stat-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.usage-stat-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(221, 230, 239, 0.72);
}

.usage-balance-panel {
  margin-top: -8px;
}

.usage-progress {
  --usage-progress: 0%;
  position: relative;
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.usage-progress-bar {
  width: var(--usage-progress);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(50, 197, 253, 0.96), rgba(94, 164, 255, 0.78));
}

.usage-progress[data-usage-state="amber"] .usage-progress-bar {
  background: linear-gradient(90deg, rgba(50, 197, 253, 0.96), rgba(94, 164, 255, 0.78));
}

.usage-progress[data-usage-state="warning"] .usage-progress-bar {
  background: linear-gradient(90deg, rgba(50, 197, 253, 0.96), rgba(94, 164, 255, 0.78));
}

.usage-progress-meta {
  font-size: 12px;
  color: rgba(221, 230, 239, 0.72);
}

.settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 18px;
}

.settings-panel-list,
.usage-activity-list,
.invoice-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.settings-panel-row,
.usage-activity-item,
.invoice-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

.usage-activity-main,
.invoice-item-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.usage-activity-title,
.invoice-item-title,
.settings-field label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(244, 248, 252, 0.9);
}

.usage-activity-copy,
.invoice-item-copy {
  margin-top: 4px;
  font-size: 12px;
  color: rgba(214, 224, 236, 0.56);
}

.usage-activity-credit,
.invoice-item-meta {
  font-size: 12px;
  color: rgba(244, 248, 252, 0.78);
  white-space: nowrap;
}

.settings-form {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.settings-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-field input,
.settings-field select,
.settings-field textarea {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  color: #f2f7fb;
  font-size: 13px;
}

.settings-field textarea {
  min-height: 92px;
  resize: vertical;
}

.settings-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.settings-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(232, 239, 246, 0.78);
  font-size: 12px;
}

@media (max-width: 980px) {
  .project-header {
    flex-wrap: wrap;
    align-items: stretch;
  }
  .project-topnav {
    order: 3;
    width: 100%;
    flex-wrap: wrap;
  }
  .project-header-status {
    margin-left: auto;
  }
  .project-header-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .usage-stat-grid,
  .usage-dashboard-grid,
  .settings-card-grid,
  .settings-grid,
  .settings-form-grid {
    grid-template-columns: 1fr;
  }
  .project-usage-widget-shell {
    width: min(240px, 100%);
  }
  .project-usage-widget {
    width: 100%;
  }
  .auth-card {
    grid-template-columns: 1fr;
  }
  .auth-hero,
  .auth-panel {
    padding: 32px;
  }
  .auth-meta {
    margin-top: 8px;
  }
}

.admin-dashboard {
  background:
    radial-gradient(circle at top left, rgba(50, 197, 253, 0.14), transparent 34%),
    radial-gradient(circle at top right, rgba(71, 138, 243, 0.12), transparent 28%),
    linear-gradient(180deg, #0e1116 0%, #0b0d11 100%);
}

.admin-shell .project-header {
  width: min(1280px, calc(100% - 48px));
  margin: 0 auto;
  padding: 28px 0 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.admin-dashboard .project-main {
  width: min(1280px, 100%);
  margin: 0 auto;
  padding: 28px 24px 48px;
}

.admin-page-shell {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.admin-page-hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-page-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(159, 176, 193, 0.72);
}

.admin-page-title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: #f4f8fc;
}

.admin-page-subtitle {
  max-width: 64ch;
  margin: 0;
  color: rgba(207, 219, 232, 0.74);
  font-size: 15px;
  line-height: 1.6;
}

.admin-page-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.admin-page-meta-copy {
  color: rgba(186, 199, 213, 0.68);
  font-size: 13px;
  line-height: 1.5;
}

.admin-control-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.admin-control-rail {
  position: sticky;
  top: 24px;
}

.admin-nav-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    rgba(9, 13, 18, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 20px 48px rgba(0, 0, 0, 0.22);
}

.admin-nav-title {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(164, 180, 195, 0.58);
}

.admin-nav-link {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    transform 160ms ease;
}

.admin-nav-link:hover,
.admin-nav-link:focus-visible {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  outline: none;
}

.admin-nav-link.is-active {
  border-color: rgba(50, 197, 253, 0.18);
  background: rgba(50, 197, 253, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}

.admin-nav-label {
  font-size: 15px;
  font-weight: 700;
  color: #eef6fc;
}

.admin-nav-copy {
  color: rgba(180, 194, 208, 0.7);
  font-size: 12px;
  line-height: 1.5;
}

.admin-main-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.admin-major-section {
  scroll-margin-top: 24px;
}

.admin-section-header-row,
.admin-major-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.admin-section-eyebrow {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(164, 180, 195, 0.58);
}

.admin-overview-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.admin-alert {
  position: sticky;
  top: 14px;
  z-index: 30;
  align-self: flex-end;
  min-width: 280px;
  max-width: min(420px, 100%);
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(32, 196, 140, 0.12);
  border: 1px solid rgba(32, 196, 140, 0.28);
  color: rgba(240, 255, 248, 0.92);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.admin-alert[data-kind="error"] {
  background: rgba(240, 142, 142, 0.12);
  border-color: rgba(240, 142, 142, 0.3);
  color: rgba(255, 220, 220, 0.92);
}

.admin-alert[data-kind="info"] {
  background: rgba(50, 197, 253, 0.12);
  border-color: rgba(50, 197, 253, 0.28);
  color: rgba(225, 244, 255, 0.92);
}

.admin-alert[data-kind="success"] {
  background: rgba(50, 197, 253, 0.12);
  border-color: rgba(50, 197, 253, 0.28);
  color: rgba(225, 244, 255, 0.92);
}

.admin-surface {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0)),
    rgba(8, 12, 18, 0.88);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02),
    0 20px 48px rgba(0, 0, 0, 0.24);
}

.admin-surface-priority {
  padding-top: 26px;
}

.admin-panel-head,
.admin-section-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.admin-panel-title,
.admin-section-title {
  font-size: 22px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #f3f7fb;
}

.admin-panel-subtitle,
.admin-section-subtitle {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(199, 211, 224, 0.7);
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.admin-toolbar-compact {
  margin-top: -4px;
}

.admin-toolbar-search {
  display: flex;
  flex: 1 1 360px;
  flex-direction: column;
  gap: 8px;
  min-width: 260px;
}

.admin-toolbar-label,
.admin-toolbar-field span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(169, 185, 201, 0.62);
}

.admin-toolbar-filters {
  display: flex;
  flex: 0 1 auto;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-toolbar-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 150px;
}

.admin-toolbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-left: auto;
}

.admin-search,
.admin-input,
.admin-select {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.035);
  color: #f1f5f8;
  font-size: 14px;
  transition:
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.admin-search::placeholder,
.admin-input::placeholder {
  color: rgba(168, 181, 195, 0.56);
}

.admin-search:focus,
.admin-input:focus,
.admin-select:focus {
  outline: none;
  border-color: rgba(50, 197, 253, 0.42);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(50, 197, 253, 0.12);
}

.admin-summary-grid,
.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

.admin-summary-grid-compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.admin-summary-card,
.admin-metric-card,
.admin-top-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 112px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.028);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.015);
}

.admin-summary-card-active {
  background: rgba(107, 207, 156, 0.06);
  border-color: rgba(107, 207, 156, 0.18);
}

.admin-summary-card-trial {
  background: rgba(228, 184, 96, 0.07);
  border-color: rgba(228, 184, 96, 0.18);
}

.admin-summary-card-warning {
  background: rgba(247, 174, 92, 0.07);
  border-color: rgba(247, 174, 92, 0.18);
}

.admin-summary-label,
.admin-metric-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(168, 183, 198, 0.62);
}

.admin-summary-value,
.admin-metric-value {
  font-size: 26px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #f6fbff;
}

.admin-summary-meta,
.admin-metric-unit {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(181, 195, 210, 0.64);
}

.admin-data-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(4, 8, 13, 0.48);
}

.admin-card-header,
.admin-metric-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.admin-card-title {
  font-size: 18px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #edf4fa;
}

.admin-card-subtitle {
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(184, 197, 212, 0.66);
}

.admin-table {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-row {
  display: grid;
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 20, 0.9);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

.admin-row:hover,
.admin-row:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(12, 17, 23, 0.96);
  box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2);
  outline: none;
}

.admin-row.is-selected {
  border-color: rgba(50, 197, 253, 0.26);
  box-shadow:
    0 16px 28px rgba(0, 0, 0, 0.2),
    0 0 0 1px rgba(50, 197, 253, 0.18);
}

.admin-row-header {
  padding: 0 18px;
  border: none;
  background: transparent;
  box-shadow: none;
  color: rgba(163, 176, 191, 0.58);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.admin-row-header:hover,
.admin-row-header:focus-visible {
  transform: none;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

.admin-org-row {
  grid-template-columns: minmax(250px, 2.2fr) minmax(200px, 1.4fr) minmax(90px, 0.6fr) minmax(140px, 0.8fr) minmax(140px, 0.85fr) minmax(110px, 0.7fr);
}

.admin-user-row {
  grid-template-columns: minmax(260px, 2fr) minmax(140px, 0.9fr) minmax(120px, 0.8fr) minmax(110px, 0.7fr) minmax(180px, 1fr) minmax(100px, 0.6fr);
}

.admin-events-row {
  grid-template-columns: minmax(150px, 0.9fr) minmax(220px, 1.1fr) minmax(160px, 0.8fr) minmax(140px, 0.7fr) minmax(220px, 1.1fr);
}

.admin-early-access-row {
  grid-template-columns: minmax(150px, 0.8fr) minmax(260px, 1.35fr) minmax(220px, 1.1fr) minmax(110px, 0.6fr) minmax(240px, 1.2fr);
}

.admin-insight-stack {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}

.admin-cell {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(235, 241, 247, 0.88);
  font-size: 13px;
}

.admin-cell::before {
  display: none;
  content: attr(data-label);
}

.admin-cell-stack {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.admin-cell-title {
  font-size: 15px;
  font-weight: 600;
  color: #edf5fb;
  line-height: 1.3;
}

.admin-cell-meta,
.admin-cell-secondary {
  color: rgba(176, 191, 206, 0.66);
  font-size: 12px;
  line-height: 1.5;
}

.admin-cell-primary {
  align-items: flex-start;
}

.admin-cell-numeric {
  font-weight: 600;
  color: rgba(243, 247, 252, 0.92);
}

.admin-cell-badges {
  align-items: flex-start;
}

.admin-cell-actions {
  justify-content: flex-end;
}

.admin-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(226, 234, 242, 0.82);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.admin-status-badge-active {
  border-color: rgba(107, 207, 156, 0.2);
  background: rgba(107, 207, 156, 0.08);
  color: rgba(214, 245, 226, 0.92);
}

.admin-status-badge-trial {
  border-color: rgba(228, 184, 96, 0.22);
  background: rgba(228, 184, 96, 0.08);
  color: rgba(247, 231, 200, 0.94);
}

.admin-status-badge-warning {
  border-color: rgba(247, 174, 92, 0.22);
  background: rgba(247, 174, 92, 0.08);
  color: rgba(251, 229, 196, 0.92);
}

.admin-status-badge-suspended {
  border-color: rgba(255, 159, 122, 0.22);
  background: rgba(255, 159, 122, 0.08);
  color: rgba(255, 226, 214, 0.92);
}

.admin-status-badge-archived {
  border-color: rgba(162, 176, 191, 0.18);
  background: rgba(162, 176, 191, 0.07);
  color: rgba(223, 231, 239, 0.86);
}

.admin-status-badge-tier {
  border-color: rgba(50, 197, 253, 0.18);
  background: rgba(50, 197, 253, 0.08);
  color: rgba(219, 246, 255, 0.92);
}

.admin-checkbox {
  width: 18px;
  height: 18px;
  accent-color: #32c5fd;
}

.admin-org-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 0.95fr);
  gap: 18px;
  align-items: start;
}

.admin-org-list-card {
  min-width: 0;
}

.admin-detail-surface {
  position: sticky;
  top: 24px;
  gap: 18px;
}

.admin-detail-layout {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}

.admin-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
  color: rgba(197, 210, 224, 0.75);
}

.admin-field span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(166, 181, 196, 0.62);
}

.admin-field-wide {
  grid-column: 1 / -1;
}

.admin-textarea {
  min-height: 110px;
  resize: vertical;
}

.admin-detail-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.admin-top-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.admin-top-card {
  min-height: 0;
}

.admin-top-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 13px;
}

.admin-top-item:first-of-type {
  padding-top: 2px;
  border-top: none;
}

.admin-top-key {
  color: rgba(232, 239, 246, 0.86);
}

.admin-top-count {
  color: rgba(171, 186, 201, 0.7);
  font-weight: 600;
}

.admin-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  border-radius: 16px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
}

.admin-empty-title {
  font-size: 18px;
  font-weight: 700;
  color: #edf4fa;
}

.admin-empty-body {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(184, 197, 212, 0.68);
}

.admin-row-skeleton {
  pointer-events: none;
}

.admin-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
}

.admin-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
  animation: admin-skeleton-shimmer 1.2s ease-in-out infinite;
}

.admin-skeleton-label {
  width: 72px;
  height: 10px;
}

.admin-skeleton-value {
  width: 104px;
  height: 24px;
}

.admin-skeleton-meta,
.admin-skeleton-line {
  width: 100%;
  height: 12px;
}

.admin-skeleton-line.short {
  width: 58%;
}

.admin-skeleton-line.wide {
  width: 82%;
}

@keyframes admin-skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
}

.admin-modal[hidden] {
  display: none;
}

.admin-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 11, 0.72);
  backdrop-filter: blur(8px);
}

.admin-modal-card {
  position: relative;
  z-index: 1;
  width: min(520px, calc(100vw - 32px));
  margin: 10vh auto 0;
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(11, 15, 20, 0.96);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.34);
}

.admin-modal-header,
.admin-modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-modal-header {
  margin-bottom: 18px;
}

.admin-modal-note {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(184, 197, 212, 0.68);
}

body.admin-modal-open {
  overflow: hidden;
}

@media (max-width: 1100px) {
  .admin-control-layout,
  .admin-org-workspace,
  .admin-insights-grid {
    grid-template-columns: 1fr;
  }

  .admin-control-rail,
  .admin-detail-surface {
    position: static;
  }

  .admin-nav-card {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
  }

  .admin-nav-title {
    grid-column: 1 / -1;
  }
}

@media (max-width: 960px) {
  .admin-shell .project-header {
    width: calc(100% - 32px);
    padding: 22px 0 18px;
    gap: 16px;
    flex-wrap: wrap;
  }

  .admin-dashboard .project-main {
    padding: 22px 16px 40px;
  }

  .admin-alert {
    align-self: stretch;
    max-width: none;
  }

  .admin-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-toolbar-filters,
  .admin-toolbar-actions {
    width: 100%;
    margin-left: 0;
  }

  .admin-toolbar-actions {
    justify-content: stretch;
  }

  .admin-toolbar-actions .project-button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .admin-top-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 767px) {
  .admin-shell .project-header {
    width: calc(100% - 24px);
    padding: 18px 0 14px;
  }

  .admin-page-shell {
    gap: 24px;
  }

  .admin-page-title {
    font-size: 28px;
  }

  .admin-page-meta {
    align-items: flex-start;
  }

  .admin-surface,
  .admin-data-card,
  .admin-modal-card {
    padding: 18px;
  }

  .admin-nav-card {
    grid-template-columns: 1fr;
  }

  .admin-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .admin-row-header {
    display: none;
  }

  .admin-cell {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .admin-cell::before {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(161, 177, 193, 0.58);
  }

  .admin-cell-actions {
    align-items: stretch;
  }

  .admin-actions,
  .admin-detail-actions {
    width: 100%;
    justify-content: stretch;
  }

  .admin-actions .project-button,
  .admin-detail-actions .project-button {
    flex: 1 1 auto;
    justify-content: center;
  }

  .admin-field-wide {
    grid-column: auto;
  }
}

.examples-admin-help-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed rgba(125, 211, 252, 0.22);
  background: rgba(125, 211, 252, 0.06);
  color: rgba(228, 244, 255, 0.82);
  font-size: 12px;
  line-height: 1.5;
}

.examples-admin-help-note span {
  color: #e2eff9;
}

.examples-admin-thumbnail-upload {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 8px;
  flex-wrap: wrap;
}

.examples-admin-upload-status {
  font-size: 12px;
  color: rgba(191, 219, 254, 0.75);
}

.examples-admin-dashboard .project-brand {
  flex: 1 1 auto;
  min-width: 0;
}

.examples-admin-dashboard .project-tagline {
  margin-left: auto;
  text-align: right;
}

.examples-admin-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.4fr);
  gap: 24px;
}

.examples-admin-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
}

.examples-admin-list {
  display: grid;
  gap: 12px;
}

.examples-admin-list-item {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 18px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.16);
  background: rgba(15, 23, 42, 0.56);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.examples-admin-list-item:hover,
.examples-admin-list-item:focus-visible,
.examples-admin-list-item.is-selected {
  border-color: rgba(125, 211, 252, 0.42);
  background: rgba(15, 23, 42, 0.78);
  transform: translateY(-1px);
}

.examples-admin-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.examples-admin-list-title {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
}

.examples-admin-list-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(56, 189, 248, 0.14);
  border: 1px solid rgba(56, 189, 248, 0.24);
  color: #bae6fd;
  font-size: 11px;
  font-weight: 700;
}

.examples-admin-list-meta {
  font-size: 12px;
  color: rgba(191, 219, 254, 0.74);
}

.examples-admin-list-summary {
  font-size: 13px;
  color: rgba(226, 232, 240, 0.82);
  line-height: 1.5;
}

.examples-admin-empty {
  padding: 24px 6px;
  color: rgba(148, 163, 184, 0.84);
}

.examples-admin-form {
  display: grid;
  gap: 20px;
}

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

.examples-admin-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  color: rgba(226, 232, 240, 0.9);
}

.examples-admin-checkbox input {
  width: 16px;
  height: 16px;
}

.examples-admin-meta {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.12);
  background: rgba(15, 23, 42, 0.42);
  color: rgba(226, 232, 240, 0.8);
  font-size: 13px;
  line-height: 1.5;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) {
  --panel-bg-primary: linear-gradient(180deg, rgba(11, 15, 20, 0.98), rgba(8, 11, 16, 0.98));
  --panel-bg-secondary: linear-gradient(180deg, rgba(16, 21, 28, 0.98), rgba(11, 15, 20, 0.98));
  --panel-border: rgba(255, 255, 255, 0.06);
  --panel-border-strong: rgba(255, 255, 255, 0.1);
  --panel-shadow: 0 12px 24px rgba(0, 0, 0, 0.26);
  --panel-inset: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  --button-fill: rgba(255, 255, 255, 0.03);
  --button-fill-hover: rgba(255, 255, 255, 0.06);
  --button-fill-active: rgba(255, 255, 255, 0.02);
  background: radial-gradient(circle at 12% 12%, #14181f 0%, #0a0d12 58%, #07090d 100%);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-header {
  gap: 18px;
  padding: 18px 24px;
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: linear-gradient(180deg, rgba(7, 10, 14, 0.94), rgba(7, 10, 14, 0.9));
  backdrop-filter: blur(10px);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-topnav {
  gap: 6px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-topnav-link {
  gap: 7px;
  padding: 9px 11px;
  border-radius: 10px;
  color: rgba(220, 228, 237, 0.68);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-topnav-link:hover,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-topnav-link:focus-visible {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
  color: rgba(244, 248, 252, 0.92);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-topnav-link.is-active {
  background: rgba(50, 197, 253, 0.08);
  border-color: rgba(50, 197, 253, 0.16);
  color: #f4f8fc;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-header-status {
  min-width: 170px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-header-actions {
  gap: 10px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-usage-widget {
  min-width: 228px;
  padding: 4px 0;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-usage-widget:hover,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-usage-widget:focus-visible,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-usage-widget-shell.is-open .project-usage-widget,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-usage-widget.is-active {
  background: transparent;
  box-shadow: none;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .usage-popover {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(7, 11, 16, 0.98);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-button {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 13px;
  background: var(--button-fill);
  color: rgba(239, 244, 248, 0.88);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-button:hover {
  background: var(--button-fill-hover);
  border-color: rgba(255, 255, 255, 0.12);
  transform: none;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-button:active {
  transform: none;
  box-shadow: none;
  background: var(--button-fill-active);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-button.primary {
  background: #32c5fd;
  border-color: rgba(50, 197, 253, 0.26);
  color: #08131a;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-button.primary:hover {
  background: #48cffd;
  border-color: rgba(72, 207, 253, 0.32);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .auth-user-trigger {
  gap: 10px;
  padding: 8px 11px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.025);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .auth-user-trigger:hover,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .auth-user-trigger:focus-visible,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .auth-user.is-open .auth-user-trigger {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .auth-user-menu {
  top: calc(100% + 8px);
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(7, 11, 16, 0.98);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .auth-user-menu-item {
  border-radius: 9px;
  padding: 9px 11px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-main {
  padding: 24px 28px 36px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-workspace {
  grid-template-columns: 228px minmax(0, 1fr);
  gap: 18px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar {
  gap: 14px;
  padding: 12px 10px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.05);
  background: rgba(9, 13, 18, 0.96);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-section {
  gap: 8px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-heading,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-toggle {
  padding: 0 6px;
  letter-spacing: 0.12em;
  color: rgba(197, 210, 224, 0.5);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-nav,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-tree {
  gap: 6px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-link,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-link {
  gap: 9px;
  padding: 9px 10px;
  border-radius: 10px;
  color: rgba(227, 235, 243, 0.78);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-link-content {
  gap: 9px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-icon,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-link .ui-icon {
  width: 15px;
  height: 15px;
  color: rgba(201, 214, 228, 0.66);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-icon svg {
  width: 15px;
  height: 15px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-link:hover,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-link:focus-visible,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-row:hover .project-sidebar-folder-body,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-row:focus-within .project-sidebar-folder-body {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.06);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-link.is-active,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-row.is-active .project-sidebar-folder-body {
  background: rgba(50, 197, 253, 0.08);
  border-color: rgba(50, 197, 253, 0.16);
  box-shadow: none;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-body {
  border-radius: 12px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-link {
  padding: 9px 8px 9px 10px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 0;
  width: 100%;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-name {
  font-size: 12px;
  font-weight: 600;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-meta {
  grid-column: 2;
  justify-self: end;
  font-size: 10px;
  white-space: nowrap;
  color: rgba(191, 204, 218, 0.56);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-actions {
  padding: 6px 6px 0 0;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-menu-trigger {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 17px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-menu,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-menu {
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(7, 11, 16, 0.98);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.28);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-sidebar-folder-menu-item,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-menu-item {
  border-radius: 8px;
  padding: 8px 9px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-toolbar {
  gap: 12px;
  margin-bottom: 18px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-toolbar-summary {
  gap: 6px;
  margin: -8px 0 10px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-summary-chip {
  padding: 3px 9px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.025);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-toolbar-compact {
  gap: 12px;
  margin-bottom: 14px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-toolbar-main {
  gap: 10px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-search input,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-filter select,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-search-wide input,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-modal-card input,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-modal-card select {
  border-radius: 8px;
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-search-wide input {
  height: 40px;
  border-radius: 10px;
  padding-right: 72px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-search-wide {
  position: relative;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-search-shortcut {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 24px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(188, 201, 215, 0.68);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  pointer-events: none;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-filters-panel {
  padding: 14px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(9, 13, 18, 0.94);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-filters-grid {
  gap: 12px 14px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-list-shell {
  gap: 16px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-list {
  gap: 14px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row {
  grid-template-columns: 260px minmax(0, 1fr) 118px;
  gap: 20px;
  align-items: start;
  border-radius: 12px;
  padding: 18px;
  border-color: rgba(255, 255, 255, 0.06);
  background: rgba(10, 14, 19, 0.96);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.14);
  transition:
    transform 200ms ease,
    border-color 200ms ease,
    background 200ms ease,
    box-shadow 200ms ease;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.1);
  background: rgba(13, 17, 23, 0.98);
  box-shadow: 0 14px 24px rgba(0, 0, 0, 0.18);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row.is-menu-open {
  z-index: 40;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail {
  width: 260px;
  height: 260px;
  align-self: start;
  justify-self: start;
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.055);
  background: rgba(7, 11, 16, 0.98);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 4px 10px rgba(0, 0, 0, 0.12);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail::before {
  z-index: 0;
  inset: 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.012), rgba(255, 255, 255, 0));
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail::after {
  inset: 4px;
  border-radius: 12px;
  border-color: rgba(255, 255, 255, 0.04);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail-image {
  inset: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  border-radius: 12px;
  filter: saturate(0.94) contrast(1.03);
  transition: transform 180ms ease, filter 180ms ease;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail .project-row-thumbnail-icon {
  position: relative;
  z-index: 1;
  width: 96px;
  height: 96px;
  color: rgba(221, 240, 248, 0.96);
  transition: transform 180ms ease;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail:not(.has-image) .project-row-thumbnail-icon {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(12, 19, 27, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row:hover .project-row-thumbnail,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail:hover,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row:focus-within .project-row-thumbnail {
  transform: scale(1.045);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 20px rgba(0, 0, 0, 0.2);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row:hover .project-row-thumbnail-image,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail:hover .project-row-thumbnail-image,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row:focus-within .project-row-thumbnail-image,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row:hover .project-row-thumbnail-icon,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail:hover .project-row-thumbnail-icon,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row:focus-within .project-row-thumbnail-icon {
  transform: scale(1.04);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-thumbnail .project-row-thumbnail-icon svg {
  width: 100%;
  height: 100%;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-main {
  gap: 8px;
  align-self: start;
  justify-self: stretch;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-title-line {
  gap: 12px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-cell-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.22;
  color: #e6edf3;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-status-tag {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-color: rgba(255, 255, 255, 0.07);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(225, 233, 241, 0.76);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-status-tag.is-draft {
  border-color: rgba(174, 184, 197, 0.18);
  color: rgba(196, 205, 216, 0.76);
  background: rgba(174, 184, 197, 0.045);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-status-tag.is-published {
  border-color: rgba(105, 201, 147, 0.2);
  color: rgba(182, 228, 201, 0.82);
  background: rgba(105, 201, 147, 0.05);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-status-tag.is-changed-since-publish {
  border-color: rgba(228, 184, 96, 0.24);
  color: rgba(231, 205, 149, 0.84);
  background: rgba(228, 184, 96, 0.06);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-statusline,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-infoline {
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-meta-item {
  gap: 5px;
  padding-left: 12px;
  font-size: 13px;
  color: #a5b4c3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-meta-item::before {
  left: 5px;
  width: 2px;
  height: 2px;
  background: #7c8fa3;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-meta-icon {
  width: 13px;
  height: 13px;
  color: #7c8fa3;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-submeta,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-list-meta,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-cell-submeta {
  font-size: 12px;
  color: #7c8fa3;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-submeta {
  display: none;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-publication {
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border-color: rgba(255, 255, 255, 0.045);
  background: rgba(255, 255, 255, 0.016);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-publication-meta {
  gap: 6px 12px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-publication-key {
  font-size: 12px;
  color: #7c8fa3;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-publication-value {
  font-size: 12px;
  color: #7c8fa3;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-publication-actions,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-actions {
  gap: 7px;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-actions {
  align-self: start;
  justify-self: start;
  align-items: flex-start;
  width: 118px;
  margin-top: 0;
  padding-top: 0;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-actions .project-button.small.primary {
  padding: 8px 12px;
  min-height: 34px;
  font-size: 12px;
  background: #32c5fd;
  border-color: transparent;
  color: #0b141a;
  font-weight: 600;
  box-shadow: none;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-actions .project-button.small.ghost,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-publication-actions .project-button.small.ghost,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-menu-trigger {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #c9d5e0;
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-actions .project-button.small.ghost:hover,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-publication-actions .project-button.small.ghost:hover,
body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-menu-trigger:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-row-menu-note {
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
}

body.project-dashboard:not(.settings-page):not(.admin-dashboard) .project-modal-card {
  border-radius: 12px;
  padding: 18px;
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(9, 13, 18, 0.98);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1100px) {
  .examples-admin-layout {
    grid-template-columns: 1fr;
  }
}

/* Sentence-case headings */
.controls-title,
.controls-section-title,
.controls-card-title,
.theme-manager-title,
.theme-library-title,
.theme-editor-title,
.theme-section-subtitle,
.theme-modal-title,
.theme-modal-subtitle,
.format-group-title,
.format-subtitle,
.data-editor-title,
.data-editor-subtitle,
.data-editor-section-title,
.auth-subtitle,
.admin-section-title,
.admin-section-subtitle {
  text-transform: none;
  letter-spacing: normal;
}

/* Sentence-case everywhere in menus */
#controls *,
.theme-modal *,
.theme-manager *,
.project-shell *,
.canvas-toolbar *,
#data-editor *,
.theme-layout-editor *,
.layout-editor *,
.export-panel *,
.admin-shell *,
.auth-panel * {
  text-transform: none;
  letter-spacing: normal;
}

/* Panel borderless preview */
#controls,
.controls-card,
#controls details,
.theme-modal-card,
.project-row,
.project-modal-card,
.theme-library,
.theme-editor,
.layout-editor-panel,
.layout-editor-control-panel,
.export-panel,
.export-image,
.data-editor-format-panel,
.auth-panel {
  border: none;
}

@media (max-width: 640px) {
  .auth-card {
    grid-template-columns: 1fr;
  }
  .auth-hero,
  .auth-panel {
    padding: 28px;
  }
  .auth-hero-title {
    font-size: 26px;
  }
  .auth-actions {
    flex-direction: column;
    align-items: flex-start;
  }
}