.dashboard-page {
  position: relative;
  grid-column: 2 / 5;
  grid-row: 1;
  z-index: 75;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  height: 100%;
  overflow: hidden;
  padding: 0;
  background: var(--app-bg);
}

.dashboard-header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.dashboard-header > div {
  min-width: 0;
}

.dashboard-header h1 {
  font-size: 24px;
}

.dashboard-header p:not(.panel-label) {
  max-width: 780px;
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.dashboard-agent-button {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 7px;
  align-items: center;
}

.dashboard-view-tabs {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
}

.dashboard-view-tabs button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-view-tabs button.active,
.dashboard-view-tabs button:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.dashboard-view-tabs .dashboard-add-view {
  color: var(--text);
  background: var(--surface-muted);
}

.dashboard-layout {
  display: grid;
  grid-template-columns: 326px minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
  min-height: 0;
}

.dashboard-catalog,
.dashboard-playground {
  min-width: 0;
  min-height: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dashboard-catalog {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 12px;
  overflow: hidden;
}

.dashboard-catalog-header,
.dashboard-playground-header,
.dashboard-widget-card > header,
.dashboard-agent-dialog header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.dashboard-catalog-header h2,
.dashboard-playground-header h2,
.dashboard-widget-card h3,
.dashboard-agent-dialog h2 {
  margin: 0;
}

.dashboard-catalog-header span,
.dashboard-playground-header p,
.dashboard-widget-card-title p,
.dashboard-agent-dialog header p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.35;
}

.dashboard-category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.dashboard-category-tabs button {
  height: 28px;
  padding: 0 9px;
  color: var(--text-muted);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-category-tabs button.active,
.dashboard-category-tabs button:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.dashboard-widget-list {
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  overflow: auto;
}

.dashboard-catalog-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 30px;
  gap: 9px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 7px;
}

.dashboard-catalog-item strong {
  display: block;
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.dashboard-catalog-item p {
  display: -webkit-box;
  min-width: 0;
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--text-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 12px;
  line-height: 1.3;
}

.dashboard-widget-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: 7px;
}

.dashboard-add-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.dashboard-add-widget.selected {
  color: var(--green);
  background: var(--green-soft);
  cursor: default;
}

.dashboard-playground {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

.dashboard-widget-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(320px, 1fr));
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding-right: 3px;
}

.dashboard-widget-card {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dashboard-widget-card-title {
  display: flex;
  gap: 10px;
  min-width: 0;
}

.dashboard-widget-card-title > div {
  min-width: 0;
}

.dashboard-widget-card h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.dashboard-widget-actions {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

.dashboard-widget-actions .icon-button {
  width: 28px;
  height: 28px;
}

.dashboard-widget-body {
  display: grid;
  gap: 10px;
}

.dw-script-frame {
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
}

/* Fills the widget's grid cell so the viewport-gated mount observer measures
   the widget's real area, not just a line of placeholder text. */
.dw-script-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  user-select: none;
  font-size: 12px;
}

.dw-script-capped {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0.65;
  user-select: none;
  font-size: 12px;
}

.dw-script-capped:hover,
.dw-script-capped:focus-visible {
  color: var(--text);
  opacity: 0.9;
}

.dw-script-capped:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.dashboard-field,
.dashboard-field-row {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.dashboard-field span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.dashboard-field input,
.dashboard-field select,
.dashboard-field textarea {
  width: 100%;
  min-width: 0;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  outline: none;
  font-size: 12px;
}

.dashboard-field input,
.dashboard-field select {
  height: 30px;
  padding: 0 9px;
}

.dashboard-field textarea {
  resize: vertical;
  min-height: 70px;
  padding: 8px 9px;
  line-height: 1.35;
}

.dashboard-field input:focus,
.dashboard-field select:focus,
.dashboard-field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.dashboard-output-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.dashboard-output-grid > div {
  min-width: 0;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.dashboard-output-grid dt {
  margin: 0 0 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboard-output-grid dd {
  display: flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  margin: 0;
}

.dashboard-output-grid code {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px;
}

.dashboard-copy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.dashboard-copy-button:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.dashboard-error {
  margin: 0;
  color: var(--red);
  font-size: 12px;
  font-weight: 700;
}

.dashboard-report-body {
  display: grid;
  gap: 7px;
}

.dashboard-report-body p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-empty {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 0;
  color: var(--text-muted);
  text-align: center;
}

.dashboard-empty h2,
.dashboard-empty p {
  margin: 0;
}

.dashboard-empty p {
  max-width: 360px;
  font-size: 13px;
  line-height: 1.4;
}

.dashboard-dialog-backdrop {
  z-index: 130;
}

.dashboard-agent-dialog {
  display: grid;
  gap: 12px;
  width: min(680px, calc(100vw - 96px));
  max-height: calc(100vh - 80px);
  overflow: auto;
  padding: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.dashboard-agent-dialog .dashboard-field textarea {
  min-height: 250px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}

.dashboard-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

main.dashboard-page {
  --dashboard-shadow-card:
    0 1px 0 rgb(20 30 60 / 4%),
    0 4px 14px -8px rgb(20 30 60 / 18%);
  --dashboard-shadow-ambient: 0 24px 60px -28px rgb(20 30 60 / 30%);
  --dashboard-radius: 10px;
  --dashboard-radius-lg: 14px;
  position: relative;
  grid-column: 2 / 5;
  grid-row: 1;
  z-index: 75;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  color: var(--text);
  background: var(--app-bg);
}

main.dashboard-page.dashboard-page-hidden,
.dashboard-loading.dashboard-page-hidden {
  visibility: hidden;
  pointer-events: none;
}

.dashboard-loading {
  grid-column: 2 / 5;
  grid-row: 1;
  display: grid;
  align-items: end;
  height: 100%;
  padding: 0 0 12px;
  color: var(--text);
  background: var(--app-bg);
  font-size: 13px;
}

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

.dashboard-brand {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-width: 0;
}

.dashboard-brand .crumb {
  color: var(--text);
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -0.022em;
}

.dashboard-brand .crumb::after {
  content: none;
}

.dashboard-view-pills {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 2px;
  overflow-x: auto;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  scrollbar-width: none;
}

.dashboard-view-pills::-webkit-scrollbar {
  display: none;
}

.dashboard-pill,
.dashboard-pill-add {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  min-height: 24px;
  padding: 5px 10px;
  color: var(--text-muted);
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
}

.dashboard-pill {
  position: relative;
  padding-left: 11px;
}

.dashboard-view-pills.is-editing .dashboard-pill {
  cursor: grab;
}

.dashboard-view-pills.is-editing .dashboard-pill.is-dragging {
  cursor: grabbing;
  opacity: 0.62;
}

.dashboard-pill.is-drop-before::before,
.dashboard-pill.is-drop-after::before {
  content: "";
  position: absolute;
  top: 5px;
  bottom: 5px;
  z-index: 2;
  width: 2px;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.dashboard-pill.is-drop-before::before {
  left: -3px;
}

.dashboard-pill.is-drop-after::before {
  right: -3px;
}

.dashboard-pill-main {
  min-width: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.dashboard-pill:hover,
.dashboard-pill-add:hover {
  color: var(--text);
  background: rgb(255 255 255 / 48%);
}

.dashboard-pill.active {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 6%),
    0 0 0 1px var(--accent),
    0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
  font-weight: 650;
}

.dashboard-pill.active::after {
  content: "";
  position: absolute;
  inset: -3px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: inherit;
  opacity: 0.45;
  animation: dashboard-pill-selected-pulse 2.4s ease-in-out infinite;
}

.dashboard-pill.has-tab-color {
  color: var(--dashboard-pill-text);
  background: var(--dashboard-pill-bg);
  border-color: rgb(0 0 0 / 12%);
}

.dashboard-pill.has-tab-color:hover,
.dashboard-pill.has-tab-color.active {
  color: var(--dashboard-pill-text);
  background: var(--dashboard-pill-bg);
  border-color: rgb(0 0 0 / 16%);
  box-shadow:
    0 1px 2px rgb(0 0 0 / 10%),
    inset 0 0 0 1px rgb(255 255 255 / 18%),
    0 0 0 2px color-mix(in srgb, var(--accent) 60%, white 20%),
    0 0 0 5px color-mix(in srgb, var(--accent) 16%, transparent);
}

.dashboard-pill-dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  padding: 0;
  background: var(--accent);
  border: 0;
  border-radius: 50%;
}

button.dashboard-pill-dot {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 1px solid rgb(0 0 0 / 14%);
  cursor: pointer;
}

.dashboard-pill.has-tab-color .dashboard-pill-dot {
  background: currentColor;
}

button.dashboard-pill-dot:hover,
button.dashboard-pill-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dashboard-pill-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  color: var(--text-faint);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  opacity: 0;
}

.dashboard-pill:hover .dashboard-pill-close,
.dashboard-pill.active .dashboard-pill-close {
  opacity: 1;
}

.dashboard-pill-close:hover {
  color: var(--red);
  background: var(--surface-muted);
}

.dashboard-pill.has-tab-color .dashboard-pill-close {
  color: var(--dashboard-pill-muted);
}

.dashboard-pill.has-tab-color .dashboard-pill-close:hover {
  color: var(--dashboard-pill-text);
  background: rgb(255 255 255 / 20%);
}

@keyframes dashboard-pill-selected-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.32;
  }

  50% {
    transform: scale(1.045);
    opacity: 0.78;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-pill.active::after {
    animation: none;
  }
}

.dashboard-tab-gradient-popover {
  position: fixed;
  z-index: 210;
  display: grid;
  grid-template-columns: repeat(5, 24px);
  gap: 6px;
  width: max-content;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: var(--dashboard-shadow-ambient);
}

.dashboard-tab-gradient-popover button {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
}

.dashboard-tab-gradient-popover .dashboard-tab-gradient-none {
  position: relative;
  overflow: hidden;
  background: #ffffff;
}

.dashboard-tab-gradient-popover .dashboard-tab-gradient-none::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -4px;
  width: 34px;
  height: 2px;
  background: #dc2626;
  transform: rotate(-45deg);
  transform-origin: center;
}

.dashboard-tab-gradient-popover button:hover,
.dashboard-tab-gradient-popover button:focus-visible {
  border-color: var(--border-strong);
  outline: none;
}

.dashboard-tab-gradient-popover button.active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dashboard-pill-add {
  color: var(--text-muted);
}

.dashboard-pill-add:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

.dashboard-pill-rename {
  width: 8ch;
  min-width: 5ch;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
}

.dashboard-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.dashboard-actions .btn-ghost,
.dashboard-actions .btn-primary {
  min-height: 28px;
  padding-block: 5px;
}

.dashboard-page .dw-canvas-stack {
  margin: 0;
}

.dashboard-density {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dashboard-density button {
  min-height: 24px;
  padding: 0 8px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11.5px;
}

.dashboard-density button.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 650;
}

.btn-ghost,
.btn-primary {
  --button-shadow-color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12.5px;
  line-height: 1;
}

.btn-ghost {
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
}

.btn-ghost:hover {
  color: var(--text);
  background: var(--surface-muted);
  border-color: var(--border);
}

.btn-primary {
  color: var(--surface);
  background: var(--accent);
  border: 1px solid rgb(0 0 0 / 4%);
  box-shadow: var(--button-shadow);
  font-weight: 700;
}

.btn-primary:hover {
  filter: brightness(1.05);
}

.dw-canvas-stack {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.dw-canvas-scroll {
  box-sizing: border-box;
  position: relative;
  --dw-canvas-padding-x: 20px;
  --dw-canvas-padding-top: 18px;
  --dw-canvas-padding-bottom: 60px;
  --dw-grid-dot: rgb(23 32 43 / 14%);
  --dw-grid-dot-soft: rgb(23 32 43 / 5%);
  --dw-grid-column-width: calc((100% - (var(--dw-grid-gap-x, 16px) * 13)) / 12);
  --dw-grid-step-x: calc(var(--dw-grid-column-width) + var(--dw-grid-gap-x, 16px));
  --dw-grid-step-y: calc(var(--dw-row-height, 68px) + var(--dw-grid-gap-y, 16px));
  height: 100%;
  min-height: 0;
  padding: var(--dw-canvas-padding-top) var(--dw-canvas-padding-x) var(--dw-canvas-padding-bottom);
  overflow-x: hidden;
  overflow-y: auto;
}

.dw-canvas-scroll.is-cached-view {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.dw-canvas {
  min-height: 100%;
}

/* Custom per-view background layer: expands across the scroll padding so no page background shows around the canvas. */
.dw-canvas-bg,
.dw-canvas-blueprint {
  position: absolute;
  top: calc(-1 * var(--dw-canvas-padding-top, 18px));
  right: calc(-1 * var(--dw-canvas-padding-x, 20px));
  bottom: calc(-1 * var(--dw-canvas-padding-bottom, 60px));
  left: calc(-1 * var(--dw-canvas-padding-x, 20px));
  pointer-events: none;
}

.dw-canvas-bg {
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.dw-canvas-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dw-bg-dim-color, transparent);
}

.dw-canvas-bg-video {
  overflow: hidden;
}

.dw-dashboard-background-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.dw-canvas-bg-video-layer {
  position: absolute;
  inset: 0;
  visibility: hidden;
  opacity: 0;
}

.dw-canvas-bg-video-layer.active {
  visibility: visible;
  opacity: 1;
}

.dw-canvas-bg-video-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dw-bg-dim-color, transparent);
}

.dw-canvas-bg-video video {
  display: block;
  width: 100%;
  height: 100%;
}

.dw-dynamic-bg-layer {
  overflow: hidden;
}

.dw-dynamic-bg-layer > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.dw-dynamic-bg-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.dw-dynamic-bg-canvas-matrix {
  background: #050a08;
}

.dw-dynamic-bg-canvas-particle-cursor {
  background: #08080e;
}

.dw-bg-aurora {
  overflow: hidden;
  background: linear-gradient(180deg, #0b1023 0%, #131a36 60%, #0a0f24 100%);
}

.dw-aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.85;
  mix-blend-mode: screen;
  will-change: transform;
}

.dw-aurora-1 {
  top: -10%;
  left: -8%;
  width: 60%;
  height: 55%;
  background: radial-gradient(circle, #4dd0e1 0%, transparent 70%);
  animation: dw-aurora-drift-1 22s ease-in-out infinite alternate;
}

.dw-aurora-2 {
  top: 10%;
  right: -12%;
  width: 70%;
  height: 60%;
  background: radial-gradient(circle, #a78bfa 0%, transparent 70%);
  animation: dw-aurora-drift-2 28s ease-in-out infinite alternate;
}

.dw-aurora-3 {
  bottom: -15%;
  left: 20%;
  width: 55%;
  height: 50%;
  background: radial-gradient(circle, #34d399 0%, transparent 70%);
  animation: dw-aurora-drift-3 30s ease-in-out infinite alternate;
}

.dw-aurora-grain {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgb(255 255 255 / 8%) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.18;
  mix-blend-mode: overlay;
}

@keyframes dw-aurora-drift-1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(15%, 10%, 0) scale(1.15); }
}

@keyframes dw-aurora-drift-2 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to { transform: translate3d(-10%, 18%, 0) scale(0.95); }
}

@keyframes dw-aurora-drift-3 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(-20%, -12%, 0) scale(1.2); }
}

