@layer features {
.theme-library {
  display: grid;
  gap: var(--lumi-space-4);
}

.theme-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--lumi-space-4);
}

.theme-card {
  display: flex;
  flex-direction: column;
  gap: var(--lumi-space-3);
  padding: var(--lumi-space-4);
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-md);
  background: var(--lumi-surface);
  box-shadow: var(--lumi-shadow-sm);
}

.theme-card.is-active {
  border-color: var(--lumi-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lumi-primary) 14%, transparent);
}

.theme-swatch {
  height: 7rem;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 1fr;
  gap: var(--lumi-space-2);
  padding: var(--lumi-space-3);
  border: 1px solid color-mix(in srgb, var(--swatch-primary) 25%, transparent);
  border-radius: var(--lumi-radius-sm);
  background: var(--swatch-bg);
}

.theme-swatch span {
  border-radius: calc(var(--lumi-radius-sm) * 0.7);
  background: var(--swatch-surface);
  box-shadow: var(--lumi-shadow-sm);
}

.theme-swatch span:first-child {
  grid-row: 1 / -1;
  background: var(--swatch-primary);
}

.theme-swatch span:last-child {
  width: 58%;
  background: var(--swatch-accent);
}

.theme-card-copy {
  flex: 1;
}

.theme-card-copy p {
  margin: var(--lumi-space-2) 0 0;
  color: var(--lumi-text-muted);
}

.theme-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--lumi-space-2);
}

.theme-card-title h3 {
  margin-bottom: 0;
}

.theme-kind {
  flex: 0 0 auto;
  padding: 0.25rem 0.45rem;
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-pill);
  color: var(--lumi-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.theme-card-actions,
.theme-card-more-body {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lumi-space-2);
}

.theme-card-actions form {
  display: inline-flex;
}

.theme-card-more {
  border-top: 1px solid var(--lumi-border);
  padding-top: var(--lumi-space-3);
}

.theme-card-more summary {
  cursor: pointer;
  color: var(--lumi-link);
  font-weight: 700;
}

.theme-card-more-body {
  align-items: flex-end;
  margin-top: var(--lumi-space-3);
}

.compact-form {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--lumi-space-2);
}

.compact-form label {
  display: grid;
  gap: var(--lumi-space-1);
  font-weight: 700;
}

.theme-editor-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 25rem);
  align-items: start;
  gap: var(--lumi-space-5);
  scroll-margin-top: var(--lumi-space-4);
}

.theme-editor-main {
  display: grid;
  gap: var(--lumi-space-5);
}

.theme-edit-form {
  display: grid;
  gap: var(--lumi-space-5);
}

.theme-fieldset {
  min-width: 0;
  margin: 0;
  padding: var(--lumi-space-4);
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-md);
  background: var(--lumi-surface-subtle);
}

.theme-fieldset legend {
  padding: 0 var(--lumi-space-2);
  font: 700 1.05rem/1 var(--lumi-font-display);
}

.theme-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--lumi-space-3);
}

.theme-color-control,
.theme-select-control,
.theme-range-control {
  display: grid;
  gap: var(--lumi-space-2);
  font-weight: 700;
}

.theme-color-input {
  min-height: var(--lumi-control-height);
  display: flex;
  align-items: center;
  gap: var(--lumi-space-2);
  padding: 0.35rem;
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-sm);
  background: var(--lumi-surface);
}

.theme-color-input input {
  width: 3.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
}

.theme-color-input output {
  color: var(--lumi-text-muted);
  font: 600 0.8rem/1 var(--lumi-font-mono);
}

.theme-range-control {
  padding: var(--lumi-space-3);
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-sm);
  background: var(--lumi-surface);
}

.theme-range-control > span {
  display: flex;
  justify-content: space-between;
  gap: var(--lumi-space-2);
}

.theme-range-control output {
  color: var(--lumi-text-muted);
}

.theme-select-control {
  padding: var(--lumi-space-3);
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-sm);
  background: var(--lumi-surface);
}

.theme-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lumi-space-2);
  margin-top: var(--lumi-space-4);
}

.theme-validation-panel {
  display: grid;
  gap: var(--lumi-space-2);
}

.theme-validation-panel:empty {
  display: none;
}

.theme-warning {
  padding: var(--lumi-space-2) var(--lumi-space-3);
  border: 1px solid color-mix(in srgb, var(--lumi-warning) 40%, var(--lumi-border));
  border-radius: var(--lumi-radius-sm);
  background: color-mix(in srgb, var(--lumi-warning) 11%, var(--lumi-surface));
  color: var(--lumi-text);
  font-size: 0.9rem;
}

.advanced-theme-controls {
  margin-top: var(--lumi-space-4);
}

.advanced-theme-controls summary {
  cursor: pointer;
  color: var(--lumi-link);
  font-weight: 700;
}

.advanced-theme-controls[open] summary {
  margin-bottom: var(--lumi-space-3);
}

.theme-editor-actions {
  position: sticky;
  bottom: var(--lumi-space-3);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--lumi-space-3);
  padding: var(--lumi-space-3);
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-md);
  background: color-mix(in srgb, var(--lumi-surface) 92%, transparent);
  box-shadow: var(--lumi-shadow-md);
  backdrop-filter: blur(16px);
}

.theme-preview {
  position: sticky;
  top: var(--lumi-space-4);
  display: grid;
  gap: var(--lumi-space-3);
}

.theme-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lumi-space-2);
}

.theme-preview-header .eyebrow {
  margin-bottom: 0;
}

