@maildeno/editor 0.1.0

package/dist/editor.css

@@ -0,0 +1,2411 @@
+
+.md-input[data-v-3e558228] {
+  width: 100%;
+  padding: 0.325rem 0.625rem;
+  font-size: 13px;
+  line-height: 1.25rem;
+  color: var(--md-text);
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 0.375rem;
+  outline: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.md-input[data-v-3e558228]::placeholder { color: var(--md-text-subtle);
+}
+.md-input[data-v-3e558228]:focus {
+  border-color: var(--md-primary);
+}
+.md-input[data-v-3e558228]:disabled { background: var(--md-surface-hover); color: var(--md-text-subtle); cursor: not-allowed;
+}
+.md-input--invalid[data-v-3e558228] { border-color: var(--md-danger);
+}
+.md-input--invalid[data-v-3e558228]:focus { border-color: var(--md-danger); box-shadow: 0 0 0 1px var(--md-danger);
+}
+
+/* =========================================================
+   SELECT ROOT
+   ========================================================= */
+.md-sel__anchor {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  width: 100%;
+  min-height: 32px;
+  box-sizing: border-box;
+  padding: 0 0.375rem 0 0.5rem;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 0.375rem;
+  font-size: 13px;
+  color: var(--md-text);
+}
+.md-sel__anchor:focus-within {
+  border-color: var(--md-primary);
+}
+.md-sel__anchor--open {
+  border-color: var(--md-primary);
+}
+.md-sel__anchor--disabled {
+  background: var(--md-surface-hover);
+  color: var(--md-text-subtle);
+}
+
+/* =========================================================
+   SEARCH INPUT
+   ========================================================= */
+.md-sel__input {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0.375rem 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.25rem;
+  color: var(--md-text);
+}
+.md-sel__input::placeholder {
+  color: var(--md-text-subtle);
+}
+
+/* =========================================================
+   NON-FILTERED TRIGGER
+   ========================================================= */
+.md-sel__triggerText {
+  flex: 1;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0.375rem 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--md-text);
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.md-sel__ph {
+  color: var(--md-text-subtle);
+}
+
+/* =========================================================
+   CHEVRON
+   ========================================================= */
+.md-sel__chev {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--md-text-muted);
+  transition:
+    transform 150ms ease,
+    color 150ms ease;
+}
+.md-sel__chev--open {
+  transform: rotate(180deg);
+  color: var(--md-text);
+}
+
+/* =========================================================
+   DROPDOWN
+   ========================================================= */
+.md-sel__content {
+  position: relative;
+  z-index: 999999;
+  width: var(--reka-combobox-trigger-width);
+  min-width: 180px;
+  max-width: 320px;
+  box-sizing: border-box;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 0.5rem;
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.12),
+    0 4px 6px -4px rgb(0 0 0 / 0.12);
+  overflow: hidden;
+}
+
+/* =========================================================
+   DROPDOWN VIEWPORT
+   ========================================================= */
+.md-sel__viewport {
+  width: 100%;
+  max-height: 240px;
+  box-sizing: border-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 4px;
+  background: var(--md-surface);
+}
+
+/* =========================================================
+   EMPTY
+   ========================================================= */
+.md-sel__empty {
+  display: block;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 8px;
+  background: var(--md-surface);
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--md-text-subtle);
+  text-align: center;
+}
+
+/* =========================================================
+   OPTION
+   ========================================================= */
+.md-sel__item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  min-height: 32px;
+  box-sizing: border-box;
+  gap: 8px;
+  padding: 6px 8px;
+  background: var(--md-surface);
+  border: 0;
+  border-radius: 6px;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 18px;
+  color: var(--md-text);
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+}
+.md-sel__item:hover {
+  background: var(--md-surface-muted);
+}
+.md-sel__item[data-highlighted] {
+  background: var(--md-surface-muted);
+}
+.md-sel__item[data-state="checked"] {
+  background: var(--md-success-bg);
+  color: var(--md-success-fg);
+  font-weight: 500;
+}
+.md-sel__item[data-state="checked"][data-highlighted] {
+  background: #dcfce7;
+}
+
+/* =========================================================
+   OPTION TEXT
+   ========================================================= */
+.md-sel__itemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* =========================================================
+   CHECK
+   ========================================================= */
+.md-sel__check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  color: currentColor;
+}
+
+.section-fade-enter-active[data-v-315250dd],
+.section-fade-leave-active[data-v-315250dd] {
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+.section-fade-enter-from[data-v-315250dd],
+.section-fade-leave-to[data-v-315250dd] {
+  opacity: 0;
+  transform: translateY(-3px);
+}
+
+.transparent-swatch[data-v-4f01058e] {
+  background-image:
+    linear-gradient(45deg, #ccc 25%, transparent 25%),
+    linear-gradient(-45deg, #ccc 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ccc 75%),
+    linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 6px 6px;
+  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
+  background-color: white;
+}
+
+.transparent-swatch[data-v-618c08eb] {
+  background-image:
+    linear-gradient(45deg, #ccc 25%, transparent 25%),
+    linear-gradient(-45deg, #ccc 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, #ccc 75%),
+    linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 6px 6px;
+  background-position: 0 0, 0 3px, 3px -3px, -3px 0;
+  background-color: white;
+}
+
+/* =========================================================
+   FIELD
+   ========================================================= */
+.md-dp__field {
+  display: flex;
+  align-items: center;
+  gap: 0.0625rem;
+  width: 100%;
+  min-height: 32px;
+  box-sizing: border-box;
+  padding: 0.375rem 0.375rem 0.375rem 0.5rem;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--md-text);
+}
+.md-dp__field:focus-within {
+  border-color: var(--md-primary);
+  box-shadow: 0 0 0 1px var(--md-primary);
+}
+
+/* =========================================================
+   DATE SEGMENTS
+   ========================================================= */
+.md-dp__seg {
+  padding: 0 0.0625rem;
+  border-radius: 0.125rem;
+  outline: none;
+  font-family: inherit;
+  font-size: 13px;
+}
+.md-dp__seg:focus {
+  background: var(--md-primary);
+  color: var(--md-surface);
+}
+.md-dp__seg[data-placeholder] {
+  color: var(--md-text-subtle);
+}
+.md-dp__lit {
+  color: var(--md-text-subtle);
+}
+
+/* =========================================================
+   CALENDAR TRIGGER
+   ========================================================= */
+.md-dp__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-left: auto;
+  width: 20px;
+  height: 20px;
+  padding: 0.125rem;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  font-size: 11px;
+  color: var(--md-text-subtle);
+}
+.md-dp__trigger:hover {
+  color: var(--md-text-muted);
+}
+
+/* =========================================================
+   CALENDAR POPOVER
+   ========================================================= */
+.md-dp__content {
+  z-index: 999999;
+  padding: 0.625rem;
+  box-sizing: border-box;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 0.625rem;
+  box-shadow:
+    0 10px 15px -3px rgb(0 0 0 / 0.12),
+    0 4px 6px -4px rgb(0 0 0 / 0.12);
+}
+
+/* =========================================================
+   CALENDAR
+   ========================================================= */
+.md-dp__cal {
+  width: max-content;
+}
+
+/* =========================================================
+   HEADER
+   ========================================================= */
+.md-dp__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.md-dp__heading {
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--md-text);
+}
+
+/* =========================================================
+   PREVIOUS / NEXT
+   ========================================================= */
+.md-dp__nav {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 0.25rem;
+  border: 0;
+  background: transparent;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--md-text-muted);
+}
+.md-dp__nav:hover {
+  background: var(--md-surface-muted);
+  color: var(--md-text);
+}
+.md-dp__nav:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+/* =========================================================
+   GRID
+   ========================================================= */
+.md-dp__grid {
+  width: 100%;
+  border-collapse: collapse;
+}
+.md-dp__row {
+  display: flex;
+}
+
+/* =========================================================
+   WEEKDAY HEADER
+   ========================================================= */
+.md-dp__headCell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 28px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--md-text-subtle);
+}
+
+/* =========================================================
+   DAY BUTTON
+   ========================================================= */
+.md-dp__day {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  font-size: 12px;
+  color: var(--md-text);
+  border-radius: 0.3125rem;
+  cursor: pointer;
+  outline: none;
+  transition:
+    background 100ms ease,
+    color 100ms ease;
+}
+.md-dp__day:hover {
+  background: var(--md-surface-muted);
+}
+.md-dp__day:focus-visible {
+  outline: 2px solid var(--md-primary);
+  outline-offset: -2px;
+}
+
+/* =========================================================
+   SELECTED DAY
+   ========================================================= */
+.md-dp__day[data-selected] {
+  background: var(--md-primary);
+  color: var(--md-surface);
+  font-weight: 600;
+}
+.md-dp__day[data-selected]:hover {
+  background: var(--md-primary);
+}
+
+/* =========================================================
+   TODAY
+   ========================================================= */
+.md-dp__day[data-today]:not([data-selected]) {
+  font-weight: 700;
+  color: var(--md-primary);
+}
+
+/* =========================================================
+   OUTSIDE / DISABLED
+   ========================================================= */
+.md-dp__day[data-outside-view] {
+  color: var(--md-border-strong);
+}
+.md-dp__day[data-disabled] {
+  color: var(--md-border-strong);
+
+  cursor: default;
+}
+.md-dp__day[data-disabled]:hover {
+  background: transparent;
+}
+
+.rules-scroll[data-v-a13d36c0] {
+  overflow-x: auto;
+  max-width: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+.rules-scroll[data-v-a13d36c0]::-webkit-scrollbar {
+  height: 6px;
+}
+.rules-scroll[data-v-a13d36c0]::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+.rules-scroll[data-v-a13d36c0]::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 4px;
+}
+.rules-scroll[data-v-a13d36c0]::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+
+.toggle-btn[data-v-85d1bec5] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  border-radius: 6px;
+  border: 0.5px solid transparent;
+  cursor: pointer;
+  transition:
+    background 0.1s,
+    border-color 0.1s,
+    color 0.1s;
+  background: transparent;
+  padding: 0;
+  outline: none;
+}
+.toggle-btn[data-v-85d1bec5]:focus-visible {
+  box-shadow: 0 0 0 2px oklch(52.7% 0.154 150.069);
+}
+.toggle-btn--idle[data-v-85d1bec5] {
+  border-color: #e5e7eb;
+  color: #6b7280;
+}
+.toggle-btn--idle[data-v-85d1bec5]:hover {
+  background: #f9fafb;
+  border-color: #d1d5db;
+}
+.toggle-btn--active[data-v-85d1bec5] {
+  background: #eff6ff;
+  border-color: #05df72;
+  color: oklch(72.3% 0.219 149.579);
+}
+.toggle-btn--active[data-v-85d1bec5]:hover {
+  background: #dbeafe;
+}
+
+.md-btn[data-v-cc741dfc] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.875rem;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 0.375rem;
+  border: 1px solid transparent;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s, opacity 0.15s;
+}
+.md-btn[data-v-cc741dfc]:disabled { opacity: 0.55; cursor: not-allowed;
+}
+.md-btn--primary[data-v-cc741dfc] {
+  background: var(--md-button-primary-bg);
+  color: var(--md-button-primary-text);
+}
+.md-btn--primary[data-v-cc741dfc]:not(:disabled):hover { background: var(--md-button-primary-hover-bg);
+}
+.md-btn--secondary[data-v-cc741dfc] {
+  background: var(--md-button-secondary-bg);
+  color: var(--md-button-secondary-text);
+  border-color: var(--md-border);
+}
+.md-btn--secondary[data-v-cc741dfc]:not(:disabled):hover { background: var(--md-button-secondary-hover-bg);
+}
+.md-btn--danger[data-v-cc741dfc] { background: var(--md-danger); color: var(--md-on-danger);
+}
+.md-btn--danger[data-v-cc741dfc]:not(:disabled):hover { filter: brightness(0.94);
+}
+.md-btn--success[data-v-cc741dfc] { background: var(--md-success); color: var(--md-surface);
+}
+
+.md-dialog__overlay[data-v-0b61b47b] {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgb(0 0 0 / 0.4);
+}
+.md-dialog[data-v-0b61b47b] {
+  width: 420px;
+  max-width: 100%;
+  max-height: calc(100vh - 2rem);
+  display: flex;
+  flex-direction: column;
+  background: var(--md-surface);
+  border-radius: 0.75rem;
+  box-shadow: 0 20px 60px rgb(0 0 0 / 0.25);
+  outline: none;
+}
+.md-dialog__header[data-v-0b61b47b] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1.125rem 1.25rem 0.5rem;
+}
+.md-dialog__header--noTitle[data-v-0b61b47b] { justify-content: flex-end;
+}
+.md-dialog__title[data-v-0b61b47b] { font-size: 17px; font-weight: 600; color: var(--md-text); margin: 0;
+}
+.md-dialog__close[data-v-0b61b47b] {
+  display: inline-flex;
+  padding: 0.25rem;
+  color: var(--md-text-subtle);
+  background: none;
+  border: 0;
+  border-radius: 0.25rem;
+  cursor: pointer;
+}
+.md-dialog__close[data-v-0b61b47b]:hover { color: var(--md-text); background: var(--md-surface-muted);
+}
+.md-dialog__body[data-v-0b61b47b] {
+  padding: 0.5rem 1.25rem 1.25rem;
+  overflow-y: auto;
+  font-size: 14px;
+  color: var(--md-text);
+}
+.md-dialog__footer[data-v-0b61b47b] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  padding: 0 1.25rem 1.25rem;
+}
+.md-dialog__srOnly[data-v-0b61b47b] {
+  position: absolute;
+  width: 1px; height: 1px;
+  padding: 0; margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+[data-v-4650bfba] a {
+  color: #2563eb;
+  cursor: pointer;
+}
+[data-v-4650bfba] a:not([style*="text-decoration"]) {
+  text-decoration: underline;
+}
+[data-v-4650bfba] a:hover {
+  opacity: 0.8;
+}
+
+/* Merge tag node — inline chip styling.
+   display:inline ensures the span is exactly as wide as its text content.
+   No width reservation from hidden raw-tag text since the NodeView
+   writes only one text node at a time. */
+[data-v-4650bfba] .merge-tag-node {
+  display: inline;
+  white-space: nowrap;
+  vertical-align: baseline;
+  cursor: default;
+  border-radius: 3px;
+  padding: 0 2px;
+}
+
+/* List styles — scoped to the editor content area */
+[data-v-4650bfba] li:not(:last-child) {
+  margin-bottom: var(--list-item-spacing, 0.25rem);
+}
+
+/* ─── Toolbar font Select sizing ─────────────────────────────────────────────
+   Constrain the Select to sit flush inside the toolbar row.
+   The trigger is kept compact (28px tall) and the overlay is widened so
+   long font names are readable without being clipped.                       */
+.toolbar-font-select[data-v-4650bfba] .p-select {
+  height: 28px;
+  min-width: 110px;
+  max-width: 130px;
+  border-radius: 6px;
+  border-color: #d1d5db; /* gray-300 — matches other toolbar button borders */
+  padding: 0 6px;
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+}
+.toolbar-font-select[data-v-4650bfba] .p-select-label {
+  padding: 0;
+  font-size: 0.85rem;
+  line-height: 1;
+}
+.toolbar-font-select[data-v-4650bfba] .p-select-dropdown {
+  width: 20px;
+}
+
+/* Widen the overlay panel so long font names are not clipped */
+[data-v-4650bfba] .p-select-overlay {
+  min-width: 180px !important;
+}
+
+.toggle-btn[data-v-23c99fda] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  border-radius: 6px;
+  border: 0.5px solid transparent;
+  cursor: pointer;
+  transition: background 0.1s, border-color 0.1s, color 0.1s;
+  background: transparent;
+  padding: 0;
+  outline: none;
+}
+.toggle-btn--idle[data-v-23c99fda] {
+  border-color: rgba(229,231,235,0.8);
+  color: #99a1af;
+}
+.toggle-btn--idle[data-v-23c99fda]:hover {
+  background: #f9fafb;
+  border-color: #d1d5db;
+  color: #6b7280;
+}
+.toggle-btn--active[data-v-23c99fda] {
+  background: #f0fdf4;
+  border-color: #4ade80;
+  color: #16a34a;
+}
+.toggle-btn--active[data-v-23c99fda]:hover {
+  background: #dcfce7;
+}
+
+.panel[data-v-3474739e] {
+  padding: 10px 12px;
+  background: #ffffff;
+  border: 0.5px solid rgba(229, 231, 235, 0.8);
+  border-radius: 10px;
+}
+.separator[data-v-3474739e] {
+  height: 0.5px;
+  background: rgba(229, 231, 235, 0.8);
+  margin-left: -12px;
+  margin-right: -12px;
+}
+
+.spinner[data-v-ddaffab7] {
+  width: 50px;
+  height: 50px;
+  border: 5px solid rgba(0, 0, 0, 0.2);
+  border-top-color: #05df72;
+  border-radius: 50%;
+  margin: 0 auto;
+  animation: spin-ddaffab7 1s linear infinite;
+}
+@keyframes spin-ddaffab7 {
+to {
+    transform: rotate(360deg);
+}
+}
+
+/* ===== DESIGN SYSTEM TOKENS ===== */
+.desktop-gate[data-v-52ab9ff1] {
+  --brand-primary: #2463eb;
+  --brand-primary-dark: #1b4ec4;
+  --brand-primary-light: #4b82f0;
+  --brand-gradient-start: #2463eb;
+  --brand-gradient-end: #8b5cf6;
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --shadow-lg:
+    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+  --shadow-xl:
+    0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+}
+
+/* ===== MAIN LAYOUT ===== */
+.desktop-gate[data-v-52ab9ff1] {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.98) 0%,
+    rgba(249, 250, 251, 0.98) 100%
+  );
+  backdrop-filter: blur(2px);
+  padding: 1.5rem;
+}
+.gate-container[data-v-52ab9ff1] {
+  max-width: 520px;
+  width: 100%;
+  background: white;
+  border-radius: 2rem;
+  padding: 2.5rem;
+  text-align: center;
+  box-shadow: var(--shadow-2xl);
+  animation: fadeInUp-52ab9ff1 0.5s cubic-bezier(0.16, 1, 0.3, 1);
+  border: 1px solid var(--gray-200);
+}
+
+/* ===== BRAND BADGE ===== */
+.brand-badge[data-v-52ab9ff1] {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.badge-ring[data-v-52ab9ff1] {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: linear-gradient(
+    135deg,
+    var(--brand-gradient-start),
+    var(--brand-gradient-end)
+  );
+  animation: pulseRing-52ab9ff1 2s ease-out infinite;
+}
+.badge-icon[data-v-52ab9ff1] {
+  position: relative;
+  width: 56px;
+  height: 56px;
+  background: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--brand-primary);
+  box-shadow: var(--shadow-md);
+  transition: transform 0.2s ease;
+}
+.gate-container:hover .badge-icon[data-v-52ab9ff1] {
+  transform: scale(1.02);
+}
+
+/* ===== TYPOGRAPHY ===== */
+.gate-title[data-v-52ab9ff1] {
+  font-size: 1.875rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  margin: 0 0 1rem 0;
+  color: var(--gray-900);
+}
+.brand-gradient[data-v-52ab9ff1] {
+  background: linear-gradient(
+    135deg,
+    var(--brand-gradient-start),
+    var(--brand-gradient-end)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+.gate-description[data-v-52ab9ff1] {
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--gray-600);
+  margin: 0 0 1.75rem 0;
+}
+
+/* ===== FEATURE GRID ===== */
+.feature-grid[data-v-52ab9ff1] {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-bottom: 2rem;
+  padding: 1rem 0;
+  border-top: 1px solid var(--gray-200);
+  border-bottom: 1px solid var(--gray-200);
+}
+.feature-item[data-v-52ab9ff1] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--gray-700);
+}
+.feature-icon[data-v-52ab9ff1] {
+  width: 36px;
+  height: 36px;
+  background: var(--gray-100);
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--brand-primary);
+  transition: all 0.2s ease;
+}
+.feature-item:hover .feature-icon[data-v-52ab9ff1] {
+  background: var(--brand-primary);
+  color: white;
+  transform: translateY(-2px);
+}
+
+/* ===== STATUS ===== */
+.detection-status[data-v-52ab9ff1] {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  background: var(--gray-100);
+  border-radius: 100px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--gray-600);
+}
+.status-dot[data-v-52ab9ff1] {
+  width: 8px;
+  height: 8px;
+  background: #f59e0b;
+  border-radius: 50%;
+  animation: pulse-52ab9ff1 1.5s ease-out infinite;
+}
+
+/* ===== FOOTER ===== */
+.gate-footer[data-v-52ab9ff1] {
+  margin-top: 2rem;
+  padding-top: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--gray-400);
+}
+.brand-text[data-v-52ab9ff1] {
+  font-weight: 600;
+  background: linear-gradient(
+    135deg,
+    var(--brand-gradient-start),
+    var(--brand-gradient-end)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+}
+
+/* ===== ANIMATIONS ===== */
+@keyframes fadeInUp-52ab9ff1 {
+from {
+    opacity: 0;
+    transform: translateY(20px);
+}
+to {
+    opacity: 1;
+    transform: translateY(0);
+}
+}
+@keyframes pulseRing-52ab9ff1 {
+0% {
+    opacity: 1;
+    transform: scale(0.95);
+}
+70% {
+    opacity: 0.4;
+    transform: scale(1.15);
+}
+100% {
+    opacity: 0;
+    transform: scale(1.25);
+}
+}
+@keyframes pulse-52ab9ff1 {
+0%,
+  100% {
+    opacity: 1;
+}
+50% {
+    opacity: 0.4;
+}
+}
+
+/* ===== RESPONSIVE TOUCH-UPS ===== */
+@media (max-width: 480px) {
+.gate-container[data-v-52ab9ff1] {
+    padding: 2rem 1.5rem;
+}
+.gate-title[data-v-52ab9ff1] {
+    font-size: 1.5rem;
+}
+.feature-grid[data-v-52ab9ff1] {
+    gap: 1.25rem;
+}
+}
+
+.row-drop-bar[data-v-ec871cea] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  background: var(--drop-color-bg);
+  border-radius: 6px;
+  z-index: 20;
+  pointer-events: none;
+}
+.row-drop-bar--before[data-v-ec871cea] {
+  top: -14px;
+}
+.row-drop-bar--after[data-v-ec871cea] {
+  bottom: -14px;
+}
+.row-drop-bar-line[data-v-ec871cea] {
+  flex: 1;
+  height: 2px;
+  background: var(--drop-color-line);
+  border-radius: 2px;
+  /* animation: bar-expand 0.18s ease forwards; */
+}
+
+/* @keyframes bar-expand {
+  from {
+    transform: scaleX(0);
+    opacity: 0;
+  }
+  to {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+} */
+.row-drop-bar-label[data-v-ec871cea] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--drop-color);
+  white-space: nowrap;
+  padding: 4px 12px;
+  background: var(--drop-color-pill-bg);
+  border: 1px solid var(--drop-color-pill-border);
+  border-radius: 24px;
+  /* animation: label-pop 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; */
+}
+
+/* @keyframes label-pop {
+  from {
+    transform: scale(0.8);
+    opacity: 0;
+  }
+  to {
+    transform: scale(1);
+    opacity: 1;
+  }
+} */
+.row-drop-bar-icon[data-v-ec871cea] {
+  width: 12px;
+  height: 12px;
+  flex-shrink: 0;
+}
+
+/* Transition */
+/* .drop-bar-enter-active {
+  animation: bar-in 0.15s ease forwards;
+}
+.drop-bar-leave-active {
+  transition: opacity 0.12s ease;
+}
+.drop-bar-leave-to {
+  opacity: 0;
+} */
+
+/* @keyframes bar-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+} */
+
+.fade-enter-active[data-v-83e65439],
+.fade-leave-active[data-v-83e65439] {
+  transition: opacity 0.1s ease;
+}
+.fade-enter-from[data-v-83e65439],
+.fade-leave-to[data-v-83e65439] {
+  opacity: 0;
+}
+
+/*
+ * Stacking fix: CanvasRowDropZone has z-index: 9 and extends its hit-area
+ * strip into adjacent rows when a layout drag is active. Without an explicit
+ * stacking context on the column, that strip would catch pointer events for
+ * the edges of the column — the row drop zone would win and the drop would
+ * become a top-level row instead of a nested row.
+ *
+ * z-index: 1 creates a stacking context ABOVE the drop zone's hit strip.
+ *
+ * CRITICAL: When a child component is selected, we must set z-index: auto on
+ * this column AND on its ancestor CanvasRow (via hasSelectedDescendant).
+ * z-index: auto removes the column from the stacking context chain entirely,
+ * letting the selected component's z-50 bubble up to compete at the canvas
+ * root level — which is what allows the action bar and RichText toolbar to
+ * paint above sibling rows. If z-index: 1 stays active, ANY z-index on a
+ * child is capped within this column's own stacking context and can never
+ * exceed a sibling row painted at z-index: 0 in normal flow.
+ */
+.canvas-column[data-v-83e65439] {
+  position: relative;
+  z-index: 1;
+}
+.canvas-column.has-selected-child[data-v-83e65439] {
+  z-index: auto;
+}
+
+/* ── Base zone ─────────────────────────────────────────────── */
+.canvas-drop-zone[data-v-a85cd0b8] {
+  position: relative;
+  height: 0;
+  margin: 0;
+  z-index: 9;
+  overflow: visible;
+  transition: height 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+/* Full expansion on hover */
+.canvas-drop-zone--active[data-v-a85cd0b8] {
+  height: 52px;
+}
+
+/* Empty-canvas variant — fills the whole empty area */
+.canvas-drop-zone--empty[data-v-a85cd0b8] {
+  height: 100%;
+  min-height: 200px;
+}
+
+/* Full height variant - takes up entire parent container */
+.canvas-drop-zone--full[data-v-a85cd0b8] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: auto;
+  min-height: 100%;
+}
+.canvas-drop-zone--empty .cdz-bar[data-v-a85cd0b8] {
+  inset: 12px;
+  justify-content: center;
+  border-radius: 12px;
+}
+
+/* ── Empty state styles (when fullHeight is true) ── */
+.cdz-empty-state[data-v-a85cd0b8] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  background: linear-gradient(135deg, #faf9ff 0%, #f5f3ff 100%);
+  border: 2px dashed #e0e7ff;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+}
+.canvas-drop-zone--full .cdz-empty-state[data-v-a85cd0b8] {
+  animation: fade-in-a85cd0b8 0.3s ease;
+}
+@keyframes fade-in-a85cd0b8 {
+from {
+    opacity: 0;
+    transform: scale(0.98);
+}
+to {
+    opacity: 1;
+    transform: scale(1);
+}
+}
+.cdz-empty-content[data-v-a85cd0b8] {
+  text-align: center;
+  padding: 2rem;
+}
+.cdz-empty-icon[data-v-a85cd0b8] {
+  width: 48px;
+  height: 48px;
+  margin: 0 auto 12px;
+  color: #94a3b8;
+  stroke-width: 1.5;
+}
+.cdz-empty-title[data-v-a85cd0b8] {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: #02bb4c;
+  margin-bottom: 8px;
+  letter-spacing: -0.01em;
+}
+.cdz-empty-subtitle[data-v-a85cd0b8] {
+  font-size: 0.875rem;
+  color: #94a3b8;
+  line-height: 1.4;
+}
+
+/* ── Invisible hit-area ─────────────────────────────────────
+ * Previously this bled 12px into the rows above and below with pointer-events
+ * all during a layout drag. That meant dragging a LayoutTab row would hit this
+ * strip when the cursor was merely near a column's top/bottom edge, and
+ * insert a top-level row instead of a nested row.
+ *
+ * FIX: Shrink the bleed to a small value (−4px) so the strip only covers the
+ * natural visible gap between rows. Columns retain ownership of their rendered
+ * area. Combined with CanvasColumn's new z-index: 1 stacking context, the
+ * column reliably wins for pointer hits inside its body, while the thin gap
+ * between rows still belongs to this drop zone.
+ *
+ * When fully expanded (canvas-drop-zone--active: 52px tall) the zone's own
+ * height covers the hit area naturally, so bleed here is not needed for the
+ * "snap into a big target" UX — that comes from the zone's own expanded size.
+ */
+.cdz-hit-area[data-v-a85cd0b8] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -4px;
+  bottom: -4px;
+  z-index: 1;
+  /* Only catchable during a layout drag; invisible + inert otherwise */
+  pointer-events: none;
+}
+.canvas-drop-zone--receptive .cdz-hit-area[data-v-a85cd0b8] {
+  pointer-events: all;
+}
+
+/* Hide empty state when dragging */
+.canvas-drop-zone--full.canvas-drop-zone--receptive .cdz-empty-state[data-v-a85cd0b8],
+.canvas-drop-zone--full.canvas-drop-zone--active .cdz-empty-state[data-v-a85cd0b8] {
+  opacity: 0.5;
+  background: rgba(139, 92, 246, 0.04);
+}
+
+/* ── Ghost line (receptive but not hovered) ─────────────────── */
+.cdz-ghost-line[data-v-a85cd0b8] {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 50%;
+  height: 2px;
+  transform: translateY(-50%);
+  background: repeating-linear-gradient(
+    90deg,
+    rgba(139, 92, 246, 0.25) 0px,
+    rgba(139, 92, 246, 0.25) 6px,
+    transparent 6px,
+    transparent 12px
+  );
+  border-radius: 2px;
+  pointer-events: none;
+  animation: ghost-pulse-a85cd0b8 2s ease-in-out infinite;
+}
+@keyframes ghost-pulse-a85cd0b8 {
+0%, 100% { opacity: 0.5;
+}
+50%       { opacity: 1;
+}
+}
+
+/* ── Active bar ─────────────────────────────────────────────── */
+.cdz-bar[data-v-a85cd0b8] {
+  position: absolute;
+  inset: 4px 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 20px;
+  background: rgba(139, 92, 246, 0.06);
+  border-radius: 8px;
+  border: 1.5px dashed rgba(139, 92, 246, 0.35);
+  pointer-events: none; /* let drag events fall through to the parent drop zone */
+}
+.cdz-line[data-v-a85cd0b8] {
+  flex: 1;
+  height: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(139, 92, 246, 0.6),
+    rgba(139, 92, 246, 0.8),
+    rgba(139, 92, 246, 0.6),
+    transparent
+  );
+  border-radius: 2px;
+  animation: line-expand-a85cd0b8 0.2s ease forwards;
+  transform-origin: center;
+}
+@keyframes line-expand-a85cd0b8 {
+from { transform: scaleX(0); opacity: 0;
+}
+to   { transform: scaleX(1); opacity: 1;
+}
+}
+.cdz-pill[data-v-a85cd0b8] {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #7c3aed;
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+  padding: 5px 14px;
+  background: rgba(139, 92, 246, 0.08);
+  border: 1.5px solid rgba(139, 92, 246, 0.35);
+  border-radius: 100px;
+  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.15);
+  animation: pill-pop-a85cd0b8 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+}
+@keyframes pill-pop-a85cd0b8 {
+from { transform: scale(0.75); opacity: 0;
+}
+to   { transform: scale(1);    opacity: 1;
+}
+}
+.cdz-icon[data-v-a85cd0b8] {
+  width: 13px;
+  height: 13px;
+  flex-shrink: 0;
+}
+
+/* ── Transition ─────────────────────────────────────────────── */
+.cdz-bar-enter-active[data-v-a85cd0b8] { animation: cdz-in-a85cd0b8 0.15s ease forwards;
+}
+.cdz-bar-leave-active[data-v-a85cd0b8] { transition: opacity 0.1s ease;
+}
+.cdz-bar-leave-to[data-v-a85cd0b8]     { opacity: 0;
+}
+@keyframes cdz-in-a85cd0b8 {
+from { opacity: 0; transform: scaleY(0.6);
+}
+to   { opacity: 1; transform: scaleY(1);
+}
+}
+
+.drop-line-enter-active[data-v-bbf19b57] {
+  transition: opacity 80ms ease, transform 80ms ease;
+}
+.drop-line-leave-active[data-v-bbf19b57] {
+  transition: opacity 60ms ease, transform 60ms ease;
+}
+.drop-line-enter-from[data-v-bbf19b57],
+.drop-line-leave-to[data-v-bbf19b57] {
+  opacity: 0;
+  transform: scaleX(0.6);
+  transform-origin: left center;
+}
+
+.slide-enter-active[data-v-0b0e946e],
+.slide-leave-active[data-v-0b0e946e] {
+  transition: all 0.2s ease;
+  max-height: 500px;
+  overflow: hidden;
+}
+.slide-enter-from[data-v-0b0e946e],
+.slide-leave-to[data-v-0b0e946e] {
+  opacity: 0;
+  max-height: 0;
+  transform: translateY(-10px);
+}
+
+/* ============================================================
+   md-dropdown – suggestion list
+   ============================================================ */
+.md-dropdown[data-v-c497f9f6] {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin-top: 4px;
+  background: var(--md-surface);
+  border: 1px solid var(--md-border);
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+  z-index: 10;
+  max-height: 12rem;
+  overflow-y: auto;
+}
+.md-dropdown-item[data-v-c497f9f6] {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+  color: var(--md-text);
+  transition: background 0.1s;
+}
+.md-dropdown-item[data-v-c497f9f6]:hover {
+  background: var(--md-surface-hover);
+}
+.md-dropdown-item--active[data-v-c497f9f6] {
+  background: var(--md-primary);
+  color: #fff;
+}
+
+/* ============================================================
+   md-tag – selected tag pills
+   ============================================================ */
+.md-tag[data-v-c497f9f6] {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.75rem; 
+  border-radius: 9999px;
+  font-size: 0.875rem; 
+  font-weight: 500;
+  background: var(--md-primary);
+  color: #fff;
+  line-height: 1.5;
+}
+.md-tag-remove[data-v-c497f9f6] {
+  margin-left: 0.5rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  border: none;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  cursor: pointer;
+  border-radius: 9999px;
+  transition:
+    background 0.15s,
+    color 0.15s;
+  padding: 0;
+}
+.md-tag-remove[data-v-c497f9f6]:hover {
+  background: rgba(255, 255, 255, 0.2);
+  color: #fff;
+}
+.md-tag-remove svg[data-v-c497f9f6] {
+  width: 100%;
+  height: 100%;
+}
+
+/* ============================================================
+   Scrollbar styling for dropdown (optional, keeps it clean)
+   ============================================================ */
+.md-dropdown[data-v-c497f9f6]::-webkit-scrollbar {
+  width: 4px;
+}
+.md-dropdown[data-v-c497f9f6]::-webkit-scrollbar-track {
+  background: transparent;
+}
+.md-dropdown[data-v-c497f9f6]::-webkit-scrollbar-thumb {
+  background: var(--md-border);
+  border-radius: 8px;
+}
+.md-dropdown[data-v-c497f9f6]::-webkit-scrollbar-thumb:hover {
+  background: var(--md-text-subtle);
+}
+
+.overflow-x-auto[data-v-2de6cff1] {
+  max-width: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+.overflow-x-auto[data-v-2de6cff1]::-webkit-scrollbar {
+  height: 6px;
+}
+.overflow-x-auto[data-v-2de6cff1]::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+.overflow-x-auto[data-v-2de6cff1]::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 4px;
+}
+.overflow-x-auto[data-v-2de6cff1]::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+
+.overflow-x-auto[data-v-60af6f59] {
+  max-width: 100%;
+  -webkit-overflow-scrolling: touch;
+}
+.overflow-x-auto[data-v-60af6f59]::-webkit-scrollbar {
+  height: 6px;
+}
+.overflow-x-auto[data-v-60af6f59]::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 4px;
+}
+.overflow-x-auto[data-v-60af6f59]::-webkit-scrollbar-thumb {
+  background: #ccc;
+  border-radius: 4px;
+}
+.overflow-x-auto[data-v-60af6f59]::-webkit-scrollbar-thumb:hover {
+  background: #999;
+}
+
+.panel-slide-enter-active[data-v-87974adb],
+.panel-slide-leave-active[data-v-87974adb] {
+ transition:
+ opacity 0.18s ease,
+ transform 0.18s ease;
+}
+.panel-slide-enter-from[data-v-87974adb],
+.panel-slide-leave-to[data-v-87974adb] {
+ opacity: 0;
+ transform: translateX(-10px);
+}
+
+/* Filter pill fade */
+.fade-enter-active[data-v-87974adb],
+.fade-leave-active[data-v-87974adb] {
+ transition:
+ opacity 0.15s ease,
+ transform 0.15s ease;
+}
+.fade-enter-from[data-v-87974adb],
+.fade-leave-to[data-v-87974adb] {
+ opacity: 0;
+ transform: translateY(-4px);
+}
+
+/* Smooth row list reorder/filter transitions */
+.row-list-enter-active[data-v-87974adb],
+.row-list-leave-active[data-v-87974adb] {
+ transition:
+ opacity 0.2s ease,
+ transform 0.2s ease;
+}
+.row-list-enter-from[data-v-87974adb],
+.row-list-leave-to[data-v-87974adb] {
+ opacity: 0;
+ transform: translateY(6px);
+}
+.row-list-move[data-v-87974adb] {
+ transition: transform 0.2s ease;
+}
+
+/* Scrollbar — thin, unobtrusive */
+.overflow-y-auto[data-v-87974adb]::-webkit-scrollbar {
+ width: 6px;
+}
+.overflow-y-auto[data-v-87974adb]::-webkit-scrollbar-track {
+ background: transparent;
+}
+.overflow-y-auto[data-v-87974adb]::-webkit-scrollbar-thumb {
+ background: #6a7282;
+ border-radius: 9999px;
+}
+.overflow-y-auto[data-v-87974adb]::-webkit-scrollbar-thumb:hover {
+ background: #364153;
+}
+
+.panel-slide-enter-active[data-v-4f9c7f2a],
+.panel-slide-leave-active[data-v-4f9c7f2a] {
+  transition:
+    opacity 0.18s ease,
+    transform 0.18s ease;
+}
+.panel-slide-enter-from[data-v-4f9c7f2a],
+.panel-slide-leave-to[data-v-4f9c7f2a] {
+  opacity: 0;
+  transform: translateX(-10px);
+}
+.row-list-enter-active[data-v-4f9c7f2a],
+.row-list-leave-active[data-v-4f9c7f2a] {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+.row-list-enter-from[data-v-4f9c7f2a],
+.row-list-leave-to[data-v-4f9c7f2a] {
+  opacity: 0;
+  transform: translateY(6px);
+}
+.row-list-move[data-v-4f9c7f2a] {
+  transition: transform 0.2s ease;
+}
+
+/* Scrollbar — thin, unobtrusive. Matches SavedRowsPanel. */
+.overflow-y-auto[data-v-4f9c7f2a]::-webkit-scrollbar { width: 6px;
+}
+.overflow-y-auto[data-v-4f9c7f2a]::-webkit-scrollbar-track { background: transparent;
+}
+.overflow-y-auto[data-v-4f9c7f2a]::-webkit-scrollbar-thumb { background: #6a7282; border-radius: 9999px;
+}
+.overflow-y-auto[data-v-4f9c7f2a]::-webkit-scrollbar-thumb:hover { background: #364153;
+}
+
+.md-toast__region[data-v-7583ad77] {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  pointer-events: none;
+}
+.md-toast[data-v-7583ad77] {
+  pointer-events: auto;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  min-width: 280px;
+  max-width: 380px;
+  padding: 0.75rem 0.875rem;
+  font-size: 13px;
+  border: 1px solid;
+  border-radius: 0.75rem;
+  box-shadow: 0 8px 30px rgb(0 0 0 / 0.12);
+}
+.md-toast__icon[data-v-7583ad77] { font-size: 15px; flex-shrink: 0; margin-top: 0.0625rem;
+}
+.md-toast__body[data-v-7583ad77] { flex: 1; min-width: 0;
+}
+.md-toast__summary[data-v-7583ad77] { font-weight: 500;
+}
+.md-toast__detail[data-v-7583ad77] { font-size: 12px; opacity: 0.8; margin-top: 0.125rem;
+}
+.md-toast__close[data-v-7583ad77] { flex-shrink: 0; opacity: 0.5; background: none; border: 0; cursor: pointer; color: inherit;
+}
+.md-toast__close[data-v-7583ad77]:hover { opacity: 1;
+}
+.md-toast--success[data-v-7583ad77] { background: var(--md-success-bg); border-color: var(--md-success-border); color: var(--md-success-fg);
+}
+.md-toast--info[data-v-7583ad77] { background: var(--md-info-bg); border-color: var(--md-info-border); color: var(--md-info-fg);
+}
+.md-toast--warn[data-v-7583ad77] { background: var(--md-surface)beb; border-color: var(--md-warning-border); color: var(--md-warning-fg);
+}
+.md-toast--error[data-v-7583ad77] { background: var(--md-danger-bg); border-color: var(--md-danger-border); color: var(--md-danger-fg);
+}
+.md-toast-enter-active[data-v-7583ad77], .md-toast-leave-active[data-v-7583ad77] { transition: all 0.2s ease;
+}
+.md-toast-enter-from[data-v-7583ad77], .md-toast-leave-to[data-v-7583ad77] { opacity: 0; transform: translateX(20px);
+}
+
+.md-confirm__body[data-v-43b7e283] { display: flex; align-items: flex-start; gap: 0.75rem;
+}
+.md-confirm__icon[data-v-43b7e283] { font-size: 22px; color: var(--md-warning); flex-shrink: 0; margin-top: 0.125rem;
+}
+.md-confirm__message[data-v-43b7e283] { margin: 0; font-size: 14px; line-height: 1.5; color: var(--md-text);
+}
+
+/* ── Orb ──────────────────────────────────────────────────────────────────── */
+.health-orb[data-v-0521087e] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  outline: none;
+  flex-shrink: 0;
+}
+.health-orb:focus-visible .orb-core[data-v-0521087e] {
+  box-shadow: 0 0 0 3px rgba(66, 56, 158, 0.4);
+}
+
+/* Pulse rings */
+.orb-ring[data-v-0521087e] {
+  position: absolute;
+  border-radius: 50%;
+  animation: orb-pulse-0521087e 2.4s ease-out infinite;
+}
+.orb-ring--outer[data-v-0521087e] {
+  width: 22px;
+  height: 22px;
+  animation-delay: 0s;
+}
+.orb-ring--inner[data-v-0521087e] {
+  width: 16px;
+  height: 16px;
+  animation-delay: 0.6s;
+}
+
+/* Core */
+.orb-core[data-v-0521087e] {
+  position: relative;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  z-index: 1;
+}
+.health-orb:hover .orb-core[data-v-0521087e],
+.health-orb--active .orb-core[data-v-0521087e] {
+  transform: scale(1.15);
+}
+
+/* ── Status colours with brand accent ───────────────────────────────────────── */
+.health-orb--good .orb-ring[data-v-0521087e] {
+  background: rgba(34, 197, 94, 0.25);
+}
+.health-orb--good .orb-core[data-v-0521087e] {
+  background: #22c55e;
+  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 0 8px rgba(34, 197, 94, 0.4);
+}
+.health-orb--warn .orb-ring[data-v-0521087e] {
+  background: rgba(245, 158, 11, 0.28);
+}
+.health-orb--warn .orb-core[data-v-0521087e] {
+  background: #f59e0b;
+  box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2), 0 0 8px rgba(245, 158, 11, 0.4);
+}
+.health-orb--bad .orb-ring[data-v-0521087e] {
+  background: rgba(239, 68, 68, 0.28);
+}
+.health-orb--bad .orb-core[data-v-0521087e] {
+  background: #ef4444;
+  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2), 0 0 8px rgba(239, 68, 68, 0.4);
+}
+@keyframes orb-pulse-0521087e {
+0%   { transform: scale(0.6); opacity: 0.7;
+}
+60%  { transform: scale(1.6); opacity: 0;
+}
+100% { transform: scale(1.6); opacity: 0;
+}
+}
+
+/* ── Panel ────────────────────────────────────────────────────────────────── */
+.health-panel[data-v-0521087e] {
+  position: absolute;
+  top: calc(100% + 10px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 300px;
+  background: #18181b;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 14px;
+  padding: 12px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.3);
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  /* Smooth horizontal expansion */
+  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.health-panel--expanded[data-v-0521087e] {
+  width: 400px;
+}
+
+/* When expanded, stat grid uses 3 cols instead of 2 */
+.health-panel--expanded .detail-stats[data-v-0521087e] {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+/* When expanded, accessibility list gets more vertical room */
+.health-panel--expanded .a11y-list[data-v-0521087e] {
+  max-height: 320px;
+}
+
+/* When expanded, format rows go side-by-side */
+.health-panel--expanded .format-note[data-v-0521087e] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+.health-panel--expanded .format-row[data-v-0521087e] {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+}
+
+/* ── Panel header with brand color ─────────────────────────────────────────── */
+.panel-header[data-v-0521087e] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 2px 4px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+.panel-header-right[data-v-0521087e] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Expand toggle button */
+.panel-expand-btn[data-v-0521087e] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: rgba(255, 255, 255, 0.04);
+  color: rgba(255, 255, 255, 0.35);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  flex-shrink: 0;
+  padding: 0;
+}
+.panel-expand-btn[data-v-0521087e]:hover {
+  background: rgba(66, 56, 158, 0.18);
+  border-color: rgba(66, 56, 158, 0.4);
+  color: #a5b4fc;
+}
+.panel-expand-btn[data-v-0521087e]:focus-visible {
+  outline: 2px solid rgba(66, 56, 158, 0.5);
+  outline-offset: 1px;
+}
+.panel-expand-btn--active[data-v-0521087e] {
+  background: rgba(66, 56, 158, 0.2);
+  border-color: rgba(66, 56, 158, 0.45);
+  color: #a5b4fc;
+}
+.panel-title[data-v-0521087e] {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #a5b4fc;
+}
+.panel-status-badge[data-v-0521087e] {
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 99px;
+}
+.status-badge--good[data-v-0521087e] { background: rgba(34, 197, 94, 0.15); color: #4ade80;
+}
+.status-badge--warn[data-v-0521087e] { background: rgba(245, 158, 11, 0.15); color: #fbbf24;
+}
+.status-badge--bad[data-v-0521087e]  { background: rgba(239, 68, 68, 0.15);  color: #f87171;
+}
+
+/* ── Metric cards ─────────────────────────────────────────────────────────── */
+.metric-card[data-v-0521087e] {
+  border-radius: 10px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.04);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+  overflow: hidden;
+  user-select: none;
+}
+.metric-card[data-v-0521087e]:hover {
+  background: rgba(66, 56, 158, 0.1);
+  border-color: rgba(66, 56, 158, 0.3);
+}
+.metric-card[data-v-0521087e]:focus-visible {
+  outline: 2px solid rgba(66, 56, 158, 0.5);
+  outline-offset: 2px;
+}
+.metric-card--good[data-v-0521087e] { border-color: rgba(34, 197, 94, 0.15);
+}
+.metric-card--warn[data-v-0521087e] { border-color: rgba(245, 158, 11, 0.15);
+}
+.metric-card--bad[data-v-0521087e]  { border-color: rgba(239, 68, 68, 0.2);
+}
+.metric-card--good.metric-card--expanded[data-v-0521087e] { background: rgba(34, 197, 94, 0.05);
+}
+.metric-card--warn.metric-card--expanded[data-v-0521087e] { background: rgba(245, 158, 11, 0.05);
+}
+.metric-card--bad.metric-card--expanded[data-v-0521087e]  { background: rgba(239, 68, 68, 0.06);
+}
+
+/* ── Summary row ──────────────────────────────────────────────────────────── */
+.metric-summary[data-v-0521087e] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 9px 10px;
+  gap: 8px;
+}
+.metric-left[data-v-0521087e] {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+}
+.metric-icon[data-v-0521087e] {
+  display: flex;
+  align-items: center;
+  opacity: 0.8;
+  flex-shrink: 0;
+}
+.metric-label[data-v-0521087e] {
+  font-size: 11.5px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.7);
+  white-space: nowrap;
+}
+.metric-right[data-v-0521087e] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-shrink: 0;
+}
+
+/* Mini bar */
+.mini-bar[data-v-0521087e] {
+  width: 36px;
+  height: 4px;
+  border-radius: 99px;
+  background: rgba(255, 255, 255, 0.1);
+  overflow: hidden;
+}
+.mini-bar-fill[data-v-0521087e] {
+  height: 100%;
+  border-radius: 99px;
+  transition: width 0.5s ease;
+}
+.mini-bar-fill--good[data-v-0521087e] { background: #22c55e;
+}
+.mini-bar-fill--warn[data-v-0521087e] { background: #f59e0b;
+}
+.mini-bar-fill--bad[data-v-0521087e]  { background: #ef4444;
+}
+
+/* Status dot */
+.status-dot[data-v-0521087e] {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+.status-dot--good[data-v-0521087e] { background: #22c55e;
+}
+.status-dot--warn[data-v-0521087e] { background: #f59e0b;
+}
+.status-dot--bad[data-v-0521087e]  { background: #ef4444;
+}
+
+/* Pulsing dot for bad status */
+.pulse-dot[data-v-0521087e] {
+  position: relative;
+  width: 6px;
+  height: 6px;
+  flex-shrink: 0;
+}
+.pulse-dot[data-v-0521087e]::before,
+.pulse-dot[data-v-0521087e]::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+}
+.pulse-dot--bad[data-v-0521087e]::before  { background: #ef4444; z-index: 1;
+}
+.pulse-dot--bad[data-v-0521087e]::after   { background: #ef4444; animation: dot-ping-0521087e 1.5s ease-out infinite;
+}
+@keyframes dot-ping-0521087e {
+0%   { transform: scale(1); opacity: 0.75;
+}
+100% { transform: scale(2.5); opacity: 0;
+}
+}
+.metric-value[data-v-0521087e] {
+  font-size: 11.5px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.metric-value--good[data-v-0521087e] { color: #4ade80;
+}
+.metric-value--warn[data-v-0521087e] { color: #fbbf24;
+}
+.metric-value--bad[data-v-0521087e]  { color: #f87171;
+}
+
+/* Chevron */
+.chevron[data-v-0521087e] {
+  color: rgba(255, 255, 255, 0.3);
+  transition: transform 0.2s ease, color 0.15s ease;
+  flex-shrink: 0;
+}
+.chevron--open[data-v-0521087e] { transform: rotate(180deg); color: rgba(255, 255, 255, 0.6);
+}
+.metric-card:hover .chevron[data-v-0521087e] { color: rgba(255, 255, 255, 0.5);
+}
+
+/* ── Expanded detail ──────────────────────────────────────────────────────── */
+.metric-detail[data-v-0521087e] {
+  padding: 0 10px 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+.detail-tip[data-v-0521087e] {
+  font-size: 11px;
+  line-height: 1.55;
+  color: rgba(255, 255, 255, 0.55);
+  margin: 6px 0 0;
+}
+
+/* Stats grid */
+.detail-stats[data-v-0521087e] {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px 12px;
+}
+.stat-item[data-v-0521087e] {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 6px;
+}
+.stat-label[data-v-0521087e] {
+  font-size: 10.5px;
+  color: rgba(255, 255, 255, 0.35);
+  white-space: nowrap;
+}
+.stat-value[data-v-0521087e] {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.75);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Thresholds */
+.detail-thresholds[data-v-0521087e] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding-top: 4px;
+  border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+.threshold[data-v-0521087e] {
+  font-size: 10px;
+  font-weight: 500;
+  padding: 2px 7px;
+  border-radius: 99px;
+}
+.threshold--good[data-v-0521087e] { background: rgba(34, 197, 94, 0.12);  color: #4ade80;
+}
+.threshold--warn[data-v-0521087e] { background: rgba(245, 158, 11, 0.12); color: #fbbf24;
+}
+.threshold--bad[data-v-0521087e]  { background: rgba(239, 68, 68, 0.12);  color: #f87171;
+}
+
+/* ── Format note (KB card) ────────────────────────────────────────────────── */
+.format-note[data-v-0521087e] {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 8px;
+  padding: 8px;
+}
+.format-row[data-v-0521087e] {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}
+.format-badge[data-v-0521087e] {
+  font-size: 9.5px;
+  font-weight: 700;
+  letter-spacing: 0.05em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  margin-top: 1px;
+  background: rgba(66, 56, 158, 0.3);
+  color: #a5b4fc;
+}
+.format-badge--muted[data-v-0521087e] {
+  background: rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.35);
+}
+.format-info[data-v-0521087e] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.format-range[data-v-0521087e] {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.8);
+}
+.format-range--muted[data-v-0521087e] {
+  color: rgba(255, 255, 255, 0.35);
+  font-weight: 500;
+}
+.format-caveat[data-v-0521087e] {
+  font-size: 10px;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.35);
+}
+
+/* ── Accessibility card ───────────────────────────────────────────────────── */
+.a11y-detail[data-v-0521087e] {
+  cursor: default;
+  padding: 8px 10px 10px;
+  gap: 10px;
+}
+
+/* Tabs */
+.a11y-tabs[data-v-0521087e] {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 4px;
+  background: rgba(0, 0, 0, 0.25);
+  padding: 3px;
+  border-radius: 8px;
+}
+.a11y-tab[data-v-0521087e] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 4px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+  color: rgba(255, 255, 255, 0.45);
+  transition: background 0.15s ease, color 0.15s ease;
+}
+.a11y-tab[data-v-0521087e]:hover {
+  color: rgba(255, 255, 255, 0.75);
+  background: rgba(255, 255, 255, 0.04);
+}
+.a11y-tab[data-v-0521087e]:focus-visible {
+  outline: 2px solid rgba(66, 56, 158, 0.5);
+  outline-offset: 1px;
+}
+.a11y-tab--active[data-v-0521087e] {
+  background: rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.92);
+}
+.a11y-tab-label[data-v-0521087e] {
+  text-transform: uppercase;
+}
+.a11y-tab-count[data-v-0521087e] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 16px;
+  padding: 0 5px;
+  border-radius: 99px;
+  font-size: 10px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+}
+.a11y-tab-count--failed[data-v-0521087e]  { background: rgba(239, 68, 68, 0.18);  color: #f87171;
+}
+.a11y-tab-count--passed[data-v-0521087e]  { background: rgba(34, 197, 94, 0.18);  color: #4ade80;
+}
+.a11y-tab-count--ignored[data-v-0521087e] { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5);
+}
+
+/* List */
+.a11y-list[data-v-0521087e] {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  max-height: 240px;
+  overflow-y: auto;
+  /* Custom thin scrollbar */
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.12) transparent;
+}
+.a11y-list[data-v-0521087e]::-webkit-scrollbar {
+  width: 6px;
+}
+.a11y-list[data-v-0521087e]::-webkit-scrollbar-track {
+  background: transparent;
+}
+.a11y-list[data-v-0521087e]::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 99px;
+}
+.a11y-empty[data-v-0521087e] {
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  text-align: center;
+  padding: 12px 4px;
+  margin: 0;
+}
+.a11y-item[data-v-0521087e] {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 8px;
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.03);
+  border-left: 2px solid transparent;
+}
+.a11y-item--critical[data-v-0521087e] { border-left-color: #ef4444;
+}
+.a11y-item--serious[data-v-0521087e]  { border-left-color: #f59e0b;
+}
+.a11y-item--passed[data-v-0521087e]   { border-left-color: rgba(34, 197, 94, 0.5);
+}
+.a11y-item--ignored[data-v-0521087e]  { border-left-color: rgba(255, 255, 255, 0.18); opacity: 0.75;
+}
+.a11y-item-header[data-v-0521087e] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.a11y-severity[data-v-0521087e] {
+  display: inline-flex;
+  align-items: center;
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 2px 6px;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.a11y-severity--critical[data-v-0521087e] { background: rgba(239, 68, 68, 0.18);  color: #f87171;
+}
+.a11y-severity--serious[data-v-0521087e]  { background: rgba(245, 158, 11, 0.18); color: #fbbf24;
+}
+.a11y-severity--passed[data-v-0521087e]   { background: rgba(34, 197, 94, 0.18);  color: #4ade80;
+}
+.a11y-severity--ignored[data-v-0521087e]  { background: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.5);
+}
+.a11y-rule[data-v-0521087e] {
+  font-size: 11px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.85);
+  flex: 1;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.a11y-action[data-v-0521087e] {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  padding: 2px 7px;
+  font-family: inherit;
+  font-size: 9.5px;
+  font-weight: 600;
+  color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+  flex-shrink: 0;
+}
+.a11y-action[data-v-0521087e]:hover {
+  background: rgba(255, 255, 255, 0.06);
+  color: rgba(255, 255, 255, 0.85);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.a11y-action[data-v-0521087e]:focus-visible {
+  outline: 2px solid rgba(66, 56, 158, 0.5);
+  outline-offset: 1px;
+}
+.a11y-action--restore[data-v-0521087e] {
+  border-color: rgba(165, 180, 252, 0.25);
+  color: #a5b4fc;
+}
+.a11y-action--restore[data-v-0521087e]:hover {
+  background: rgba(66, 56, 158, 0.15);
+  border-color: rgba(165, 180, 252, 0.4);
+  color: #c7d2fe;
+}
+.a11y-message[data-v-0521087e] {
+  font-size: 10.5px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.65);
+  margin: 0;
+}
+.a11y-info[data-v-0521087e] {
+  font-size: 10px;
+  line-height: 1.5;
+  color: rgba(255, 255, 255, 0.38);
+  margin: 0;
+  padding-top: 2px;
+  border-top: 1px dashed rgba(255, 255, 255, 0.06);
+}
+
+/* ── Panel footer ─────────────────────────────────────────────────────────── */
+.panel-footer[data-v-0521087e] {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.22);
+  text-align: center;
+  padding-top: 4px;
+  margin: 0;
+}
+
+/* ── Click-outside overlay ────────────────────────────────────────────────── */
+.click-outside[data-v-0521087e] {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+}
+
+/* ── Transitions ──────────────────────────────────────────────────────────── */
+.popover-enter-active[data-v-0521087e] {
+  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.popover-leave-active[data-v-0521087e] {
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+.popover-enter-from[data-v-0521087e] {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-6px) scale(0.97);
+}
+.popover-leave-to[data-v-0521087e] {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-4px) scale(0.98);
+}
+.expand-enter-active[data-v-0521087e] {
+  transition: opacity 0.18s ease, max-height 0.22s ease;
+  max-height: 300px;
+  overflow: hidden;
+}
+.expand-leave-active[data-v-0521087e] {
+  transition: opacity 0.12s ease, max-height 0.18s ease;
+  overflow: hidden;
+}
+.expand-enter-from[data-v-0521087e] {
+  opacity: 0;
+  max-height: 0;
+}
+.expand-leave-to[data-v-0521087e] {
+  opacity: 0;
+  max-height: 0;
+}
+
+.picker-overlay-enter-active[data-v-a19c20aa],
+.picker-overlay-leave-active[data-v-a19c20aa] {
+  transition: opacity 0.2s ease;
+}
+.picker-overlay-enter-from[data-v-a19c20aa],
+.picker-overlay-leave-to[data-v-a19c20aa] {
+  opacity: 0;
+}
+.picker-drawer-enter-active[data-v-a19c20aa],
+.picker-drawer-leave-active[data-v-a19c20aa] {
+  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
+}
+.picker-drawer-enter-from[data-v-a19c20aa],
+.picker-drawer-leave-to[data-v-a19c20aa] {
+  transform: translateX(100%);
+}
+
+.note-enter-active[data-v-0b957c88],
+.note-leave-active[data-v-0b957c88] {
+ transition: opacity 0.2s ease, max-height 0.25s ease;
+ max-height: 60px;
+ overflow: hidden;
+}
+.note-enter-from[data-v-0b957c88],
+.note-leave-to[data-v-0b957c88] {
+ opacity: 0;
+ max-height: 0;
+}
+
+.md-msg[data-v-db5ba171] {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem;
+  font-size: 13px;
+  border: 1px solid;
+  border-radius: 0.5rem;
+}
+.md-msg__icon[data-v-db5ba171] { margin-top: 0.125rem; flex-shrink: 0; font-size: 14px;
+}
+.md-msg__body[data-v-db5ba171] { flex: 1; min-width: 0;
+}
+.md-msg__close[data-v-db5ba171] { opacity: 0.6; cursor: pointer; background: none; border: 0;
+}
+.md-msg__close[data-v-db5ba171]:hover { opacity: 1;
+}
+.md-msg--info[data-v-db5ba171] { background: var(--md-info-bg); border-color: var(--md-info-border); color: var(--md-info-fg);
+}
+.md-msg--success[data-v-db5ba171] { background: var(--md-success-bg); border-color: var(--md-success-border); color: var(--md-success-fg);
+}
+.md-msg--warn[data-v-db5ba171] { background: var(--md-surface)beb; border-color: var(--md-warning-border); color: var(--md-warning-fg);
+}
+.md-msg--error[data-v-db5ba171] { background: var(--md-danger-bg); border-color: var(--md-danger-border); color: var(--md-danger-fg);
+}
+
+/* Auto-save pill: fade + 4px vertical drift on enter/leave */
+.autosave-fade-enter-active[data-v-d422c2b4],
+.autosave-fade-leave-active[data-v-d422c2b4] {
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
+}
+.autosave-fade-enter-from[data-v-d422c2b4] {
+  opacity: 0;
+  transform: translateY(4px);
+}
+.autosave-fade-leave-to[data-v-d422c2b4] {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+/*$vite$:1*/