.dw-bg-synthwave {
  overflow: hidden;
  background: #0a0420;
}

.dw-sw-sky {
  position: absolute;
  inset: 0 0 50%;
  background:
    radial-gradient(ellipse at 50% 100%, rgb(255 100 200 / 35%) 0%, transparent 60%),
    linear-gradient(180deg, #0a0420 0%, #2c0a4a 60%, #5b1268 100%);
}

.dw-sw-sun {
  position: absolute;
  top: 26%;
  left: 50%;
  width: 280px;
  height: 280px;
  background: linear-gradient(180deg, #ffb84d 0%, #ff5e9c 50%, #c026d3 100%);
  border-radius: 50%;
  box-shadow: 0 0 80px rgb(255 94 156 / 55%), 0 0 200px rgb(255 94 156 / 35%);
  transform: translate(-50%, 0);
}

.dw-sw-sun::before,
.dw-sw-sun::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  background: #0a0420;
}

.dw-sw-sun::before {
  top: 56%;
  height: 6px;
  box-shadow: 0 16px 0 0 #0a0420, 0 38px 0 0 #0a0420, 0 66px 0 0 #0a0420;
}

.dw-sw-mountains {
  position: absolute;
  top: 42%;
  right: 0;
  left: 0;
  height: 10%;
  background: linear-gradient(180deg, transparent 0%, #1a0838 100%);
  clip-path: polygon(0 100%, 8% 30%, 16% 70%, 24% 20%, 32% 60%, 40% 25%, 48% 70%, 56% 30%, 64% 65%, 72% 20%, 80% 55%, 88% 25%, 96% 65%, 100% 30%, 100% 100%);
}

.dw-sw-grid {
  position: absolute;
  top: 50%;
  right: 0;
  bottom: 0;
  left: 0;
  background:
    linear-gradient(rgb(255 94 156 / 55%) 1px, transparent 1px) 0 0 / 100% 40px,
    linear-gradient(90deg, rgb(255 94 156 / 55%) 1px, transparent 1px) 0 0 / 40px 100%;
  transform: perspective(380px) rotateX(60deg);
  transform-origin: center top;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 100%);
  animation: dw-sw-grid 2.4s linear infinite;
}

@keyframes dw-sw-grid {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 40px, 0 0; }
}

.dw-sw-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / 2.5%) 0, rgb(255 255 255 / 2.5%) 1px, transparent 1px, transparent 3px);
}

.dw-canvas-blueprint {
  z-index: 1;
  background-image:
    radial-gradient(circle, var(--dw-grid-dot) 1px, transparent 1.4px),
    radial-gradient(circle, var(--dw-grid-dot-soft) 1px, transparent 1.4px);
  background-size:
    var(--dw-grid-step-x) var(--dw-grid-step-y),
    16px 16px;
  background-position: var(--dw-canvas-padding-x, 20px) var(--dw-canvas-padding-top, 18px), 0 0;
}

.dw-canvas-host {
  position: relative;
  z-index: 1;
  min-height: 100%;
}

.dw-canvas-host > .dw-canvas {
  position: relative;
  z-index: 2;
}

.react-grid-layout.dw-canvas {
  overflow: visible;
}

.dw-canvas .react-grid-item.react-grid-placeholder {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--dashboard-radius-lg);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 45%);
  opacity: 0.14;
}