.theme-popout-button {
  min-height: 2.25rem;
  padding: 0.45rem 0.7rem;
  font-size: 0.8rem;
}

.theme-mobile-preview-action {
  display: none;
}

.theme-preview-window {
  min-height: 26rem;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-md);
  background:
    radial-gradient(circle at 20% 10%, var(--bg-1), transparent 55%),
    var(--bg-2);
}

.theme-preview-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lumi-space-3);
  padding: var(--lumi-space-3);
  border-right: 1px solid var(--lumi-border);
  background: var(--lumi-surface);
}

.theme-preview-nav > span:not(.theme-preview-logo) {
  width: 1.8rem;
  height: 0.38rem;
  border-radius: var(--lumi-radius-pill);
  background: var(--lumi-border);
}

.theme-preview-nav > span.is-active {
  width: 2.35rem;
  background: var(--lumi-primary);
}

.theme-preview-logo {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: var(--lumi-radius-sm);
  background: var(--lumi-primary);
  color: var(--lumi-button-text);
  font-weight: 800;
}

.theme-preview-content {
  display: flex;
  flex-direction: column;
  gap: var(--lumi-space-3);
  padding: var(--lumi-space-4);
}

.theme-preview-content h2 {
  margin-bottom: 0;
  font-size: calc(1.25rem * var(--lumi-heading-scale));
}

.theme-preview-content p {
  margin: 0;
}

.theme-preview-pill {
  width: max-content;
  padding: calc(var(--lumi-space-1) * 0.85) var(--lumi-space-2);
  border: 1px solid color-mix(in srgb, var(--lumi-primary) 30%, var(--lumi-border));
  border-radius: var(--lumi-radius-pill);
  background: color-mix(in srgb, var(--lumi-primary) 10%, var(--lumi-surface));
}

.theme-preview-sample-card {
  margin-top: var(--lumi-space-2);
  padding: var(--lumi-space-4);
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-md);
  background: var(--lumi-surface);
  box-shadow: var(--lumi-shadow-md);
}

.theme-preview-sample-card p {
  color: var(--lumi-text-muted);
}

.theme-preview-sample-card input {
  margin-top: var(--lumi-space-3);
}

.theme-preview-sample-card .switch,
.theme-preview-badges,
.theme-preview-modal-sample,
.theme-spacing-sample {
  margin-top: var(--lumi-space-3);
}

.theme-preview-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lumi-space-3);
  margin-top: var(--lumi-space-3);
  font-size: 0.8rem;
  font-weight: 700;
}

.theme-preview-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lumi-space-2);
}

.theme-preview-badges .badge,
.theme-preview-badges .pill {
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--lumi-border);
  background: var(--lumi-surface-subtle);
  color: var(--lumi-text);
}

.theme-role-swatch {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-right: var(--lumi-space-1);
  border: 1px solid var(--lumi-border-strong);
  border-radius: 50%;
  background: var(--role-admin);
  vertical-align: -0.08em;
}

.theme-preview-dirty {
  padding: var(--lumi-space-2);
  border-radius: var(--lumi-radius-sm);
  font-size: 0.85rem;
  font-weight: 700;
}

.theme-preview-table {
  margin-top: var(--lumi-space-3);
}

.theme-preview-table .table {
  min-width: 16rem;
  font-size: 0.78rem;
}

.theme-preview-table th,
.theme-preview-table td {
  padding: 0.45rem;
}

.theme-preview-modal-sample {
  padding: var(--lumi-space-3);
  border: 1px solid var(--lumi-border);
  border-radius: var(--lumi-radius-md);
  background: var(--lumi-surface-subtle);
  box-shadow: var(--lumi-shadow-sm);
}

.theme-spacing-sample {
  display: flex;
  align-items: center;
  gap: var(--lumi-space-2);
}

.theme-spacing-sample span {
  width: var(--lumi-space-4);
  height: var(--lumi-space-4);
  border-radius: var(--lumi-radius-sm);
  background: var(--lumi-primary);
}

.theme-spacing-sample span:nth-child(2) {
  width: var(--lumi-space-5);
  height: var(--lumi-space-5);
  background: var(--lumi-accent);
}

.theme-spacing-sample span:nth-child(3) {
  width: var(--lumi-space-6);
  height: var(--lumi-space-6);
  background: var(--lumi-info);
}

.is-selected {
  border-color: var(--lumi-primary) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lumi-primary) 14%, transparent) !important;
}

@media (max-width: 1100px) {
  .theme-editor-shell {
    grid-template-columns: 1fr;
  }

  .theme-preview {
    position: static;
    order: -1;
  }

  .theme-preview-window {
    min-height: 20rem;
  }
}

@media (max-width: 600px) {
  .theme-library,
  .theme-editor-main,
  .theme-edit-form,
  .theme-editor-shell {
    gap: var(--lumi-space-3);
  }

  .theme-card-grid,
  .theme-control-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--lumi-space-2);
  }

  .theme-card,
  .theme-fieldset,
  .theme-range-control,
  .theme-select-control {
    padding: var(--lumi-space-3);
  }

  .theme-swatch {
    height: 5.5rem;
  }

  .theme-mobile-preview-action {
    display: inline-flex;
  }

  .theme-preview {
    display: none;
  }

  .compact-form {
    grid-template-columns: 1fr;
  }

  .theme-editor-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .theme-editor-actions .button-group,
  .theme-editor-actions .button {
    width: 100%;
  }
}
}