.dw-instance {
  --w-accent: var(--accent);
  --w-accent-soft: var(--accent-soft);
  --w-title-text: var(--text);
  position: relative;
  display: flex;
  height: 100%;
  color: var(--text);
  animation: dw-widget-fade-in 100ms ease-out;
}

.dw-custom-widget.dw-reveal-space-warp {
  overflow: hidden;
  animation: dw-widget-space-warp 1000ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dw-custom-widget.dw-reveal-space-warp::before,
.dw-custom-widget.dw-reveal-space-warp::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  content: "";
  border-radius: inherit;
}

.dw-custom-widget.dw-reveal-space-warp::before {
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 88%) 0 2%, rgb(125 211 252 / 44%) 7%, transparent 28%),
    conic-gradient(from 90deg at 50% 50%, transparent 0 8%, rgb(96 165 250 / 74%) 10%, transparent 13% 23%, rgb(45 212 191 / 56%) 25%, transparent 28% 40%, rgb(167 139 250 / 62%) 43%, transparent 46% 100%);
  filter: blur(0.5px) saturate(1.28);
  opacity: 0;
  transform: scale(0.2) rotate(-14deg);
  animation: dw-widget-space-warp-flare 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.dw-custom-widget.dw-reveal-space-warp::after {
  background:
    linear-gradient(90deg, transparent 0 18%, rgb(255 255 255 / 62%) 22%, transparent 26% 100%),
    linear-gradient(66deg, transparent 0 35%, rgb(125 211 252 / 56%) 40%, transparent 45% 100%),
    linear-gradient(114deg, transparent 0 38%, rgb(196 181 253 / 46%) 42%, transparent 47% 100%);
  background-size: 190% 100%, 160% 100%, 170% 100%;
  mix-blend-mode: screen;
  opacity: 0;
  transform: scaleX(0.18);
  animation: dw-widget-space-warp-streaks 1000ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dw-widget-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes dw-widget-space-warp {
  0% {
    opacity: 0;
    filter: brightness(1.45) saturate(1.45);
    transform: perspective(700px) translateZ(-56px) scale(0.9);
  }

  34% {
    opacity: 1;
    filter: brightness(1.22) saturate(1.24);
    transform: perspective(700px) translateZ(18px) scale(1.025);
  }

  62% {
    filter: brightness(1.08) saturate(1.08);
    transform: perspective(700px) translateZ(0) scale(0.998);
  }

  100% {
    opacity: 1;
    filter: none;
    transform: perspective(700px) translateZ(0) scale(1);
  }
}

@keyframes dw-widget-space-warp-flare {
  0% {
    opacity: 0;
    transform: scale(0.16) rotate(-16deg);
  }

  24% {
    opacity: 0.95;
  }

  68% {
    opacity: 0.32;
  }

  100% {
    opacity: 0;
    transform: scale(2.8) rotate(8deg);
  }
}

@keyframes dw-widget-space-warp-streaks {
  0% {
    opacity: 0;
    background-position: 115% 0, -60% 0, 140% 0;
    transform: scaleX(0.18);
  }

  18% {
    opacity: 0.86;
  }

  58% {
    opacity: 0.34;
    transform: scaleX(1);
  }

  100% {
    opacity: 0;
    background-position: -45% 0, 120% 0, -80% 0;
    transform: scaleX(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw-instance {
    animation: none;
  }

  .dw-custom-widget.dw-reveal-space-warp,
  .dw-custom-widget.dw-reveal-space-warp::before,
  .dw-custom-widget.dw-reveal-space-warp::after {
    animation: none;
    transform: none;
    filter: none;
  }

  .dw-custom-widget.dw-reveal-space-warp::before,
  .dw-custom-widget.dw-reveal-space-warp::after {
    opacity: 0;
  }
}

.dw-instance.dw-edit {
  outline: 1px dashed var(--border-strong);
  outline-offset: 2px;
  border-radius: var(--dashboard-radius-lg);
}

.dw-instance.dw-edit.drag-handle,
.dw-instance.dw-edit .drag-handle {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.react-grid-item.react-draggable-dragging .dw-instance.dw-edit.drag-handle,
.react-grid-item.react-draggable-dragging .dw-instance.dw-edit .drag-handle {
  cursor: grabbing;
}

.react-grid-item > .react-resizable-handle {
  z-index: 3;
  background-image: none !important;
  opacity: 1;
  padding: 0 !important;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.react-grid-item > .react-resizable-handle::after {
  display: none;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-e,
.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  top: 0 !important;
  width: 10px !important;
  height: 100% !important;
  margin-top: 0 !important;
  transform: none !important;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-e {
  right: -5px !important;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-w {
  left: -5px !important;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-n,
.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  left: 0 !important;
  width: 100% !important;
  height: 10px !important;
  margin-left: 0 !important;
  transform: none !important;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-n {
  top: -5px !important;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-s {
  bottom: -5px !important;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-nw,
.react-grid-item > .react-resizable-handle.react-resizable-handle-ne,
.react-grid-item > .react-resizable-handle.react-resizable-handle-sw,
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  transform: none !important;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-nw {
  top: -6px !important;
  left: -6px !important;
  cursor: nwse-resize;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-ne {
  top: -6px !important;
  right: -6px !important;
  cursor: nesw-resize;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-sw {
  bottom: -6px !important;
  left: -6px !important;
  cursor: nesw-resize;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  right: -6px !important;
  bottom: -6px !important;
  cursor: nwse-resize;
}

.dw-preset {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--dashboard-radius-lg);
  box-shadow: var(--dashboard-shadow-card);
}

.dw-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 10px 12px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-muted) 100%);
  border-bottom: 1px solid var(--border);
}

.dw-preset-panel .dw-head {
  color: var(--w-title-text);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--w-accent) 82%, var(--surface) 18%) 0%,
      color-mix(in srgb, var(--w-accent) 64%, black) 100%
    );
  border-bottom-color: color-mix(in srgb, var(--w-accent) 60%, transparent);
}

.dw-title,
.dw-hero-title {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0;
}

.dw-preset-panel .dw-title {
  color: var(--w-title-text);
  text-shadow: 0 1px 1px rgb(0 0 0 / 22%);
}

/* Inline title editor opened by double-clicking a panel/hero title. Inherits the
   title typography via the shared .dw-title / .dw-hero-title class. */
.dw-title-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1px 4px;
  color: inherit;
  background: rgb(255 255 255 / 14%);
  border: 1px solid color-mix(in srgb, var(--w-accent) 55%, transparent);
  border-radius: 4px;
  outline: none;
  text-shadow: none;
}

.dw-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  color: var(--w-accent);
  background: var(--w-accent-soft);
  border-radius: 8px;
}

.dw-title-material-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
}

.dw-preset-panel .dw-icon {
  color: var(--w-title-text);
  background: rgb(255 255 255 / 18%);
}

.dw-body,
.dw-hero-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 12px;
  overflow: auto;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* Panel preset: the body owns its own surface so --w-body-opacity can fade
   only the canvas, leaving the accent-colored head fully opaque. */
.dw-preset-panel {
  background: transparent;
  box-shadow: var(--dashboard-shadow-card);
}

/* Fade the body surface with a translucent color rather than an absolutely
   positioned ::before. A pseudo-element with `inset: 0` inside this
   `overflow: auto` body is sized to the client box and anchored to the content
   top in WebKit (macOS WKWebView), so it failed to cover content past the first
   row. A normal element background always covers the full scroll area, and a
   color-mix keeps the fade off the body's content (unlike `opacity`). */
.dw-preset-panel .dw-body {
  position: relative;
  z-index: 0;
  background: color-mix(
    in srgb,
    var(--surface) calc(var(--w-body-opacity, 100) * 1%),
    transparent
  );
}

.dw-custom-widget .dw-head {
  min-height: 38px;
  padding: 5px 6px;
}

.dw-custom-widget .dw-body {
  padding: 6px;
}

.dw-custom-widget.dw-instance .dw-preset-ambient {
  gap: 5px;
  padding: 8px 9px;
}

.dw-custom-widget.dw-instance .dw-preset-ambient--glass {
  padding: 9px;
}

.dw-custom-widget .dw-hero-head {
  padding: 9px 9px 0;
}

.dw-custom-widget .dw-hero-body {
  padding: 6px 9px 9px;
}

.dw-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 120ms ease;
}

.dw-instance:hover .dw-controls,
.dw-instance.dw-edit .dw-controls {
  opacity: 1;
}

.dw-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  color: var(--text-muted);
  background: rgb(255 255 255 / 78%);
  border: 1px solid var(--border);
  border-radius: 5px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  cursor: pointer;
}

.dw-ctrl:hover {
  color: var(--text);
  background: var(--surface);
}

.dw-ctrl-properties {
  color: var(--text-muted);
  background: transparent;
  border-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.dw-ctrl-properties:hover {
  color: var(--text);
  background: transparent;
}

.dw-ctrl.danger:hover,
.dw-ctrl.danger.confirming {
  color: var(--red);
  border-color: var(--red);
}

.dw-preset-ambient {
  gap: 10px;
  padding: 16px 18px;
  overflow: visible;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dw-ambient-label {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-faint);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dw-dot {
  width: 6px;
  height: 6px;
  background: var(--w-accent);
  border-radius: 50%;
}

.dw-preset-ambient--glass {
  position: relative;
  isolation: isolate;
  padding: 18px;
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(180deg, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 18%) 38%, rgb(255 255 255 / 8%) 100%),
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--w-accent) 28%, transparent) 0%, transparent 60%),
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--w-accent) 18%, transparent) 0%, transparent 65%),
    rgb(255 255 255 / 42%);
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 22px;
  box-shadow: var(--dashboard-shadow-card);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
}

.dw-preset-ambient--glass::before {
  content: none;
}

.dw-preset-ambient--glass::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 10%;
  left: 10%;
  z-index: 0;
  height: 40%;
  pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgb(255 255 255 / 55%) 0%, rgb(255 255 255 / 0%) 70%);
  border-radius: 50%;
}

.dw-preset-ambient--glass > * {
  position: relative;
  z-index: 1;
}

.dw-preset-hero {
  position: relative;
  min-height: 130px;
  color: #fff;
  background: linear-gradient(135deg, var(--w-accent) 0%, color-mix(in srgb, var(--w-accent) 70%, black) 100%);
  border: 0;
  box-shadow: var(--dashboard-shadow-card);
}

.dw-preset-hero::before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  pointer-events: none;
  background: rgb(255 255 255 / 8%);
  border-radius: 50%;
}

.dw-hero-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 0;
}

.dw-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgb(255 255 255 / 18%);
  border-radius: 8px;
}

.dw-hero-title,
.dw-hero-body {
  color: #fff;
}

.dw-hero-body {
  position: relative;
  padding: 12px 18px 18px;
  opacity: 0.92;
  font-size: 13px;
}

.dw-stack-fields {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.dw-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
}

.dw-field > span {
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dw-field input,
.dw-field textarea,
.dw-field select,
.dw-customize input {
  width: 100%;
  min-width: 0;
  padding: 7px 9px;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  outline: 0;
  font-size: 12.5px;
}

.dw-field textarea {
  min-height: 60px;
  resize: vertical;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

.dw-field input:focus,
.dw-field textarea:focus,
.dw-field select:focus,
.dw-customize input:focus {
  border-color: var(--w-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent, var(--accent)) 18%, transparent);
}

.dw-secondary-button {
  min-height: 28px;
  padding: 5px 9px;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 650;
}

.dw-kv {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 8px;
}

.dw-kv > span:nth-child(odd),
.dw-kv-label {
  color: var(--text-faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dw-kv > span:nth-child(even),
.dw-kv > code,
.dw-kv-value {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

.dw-kv-row {
  display: contents;
}

.dw-checklist {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.65;
}

.dw-content-rich {
  min-width: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.dw-content-rich > :first-child {
  margin-top: 0;
}

.dw-content-rich > :last-child {
  margin-bottom: 0;
}

.dw-content-rich h1,
.dw-content-rich h2,
.dw-content-rich h3,
.dw-content-rich h4,
.dw-content-rich h5,
.dw-content-rich h6,
.dw-content-rich p,
.dw-content-rich ul,
.dw-content-rich ol,
.dw-content-rich blockquote,
.dw-content-rich table {
  margin: 0 0 0.65em;
}

.dw-content-rich h1,
.dw-content-rich h2,
.dw-content-rich h3,
.dw-content-rich h4,
.dw-content-rich h5,
.dw-content-rich h6 {
  color: var(--text);
  font-weight: 750;
  line-height: 1.2;
}

.dw-content-rich h1 { font-size: 17px; }
.dw-content-rich h2 { font-size: 15px; }
.dw-content-rich h3,
.dw-content-rich h4,
.dw-content-rich h5,
.dw-content-rich h6 { font-size: 13px; }

.dw-content-rich ul,
.dw-content-rich ol {
  padding-left: 18px;
}

.dw-content-rich a {
  color: var(--accent);
  font-weight: 650;
}

.dw-content-rich :not(pre) > code {
  padding: 1px 4px;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.92em;
}

.dw-content-rich pre {
  max-width: 100%;
  overflow: auto;
  padding: 8px;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dw-content-rich img,
.dw-content-rich table {
  max-width: 100%;
}

.dw-empty,
.dw-muted {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
}

.dw-muted a {
  color: var(--accent);
  font-weight: 650;
  text-decoration: none;
}

.dw-muted a:hover,
.dw-muted a:focus-visible {
  text-decoration: underline;
  outline: none;
}

.dw-warning-text {
  margin: 0;
  color: var(--amber);
  font-size: 12px;
  line-height: 1.45;
}

.dw-customize {
  position: fixed;
  z-index: 160;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow:
    0 16px 48px -12px rgb(0 0 0 / 28%),
    inset 0 0 0 1px rgb(255 255 255 / 5%);
  font-size: 12.5px;
  overflow: hidden;
}

.dw-customize-dismiss-layer {
  position: fixed;
  inset: 0;
  z-index: 159;
  background: transparent;
}

.dw-customize-tabs {
  display: flex;
  gap: 3px;
  padding: 3px;
  background: var(--surface-muted);
  border-radius: 8px;
}

.dw-customize-tabs button {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 8px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  text-align: center;
}

.dw-customize-tabs button:hover {
  color: var(--text);
}

.dw-customize-tabs button.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: var(--dashboard-shadow-card);
  font-weight: 600;
}

.dw-customize-pane {
  max-height: min(560px, 80vh);
  padding: 14px;
  overflow-y: auto;
}

.dw-customize-pane section + section {
  margin-top: 12px;
}

.dw-customize-pane h4 {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dw-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dw-field-row > span {
  flex: 1 1 auto;
}

.dw-preset-picker,
.dw-accent-picker,
.dw-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.dw-icon-picker {
  max-height: 120px;
  overflow: auto;
}

.dw-icon-library-picker .icon-library-grid {
  max-height: 160px;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
}

.dw-preset-picker button,
.dw-icon-picker button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 4px 8px;
  color: var(--text-muted);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11px;
}

.dw-icon-picker button {
  width: 28px;
  height: 28px;
  padding: 0;
}

.dw-preset-picker button.active,
.dw-icon-picker button.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
}

.dw-accent-picker {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.dw-accent-picker button {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.dw-accent-picker button.active {
  border-color: var(--text);
  box-shadow: inset 0 0 0 2px var(--surface);
}

.dw-source-view {
  max-height: 160px;
  margin: 0;
  padding: 8px;
  overflow: auto;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 11px;
}

.dw-source-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin: 8px 0;
}

.dw-source-editor {
  width: 100%;
  min-height: 260px;
  margin: 0;
  padding: 8px;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  line-height: 1.45;
}

.dw-source-editor:focus {
  border-color: var(--w-accent, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--w-accent, var(--accent)) 18%, transparent);
  outline: 0;
}

.dw-catalog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  overflow: auto;
  background: color-mix(in srgb, var(--app-bg) 60%, transparent);
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

.dw-catalog {
  display: flex;
  flex-direction: column;
  width: min(940px, 100%);
  max-height: 82vh;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow:
    0 18px 44px -28px rgb(0 0 0 / 14%),
    0 2px 10px -6px rgb(0 0 0 / 10%),
    inset 0 0 0 1px rgb(255 255 255 / 4%);
}

.dw-catalog header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--border);
}

.dw-catalog header h2 {
  flex: 1 1 auto;
  margin: 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 650;
}

.dw-catalog header input {
  flex: 0 0 260px;
  min-width: 160px;
  padding: 7px 10px;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  outline: 0;
  font-size: 12.5px;
}

.dw-catalog header button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.dw-catalog header button:hover {
  color: var(--text);
  background: var(--surface-muted);
  border-color: var(--border);
}

.dw-catalog-tabs {
  display: flex;
  gap: 2px;
  padding: 10px 22px;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
}

.dw-catalog-tabs button {
  flex: 0 0 auto;
  padding: 5px 10px;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
}

.dw-catalog-tabs button.active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 650;
}

.dw-catalog-tabs button:hover:not(.active) {
  color: var(--text);
  background: var(--surface-muted);
}

.dw-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  padding: 18px 22px 22px;
  overflow: auto;
}

.dw-catalog-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 12px;
  height: 220px;
  overflow: hidden;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  transition:
    transform 120ms ease,
    box-shadow 120ms ease,
    border-color 120ms ease;
}

.dw-catalog-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--dashboard-shadow-card);
  transform: translateY(-2px);
}

.dw-catalog-card h4 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.dw-catalog-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dw-catalog-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}

.dw-catalog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 22px 0;
}

.dw-catalog-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 550;
}

.dw-catalog-action:hover:not(:disabled) {
  color: var(--text);
  background: var(--surface-muted);
  border-color: var(--border-strong);
}

.dw-catalog-action:disabled {
  opacity: 0.45;
  cursor: default;
}

.dw-widget-import-source {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.dw-widget-import-source span {
  min-width: 0;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dw-widget-import-empty,
.dw-widget-import-error,
.dw-widget-import-preview {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: 12px;
}

.dw-widget-import-error {
  border-color: color-mix(in srgb, var(--red) 28%, var(--border));
  background: color-mix(in srgb, var(--red) 8%, var(--surface-muted));
  color: var(--red);
}

.dw-widget-import-preview {
  display: grid;
  gap: 8px;
  color: var(--text);
}

.dw-widget-import-preview > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dw-widget-import-preview ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 22px;
  color: var(--text-muted);
}

.dw-widget-import-preview p {
  margin: 0;
  color: var(--text-muted);
}

.dw-catalog-export {
  position: absolute;
  bottom: 6px;
  right: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1;
  transition:
    background 100ms ease,
    border-color 100ms ease,
    color 100ms ease;
}

.dw-catalog-export:hover,
.dw-catalog-export:focus-visible {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 25%, transparent);
  outline: none;
}

.dw-catalog-delete {
  position: absolute;
  bottom: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--red);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  z-index: 1;
  transition:
    background 100ms ease,
    border-color 100ms ease;
}

.dw-catalog-delete:hover,
.dw-catalog-delete:focus-visible {
  background: color-mix(in srgb, var(--red) 12%, transparent);
  border-color: color-mix(in srgb, var(--red) 25%, transparent);
  outline: none;
}

.dw-catalog-tag {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.dw-catalog-tag--builtIn {
  color: var(--accent);
  background: var(--accent-soft);
}

.dw-catalog-tag--custom {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.12);
}

.dw-badge {
  padding: 1px 5px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
}

.dw-badge--ai {
  color: var(--amber);
  background: var(--amber-soft);
}

.dw-badge--imported {
  color: var(--accent);
  background: var(--accent-soft);
}

.dw-badge--check {
  color: var(--green);
  background: var(--green-soft);
}

.dw-catalog-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 80px;
  background: var(--w-accent-soft, var(--surface-muted));
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--w-accent, var(--accent));
}

.app-launcher-widget {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  border-radius: 8px;
  transition:
    background-color 120ms ease,
    box-shadow 120ms ease;
}

.app-launcher-widget.is-drop-target {
  background: color-mix(in srgb, var(--w-accent-soft) 72%, transparent);
  box-shadow: inset 0 0 0 1px var(--w-accent);
}

.app-launcher-widget-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.app-launcher-view-mode {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 7px;
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.app-launcher-view-mode button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}

.app-launcher-view-mode button:hover,
.app-launcher-view-mode button:focus-visible {
  color: var(--text);
  background: var(--surface);
  outline: none;
}

.app-launcher-view-mode button.active {
  color: var(--w-accent);
  background: var(--surface);
  box-shadow: var(--dashboard-shadow-card);
}

.app-launcher-widget:hover .app-launcher-view-mode,
.app-launcher-widget:focus-within .app-launcher-view-mode,
.app-launcher-widget.is-adding .app-launcher-view-mode,
.app-launcher-widget.is-drop-target .app-launcher-view-mode {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.app-launcher-widget .app-launcher-add {
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.app-launcher-widget:hover .app-launcher-add,
.app-launcher-widget:focus-within .app-launcher-add,
.app-launcher-widget.is-adding .app-launcher-add,
.app-launcher-widget.is-drop-target .app-launcher-add {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}

.app-launcher-tile-grid {
  display: grid;
  align-content: start;
  align-items: start;
  grid-auto-rows: max-content;
  grid-template-columns: repeat(auto-fill, minmax(86px, 1fr));
  gap: 10px;
}

.app-launcher-tile-grid[data-view-mode="list"],
.app-launcher-tile-grid[data-view-mode="details"] {
  align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.app-launcher-sort-header {
  display: grid;
  gap: 10px;
  padding: 0 10px 2px 48px;
  color: var(--text-faint);
  font-size: 10.5px;
  font-weight: 650;
}

.app-launcher-list-header {
  grid-template-columns: minmax(0, 1fr);
}

.app-launcher-details-header {
  grid-template-columns:
    minmax(96px, 1.1fr)
    minmax(72px, 0.7fr)
    minmax(58px, 0.45fr)
    minmax(88px, 0.75fr)
    minmax(0, 1.25fr);
}

.app-launcher-sort-header button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.app-launcher-sort-header button:hover,
.app-launcher-sort-header button:focus-visible,
.app-launcher-sort-header button.active {
  color: var(--text);
  outline: none;
}

.app-launcher-sort-header button span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-launcher-sort-indicator {
  display: inline-flex;
  flex: 0 0 auto;
}

.app-launcher-tile {
  position: relative;
  --app-launcher-tile-scale: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 0;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: default;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease,
    opacity 120ms ease,
    transform 120ms ease;
}

.app-launcher-widget-list .app-launcher-tile,
.app-launcher-widget-details .app-launcher-tile {
  background: var(--surface);
  border-color: var(--border);
}

.app-launcher-widget.is-managing .app-launcher-tile {
  cursor: grab;
  animation: app-launcher-tile-wiggle 180ms ease-in-out infinite alternate;
}

.app-launcher-widget.is-managing .app-launcher-tile:nth-child(2n) {
  animation-direction: alternate-reverse;
}

.app-launcher-widget.is-managing .app-launcher-tile:active {
  cursor: grabbing;
}

.app-launcher-tile-launch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 92px;
  min-width: 0;
  padding: 10px 6px;
  color: inherit;
  font: inherit;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.app-launcher-widget-list .app-launcher-tile-launch,
.app-launcher-widget-details .app-launcher-tile-launch {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  height: auto;
  padding: 7px 9px;
  text-align: left;
  background: transparent;
  border: 0;
}

.app-launcher-widget-details .app-launcher-tile-launch {
  grid-template-columns:
    30px
    minmax(96px, 1.1fr)
    minmax(72px, 0.7fr)
    minmax(58px, 0.45fr)
    minmax(88px, 0.75fr)
    minmax(0, 1.25fr);
  gap: 10px;
}

.app-launcher-widget-icons .app-launcher-tile:hover .app-launcher-tile-launch,
.app-launcher-widget-icons .app-launcher-tile:focus-within .app-launcher-tile-launch {
  border-color: var(--border-strong);
  box-shadow: var(--dashboard-shadow-card);
}

.app-launcher-widget-list .app-launcher-tile:hover,
.app-launcher-widget-list .app-launcher-tile:focus-within,
.app-launcher-widget-details .app-launcher-tile:hover,
.app-launcher-widget-details .app-launcher-tile:focus-within {
  border-color: var(--border-strong);
  box-shadow: var(--dashboard-shadow-card);
}

.app-launcher-widget.is-managing .app-launcher-tile-launch {
  cursor: grab;
}

.app-launcher-tile-remove {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: #fff;
  background: var(--red);
  border: 1px solid rgb(255 255 255 / 85%);
  border-radius: 999px;
  box-shadow: 0 4px 10px rgb(0 0 0 / 20%);
  cursor: pointer;
}

.app-launcher-tile-remove:hover,
.app-launcher-tile-remove:focus-visible {
  filter: brightness(1.04);
}

.app-launcher-tile.is-reordering {
  opacity: 0.55;
  --app-launcher-tile-scale: 0.98;
}

.app-launcher-tile.is-reorder-before,
.app-launcher-tile.is-reorder-after {
  border-color: var(--w-accent);
  box-shadow:
    inset 0 0 0 1px var(--w-accent),
    var(--dashboard-shadow-card);
}

.app-launcher-tile.is-reorder-before::before,
.app-launcher-tile.is-reorder-after::after {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 3px;
  content: "";
  background: var(--w-accent);
  border-radius: 999px;
}

.app-launcher-tile.is-reorder-before::before {
  left: -6px;
}

.app-launcher-tile.is-reorder-after::after {
  right: -6px;
}

.app-launcher-widget-list .app-launcher-tile.is-reorder-before::before,
.app-launcher-widget-list .app-launcher-tile.is-reorder-after::after,
.app-launcher-widget-details .app-launcher-tile.is-reorder-before::before,
.app-launcher-widget-details .app-launcher-tile.is-reorder-after::after {
  right: 8px;
  left: 8px;
  width: auto;
  height: 3px;
}

.app-launcher-widget-list .app-launcher-tile.is-reorder-before::before,
.app-launcher-widget-details .app-launcher-tile.is-reorder-before::before {
  top: -5px;
  bottom: auto;
}

.app-launcher-widget-list .app-launcher-tile.is-reorder-after::after,
.app-launcher-widget-details .app-launcher-tile.is-reorder-after::after {
  top: auto;
  bottom: -5px;
}

@keyframes app-launcher-tile-wiggle {
  from {
    transform: rotate(-1deg) scale(var(--app-launcher-tile-scale));
  }

  to {
    transform: rotate(1deg) scale(var(--app-launcher-tile-scale));
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-launcher-widget.is-managing .app-launcher-tile {
    animation: none;
  }
}

.app-launcher-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  color: var(--w-accent);
  background: var(--w-accent-soft);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 4%);
}

.app-launcher-widget-list .app-launcher-tile-icon,
.app-launcher-widget-details .app-launcher-tile-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
}

.app-launcher-tile-icon img {
  max-width: 30px;
  max-height: 30px;
}

.app-launcher-widget-list .app-launcher-tile-icon img,
.app-launcher-widget-details .app-launcher-tile-icon img {
  max-width: 22px;
  max-height: 22px;
}

.app-launcher-tile-label {
  max-width: 100%;
  color: var(--text);
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.app-launcher-widget-list .app-launcher-tile-label,
.app-launcher-widget-details .app-launcher-tile-label {
  justify-self: start;
}

.app-launcher-tile-type,
.app-launcher-tile-size,
.app-launcher-tile-modified,
.app-launcher-tile-path {
  min-width: 0;
  overflow: hidden;
  color: var(--text-faint);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 10.5px;
  line-height: 1.2;
}

.app-launcher-tile-size {
  justify-self: end;
}

.app-launcher-widget-empty {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 18px 14px;
  color: var(--text-muted);
  text-align: center;
  background: var(--surface-muted);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
}

.app-launcher-widget-empty h4,
.app-launcher-widget-empty p {
  margin: 0;
}

.app-launcher-widget-empty h4 {
  color: var(--text);
  font-size: 13px;
}

.app-launcher-widget-empty p {
  max-width: 28rem;
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-widget-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 31px;
  padding: 7px 10px;
  color: var(--text);
  white-space: nowrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 650;
}

.dashboard-widget-icon-button:hover,
.dashboard-widget-icon-button:focus-visible {
  border-color: var(--border-strong);
  box-shadow: var(--dashboard-shadow-card);
  outline: none;
}

.dashboard-widget-icon-button.compact {
  min-height: 26px;
  padding: 5px 8px;
  color: var(--text-muted);
  font-size: 11.5px;
}

.dashboard-widget-empty-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  min-height: 150px;
  padding: 18px 14px;
  color: var(--text-muted);
  text-align: center;
  background: var(--surface-muted);
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
}

.dashboard-widget-empty-state h4,
.dashboard-widget-empty-state p,
.dashboard-widget-error {
  margin: 0;
}

.dashboard-widget-empty-state h4 {
  color: var(--text);
  font-size: 13px;
}

.dashboard-widget-empty-state p,
.dashboard-widget-error {
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-widget-error {
  padding: 8px 10px;
  color: var(--red);
  background: var(--surface-muted);
  border: 1px solid color-mix(in srgb, var(--red) 35%, transparent);
  border-radius: 7px;
}

.dashboard-connection-widget {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.dashboard-connection-widget-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.dashboard-connection-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  color: var(--text-muted);
  background: var(--surface-muted);
  border: 1px dashed var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}

.dashboard-connection-add:hover {
  color: var(--text);
  background: var(--surface);
  border-color: var(--w-accent);
}

.dashboard-connection-launcher {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--nav-toolbar-bg);
  border: 1px solid var(--terminal-border);
  border-radius: 9px;
}

.dashboard-connection-launcher-search {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 6px 8px;
  color: color-mix(in srgb, var(--nav-toolbar-text) 50%, transparent);
  border-bottom: 1px solid var(--terminal-border);
}

.dashboard-connection-launcher-search input {
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  color: var(--nav-toolbar-text);
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
}

.dashboard-connection-launcher-search input::placeholder {
  color: color-mix(in srgb, var(--nav-toolbar-text) 40%, transparent);
}

.dashboard-connection-launcher-list {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 4px;
}

.dashboard-connection-launcher-list button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 6px 9px;
  color: var(--nav-toolbar-text);
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12.5px;
  text-align: left;
}

.dashboard-connection-launcher-list button:hover {
  background: color-mix(in srgb, var(--nav-toolbar-text) 10%, transparent);
}

.dashboard-connection-launcher-list button.active {
  background: color-mix(in srgb, var(--w-accent, var(--accent)) 12%, transparent);
}

.dashboard-connection-launcher-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-connection-launcher-sub {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-faint);
  font-size: 11.5px;
}

.dashboard-connection-launcher-empty {
  margin: 12px;
  color: color-mix(in srgb, var(--nav-toolbar-text) 50%, transparent);
  font-size: 12px;
}

.dashboard-url-widget {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  height: 100%;
  min-height: 0;
}

.dashboard-url-controls {
  display: flex;
  align-items: end;
  gap: 8px;
  min-width: 0;
}

.dashboard-url-field {
  flex: 1 1 220px;
}

.dashboard-connection-tab-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: color-mix(in srgb, var(--nav-toolbar-text) 45%, transparent);
  border-radius: 5px;
}

.dashboard-connection-tab-remove:hover,
.dashboard-connection-tab-remove:focus-visible {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  outline: none;
}

.dashboard-connection-pane {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--terminal);
  border: 1px solid var(--terminal-border);
  border-radius: 9px;
}

.dashboard-connection-pane-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 32px;
  padding: 4px 6px;
  color: var(--text-muted);
  background: var(--nav-toolbar-bg);
  border-bottom: 1px solid var(--terminal-border);
  font-size: 11.5px;
}

.dashboard-connection-pane-name {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 5px;
  max-width: 160px;
  padding: 2px 7px;
  color: var(--text);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--terminal-border) 70%, transparent);
  border-radius: 5px;
  cursor: pointer;
  font-size: 11.5px;
}

.dashboard-connection-pane-name:hover {
  background: color-mix(in srgb, var(--text) 7%, transparent);
}

.dashboard-connection-pane-name > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-connection-pane-toolbar > span {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-connection-pane .terminal-workspace,
.dashboard-connection-pane .webview-workspace,
.dashboard-connection-pane .remote-desktop-workspace {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.dashboard-connection-pane .terminal-workspace {
  grid-row: auto;
}

.dashboard-connection-pane .terminal-pane {
  border: 0;
  border-radius: 0;
}

.dashboard-connection-pane .terminal-pane-close {
  display: none;
}

.dashboard-url-controls {
  flex-wrap: wrap;
}

.dashboard-url-controls .dw-field {
  min-width: 92px;
}

.dashboard-url-controls .dw-field:not(.dashboard-url-field) {
  flex: 0 0 112px;
}

.dashboard-url-webview-shell {
  position: relative;
  display: flex;
  min-height: 180px;
  min-width: 0;
  overflow: hidden;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.dashboard-url-webview-shell .webview-workspace {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
}

.dashboard-url-webview-shell .terminal-pane {
  border: 0;
  border-radius: 0;
}

[data-color-scheme="dark"] .dw-preset-ambient--glass,
[data-color-scheme="purple"] .dw-preset-ambient--glass,
[data-color-scheme="blue-see"] .dw-preset-ambient--glass {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 4%) 40%, rgb(255 255 255 / 2%) 100%),
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--w-accent) 32%, transparent) 0%, transparent 60%),
    radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--w-accent) 22%, transparent) 0%, transparent 65%),
    rgb(20 24 36 / 45%);
  border-color: rgb(255 255 255 / 18%);
}

  @media (prefers-color-scheme: dark) {
  .dw-preset-ambient--glass {
    background:
      linear-gradient(180deg, rgb(255 255 255 / 12%) 0%, rgb(255 255 255 / 4%) 40%, rgb(255 255 255 / 2%) 100%),
      radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--w-accent) 32%, transparent) 0%, transparent 60%),
      radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--w-accent) 22%, transparent) 0%, transparent 65%),
      rgb(20 24 36 / 45%);
    border-color: rgb(255 255 255 / 18%);
  }
}

.dw-bg-popover {
  --dashboard-shadow-card:
    0 1px 0 rgb(20 30 60 / 4%),
    0 4px 14px -8px rgb(20 30 60 / 18%);
  --dashboard-shadow-ambient: 0 24px 60px -28px rgb(20 30 60 / 30%);
  --dashboard-radius-lg: 14px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  width: 320px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--dashboard-radius-lg);
  box-shadow: var(--dashboard-shadow-ambient);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 13px;
  color: var(--text);
}

.dw-bg-popover-head {
  font-weight: 650;
}

.dw-bg-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  background: var(--surface-muted);
  border-radius: 8px;
}

.dw-bg-seg button {
  flex: 1 1 calc(50% - 3px);
  padding: 5px 4px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, var(--text));
  font-size: 12px;
  cursor: pointer;
}

.dw-bg-seg button.active {
  background: var(--surface);
  box-shadow: var(--dashboard-shadow-card);
  font-weight: 600;
}

.dw-bg-preset-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.dw-bg-preset-grid button {
  aspect-ratio: 1.4;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.dw-bg-preset-grid button.active {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dw-bg-dynamic {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dw-bg-live-preview-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 6px 10px;
  color: var(--text);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
}

.dw-bg-live-preview-button:hover {
  border-color: var(--border-strong);
}

.dw-bg-dynamic-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.dw-bg-dynamic-grid button {
  min-width: 0;
  min-height: 30px;
  padding: 6px 8px;
  overflow: hidden;
  color: var(--text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
}

.dw-bg-dynamic-grid button:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.dw-bg-dynamic-grid button.active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 650;
}

.dw-bg-image {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dw-bg-image-actions {
  display: flex;
  gap: 8px;
}

.dw-bg-popover input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
}

.dw-bg-preview-dialog .kk-dlg-body {
  overflow: auto;
}

.kk-dlg-backdrop.dw-bg-preview-backdrop {
  z-index: 220;
}

.dw-bg-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 4px;
}

.dw-bg-preview-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin: 0;
  color: var(--text);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
}

.dw-bg-preview-frame {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: visible;
  padding: 3px;
  background: var(--surface);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px var(--border),
    0 4px 12px -6px var(--shadow);
}

.dw-bg-preview-frame .dw-canvas-bg {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  border-radius: 9px;
  pointer-events: none;
}

.dw-bg-preview-paused {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  border-radius: 9px;
}

.dw-bg-preview-art {
  position: absolute;
  inset: 3px;
  display: block;
  overflow: hidden;
  border-radius: 9px;
  pointer-events: none;
}

.dw-bg-preview-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.dw-bg-preview-art .anim {
  animation-play-state: paused !important;
}

.dw-bg-preview-card:hover .dw-bg-preview-art .anim {
  animation-play-state: running !important;
}

@media (prefers-reduced-motion: reduce) {
  .dw-bg-preview-card:hover .dw-bg-preview-art .anim {
    animation-play-state: paused !important;
  }
}

@keyframes dwbg_fallY {
  to { transform: translateY(100px); }
}

@keyframes dwbg_riseY {
  to { transform: translateY(-100px); }
}

@keyframes dwbg_driftX {
  to { transform: translateX(160px); }
}

@keyframes dwbg_driftXr {
  to { transform: translateX(-160px); }
}

@keyframes dwbg_twinkle {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

@keyframes dwbg_breathe {
  0%, 100% { opacity: 0.38; transform: scale(0.98); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes dwbg_sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

@keyframes dwbg_scan {
  to { transform: translateY(8px); }
}

@keyframes dwbg_burst {
  0% { transform: scale(0.1); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes dwbg_flash {
  0%, 92%, 100% { opacity: 0; }
  94%, 97% { opacity: 1; }
}

@keyframes dwbg_blob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14px, -10px) scale(1.18); }
}

@keyframes dwbg_pulseR {
  0% { transform: scale(0.2); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes dwbg_spin {
  to { transform: rotate(360deg); }
}

@keyframes sweep {
  to { transform: rotate(360deg); }
}

@keyframes dwbg_shoot {
  0% { transform: translate(20px, 8px); opacity: 0; }
  6% { opacity: 1; }
  18% { transform: translate(120px, 42px); opacity: 0; }
  100% { opacity: 0; }
}

@keyframes driftX {
  to { transform: translateX(160px); }
}

.dw-bg-preview-art .anim.fall {
  animation: dwbg_fallY var(--d, 6s) linear infinite;
}

.dw-bg-preview-art .anim.rise {
  animation: dwbg_riseY var(--d, 7s) linear infinite;
}

.dw-bg-preview-art .anim.drift {
  animation: dwbg_driftX var(--d, 26s) linear infinite;
}

.dw-bg-preview-art .anim.driftr {
  animation: dwbg_driftXr var(--d, 22s) linear infinite;
}

.dw-bg-preview-art .anim.tw {
  animation: dwbg_twinkle var(--d, 2.4s) ease-in-out infinite;
}

.dw-bg-preview-art .anim.br {
  animation: dwbg_breathe var(--d, 4s) ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.dw-bg-preview-art .anim.sway {
  animation: dwbg_sway var(--d, 5s) ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: bottom center;
}

.dw-bg-preview-art .anim.blob {
  animation: dwbg_blob var(--d, 12s) ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.dw-bg-preview-card:hover .dw-bg-preview-frame {
  box-shadow:
    0 0 0 1px var(--border-strong),
    0 10px 22px -8px var(--shadow);
}

.dw-bg-preview-card.selected .dw-bg-preview-frame {
  box-shadow:
    0 0 0 2px var(--accent),
    0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent),
    0 8px 20px -8px var(--accent);
}

.dw-bg-preview-check {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: var(--surface);
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 45%, transparent), 0 0 0 2px var(--surface);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.dw-bg-preview-card.selected .dw-bg-preview-check {
  opacity: 1;
  transform: scale(1);
}

.dw-bg-preview-name {
  min-width: 0;
  overflow: hidden;
  padding: 0 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .dw-bg-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Notes widget: post-it style paper note. The Ambient preset hosts this with a
   transparent frame, so the .dw-notes element paints the entire visible note. */
.dw-notes {
  --note-paper: #fff59d;
  --note-paper-edge: #f4dc66;
  --note-ink: #2a2620;
  --note-font: "Segoe Script", "Bradley Hand", "Comic Sans MS", "Apple Chancery", cursive;
  --note-fold-size: 22px;
  --note-fold-size-x: var(--note-fold-size);
  --note-fold-size-y: var(--note-fold-size);
  --note-fold-depth: 0.5;
  --note-fold-depth-alpha: 0.17;
  --note-fold-shadow-offset: 2.5px;
  --note-fold-shadow-blur: 3.5px;
  --note-fold-under: color-mix(in srgb, var(--note-paper-edge) 78%, #fffdf0 22%);
  --note-fold-tip: color-mix(in srgb, var(--note-paper-edge) 52%, #ffffff 48%);
  --note-fold-crease: color-mix(in srgb, var(--note-paper-edge) 62%, #57400f 38%);
  --note-fold-edge: color-mix(in srgb, var(--note-paper-edge) 74%, #57400f 26%);
  --note-sticky-strip-height: 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: calc(var(--note-sticky-strip-height) + 12px) 14px 10px;
  background: transparent;
  color: var(--note-ink);
  border-radius: 0;
  filter:
    drop-shadow(0 1px 0 rgb(20 30 60 / 4%))
    drop-shadow(0 4px 10px rgb(20 30 60 / 8%));
  transform: rotate(var(--note-rotation, -0.6deg));
  transform-origin: 50% 0;
  overflow: visible;
  isolation: isolate;
  font-family: var(--note-font);
}

.dw-notes::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 24%) 0 var(--note-sticky-strip-height),
      rgb(150 100 0 / 7%) var(--note-sticky-strip-height) calc(var(--note-sticky-strip-height) + 2px),
      transparent calc(var(--note-sticky-strip-height) + 34px)
    ),
    var(--note-paper);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 24%),
    inset 0 -1px 0 rgb(52 38 0 / 10%),
    inset 0 0 0 1px rgb(52 38 0 / 7%);
  pointer-events: none;
}

/* Folded corner ("dog ear"). The paper (::after) is clipped so the corner is
   physically missing, and ::before draws the folded-back flap on top of the
   paper next to the crease. An SVG mask shapes the flap: the crease edge is
   straight, the two paper edges bow slightly inward (the curl), and the tip
   stays a sharp point because it is the original paper corner. The diagonal
   gradient shades crease → underside → lit curled tip. drop-shadow (not
   box-shadow) follows that alpha shape. */
.dw-notes::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: var(--note-fold-size-x);
  height: var(--note-fold-size-y);
  background: linear-gradient(
    to bottom left,
    transparent calc(50% - 0.5px),
    var(--note-fold-crease) calc(50% + 0.5px),
    var(--note-fold-under) calc(50% + 3px),
    var(--note-fold-under) 62%,
    var(--note-fold-tip) 88%,
    var(--note-fold-edge) 100%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100Q52 92 4 96Q8 50 0 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L100 100Q52 92 4 96Q8 50 0 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(
    calc(0px - var(--note-fold-shadow-offset))
    var(--note-fold-shadow-offset)
    var(--note-fold-shadow-blur)
    rgb(70 44 0 / calc(0.06 + var(--note-fold-depth-alpha)))
  );
  pointer-events: none;
}

.dw-notes--fold-topRight::after {
  clip-path: polygon(
    0 0,
    calc(100% - var(--note-fold-size-x)) 0,
    100% var(--note-fold-size-y),
    100% 100%,
    0 100%
  );
}

.dw-notes--fold-topLeft::after {
  clip-path: polygon(
    var(--note-fold-size-x) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--note-fold-size-y)
  );
}

.dw-notes--fold-topLeft::before {
  top: 0;
  left: 0;
  right: auto;
  background: linear-gradient(
    to bottom right,
    transparent calc(50% - 0.5px),
    var(--note-fold-crease) calc(50% + 0.5px),
    var(--note-fold-under) calc(50% + 3px),
    var(--note-fold-under) 62%,
    var(--note-fold-tip) 88%,
    var(--note-fold-edge) 100%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0L0 100Q48 92 96 96Q92 50 100 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0L0 100Q48 92 96 96Q92 50 100 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(
    var(--note-fold-shadow-offset)
    var(--note-fold-shadow-offset)
    var(--note-fold-shadow-blur)
    rgb(70 44 0 / calc(0.06 + var(--note-fold-depth-alpha)))
  );
}

.dw-notes--fold-bottomRight::after {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--note-fold-size-y)),
    calc(100% - var(--note-fold-size-x)) 100%,
    0 100%
  );
}

.dw-notes--fold-bottomRight::before {
  top: auto;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to top left,
    transparent calc(50% - 0.5px),
    var(--note-fold-crease) calc(50% + 0.5px),
    var(--note-fold-under) calc(50% + 3px),
    var(--note-fold-under) 62%,
    var(--note-fold-tip) 88%,
    var(--note-fold-edge) 100%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L100 0Q52 8 4 4Q8 50 0 100Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L100 0Q52 8 4 4Q8 50 0 100Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(
    calc(0px - var(--note-fold-shadow-offset))
    calc(0px - var(--note-fold-shadow-offset))
    var(--note-fold-shadow-blur)
    rgb(70 44 0 / calc(0.06 + var(--note-fold-depth-alpha)))
  );
}

.dw-notes--fold-bottomLeft::after {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--note-fold-size-x) 100%,
    0 calc(100% - var(--note-fold-size-y))
  );
}

.dw-notes--fold-bottomLeft::before {
  top: auto;
  left: 0;
  right: auto;
  bottom: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 0.5px),
    var(--note-fold-crease) calc(50% + 0.5px),
    var(--note-fold-under) calc(50% + 3px),
    var(--note-fold-under) 62%,
    var(--note-fold-tip) 88%,
    var(--note-fold-edge) 100%
  );
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 100L0 0Q48 8 96 4Q92 50 100 100Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 100L0 0Q48 8 96 4Q92 50 100 100Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(
    var(--note-fold-shadow-offset)
    calc(0px - var(--note-fold-shadow-offset))
    var(--note-fold-shadow-blur)
    rgb(70 44 0 / calc(0.06 + var(--note-fold-depth-alpha)))
  );
}

.dw-notes-page-actions {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 3;
  display: flex;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2px);
  transition:
    opacity 120ms ease,
    transform 120ms ease;
}

.dw-notes:hover .dw-notes-page-actions,
.dw-notes:focus-within .dw-notes-page-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.dw-notes-page-button {
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  color: var(--note-ink);
  border-color: transparent;
  box-shadow: none;
}

.dw-notes-text,
.dw-notes-markdown {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  color: inherit;
  font: inherit;
  font-size: 18px;
  line-height: 1.45;
  letter-spacing: 0;
  text-shadow: 0 1px 0 rgb(255 255 255 / 18%);
}

.dw-notes-text {
  background: transparent;
  border: 0;
  outline: none;
  resize: none;
  padding: 0;
}

.dw-notes-text::placeholder {
  color: rgb(0 0 0 / 35%);
  font-style: italic;
}

.dw-notes-markdown {
  overflow: auto;
  padding: 0 2px 0 0;
  cursor: text;
}

.dw-notes-markdown > :first-child {
  margin-top: 0;
}

.dw-notes-markdown > :last-child {
  margin-bottom: 0;
}

.dw-notes-markdown h1,
.dw-notes-markdown h2,
.dw-notes-markdown h3,
.dw-notes-markdown h4,
.dw-notes-markdown h5,
.dw-notes-markdown h6,
.dw-notes-markdown p,
.dw-notes-markdown ul,
.dw-notes-markdown ol,
.dw-notes-markdown blockquote,
.dw-notes-markdown pre,
.dw-notes-markdown table {
  margin: 0 0 0.55em;
}

.dw-notes-markdown h1 { font-size: 1.35em; }
.dw-notes-markdown h2 { font-size: 1.2em; }
.dw-notes-markdown h3,
.dw-notes-markdown h4,
.dw-notes-markdown h5,
.dw-notes-markdown h6 { font-size: 1.05em; }

.dw-notes-markdown ul,
.dw-notes-markdown ol {
  padding-left: 1.25em;
}

.dw-notes-markdown blockquote {
  padding-left: 0.65em;
  border-left: 2px solid rgb(0 0 0 / 18%);
}

.dw-notes-markdown table {
  width: 100%;
  border-spacing: 0;
  border: 1px solid rgb(42 38 32 / 42%);
  background: rgb(255 255 255 / 14%);
  box-shadow:
    1px 0 0 rgb(42 38 32 / 16%),
    0 1px 0 rgb(42 38 32 / 12%),
    inset 0 0 0 1px rgb(255 255 255 / 18%);
  font-size: 0.86em;
  transform: rotate(-0.12deg);
}

.dw-notes-markdown th,
.dw-notes-markdown td {
  padding: 0.25em 0.4em;
  border-right: 1px solid rgb(42 38 32 / 34%);
  border-bottom: 1px solid rgb(42 38 32 / 30%);
  box-shadow:
    inset 0 -1px 0 rgb(255 255 255 / 12%),
    inset -1px 0 0 rgb(42 38 32 / 10%);
  text-align: left;
  vertical-align: top;
}

.dw-notes-markdown th {
  background: rgb(255 255 255 / 18%);
  font-weight: 700;
}

.dw-notes-markdown tr:nth-child(odd) td {
  border-bottom-color: rgb(42 38 32 / 36%);
}

.dw-notes-markdown th:last-child,
.dw-notes-markdown td:last-child {
  border-right: 0;
}

.dw-notes-markdown tr:last-child td {
  border-bottom: 0;
}

.dw-notes-markdown :not(pre) > code {
  padding: 0.05em 0.25em;
  border-radius: 3px;
  background: rgb(255 255 255 / 38%);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.85em;
}

.dw-notes-markdown pre {
  overflow: auto;
  padding: 0.45em 0.55em;
  border-radius: 5px;
  background: rgb(255 255 255 / 36%);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.78em;
}

.dw-notes-markdown a {
  color: inherit;
  text-decoration: underline;
}

.dw-notes.is-tearing .dw-notes-text,
.dw-notes.is-tearing .dw-notes-markdown {
  opacity: 0;
}

.dw-notes.is-tearing {
  background: transparent;
  box-shadow: none;
  filter: none;
}

.dw-notes.is-tearing::before {
  opacity: 0;
}

.dw-notes.is-tearing::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(
      180deg,
      rgb(255 255 255 / 24%) 0 var(--note-sticky-strip-height),
      rgb(150 100 0 / 7%) var(--note-sticky-strip-height) calc(var(--note-sticky-strip-height) + 2px),
      transparent calc(var(--note-sticky-strip-height) + 34px)
    ),
    var(--note-paper);
  pointer-events: none;
  animation: dw-notes-paper-tear 220ms ease-in forwards;
  box-shadow:
    0 1px 1px rgb(0 0 0 / 10%),
    0 8px 18px -6px rgb(0 0 0 / 22%);
  transform-origin: 50% 50%;
}

.dw-notes-toolbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgb(0 0 0 / 12%);
  opacity: 0;
  transition: opacity 120ms ease;
}

.dw-notes:hover .dw-notes-toolbar,
.dw-notes:focus-within .dw-notes-toolbar {
  opacity: 1;
}

.dw-notes-colors {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.dw-notes-swatch {
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgb(0 0 0 / 18%);
  background: var(--swatch);
  cursor: pointer;
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.dw-notes-swatch:hover {
  transform: scale(1.15);
}

.dw-notes-swatch.is-active {
  box-shadow: 0 0 0 2px rgb(0 0 0 / 55%);
}

.dw-notes-swatch--yellow { --swatch: #fff59d; }
.dw-notes-swatch--pink   { --swatch: #f8bbd0; }
.dw-notes-swatch--blue   { --swatch: #bbdefb; }
.dw-notes-swatch--green  { --swatch: #c8e6c9; }
.dw-notes-swatch--orange { --swatch: #ffcc80; }
.dw-notes-swatch--purple { --swatch: #e1bee7; }
.dw-notes-swatch--white  { --swatch: #fafafa; }

.dw-notes-page-indicator {
  margin-left: auto;
  padding: 0 2px;
  color: rgb(0 0 0 / 58%);
  background: transparent;
  border: 0;
  border-radius: 3px;
  font-family: var(--font, system-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  cursor: pointer;
}

.dw-notes-page-indicator:hover,
.dw-notes-page-indicator:focus-visible {
  color: var(--note-ink);
  background: rgb(255 255 255 / 38%);
  outline: none;
}

.dw-notes-font-select {
  font-family: var(--font, system-ui);
  font-size: 11px;
  padding: 2px 4px;
  background: rgb(255 255 255 / 55%);
  color: var(--note-ink);
  border: 1px solid rgb(0 0 0 / 15%);
  border-radius: 3px;
  max-width: 110px;
}

@keyframes dw-notes-paper-tear {
  0% {
    clip-path: polygon(
      100% 0,
      100% 100%,
      0 100%,
      0 0
    );
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  45% {
    clip-path: polygon(
      100% 0,
      100% 82%,
      82% 100%,
      16% 92%,
      4% 54%,
      0 0,
      calc(100% - var(--note-fold-size)) 0,
      100% var(--note-fold-size)
    );
  }
  100% {
    clip-path: polygon(
      100% 0,
      100% 48%,
      84% 70%,
      46% 54%,
      32% 26%,
      0 0,
      calc(100% - var(--note-fold-size)) 0,
      100% var(--note-fold-size)
    );
    opacity: 0;
    transform: translate(18px, -10px) rotate(8deg) scale(0.64);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dw-notes.is-tearing::after {
    animation: none;
    opacity: 0;
  }
}

/* Color modifiers — paper color and matching folded-edge tint. */
.dw-notes--color-yellow { --note-paper: #fff59d; --note-paper-edge: #f4dc66; }
.dw-notes--color-pink   { --note-paper: #f8bbd0; --note-paper-edge: #ec9bb8; }
.dw-notes--color-blue   { --note-paper: #bbdefb; --note-paper-edge: #8fc1ee; }
.dw-notes--color-green  { --note-paper: #c8e6c9; --note-paper-edge: #9fcfa3; }
.dw-notes--color-orange { --note-paper: #ffcc80; --note-paper-edge: #f0ad55; }
.dw-notes--color-purple { --note-paper: #e1bee7; --note-paper-edge: #c294cd; }
.dw-notes--color-white  { --note-paper: #fafafa; --note-paper-edge: #d8d8d8; }

/* Font modifiers — only --note-font, so .dw-notes and .dw-notes-text inherit. */
.dw-notes--font-handwriting {
  --note-font: "Segoe Script", "Bradley Hand", "Comic Sans MS", "Apple Chancery", cursive;
}
.dw-notes--font-marker {
  --note-font: "Permanent Marker", "Segoe Print", "Marker Felt", "Comic Sans MS", cursive;
}
.dw-notes--font-system {
  --note-font: var(--font, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.dw-notes--font-serif {
  --note-font: Georgia, "Times New Roman", serif;
}
.dw-notes--font-mono {
  --note-font: Consolas, "Courier New", monospace;
}
