:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  --bg-deep: #080c14;
  --bg-base: #0c1018;
  --bg-surface: #111827;
  --bg-elevated: #1a2235;
  --bg-hover: #1f2a40;
  --border: rgba(255, 255, 255, 0.07);
  --border-focus: rgba(43, 127, 255, 0.5);
  --blue: #2b7fff;
  --blue-dim: rgba(43, 127, 255, 0.12);
  --blue-glow: rgba(43, 127, 255, 0.3);
  --purple: #7c3aed;
  --green: #10b981;
  --amber: #f59e0b;
  --red: #ef4444;
  --text-primary: #e8edf5;
  --text-secondary: #7a8499;
  --text-muted: #3d4a60;
  --page-sidebar-width: 280px;
  --page-footer-height: 42px;
  color: var(--text-primary);
  background: var(--bg-deep);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body.is-capture-disabled [data-pattern-capture-start-card],
body.is-capture-disabled [data-pattern-capture-upload-field] {
  display: none !important;
}

html {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(43, 127, 255, 0.16), transparent 34rem),
    linear-gradient(180deg, var(--bg-base), var(--bg-deep));
}

body.is-page-sidebar-collapsed {
  --page-sidebar-width: 72px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border: 2px solid var(--bg-deep);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--bg-hover);
}

button,
input,
select,
textarea {
  font: inherit;
}

.app-shell {
  display: grid;
  align-items: center;
  width: min(520px, calc(100vw - 32px));
  height: 100vh;
  min-height: 0;
  margin: 0 auto;
  padding: 32px 0;
  overflow: auto;
}

.app-shell:has(.canvas:not([hidden])) {
  align-items: start;
  width: min(1200px, calc(100vw - 32px));
  height: calc(100vh - 64px);
  min-height: 0;
  padding-top: 0;
}

body:has(.page-subtopbar:not([hidden])) .app-shell:has(.canvas:not([hidden])) {
  height: calc(100vh - 64px - 42px);
  min-height: 0;
}

body:has(.page-sidebar:not([hidden])) .app-shell:has(.canvas:not([hidden])) {
  align-items: start;
  justify-items: stretch;
  width: calc(100vw - var(--page-sidebar-width));
  height: calc(100vh - 64px - 42px - var(--page-footer-height));
  min-height: 0;
  margin-left: var(--page-sidebar-width);
  margin-right: 0;
  padding-bottom: 0;
  overflow: auto;
}

body:has(#design-editor-page:not([hidden])) .app-shell:has(.canvas:not([hidden])) {
  overflow: hidden;
}


body:not(.desktop-body):has(#design-editor-page:not([hidden])) .app-shell:has(.canvas:not([hidden])) {
  height: calc(100vh - 64px - 42px);
}


body:has(#design-editor-page:not([hidden])) #dashboard-view.canvas {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}


.auth-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.auth-panel {
  padding: 0;
  overflow: hidden;
}

.canvas {
  min-height: 100%;
}

body:has(.page-sidebar:not([hidden])) .canvas {
  width: 100%;
  min-height: 100%;
}

body:has(.page-sidebar:not([hidden])) #dashboard-page.canvas-page,
body:has(.page-sidebar:not([hidden])) #designs-page.canvas-page,
body:has(.page-sidebar:not([hidden])) #design-editor-page.canvas-page,
body:has(.page-sidebar:not([hidden])) #profile-view.canvas-page,
body:has(.page-sidebar:not([hidden])) #settings-view.canvas-page,
body:has(.page-sidebar:not([hidden])) #users-view.canvas-page,
body:has(.page-sidebar:not([hidden])) #accounts-view.canvas-page,
body:has(.page-sidebar:not([hidden])) .request-page.canvas-page {
  width: 100%;
  max-width: none;
}

.brand-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 24px;
  background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface));
  border-bottom: 1px solid var(--border);
}

.brand-lockup .brand-mark {
  grid-template-columns: repeat(2, 15px);
  gap: 7px;
  width: 76px;
  height: 76px;
  border-radius: 22px;
}

.brand-lockup .brand-mark span {
  width: 15px;
  height: 15px;
}

.brand-mark {
  display: grid;
  grid-template-columns: repeat(2, 19px);
  gap: 9px;
  align-content: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  border: 1px solid var(--border-focus);
  border-radius: 28px;
  background:
    radial-gradient(circle at 75% 20%, rgba(124, 58, 237, 0.28), transparent 55%),
    rgba(43, 127, 255, 0.08);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 28px rgba(43, 127, 255, 0.38),
    0 0 42px rgba(124, 58, 237, 0.22);
}

.brand-mark span,
.brand-icon span {
  display: block;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
}

.brand-mark span {
  width: 19px;
  height: 19px;
  box-shadow:
    inset 0 2px 6px rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(43, 127, 255, 0.2);
}

.brand-mark span:nth-child(2),
.brand-icon span:nth-child(2) {
  background: var(--purple);
}

.brand-mark span:nth-child(3),
.brand-icon span:nth-child(3) {
  background: var(--blue);
}

.brand-name {
  background: linear-gradient(180deg, #ffffff 0%, #d8dce6 44%, #8d94a8 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.18;
  padding-bottom: 0.08em;
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.brand-name span {
  background: linear-gradient(135deg, #21d4fd 0%, var(--blue) 44%, var(--purple) 100%);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.brand-mark.compact {
  grid-template-columns: repeat(2, 9px);
  gap: 4px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.brand-mark.compact span {
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.dashboard-brand,
.topbar-brand {
  display: flex;
  align-items: center;
  justify-items: initial;
  gap: 12px;
}

.desktop-body .app-topbar .topbar-brand {
  display: none;
}

.desktop-body .app-topbar {
  justify-content: space-between;
}

.desktop-body .app-topbar .topbar-welcome {
  margin-right: auto;
}

.dashboard-brand {
  padding: 0;
  margin-bottom: 18px;
  background: transparent;
  border-bottom: 0;
}

.dashboard-brand .brand-name,
.topbar-brand .brand-name {
  font-size: 1.45rem;
}

.surface-label {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--blue-dim);
  color: var(--text-secondary);
  font-size: 0.6rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.topbar-welcome {
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desktop-body {
  position: relative;
  display: grid;
  grid-template-rows: 36px auto auto minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-deep);
}

.desktop-body:has(.page-footerbar:not([hidden])) {
  grid-template-rows: 36px auto auto minmax(0, 1fr) var(--page-footer-height);
}

.desktop-body:has(.page-footerbar.is-code-open),
.desktop-body:has(.design-code-tray.is-open) {
  grid-template-rows: 36px auto auto minmax(0, 1fr) min(360px, 44vh);
}

.desktop-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  -webkit-app-region: drag;
}

.desktop-titlebar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding-left: 14px;
  color: var(--text-primary);
  font-size: 0.88rem;
  font-weight: 800;
}

.desktop-titlebar-brand .surface-label {
  min-height: 18px;
  padding: 0 7px;
  font-size: 0.62rem;
}

.desktop-body .topbar-welcome {
  padding-left: 4px;
}

.brand-icon.small {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  gap: 3px;
}

.brand-icon.small span {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.desktop-window-actions {
  display: flex;
  align-self: stretch;
  -webkit-app-region: no-drag;
}

.window-action {
  display: grid;
  place-items: center;
  width: 46px;
  min-height: 0;
  height: 35px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1rem;
  font-weight: 500;
}

.window-action:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.window-action.close:hover {
  background: var(--red);
  color: #ffffff;
}

.desktop-body .app-shell {
  grid-row: 4;
  min-height: 0;
  height: auto;
  max-height: 100%;
  overflow: hidden;
}

.desktop-body:has(.page-sidebar:not([hidden])) .app-shell:has(.canvas:not([hidden])) {
  height: 100%;
  max-height: 100%;
}

.desktop-body .app-shell:has(.auth-panel:not([hidden])) {
  align-items: center;
  width: min(520px, calc(100vw - 32px));
  height: calc(100vh - 36px);
  margin: 0 auto;
  padding: 32px 0;
  overflow: auto;
}

.desktop-body .app-shell:has(.canvas-page:not([hidden])) {
  overflow: auto;
}

.desktop-body:has(#design-editor-page:not([hidden])) .app-shell:has(.canvas-page:not([hidden])) {
  overflow: hidden;
}


.desktop-body .canvas {
  min-height: 100%;
}

.dashboard-heading {
  min-width: 0;
}

.app-topbar {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  min-height: 50px;
  padding: 5px 10px;
  background: rgba(12, 16, 24, 0.92);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(14px);
}

.page-subtopbar {
  position: relative;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 42px;
  padding: 5px 12px;
  background: rgba(12, 16, 24, 0.78);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(14px);
}

body:has(.page-sidebar:not([hidden])) .page-subtopbar {
  width: calc(100% - var(--page-sidebar-width));
  margin-left: var(--page-sidebar-width);
}

.page-sidebar {
  position: fixed;
  top: 50px;
  bottom: 0;
  left: 0;
  z-index: 9;
  width: var(--page-sidebar-width);
  border-right: 1px solid var(--border);
  background: rgba(10, 15, 24, 0.86);
  box-shadow: 18px 0 46px rgba(0, 0, 0, 0.14);
  transition: width 180ms ease;
}

.sidebar-greeting {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0px 20px;
  border-bottom: 1px solid var(--border);
}

.sidebar-greeting .topbar-welcome {
  min-width: 0;
  flex: 1;
  color: var(--text-primary);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-avatar {
  display: none;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  font-size: 0.72rem;
}

.sidebar-collapse-toggle {
  display: grid;
  width: 24px;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.sidebar-collapse-toggle:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
}

.sidebar-collapse-toggle svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 180ms ease;
}

.sidebar-nav {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.sidebar-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 0px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 800;
}

.sidebar-link:hover,
.sidebar-link.active {
  border-color: var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.sidebar-link.active {
  box-shadow: inset 3px 0 0 var(--blue);
}

.sidebar-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.sidebar-divider {
  height: 1px;
  margin: 8px 4px;
  background: var(--border);
}

.sidebar-download-link {
  text-decoration: none;
}

body.is-page-sidebar-collapsed .sidebar-greeting {
  gap: 4px;
  padding: 6px 8px;
}

body.is-page-sidebar-collapsed .sidebar-greeting .topbar-welcome {
  display: none;
}

body.is-page-sidebar-collapsed .sidebar-avatar {
  display: inline-grid;
}

body.is-page-sidebar-collapsed .sidebar-collapse-toggle {
  width: 24px;
  min-width: 24px;
  min-height: 28px;
  border-color: transparent;
  background: transparent;
}

body.is-page-sidebar-collapsed .sidebar-collapse-toggle svg {
  transform: rotate(180deg);
}

body.is-page-sidebar-collapsed .sidebar-nav {
  gap: 8px;
  padding: 12px 8px;
}

body.is-page-sidebar-collapsed .sidebar-link {
  position: relative;
  justify-content: center;
  min-height: 46px;
  padding: 0;
}

body.is-page-sidebar-collapsed .sidebar-link > span {
  display: none;
}

body.is-page-sidebar-collapsed .sidebar-link svg {
  width: 20px;
  height: 20px;
}

body.is-page-sidebar-collapsed .sidebar-divider {
  margin: 8px 6px;
}

body.is-page-sidebar-collapsed .sidebar-link.active {
  box-shadow: inset 3px 0 0 var(--blue);
}

body.is-page-sidebar-collapsed .sidebar-link::after {
  position: absolute;
  z-index: 100;
  top: 50%;
  left: calc(100% + 10px);
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  content: attr(data-sidebar-label);
  pointer-events: none;
  transform: translateY(-50%) translateX(-4px);
  opacity: 0;
  background: var(--bg-elevated);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
  transition: opacity 120ms ease, transform 120ms ease;
}

body.is-page-sidebar-collapsed .sidebar-link:hover::after,
body.is-page-sidebar-collapsed .sidebar-link:focus-visible::after {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

.page-footerbar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: var(--page-sidebar-width);
  z-index: 60;
  height: var(--page-footer-height);
  border-top: 1px solid var(--border);
  background: rgba(12, 16, 24, 0.9);
  backdrop-filter: blur(14px);
  overflow: visible;
}

.page-footer-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
  padding: 0 24px;
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.page-footer-meta span:first-child {
  grid-column: 2;
}

.page-footer-meta span:last-child {
  justify-self: end;
}

.page-footerbar:has(.design-code-tray:not([hidden])) .page-footer-meta {
  display: none;
}

.page-footerbar.is-code-open,
.page-footerbar:has(.design-code-tray.is-open) {
  height: min(360px, 44vh);
}

.desktop-body .page-sidebar {
  top: 100px;
}

.desktop-body .page-footerbar {
  position: relative;
  grid-row: 5;
  right: auto;
  bottom: auto;
  left: auto;
  width: calc(100% - var(--page-sidebar-width));
  margin-left: var(--page-sidebar-width);
}

.design-code-tray {
  display: grid;
  grid-template-rows: var(--page-footer-height) minmax(0, 1fr);
  height: var(--page-footer-height);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

.design-code-tray[hidden] {
  display: none;
}

.design-code-tray.is-open {
  height: min(360px, 44vh);
}

.design-code-tray-header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--page-footer-height);
  min-height: var(--page-footer-height);
  padding: 0 12px;
  overflow: hidden;
}

.design-code-tray-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
  width: auto;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  box-shadow: none;
}

.design-code-active-file {
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-code-tray-toggle strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-code-tray-toggle span {
  color: var(--text-primary);
  font-size: 0.74rem;
  font-weight: 900;
}

.design-code-tray-toggle:hover,
.design-code-tray-toggle:focus-visible {
  background: transparent;
  color: var(--blue);
}

.design-save-status {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 800;
}

.design-save-status.is-dirty {
  color: #fbbf24;
}

.design-history-button,
.design-export-button,
.design-save-button {
  flex: 0 0 auto;
  height: 32px;
  min-height: 32px;
}

.design-code-tray-body {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  min-height: 0;
  border-top: 1px solid var(--border);
}

.design-code-tray-body[hidden] {
  display: none;
}

.design-code-tabs {
  min-height: 0;
  padding: 8px;
  overflow: auto;
  border-right: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.34);
}

.design-code-tab,
.design-code-folder-summary {
  display: block;
  width: 100%;
  min-height: 32px;
  padding: 6px 8px 6px calc(8px + var(--code-tree-depth, 0) * 12px);
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 800;
  text-align: left;
}

.design-code-tab:hover,
.design-code-tab[aria-selected="true"],
.design-code-folder-summary:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.design-code-tab[aria-selected="true"] {
  box-shadow: inset 2px 0 0 var(--blue);
}

.design-code-folder {
  margin: 0;
}

.design-code-folder > summary {
  list-style: none;
  cursor: pointer;
}

.design-code-folder-content {
  display: grid;
  gap: 2px;
}

.design-code-editor {
  display: grid;
  grid-template-rows: 38px minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.design-code-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border-bottom: 1px solid var(--border);
}

.design-code-toolbar span {
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 800;
}

.design-code-toolbar button {
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.72rem;
}

#design-code-format {
  min-height: 28px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-weight: 800;
}

#design-code-format:hover,
#design-code-format:focus-visible {
  border-color: var(--border-focus);
  background: var(--bg-hover);
  color: var(--text-primary);
}

.design-code-view {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 12px;
  border: 0;
  border-radius: 0;
  background: #070b12;
  color: #dbeafe;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  resize: none;
  white-space: pre;
}

.design-code-view:focus {
  outline: 1px solid var(--border-focus);
  outline-offset: -1px;
}

.page-subtopbar-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.page-subtopbar-title span {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.page-subtopbar-title strong {
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 900;
}

.page-subtopbar-actions {
  z-index: 121;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.design-view-controls {
  position: absolute;
  z-index: 122;
  top: 50%;
  left: 50%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transform: translate(-50%, -50%);
}

.design-view-controls .icon-button,
.page-subtopbar-actions > .icon-button,
.viewport-control > .icon-button {
  width: 32px;
  min-height: 32px;
}

.design-view-controls[hidden] {
  display: none;
}

.design-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.design-quick-actions[hidden] {
  display: none;
}

.design-quick-actions::before,
.design-toolbar-divider {
  display: block;
  width: 1px;
  height: 20px;
  margin: 0 5px;
  background: var(--border);
  content: "";
}

.design-toolbar-divider[hidden] {
  display: none;
}

.design-quick-active-file {
  max-width: 180px;
  overflow: hidden;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-quick-draft-status {
  color: #fbbf24;
  font-size: 0.7rem;
  font-weight: 900;
  white-space: nowrap;
}

.design-quick-draft-status[hidden] {
  display: none;
}

.design-quick-action {
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
}

.design-view-button.active {
  border-color: var(--border-focus);
  background: var(--blue-dim);
  color: var(--blue);
}

.design-view-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.page-subtopbar-actions > .icon-button svg,
.design-quick-action svg,
.viewport-control > .icon-button svg {
  width: 15px;
  height: 15px;
}

.design-grid-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  cursor: pointer;
}

.design-grid-toggle.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.design-grid-toggle.is-disabled span,
.design-grid-toggle.is-disabled strong {
  pointer-events: none;
}

.design-grid-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.design-grid-toggle span {
  position: relative;
  width: 24px;
  height: 14px;
  border-radius: 999px;
  background: var(--bg-elevated);
  transition: background 160ms ease;
}

.design-grid-toggle span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-secondary);
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}

.design-grid-toggle input:checked + span {
  background: var(--blue-dim);
}

.design-grid-toggle input:checked + span::after {
  background: var(--blue);
  transform: translateX(10px);
}

.feature-switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}

.feature-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.feature-switch span {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  transition: background 160ms ease, border-color 160ms ease;
}

.feature-switch span::after {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-secondary);
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}

.feature-switch input:checked + span {
  border-color: var(--border-focus);
  background: var(--blue-dim);
}

.feature-switch input:checked + span::after {
  background: var(--blue);
  transform: translateX(18px);
}

.design-grid-toggle strong {
  font-size: 0.7rem;
}

.design-navigation-toggle.active {
  border-color: var(--border-focus);
  background: var(--blue-dim);
  color: var(--blue);
}

.page-action {
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 0.82rem;
}

.topbar-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
}

.app-topbar .brand-mark.compact {
  width: 24px;
  height: 24px;
  grid-template-columns: repeat(2, 6px);
  gap: 3px;
  border-radius: 10px;
}

.app-topbar .brand-mark.compact span {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.app-topbar .brand-name {
  font-size: 1rem;
}

.notes-toggle.active,
.roadmap-toggle.active {
  border-color: var(--border-focus);
  background: var(--blue);
  box-shadow: 0 0 22px rgba(43, 127, 255, 0.16);
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.icon-button:hover {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.icon-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.page-subtopbar-actions .design-quick-action.icon-button {
  width: 32px;
  height: 32px;
  min-height: 32px;
}

.page-subtopbar-actions .design-quick-action.icon-button svg {
  width: 15px;
  height: 15px;
}

.topbar-tabs .icon-button {
  width: 32px;
  min-height: 32px;
  border-radius: 999px;
}

.topbar-tabs .icon-button svg {
  width: 15px;
  height: 15px;
}

.topbar-logout {
  color: var(--red);
}

.account-menu {
  position: relative;
  z-index: 120;
}

.profile-menu-button {
  display: inline-grid;
  place-items: center;
  width: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
}

.topbar-tabs .profile-menu-button {
  width: 34px;
  min-height: 34px;
}

.topbar-tabs .profile-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.78rem;
}

.profile-menu-button:hover,
.profile-menu-button[aria-expanded="true"] {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--blue), var(--purple));
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 900;
  box-shadow: 0 0 18px rgba(43, 127, 255, 0.22);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.profile-avatar.large {
  width: 76px;
  height: 76px;
  font-size: 2rem;
}

.profile-avatar.has-image {
  color: transparent;
}

.profile-avatar-control {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.profile-avatar.editable {
  min-width: 76px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}

.profile-avatar.editable:hover,
.profile-avatar.editable:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-dim), 0 0 18px rgba(43, 127, 255, 0.22);
}

.profile-avatar-edit {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 2px solid var(--bg-surface);
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  pointer-events: none;
}

.profile-avatar-edit svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  display: grid;
  min-width: 210px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 0px;
  background: rgba(17, 24, 39, 0.98);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 42px;
  padding: 0 12px;
  border-radius: 0px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
}

.account-dropdown .menu-item.always-visible {
  display: flex !important;
}

.menu-item:hover {
  background: var(--bg-hover);
}

.menu-item svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.menu-item.danger {
  color: var(--red);
}

.menu-separator {
  height: 1px;
  margin: 8px 4px;
  background: var(--border);
}

.canvas-page {
  width: min(1080px, 100%);
  margin: 0 auto;
  padding: 48px 0;
}

#users-view.canvas-page {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 24px;
}

#accounts-view.canvas-page {
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 24px;
}

.request-page.canvas-page {
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 24px;
}

#dashboard-page.canvas-page {
  width: 100%;
  max-width: none;
  min-height: 100%;
  padding: 24px;
}

#designs-page.canvas-page {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  min-height: 0;
  padding: 24px;
}

#design-editor-page.canvas-page {
  position: relative;
  display: grid;
  box-sizing: border-box;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: var(--bg-deep);
  transition: grid-template-columns 180ms ease;
}

#design-editor-page.canvas-page.is-gallery-open {
  grid-template-columns: 52px minmax(0, 1fr) min(340px, 32vw) 52px;
}

#design-editor-page.canvas-page.is-block-inspector-open {
  grid-template-columns: 52px minmax(0, 1fr) min(340px, 32vw) 52px;
}

#design-editor-page.canvas-page.is-navigation-open {
  grid-template-columns: 52px min(300px, 30vw) minmax(0, 1fr) 52px;
}

#design-editor-page.canvas-page.is-navigation-open.is-block-inspector-open {
  grid-template-columns: 52px min(300px, 30vw) minmax(0, 1fr) min(340px, 32vw) 52px;
}

#design-editor-page.canvas-page.is-navigation-open.is-gallery-open {
  grid-template-columns: 52px min(300px, 30vw) minmax(0, 1fr) min(340px, 32vw) 52px;
}

#design-editor-page.canvas-page.is-navigation-open.is-media-open {
  grid-template-columns: 52px min(300px, 30vw) minmax(0, 1fr) min(340px, 32vw) 52px;
}

#design-editor-page.canvas-page.is-preview-mode {
  grid-template-columns: minmax(0, 1fr);
}

#design-editor-page.canvas-page.is-preview-mode .design-editor-workspace {
  grid-column: 1;
}

#design-editor-page.canvas-page.is-preview-mode .design-editor-left-rail,
#design-editor-page.canvas-page.is-preview-mode .design-editor-rail,
#design-editor-page.canvas-page.is-preview-mode .design-block-inspector-panel,
#design-editor-page.canvas-page.is-preview-mode .design-navigation-panel,
#design-editor-page.canvas-page.is-preview-mode .design-gallery-panel,
#design-editor-page.canvas-page.is-preview-mode .media-library-panel,
#design-editor-page.canvas-page.is-preview-mode .design-code-tray {
  display: none;
}

.design-editor-workspace {
  position: relative;
  box-sizing: border-box;
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  min-width: 0;
  padding: 24px 24px 0;
  overflow: hidden;
}

#design-editor-page.canvas-page.is-navigation-open .design-editor-workspace {
  grid-column: 3;
}

#design-editor-page.canvas-page.is-block-inspector-open:not(.is-navigation-open) .design-editor-workspace {
  grid-column: 2;
}

#design-editor-page.canvas-page.is-navigation-open.is-block-inspector-open .design-editor-workspace {
  grid-column: 3;
}

.design-editor-page:is(.is-gallery-open, .is-media-open) .design-editor-workspace::after {
  position: absolute;
  z-index: 40;
  inset: 0;
  content: "";
  cursor: pointer;
}

.design-editor-left-rail,
.design-editor-rail {
  position: relative;
  z-index: 32;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: flex-start;
  padding: 10px 6px;
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow: visible;
  background: var(--bg-base);
}

.design-editor-left-rail {
  grid-column: 1;
  border-right: 1px solid var(--border);
}

.design-editor-rail {
  grid-column: -2 / -1;
  border-left: 1px solid var(--border);
}

.editor-rail-button {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: var(--text-secondary);
}

.editor-rail-button:hover,
.editor-rail-button.active {
  border-color: var(--border-focus);
  background: var(--blue-dim);
  color: var(--blue);
}

.editor-rail-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  top: calc(100% + 10px);
  bottom: auto;
  left: 50%;
  max-width: 220px;
  padding: 7px 9px;
  border: 1px solid var(--border-focus);
  border-radius: 6px;
  background: var(--bg-surface);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.34);
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transform: translate(-50%, -4px);
}

[data-tooltip]::after {
  content: "";
  top: calc(100% + 4px);
  bottom: auto;
  left: 50%;
  border: 5px solid transparent;
  border-bottom-color: var(--border-focus);
  transform: translate(-50%, -4px);
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::before,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.design-editor-left-rail [data-tooltip]::before {
  top: 50%;
  bottom: auto;
  left: calc(100% + 10px);
  transform: translate(4px, -50%);
}

.design-editor-left-rail [data-tooltip]::after {
  top: 50%;
  bottom: auto;
  left: calc(100% + 4px);
  border-top-color: transparent;
  border-right-color: var(--border-focus);
  transform: translate(4px, -50%);
}

.design-editor-left-rail [data-tooltip]:hover::before,
.design-editor-left-rail [data-tooltip]:hover::after,
.design-editor-left-rail [data-tooltip]:focus-visible::before,
.design-editor-left-rail [data-tooltip]:focus-visible::after {
  transform: translate(0, -50%);
}

.design-editor-rail [data-tooltip]::before {
  top: 50%;
  right: calc(100% + 10px);
  bottom: auto;
  left: auto;
  transform: translate(-4px, -50%);
}

.design-editor-rail [data-tooltip]::after {
  top: 50%;
  right: calc(100% + 4px);
  bottom: auto;
  left: auto;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left-color: var(--border-focus);
  transform: translate(-4px, -50%);
}

.design-editor-rail [data-tooltip]:hover::before,
.design-editor-rail [data-tooltip]:hover::after,
.design-editor-rail [data-tooltip]:focus-visible::before,
.design-editor-rail [data-tooltip]:focus-visible::after {
  transform: translate(0, -50%);
}

.design-navigation-header [data-tooltip]::before {
  top: 50%;
  right: calc(100% + 10px);
  bottom: auto;
  left: auto;
  transform: translate(-4px, -50%);
}

.design-navigation-header [data-tooltip]::after {
  top: 50%;
  right: calc(100% + 4px);
  bottom: auto;
  left: auto;
  border-top-color: transparent;
  border-left-color: var(--border-focus);
  transform: translate(-4px, -50%);
}

.design-navigation-header [data-tooltip]:hover::before,
.design-navigation-header [data-tooltip]:hover::after,
.design-navigation-header [data-tooltip]:focus-visible::before,
.design-navigation-header [data-tooltip]:focus-visible::after {
  transform: translate(0, -50%);
}

.design-gallery-panel,
.design-block-inspector-panel {
  position: relative;
  z-index: 31;
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.28);
  animation: design-gallery-in 180ms ease-out;
}

.design-block-inspector-panel[hidden] {
  display: none;
}

#design-editor-page.canvas-page.is-block-inspector-open:not(.is-navigation-open) .design-block-inspector-panel {
  grid-column: 3;
}

.design-navigation-panel {
  position: relative;
  z-index: 31;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: 18px 0 40px rgba(0, 0, 0, 0.24);
  animation: design-navigation-in 180ms ease-out;
}

.design-navigation-panel[hidden] {
  display: none;
}

@keyframes design-navigation-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes design-gallery-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#design-editor-page.canvas-page.is-navigation-open .design-gallery-panel,
#design-editor-page.canvas-page.is-navigation-open .media-library-panel,
#design-editor-page.canvas-page.is-navigation-open .design-block-inspector-panel {
  grid-column: 4;
}

#design-editor-page.canvas-page.is-block-inspector-open .design-block-inspector-panel {
  display: flex;
  flex-direction: column;
}

.design-navigation-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.design-navigation-header > div {
  display: grid;
  gap: 2px;
}

.theme-component-action {
  flex: 0 0 auto;
}

.design-settings-edit {
  flex: 0 0 auto;
  width: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
}

.design-settings-edit svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.design-navigation-header span {
  color: var(--green);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.design-navigation-header strong {
  color: var(--text-primary);
  font-size: 0.95rem;
}

.design-navigation-file {
  display: block;
  max-width: 220px;
  overflow: hidden;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-navigation-tree {
  height: calc(100% - 64px);
  padding: 10px 8px 24px;
  overflow: auto;
}

.design-navigation-panel[data-mode="layers"] .design-navigation-tree {
  padding-bottom: 96px;
  scroll-padding-bottom: 96px;
  overflow-x: hidden;
  overflow-y: auto;
}

.design-settings-tree {
  padding: 12px 12px 24px;
}

.design-settings-tree .design-inspector-content {
  height: auto;
  padding: 0 0 72px;
  overflow: visible;
}

.design-navigation-tree[hidden] {
  display: none;
}

.design-navigation-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 40px;
  border-bottom: 1px solid var(--border);
}

.design-navigation-tabs button {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.design-navigation-tabs button.active {
  border-bottom-color: var(--blue);
  color: var(--text-primary);
}

.design-navigation-tree ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.design-navigation-tree ul ul {
  margin-left: 14px;
  padding-left: 10px;
  border-left: 1px solid var(--border);
}

.design-navigation-panel[data-mode="layers"] .design-navigation-tree ul {
  gap: 2px;
}

.design-navigation-panel[data-mode="layers"] .design-navigation-tree ul ul {
  margin-left: 7px;
  padding-left: 6px;
}

.design-navigation-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 8px;
  border-radius: 4px;
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
}

.design-navigation-item:hover,
.design-navigation-item.active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.design-navigation-item.active {
  box-shadow: inset 2px 0 0 var(--blue);
}

.design-navigation-item[data-navigation-file] {
  cursor: pointer;
}

.design-layer-item {
  display: grid;
  grid-template-columns: 22px 18px minmax(0, 1fr) 22px 22px;
  gap: 8px;
  cursor: pointer;
}

.design-layer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
}

.design-layer-toolbar button {
  min-height: 30px;
  padding: 5px 8px;
}

.design-layer-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.design-layer-toolbar .design-layer-download {
  display: grid;
  width: 32px;
  min-width: 32px;
  padding: 0;
  place-items: center;
}

.design-layer-toolbar .design-layer-download svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.design-layer-item.is-selected {
  box-shadow: inset 3px 0 0 var(--blue);
  background: rgba(56, 88, 233, 0.14);
}

.design-navigation-panel[data-mode="layers"] .design-layer-item {
  grid-template-columns: 14px 16px minmax(0, 1fr) 18px 18px;
  gap: 5px;
  min-height: 28px;
  padding: 0 5px;
  font-size: 0.72rem;
}

.design-layer-toggle,
.design-layer-action,
.design-layer-delete {
  display: grid;
  width: 22px;
  min-width: 22px;
  height: 22px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1;
}

.design-navigation-panel[data-mode="layers"] .design-layer-toggle,
.design-navigation-panel[data-mode="layers"] .design-layer-action,
.design-navigation-panel[data-mode="layers"] .design-layer-delete {
  width: 18px;
  min-width: 18px;
  height: 18px;
}

.design-navigation-panel[data-mode="layers"] .design-layer-toggle {
  width: 14px;
  min-width: 14px;
}

.design-layer-toggle {
  margin-left: 0;
}

.design-layer-toggle svg {
  transform: rotate(90deg);
  transition: transform 140ms ease;
}

.design-layer-toggle.is-collapsed svg {
  transform: rotate(0deg);
}

.design-layer-toggle:disabled {
  opacity: 0.28;
}

.design-layer-item > .design-layer-action {
  margin-left: 0;
}

.design-navigation-item:not(.design-layer-item) > .design-layer-delete,
.design-navigation-actions {
  margin-left: auto;
}

.design-layer-action:hover {
  background: rgba(43, 127, 255, 0.14);
  color: var(--blue);
}

.design-layer-delete:hover {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
}

.design-navigation-item-icon {
  position: relative;
  width: 10px;
  height: 13px;
  flex: 0 0 auto;
  border: 1px solid var(--border-focus);
  border-radius: 1px;
  background: transparent;
}

.design-navigation-item-icon::after {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid var(--border-focus);
  border-left: 1px solid var(--border-focus);
  content: "";
  background: var(--bg-surface);
}

.design-layer-toggle svg,
.design-layer-action svg,
.design-layer-delete svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.design-layer-block-icon { display:inline-flex; width:18px; height:18px; flex:0 0 18px; color:var(--blue); }
.design-layer-block-icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:1.8; }
.design-layer-item.is-dragging { opacity:.45; }
.design-layer-item.is-layer-drop-target { box-shadow:inset 0 -2px 0 var(--blue); }

.design-navigation-panel[data-mode="layers"] .design-layer-toggle svg,
.design-navigation-panel[data-mode="layers"] .design-layer-action svg,
.design-navigation-panel[data-mode="layers"] .design-layer-delete svg {
  width: 12px;
  height: 12px;
}

.design-navigation-panel[data-mode="layers"] .design-layer-block-icon {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

.design-layer-item > span:not(.design-layer-block-icon) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-layer-item .design-navigation-item-icon {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  box-shadow: 3px 3px 0 -1px var(--bg-surface), 3px 3px 0 0 var(--border-focus);
}

.design-layer-item .design-navigation-item-icon::after {
  display: none;
}

.design-navigation-empty {
  margin: 0;
  padding: 12px 8px;
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

#design-editor-page.canvas-page.is-media-open {
  grid-template-columns: 52px minmax(0, 1fr) min(340px, 32vw) 52px;
}

.media-library-panel {
  position: relative;
  z-index: 31;
  grid-column: 3;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.28);
  animation: design-gallery-in 180ms ease-out;
}

.media-library-panel[hidden] {
  display: none;
}

.design-gallery-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 10px 10px 8px;
}

.design-gallery-tab {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 900;
}

.design-gallery-tab.active,
.design-gallery-tab[aria-selected="true"] {
  border-color: var(--border-focus);
  background: var(--blue);
  color: #ffffff;
}

.design-gallery-search {
  display: grid;
  gap: 5px;
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--border);
}

.design-gallery-search span {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.design-gallery-search input {
  width: 100%;
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(8, 13, 23, 0.74);
  color: var(--text-primary);
  font-size: 0.76rem;
  font-weight: 800;
  outline: none;
}

.design-gallery-search input::placeholder {
  color: var(--text-muted);
}

.design-gallery-search input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 2px rgba(43, 127, 255, 0.16);
}

.design-gallery-content {
  height: calc(100% - 115px);
  padding: 10px;
  overflow: auto;
}

.design-gallery-empty {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px dashed rgba(136, 149, 167, 0.32);
  border-radius: 8px;
  color: var(--text-primary);
}

.design-gallery-empty strong {
  font-size: 0.82rem;
}

.design-gallery-empty span {
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
}

.design-gallery-section {
  margin: 0 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.design-gallery-section > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  list-style: none;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.design-gallery-section > summary::marker,
.design-gallery-section > summary::-webkit-details-marker {
  display: none;
  content: "";
}

.design-gallery-section > summary::before {
  content: "▸";
  color: var(--text-secondary);
  font-size: 0.72rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

.design-gallery-section[open] > summary::before {
  transform: rotate(90deg);
}

.design-gallery-section > summary::marker {
  content: "";
  font-size: 0;
}

.design-gallery-section > summary::-webkit-details-marker {
  display: none;
}

.design-gallery-section > summary::before {
  content: "";
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid currentColor;
  color: var(--text-secondary);
  flex: 0 0 auto;
  font-size: 0;
  line-height: 0;
}

#design-gallery-panel .design-gallery-section > summary {
  min-height: 40px;
}

#design-gallery-panel .design-gallery-section > summary::before,
#design-gallery-panel .design-gallery-section[open] > summary::before {
  display: none;
  content: none;
}

#design-gallery-panel .design-gallery-section > summary svg {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--text-secondary);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transform: rotate(0deg);
  transition: transform 120ms ease;
}

#design-gallery-panel .design-gallery-section[open] > summary svg {
  transform: rotate(90deg);
}

.design-gallery-section-content {
  display: grid;
  gap: 8px;
  padding: 0 8px 8px;
}

.design-gallery-item {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.58);
  color: var(--text-primary);
  text-align: left;
}

.design-gallery-item[role="button"] {
  cursor: pointer;
}

.design-gallery-item.is-custom-gallery-item {
  grid-template-columns: 36px minmax(0, 1fr);
}

.design-gallery-item:hover,
.design-gallery-item.is-dragging {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.design-gallery-item.is-custom-gallery-item {
  border-color: rgba(45, 212, 191, 0.36);
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.13), rgba(47, 111, 237, 0.12));
}

.design-gallery-item.is-custom-gallery-item:hover {
  border-color: rgba(45, 212, 191, 0.62);
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(47, 111, 237, 0.18));
}

.design-gallery-item-icon {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 7px;
  background: var(--blue-dim);
  color: var(--blue);
}

.design-gallery-item.is-custom-gallery-item .design-gallery-item-icon {
  background: rgba(45, 212, 191, 0.15);
  color: #2dd4bf;
}

.design-gallery-item-icon svg {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  min-width: 20px;
  min-height: 20px;
  overflow: hidden;
  fill: currentColor;
  stroke: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.design-gallery-item-icon svg {
  fill: none;
  stroke: currentColor;
}

.design-gallery-item strong {
  display: block;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-gallery-item span:not(.design-gallery-item-icon) {
  min-width: 0;
}

.design-gallery-item small {
  display: block;
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.media-library-header > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.media-library-header span {
  color: var(--green);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.media-library-header strong {
  color: var(--text-primary);
  font-size: 0.95rem;
}

.media-upload-button {
  display: inline-grid;
  min-height: 34px;
  padding: 0 12px;
  place-items: center;
  border: 1px solid var(--border-focus);
  border-radius: 6px;
  background: var(--blue);
  color: #ffffff;
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 900;
}

.media-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.media-library-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  height: calc(100% - 64px);
  padding: 12px;
  overflow: auto;
}

.media-library-empty {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.5;
}

.media-library-item {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.media-library-item.is-missing {
  opacity: 0.6;
}

.media-library-item img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  object-fit: cover;
}

.media-library-item span {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.media-library-delete {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
}

.media-library-delete:hover {
  background: #dc2626;
}

.media-library-delete svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.design-navigation-folder {
  margin: 0;
}

.design-navigation-folder > summary {
  list-style: none;
  cursor: pointer;
}

.design-navigation-folder > summary .design-navigation-add {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 20px;
}

.design-navigation-folder > summary .design-navigation-add:hover {
  border-color: rgba(43, 127, 255, 0.55);
  color: var(--text-primary);
}

.design-navigation-actions { display:inline-flex; align-items:center; gap:4px; margin-left:auto; }
.design-navigation-actions .design-navigation-add { margin-left:0 !important; }

.design-navigation-folder > summary::-webkit-details-marker {
  display: none;
}

.design-navigation-folder > summary::before {
  width: 10px;
  flex: 0 0 auto;
  color: var(--blue);
  content: "›";
  font-size: 1rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 140ms ease;
}

.design-navigation-folder[open] > summary::before {
  transform: rotate(90deg);
}

.design-inspector-content {
  display: grid;
  gap: 10px;
  height: calc(100% - 64px);
  align-content: start;
  padding: 12px 12px 72px;
  scroll-padding-bottom: 72px;
  overflow: auto;
}

.design-inspector-row {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.design-inspector-row span {
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.design-inspector-row strong {
  color: var(--text-primary);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.block-inspector {
  display: grid;
  gap: 14px;
}

.block-inspector-summary {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(47, 128, 255, 0.35);
  border-radius: 10px;
  background: rgba(47, 128, 255, 0.08);
}

.block-inspector-summary span,
.block-inspector-field > span {
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.block-inspector-summary strong {
  color: var(--text-primary);
}

.block-inspector-field {
  display: grid;
  gap: 7px;
}

.block-inspector-field input,
.block-inspector-field select,
.block-inspector-field textarea {
  width: 100%;
  min-width: 0;
  margin: 0;
  text-align: left !important;
}

.block-inspector-field textarea {
  resize: vertical;
}

.block-inspector-field [data-block-setting="button-text"],
.block-inspector-field [data-block-setting="button-url"],
.block-inspector-field [data-block-setting="text"],
.block-text-link-tool input {
  padding-left: 8px !important;
  text-align: left !important;
  text-indent: 0 !important;
}

.design-canvas-document .wp-block-button__link {
  text-indent: 0;
}

.block-inspector-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}

.block-inspector-tabs button {
  padding: 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
}

.block-inspector-tabs button.is-active {
  border-bottom-color: var(--blue);
  color: var(--text-primary);
}

.block-inspector-panel {
  display: grid;
  gap: 14px;
}

.block-custom-css-field textarea {
  min-height: 220px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  line-height: 1.5;
}

.block-inspector-help {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1.45;
}

.block-inspector-panel[hidden] {
  display: none;
}

.block-inspector-toggle {
  display: flex;
  gap: 9px;
  align-items: center;
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 700;
}

.block-inspector-toggle input {
  width: auto;
}

.block-inspector-dimension {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 6px;
}

.block-spacing-control .block-inspector-dimension {
  grid-template-columns: minmax(0, 1fr) 58px;
}

.block-spacing-control .block-unit-select {
  max-width: 58px;
}

.block-inspector-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.block-inspector-box legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 5px;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.block-inspector-box legend em {
  color: var(--text-secondary);
  font-size: 0.62rem;
  font-style: normal;
  text-transform: none;
}

.responsive-clear {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: none;
}

.responsive-clear:hover {
  color: var(--text-primary);
}

.block-inspector-box.responsive-control.has-override {
  border-color: rgba(251, 191, 36, 0.55);
}

.block-inspector-box.responsive-control.has-override legend em {
  color: #fbbf24;
}

.block-inspector-box.responsive-control p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.68rem;
  line-height: 1.4;
}

.block-inspector-box label {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.block-inspector-box label span {
  color: var(--text-secondary);
  font-size: 0.65rem;
}

.block-inspector-box input {
  width: 100%;
  min-width: 0;
}

.block-inspector-sides {
  grid-template-columns: 1fr;
}

.block-side-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 58px;
  gap: 5px;
}

.block-side-unit select {
  height: 100%;
}

.block-border-style {
  width: 100%;
}

.block-side-values label {
  text-align: center;
}

.block-side-values input {
  padding-inline: 5px;
  text-align: center;
}

.block-border-color {
  display: grid;
  gap: 5px;
}

.block-logo-duotone {
  grid-template-columns: 1fr 1fr;
}

.block-logo-duotone input[type="color"] {
  width: 100%;
  height: 40px;
  padding: 3px;
  cursor: pointer;
}

.block-logo-duotone button {
  grid-column: 1 / -1;
  min-height: 36px;
}

.block-button-row-layout .block-inspector-toggle {
  display: flex;
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.block-button-row-layout .block-inspector-toggle input {
  width: auto;
  margin: 0;
}

.block-side-options {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 6px;
}

.block-side-options > .block-unit-select:only-child {
  grid-column: 1;
}

.block-unit-select {
  appearance: none;
  padding-right: 8px !important;
  background-image: none !important;
  text-align: center;
  cursor: pointer;
}

.block-inspector-notice {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(47, 128, 255, 0.28);
  border-radius: 8px;
  background: rgba(47, 128, 255, 0.06);
}

.block-inspector-notice strong {
  color: var(--text-primary);
  font-size: 0.72rem;
}

.block-inspector-notice code {
  color: #9fc2ff;
  font-size: 0.7rem;
  overflow-wrap: anywhere;
}

.block-inspector-notice p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.68rem;
  line-height: 1.45;
}

[data-constrained-field]:has(:disabled) {
  opacity: 0.48;
}

.block-inspector-empty {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.block-color-control { display:grid; grid-template-columns:52px minmax(0,1fr) 32px; align-items:center; gap:8px; }
.block-color-control input[type="color"] { width:52px; height:40px; padding:3px; cursor:pointer; }
.block-color-control.is-empty input[type="color"] { opacity:.38; }
.block-color-control output { display:flex; align-items:center; min-height:40px; padding:0 10px; border:1px solid var(--border); border-radius:7px; background:var(--bg-input); color:var(--text-primary); font:0.78rem ui-monospace,Consolas,monospace; }
.block-color-control.is-empty output { color:var(--text-secondary); font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-weight:800; }
.block-color-clear {
  position: relative;
  display: grid;
  inline-size: 32px;
  block-size: 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  place-self: center;
  place-items: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(30,41,59,.72);
  color: var(--text-secondary);
  font-size: 0;
  line-height: 0;
}
.block-color-clear::before,
.block-color-clear::after { position:absolute; top:50%; left:50%; width:11px; height:2px; border-radius:999px; content:""; background:currentColor; transform:translate(-50%,-50%) rotate(45deg); }
.block-color-clear::after { transform:translate(-50%,-50%) rotate(-45deg); }
.block-color-clear:hover { border-color:var(--border-focus); color:var(--text-primary); }
.block-text-link-tool { display:grid; gap:6px; padding:10px; border:1px solid var(--border); border-radius:8px; background:rgba(15,23,42,.36); }
.block-text-link-tool > span { color:var(--text-secondary); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.block-text-link-tool > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; }
.block-text-link-tool input { min-width:0; }
.block-text-link-tool button { min-height:40px; padding:8px 10px; white-space:nowrap; }
.block-text-link-target { display:flex; align-items:center; gap:8px; color:var(--text-secondary); font-size:.72rem; }
.block-text-link-target input { width:auto; min-width:0; }
.block-gradient-control,.block-background-image { display:grid; gap:10px; margin:0; padding:10px; border:1px solid var(--border); border-radius:8px; }
.block-gradient-control > legend { display:none; }
.block-gradient-header { display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:center; gap:8px; color:var(--text-secondary); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.block-setting-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--text-secondary); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.block-setting-heading button { display:grid; width:24px; min-width:24px; height:24px; padding:0; place-items:center; border:1px solid var(--border); border-radius:5px; background:transparent; color:var(--text-secondary); }
.block-setting-heading button:hover { border-color:var(--border-focus); color:var(--text-primary); }
.block-opacity-control { display:grid; grid-template-columns:auto minmax(0,1fr) 42px; align-items:center; gap:8px; color:var(--text-secondary); font-size:.68rem; }
.block-opacity-control input[type="range"] { appearance:none; width:100%; height:6px; padding:0; border:0; border-radius:999px; background:linear-gradient(90deg,#93c5fd 0,#93c5fd var(--range-progress),rgba(255,255,255,.18) var(--range-progress),rgba(255,255,255,.18) 100%); }
.block-opacity-control input[type="range"]::-webkit-slider-thumb { appearance:none; width:18px; height:18px; border:0; border-radius:50%; background:#93c5fd; cursor:pointer; }
.block-opacity-control input[type="range"]::-moz-range-thumb { width:18px; height:18px; border:0; border-radius:50%; background:#93c5fd; cursor:pointer; }
.block-opacity-control output { text-align:right; color:var(--text-primary); }
.block-gradient-control legend,.block-background-image legend { padding:0 5px; color:var(--text-secondary); font-size:.68rem; font-weight:900; text-transform:uppercase; }
.block-gradient-control.is-empty .block-gradient-preview { display:grid; place-items:center; border:1px dashed var(--border); background:rgba(15,23,42,.45); color:var(--text-secondary); font-size:.72rem; font-weight:800; }
.block-background-image legend { display:grid; grid-template-columns:minmax(0,1fr) 32px; align-items:center; gap:8px; width:100%; }
.block-gradient-preview { height:48px; border-radius:6px; }
.block-gradient-settings,.block-gradient-colors { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.block-gradient-settings label,.block-gradient-colors label { display:grid; gap:5px; color:var(--text-secondary); font-size:.65rem; }
.block-gradient-colors input[type="color"] { width:100%; height:34px; padding:3px; }
.block-gradient-presets { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.block-gradient-presets input,.block-media-library input { position:absolute; opacity:0; pointer-events:none; }
.block-gradient-presets span { display:block; aspect-ratio:1; border:1px solid rgba(255,255,255,.25); border-radius:50%; cursor:pointer; }
.block-gradient-presets input:focus-visible + span,.block-gradient-presets input:checked + span { outline:2px solid var(--blue); outline-offset:2px; }
.block-media-tabs { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--border); }
.block-media-tabs button { padding:8px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; color:var(--text-secondary); }
.block-media-tabs button.active { border-bottom-color:var(--blue); color:var(--text-primary); }
.block-background-image input[type="url"] { width:100%; }
.block-media-library { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.block-media-library[hidden] { display:none; }
.block-media-library label { position:relative; cursor:pointer; }
.block-media-library img { width:100%; aspect-ratio:1; border:2px solid transparent; border-radius:6px; object-fit:cover; }
.block-media-library input:checked + img { border-color:var(--blue); }
.block-media-library p { grid-column:1/-1; margin:0; color:var(--text-secondary); font-size:.7rem; }
.block-media-clear { position:absolute; top:-8px; right:-8px; display:grid; width:28px; min-width:28px; height:28px; padding:0; place-items:center; border:1px solid rgba(255,255,255,.24); border-radius:999px; background:#ef4444; color:#fff; line-height:1; box-shadow:0 6px 16px rgba(0,0,0,.35); }
.block-media-clear svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.block-media-clear:hover { background:#dc2626; }
.block-background-options { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; align-items:end; }
.block-background-options label { display:grid; gap:6px; min-width:0; color:var(--text-secondary); font-size:.72rem; }
.block-background-options label > span { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.block-background-options small { color:var(--text-secondary); font-size:.72rem; }
.block-inline-unit { display:grid; grid-template-columns:minmax(0,1fr) 34px; align-items:center; gap:8px; }
.block-inline-unit small { display:grid; min-height:40px; place-items:center; border:1px solid transparent; color:var(--text-secondary); }
.block-background-options .block-inspector-toggle { display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; min-height:40px; gap:8px; }
.block-background-toggle { padding:8px 0; }
.block-background-width { grid-column:1 / -1; }
.block-background-width .block-inspector-dimension { display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:8px; }
.block-typography-control { display:grid; grid-template-columns:1fr; gap:12px; padding:12px; }
.block-typography-control label { display:grid; min-width:0; gap:6px; color:var(--text-secondary); font-size:.72rem; }
.block-typography-control label > span { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.03em; }
.block-typography-control select,.block-typography-control input { width:100%; min-width:0; }
.block-typography-full { grid-column:1/-1; }
.block-typography-grid { display:grid; grid-column:1/-1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; align-items:end; }
.block-typography-control .block-inspector-dimension { display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:8px; }
.block-typography-grid .block-inspector-dimension { grid-template-columns:minmax(0,1fr) 58px; }
.block-typography-control .block-inspector-toggle { display:flex; grid-column:1/-1; flex-direction:row-reverse; justify-content:flex-end; align-items:center; width:max-content; margin-top:2px; }

.design-inspector-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 10px;
  background: rgba(56, 189, 248, 0.06);
}

.design-inspector-card > span {
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.design-inspector-card > strong {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.design-editor-canvas {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 95%;
  min-height: 0;
  margin: 0 auto;
  overflow: auto;
  scrollbar-color: var(--bg-elevated) var(--bg-deep);
  scrollbar-width: thin;
  border: 1px solid rgba(8, 12, 20, 0.12);
  background: #ffffff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
  transition: width 180ms ease, box-shadow 180ms ease;
}

.design-editor-canvas::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.design-editor-canvas::-webkit-scrollbar-track {
  background: var(--bg-deep);
}

.design-editor-canvas::-webkit-scrollbar-thumb {
  background: var(--bg-elevated);
  border: 2px solid var(--bg-deep);
  border-radius: 999px;
}

.design-editor-canvas::-webkit-scrollbar-thumb:hover {
  background: var(--bg-hover);
}

.design-canvas-document {
  width: 100%;
  min-height: 100%;
  outline: none;
  background: #ffffff;
}

.design-canvas-empty {
  display: grid;
  gap: 8px;
  place-items: center;
  min-height: 260px;
  margin: 28px;
  padding: 34px;
  border: 1px dashed rgba(37, 99, 235, 0.38);
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.04);
  color: #64748b;
  text-align: center;
  user-select: none;
}

.design-canvas-empty strong {
  color: #172033;
  font-size: 1rem;
  font-weight: 900;
}

.design-canvas-empty span {
  max-width: 420px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.45;
}

.design-editor-canvas:has(.design-source-workspace) {
  border-color: var(--border);
  background: var(--bg-deep);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.24);
}

.design-editor-canvas.is-page-source-active {
  align-items: stretch;
  padding: 0;
}

.design-source-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  min-height: 100%;
  padding: 22px;
  background: var(--bg-deep);
  color: var(--text-primary);
}

.design-source-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.design-source-header > div:first-child {
  min-width: 0;
}

.design-source-header span,
.design-source-card p,
.design-source-metric span,
.theme-json-section label,
.functions-option-grid label {
  color: var(--text-secondary);
}

.design-source-header > div:first-child span {
  color: var(--green);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.design-source-header h2 {
  margin: 4px 0 0;
  color: var(--text-primary);
  font-size: 1.6rem;
}

.design-source-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
}

.design-source-tabs button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 900;
}

.design-source-tabs button.active,
.design-source-tabs button:hover,
.design-source-tabs button:focus-visible {
  border-color: var(--border-focus);
  background: var(--blue);
  color: #ffffff;
}

.design-source-panel {
  min-height: 0;
  padding: 18px 0 0;
  overflow: auto;
  color: var(--text-primary);
}

.design-source-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 16px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 900;
}

.design-source-status.is-valid {
  border-color: rgba(16, 185, 129, 0.38);
  background: rgba(16, 185, 129, 0.12);
  color: #a7f3d0;
}

.design-source-status.is-error {
  border-color: rgba(239, 68, 68, 0.42);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
}

.design-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.design-source-metric,
.design-source-card,
.theme-json-section,
.functions-manager {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.design-source-metric {
  display: grid;
  gap: 4px;
  padding: 12px;
}

.design-source-metric strong {
  color: var(--text-primary);
  font-size: 0.92rem;
}

.design-source-card,
.theme-json-section,
.functions-manager {
  margin-top: 12px;
  padding: 14px;
}

.design-source-card h3,
.theme-json-section h3 {
  margin: 0 0 10px;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.design-source-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.design-source-swatches span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.74rem;
  font-weight: 800;
}

.design-source-swatches i {
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
}

.theme-json-guided {
  display: grid;
  gap: 14px;
}

.theme-json-grid,
.functions-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.theme-json-grid label,
.functions-option-grid label,
.theme-json-toggle {
  display: grid;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 800;
}

.functions-option-grid label,
.theme-json-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.theme-json-grid input,
.theme-json-palette-row input,
.style-css-header-editor input,
.design-source-editor {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #070b12;
  color: var(--text-primary);
}

.theme-json-grid input,
.theme-json-palette-row input,
.style-css-header-editor input {
  min-height: 34px;
  padding: 0 10px;
}

.theme-json-palette {
  display: grid;
  gap: 8px;
}

.theme-json-palette-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 56px 34px;
  gap: 8px;
  align-items: end;
}

.theme-json-palette-row label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--text-secondary);
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.theme-json-remove-color {
  align-self: end;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
}

.theme-json-remove-color svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.theme-json-small-action {
  width: fit-content;
  min-height: 32px;
  margin-top: 10px;
}

.design-source-editor {
  min-height: 420px;
  padding: 12px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  resize: vertical;
  white-space: pre;
}

.style-css-body-editor {
  min-height: 520px;
}

.design-editor-canvas .design-canvas-document > .wp-block-group.alignfull,
.design-editor-canvas .design-canvas-document > main.alignfull {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
}

.design-canvas-document[contenteditable="true"]:focus {
  outline: none;
}

.design-editor-canvas.is-block-drag-active {
  box-shadow:
    0 0 0 2px rgba(43, 127, 255, 0.44),
    0 18px 50px rgba(0, 0, 0, 0.24);
}

.design-editor-canvas.is-block-drag-active .design-canvas-document.is-block-drop-target,
.design-editor-canvas.is-block-drag-active .design-canvas-document .is-block-drop-target {
  position: relative !important;
  box-shadow: inset 0 0 0 2px rgba(43, 127, 255, 0.9) !important;
}

.design-editor-canvas.is-block-drag-active .design-canvas-document.is-block-drop-target::after,
.design-editor-canvas.is-block-drag-active .design-canvas-document .is-block-drop-target::before {
  position: absolute;
  z-index: 20;
  top: 8px;
  left: 50%;
  padding: 5px 9px;
  border-radius: 999px;
  content: attr(data-drop-label);
  pointer-events: none;
  transform: translateX(-50%);
  background: rgba(43, 127, 255, 0.94);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  color: #ffffff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.design-editor-canvas.is-grid-visible {
  background: #ffffff;
}

.design-editor-canvas.is-grid-visible .design-canvas-document :where(.wp-block-group,.wp-block-columns,.wp-block-column,.wp-block-heading,.wp-block-paragraph,.wp-block-list,.wp-block-quote,.wp-block-details,.wp-block-pullquote,.wp-block-table,.wp-block-preformatted,.wp-block-code,.wp-block-verse,.wp-block-image,.wp-block-cover,.wp-block-gallery,.wp-block-audio,.wp-block-video,.wp-block-file,.wp-block-media-text,.wp-block-search,.wp-block-latest-posts,.wp-block-categories,.wp-block-tag-cloud,.wp-block-social-links,.wp-block-html,.wp-block-shortcode,.wp-block-archives,.wp-block-embed,.wp-magik-custom-block-preview,.wp-block-site-title,.wp-block-site-logo,.wp-block-site-tagline,.wp-block-navigation,.wp-block-buttons,.wp-block-button,.wp-block-spacer,.wp-block-separator) {
  cursor: pointer;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .editor-inline-source-view {
  cursor: text;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .wp-block-group {
  position: relative !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .wp-block-group::after {
  display: none;
  content: none !important;
}

.design-editor-canvas.is-grid-visible .design-canvas-document :where(.wp-block-navigation, .wp-block-buttons):not(.alignwide):not(.alignfull) {
  display: inline-flex;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .has-editor-selection {
  outline: 1px solid rgba(48, 158, 244, 0.8) !important;
  outline-offset: -1px !important;
  box-shadow: inset 0 0 0 1px rgba(48, 158, 244, 0.12);
}

.design-editor-canvas.is-grid-visible .design-canvas-document .is-editor-hovered,
.design-editor-canvas.is-grid-visible .design-canvas-document .is-editor-selected {
  position: relative !important;
  z-index: 6;
  outline: 2px solid rgba(48, 158, 244, 0.98) !important;
  outline-offset: -1px !important;
  box-shadow: none;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .is-editor-hovered::before,
.design-editor-canvas.is-grid-visible .design-canvas-document .is-editor-selected::before,
.design-editor-canvas.is-grid-visible .design-canvas-document .has-editor-breadcrumb::before {
  position: absolute;
  z-index: 8;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0;
  border-style: solid;
  border-width: var(--editor-padding-top, 0) var(--editor-padding-right, 0) var(--editor-padding-bottom, 0) var(--editor-padding-left, 0);
  border-color: rgba(152, 251, 152, 0.36);
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  content: "";
  pointer-events: none;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .is-editor-hovered::after,
.design-editor-canvas.is-grid-visible .design-canvas-document .is-editor-selected::after,
.design-editor-canvas.is-grid-visible .design-canvas-document .has-editor-breadcrumb::after {
  position: absolute;
  z-index: 7;
  top: calc(-1 * var(--editor-margin-top, 0));
  right: calc(-1 * var(--editor-margin-right, 0));
  bottom: calc(-1 * var(--editor-margin-bottom, 0));
  left: calc(-1 * var(--editor-margin-left, 0));
  box-sizing: border-box;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  border-radius: 0;
  border-style: solid;
  border-width: var(--editor-margin-top, 0) var(--editor-margin-right, 0) var(--editor-margin-bottom, 0) var(--editor-margin-left, 0);
  border-color: rgba(251, 176, 112, 0.46);
  background: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transform: none !important;
  content: "";
  display: block;
  pointer-events: none;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .is-editor-inactive {
  opacity: 0.62;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .wp-block-group.has-editor-breadcrumb::after {
  display: block;
}

.editor-selection-breadcrumb {
  position: absolute;
  z-index: 30;
  top: -34px;
  right: 0;
  width: auto !important;
  min-width: 0;
  display: inline-flex;
  align-items: stretch;
  max-width: min(680px, calc(100% - 12px));
  overflow: hidden;
  border: 1px solid rgba(48, 158, 244, 0.74);
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  line-height: 1.2;
  white-space: nowrap;
}

.editor-selection-breadcrumb.is-first-canvas-block {
  top: auto;
  bottom: -34px;
}

.editor-selection-settings-bar {
  position: absolute;
  z-index: 29;
  top: -5px;
  right: 0;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  gap: 4px;
  width: auto;
  min-width: 0;
  min-height: 30px;
  padding: 3px 4px;
  border: 1px solid rgba(71, 85, 105, 0.92);
  border-radius: 0 0 6px 6px;
  background: #111827;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.editor-selection-settings-bar.is-first-canvas-block {
  top: auto;
  bottom: -64px;
}

.editor-selection-settings-bar.has-open-menu {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.editor-settings-action {
  display: inline-grid;
  place-items: center;
  width: 30px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #c7d2fe;
  cursor: pointer;
  pointer-events: auto;
}

.editor-settings-action:hover,
.editor-settings-action:focus-visible,
.editor-settings-action.is-active {
  background: rgba(48, 158, 244, 0.24);
  color: #ffffff;
  outline: none;
}

.editor-settings-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.editor-selection-settings-menu {
  position: absolute;
  z-index: 31;
  top: 100%;
  right: -0.5px;
  display: grid;
  box-sizing: border-box;
  width: min(var(--editor-settings-menu-width, 100%), calc(100vw - 48px));
  min-width: 0;
  max-width: calc(100vw - 48px);
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(48, 158, 244, 0.4);
  border-radius: 0 0 8px 8px;
  background: #111827;
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.36);
  color: #ffffff;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 120ms ease, transform 120ms ease;
}

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

.editor-settings-field,
.editor-settings-toggle {
  display: grid;
  gap: 7px;
  color: #ffffff;
  font: 800 0.82rem/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0;
}

.editor-settings-field > span {
  color: #91a4c4;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
}

.editor-settings-toggle {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
}

.editor-settings-toggle input {
  width: 12px;
  height: 12px;
  margin: 0;
}

.editor-settings-dimension {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px;
  gap: 8px;
}

.editor-settings-width-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.editor-settings-field select,
.editor-settings-field input {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(30, 64, 175, 0.56);
  border-radius: 6px;
  background: #080d17;
  color: #ffffff;
  font: inherit;
}

.editor-settings-field input {
  padding: 0 10px;
}

.editor-settings-field select {
  padding: 0 10px;
}

.editor-settings-field input:disabled,
.editor-settings-field select:disabled {
  opacity: 0.44;
}

.editor-settings-notice {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(43, 127, 255, 0.45);
  border-radius: 7px;
  background: rgba(43, 127, 255, 0.1);
  color: #c9d7ef;
  font: 700 0.72rem/1.45 Inter, ui-sans-serif, system-ui, sans-serif;
}

.editor-settings-notice strong {
  color: #ffffff;
  font-size: 0.76rem;
}

.editor-settings-notice code {
  color: #93c5fd;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  white-space: normal;
  word-break: break-word;
}

.editor-settings-notice p {
  margin: 0;
  color: #91a4c4;
}

.editor-settings-palette-content {
  display: grid;
  gap: 12px;
}

.editor-selection-palette-menu .block-inspector-field {
  display: grid;
  gap: 8px;
}

.editor-selection-palette-menu .block-inspector-field > span,
.editor-selection-palette-menu .block-gradient-header {
  color: #91a4c4;
}

.editor-selection-palette-menu .block-color-control output,
.editor-selection-palette-menu .block-color-control input[type="color"],
.editor-selection-palette-menu .block-gradient-settings select,
.editor-selection-palette-menu .block-gradient-settings input {
  border-color: rgba(30, 64, 175, 0.56);
  background-color: #080d17;
}

.editor-selection-palette-menu .block-color-control.is-empty input[type="color"] {
  opacity: 1;
}

.editor-selection-palette-menu .block-color-clear {
  inline-size: 28px;
  block-size: 28px;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
}

.editor-selection-palette-menu .block-color-clear::before,
.editor-selection-palette-menu .block-color-clear::after {
  width: 9px;
  height: 1.5px;
}

.editor-selection-palette-menu .block-opacity-control input[type="range"] {
  background: linear-gradient(90deg, #93c5fd 0, #93c5fd var(--range-progress, 100%), rgba(148, 163, 184, 0.42) var(--range-progress, 100%), rgba(148, 163, 184, 0.42) 100%);
}

.editor-settings-spacing-content,
.editor-settings-border-content {
  display: grid;
  gap: 16px;
}

.editor-selection-spacing-menu .block-inspector-box,
.editor-selection-border-menu .block-inspector-box {
  border-color: rgba(30, 64, 175, 0.56);
  background: transparent;
}

.editor-selection-spacing-menu .block-inspector-box legend,
.editor-selection-border-menu .block-inspector-box legend,
.editor-selection-border-menu .block-inspector-field > span {
  color: #91a4c4;
}

.editor-selection-spacing-menu .block-side-values {
  grid-template-columns: repeat(4, minmax(0, 1fr)) 66px;
  gap: 7px;
}

.editor-selection-spacing-menu .block-side-values label span,
.editor-selection-border-menu .block-inspector-box label span {
  color: #91a4c4;
  font-size: 0.74rem;
}

.editor-selection-spacing-menu .block-side-values input,
.editor-selection-spacing-menu .block-side-values select,
.editor-selection-border-menu .block-inspector-box input,
.editor-selection-border-menu .block-inspector-field select {
  min-height: 40px;
  border-color: rgba(30, 64, 175, 0.56);
  border-radius: 6px;
  background: #080d17;
  color: #ffffff;
  font-size: 0.92rem;
  font-weight: 700;
}

.editor-selection-spacing-menu .block-unit-select,
.editor-selection-border-menu .block-inspector-field select {
  max-width: none;
  text-align: center;
}

.editor-selection-border-menu .block-inspector-box {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-selection-border-menu .block-inspector-field {
  display: grid;
  gap: 10px;
}

.wp-block-group.has-editor-breadcrumb > .editor-selection-breadcrumb.is-nested-selection,
.wp-block-group > .editor-hover-identifier {
  right: 0;
}

.editor-hover-identifier {
  top: -31px;
  border-color: rgba(48, 158, 244, 0.62);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.editor-hover-identifier.is-first-canvas-block {
  top: auto;
  bottom: -31px;
}

.editor-selection-breadcrumb.is-selection-toolbar {
  overflow: visible;
  background: #309ef4;
  border-color: #309ef4;
}

.editor-selection-breadcrumb.is-selection-toolbar.has-settings-bar {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.editor-selection-badge,
.editor-selection-separator,
.editor-selection-action {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 8px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
}

.editor-selection-badge {
  gap: 7px;
  pointer-events: auto;
  cursor: default;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-selection-badge svg,
.editor-selection-action svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.editor-selection-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-selection-action {
  width: 36px;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
}

.editor-selection-action:hover,
.editor-selection-action:focus-visible {
  background: rgba(0, 0, 0, 0.16);
  outline: none;
}

.editor-selection-action.is-active {
  background: rgba(0, 0, 0, 0.24);
}

.editor-selection-action.is-add-block {
  width: 36px;
  min-height: 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 1;
}

.design-editor-canvas.is-block-drag-active .editor-selection-breadcrumb {
  pointer-events: none;
}

.design-editor-canvas.is-block-drag-active .editor-selection-action {
  pointer-events: none;
}

.design-editor-canvas.is-block-drag-active .design-canvas-document .is-dragging {
  pointer-events: none;
}

.editor-drag-ghost {
  position: fixed;
  z-index: -1;
  top: -1000px;
  left: -1000px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #309ef4;
  color: #ffffff;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  white-space: nowrap;
}

.editor-selection-badge:hover,
.editor-selection-badge:focus-visible {
  filter: brightness(1.2);
  outline: none;
}

.editor-selection-badge.is-active {
  background: #309ef4;
  color: #ffffff;
  box-shadow: none;
}

.editor-selection-badge.is-group {
  background: #309ef4;
}

.editor-selection-badge.is-element {
  background: #309ef4;
}

.editor-selection-separator {
  min-height: 26px;
  padding-inline: 5px;
  background: rgba(43, 49, 59, 0.94);
  color: rgba(255, 255, 255, 0.72);
}

.design-editor-canvas.is-grid-visible .design-canvas-document .is-editor-source-active {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start !important;
  justify-items: stretch !important;
  min-height: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  color: transparent !important;
  caret-color: transparent;
  text-align: left !important;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .is-editor-source-active > :not(.editor-selection-breadcrumb):not(.editor-selection-toolbar-stack):not(.editor-inline-source-view):not(.editor-inline-source-status) {
  display: none !important;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .editor-inline-source-view {
  position: relative;
  z-index: 24;
  display: block;
  grid-column: 1 / -1;
  justify-self: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  max-height: var(--editor-inline-source-max-height, 70vh);
  min-width: 0;
  margin: 0 !important;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  padding: 12px;
  background: #07111f;
  color: #dbeafe !important;
  caret-color: #93c5fd;
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left;
  text-transform: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  pointer-events: auto;
  resize: none;
  user-select: text;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .editor-inline-source-view:focus {
  outline: 2px solid rgba(147, 197, 253, 0.72);
  outline-offset: -2px;
}

.design-editor-canvas.is-grid-visible .design-canvas-document .editor-inline-source-status {
  position: relative;
  z-index: 24;
  display: block;
  grid-column: 1 / -1;
  justify-self: stretch;
  box-sizing: border-box;
  width: 100%;
  max-width: none !important;
  min-height: 32px;
  margin: 0 !important;
  padding: 6px 10px;
  background: #07111f;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
  color: #9fb7d7;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left;
}

.editor-inline-source-status.is-valid,
.editor-page-source-status.is-valid {
  color: #6ee7b7;
}

.editor-inline-source-status.is-error,
.editor-page-source-status.is-error {
  color: #fca5a5;
}

.editor-page-source-workspace {
  display: grid;
  width: 100%;
  min-height: min(720px, calc(100vh - 160px));
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid rgba(48, 158, 244, 0.6);
  background: #07111f;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
}

.editor-page-source-toolbar {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 10px 0 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  color: #9fb7d7;
  font-size: 0.72rem;
  font-weight: 800;
}

.editor-page-source-actions {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.editor-page-source-status {
  overflow: hidden;
  color: #9fb7d7;
  font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-page-source-format {
  position: relative;
  display: inline-grid;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(48, 158, 244, 0.5);
  border-radius: 999px;
  background: rgba(48, 158, 244, 0.16);
  color: #bfdbfe;
  cursor: pointer;
}

.editor-page-source-format svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.editor-page-source-format:hover,
.editor-page-source-format:focus-visible {
  border-color: rgba(147, 197, 253, 0.86);
  background: rgba(48, 158, 244, 0.28);
  outline: none;
}

.editor-page-source-format[data-tooltip]::before {
  top: 50%;
  right: calc(100% + 10px);
  bottom: auto;
  left: auto;
  transform: translate(-4px, -50%);
}

.editor-page-source-format[data-tooltip]::after {
  top: 50%;
  right: calc(100% + 1px);
  bottom: auto;
  left: auto;
  border: 5px solid transparent;
  border-left-color: var(--border-focus);
  transform: translate(-4px, -50%);
}

.editor-page-source-format[data-tooltip]:hover::before,
.editor-page-source-format[data-tooltip]:hover::after,
.editor-page-source-format[data-tooltip]:focus-visible::before,
.editor-page-source-format[data-tooltip]:focus-visible::after {
  transform: translate(0, -50%);
}

.editor-page-source-view {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-height: 260px;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 0;
  padding: 14px;
  background: transparent;
  color: #dbeafe;
  caret-color: #93c5fd;
  font: 12px/1.58 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  resize: none;
}

.editor-page-source-view:focus {
  outline: 2px solid rgba(147, 197, 253, 0.68);
  outline-offset: -2px;
}

.design-editor-canvas[data-viewport="phone"] {
  width: 767px;
  max-width: 100%;
}

.design-editor-canvas[data-viewport="phone-wide"] {
  width: 860px;
  max-width: 100%;
}

.design-editor-canvas[data-viewport="tablet"] {
  width: 980px;
  max-width: 100%;
}

.design-editor-canvas[data-viewport="tablet-wide"] {
  width: 1024px;
  max-width: 100%;
}

.design-editor-canvas[data-viewport="widescreen"] {
  width: 1280px;
  max-width: 100%;
}

.design-editor-canvas[data-viewport="ultra-wide"] {
  width: 1440px;
  max-width: 100%;
}

.viewport-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

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

.breakpoint-subbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.breakpoint-subbar-button {
  display: grid;
  width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.breakpoint-subbar-button:hover,
.breakpoint-subbar-button.active {
  border-color: var(--border-focus);
  background: var(--blue-dim);
  color: var(--text-primary);
}

.breakpoint-subbar-button.active {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px rgba(43, 127, 255, 0.45);
}

.breakpoint-subbar-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.viewport-menu-trigger svg {
  fill: currentColor;
  stroke: none;
}

.viewport-menu-trigger {
  position: relative;
}

.viewport-menu {
  position: absolute;
  z-index: 120;
  top: calc(100% + 8px);
  right: 0;
  display: flex;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32);
}

.viewport-menu.breakpoint-menu {
  width: min(360px, calc(100vw - 32px));
  display: grid;
  gap: 0;
  padding: 0;
  border-color: rgba(91, 119, 166, 0.65);
  border-radius: 4px;
  background: #151c27;
  color: var(--text-primary);
  overflow: hidden;
}

.breakpoint-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  padding: 0 10px 0 14px;
  border-bottom: 1px solid rgba(91, 119, 166, 0.45);
}

.breakpoint-menu-header strong {
  font-size: 0.75rem;
  font-weight: 800;
}

.breakpoint-close {
  position: relative;
  display: grid;
  inline-size: 32px;
  block-size: 32px;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  place-self: center;
  place-items: center;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(30,41,59,.72);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}

.breakpoint-close svg {
  display: none;
}

.breakpoint-close::before,
.breakpoint-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  content: "";
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.breakpoint-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.breakpoint-close:hover {
  border-color: var(--border-focus);
  color: var(--text-primary);
}

.breakpoint-list {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
}

.breakpoint-row {
  display: grid;
  grid-template-columns: 24px minmax(96px, 1fr) 14px 84px 46px;
  align-items: center;
  gap: 8px;
}

.breakpoint-row.is-base {
  grid-template-columns: 24px minmax(96px, 1fr) minmax(110px, 1.35fr);
}

.breakpoint-icon {
  display: grid;
  place-items: center;
  color: #ffffff;
}

.breakpoint-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.breakpoint-label,
.breakpoint-operator,
.breakpoint-value,
.breakpoint-base-label {
  font-size: 0.75rem;
  font-weight: 800;
}

.breakpoint-operator {
  text-align: center;
  color: var(--text-primary);
}

.breakpoint-value {
  width: 84px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid rgba(91, 119, 166, 0.75);
  border-radius: 4px;
  background: #121827;
  color: var(--text-primary);
}

.breakpoint-base-label {
  color: #7f91b7;
}

.breakpoint-switch {
  justify-self: end;
  position: relative;
  display: inline-grid;
  width: 46px;
  height: 26px;
  cursor: pointer;
}

.breakpoint-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.breakpoint-switch span {
  position: relative;
  align-self: center;
  justify-self: end;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--bg-elevated);
  transition: background 160ms ease;
}

.breakpoint-switch span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--text-secondary);
  transition: transform 160ms ease, background 160ms ease;
}

.breakpoint-switch input:checked + span {
  background: var(--blue-dim);
}

.breakpoint-switch input:checked + span::after {
  background: var(--blue);
  transform: translateX(16px);
}

.breakpoint-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 12px;
}

.breakpoint-actions .secondary-button,
.breakpoint-actions .primary-button {
  min-height: 36px;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
}

.breakpoint-actions .secondary-button {
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.breakpoint-actions .secondary-button:hover {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(96, 165, 250, 0.12);
}

.dashboard-analytics-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px;
}

.analytics-widget {
  display: grid;
  align-content: start;
  gap: 8px;
}

.analytics-widget-wide {
  grid-column: span 2;
}

.analytics-widget-full {
  grid-column: 1 / -1;
}

.analytics-card {
  min-height: 320px;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--bg-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.analytics-chart-card {
  display: grid;
  align-content: start;
  height: 320px;
}

.analytics-line-card {
  display: grid;
  gap: 14px;
  height: 320px;
}

.analytics-bar-card {
  display: grid;
  gap: 12px;
  height: 320px;
}

.request-analytics-card {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  min-height: 260px;
}

.request-analytics-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(112, 129, 159, 0.16);
  background: rgba(6, 10, 18, 0.42);
}

.request-analytics-panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.request-analytics-panel-header span {
  color: var(--text-primary);
  font-weight: 900;
}

.request-analytics-panel-header strong {
  color: var(--text-primary);
  font-size: 1.9rem;
  line-height: 1;
}

.request-analytics-groups {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 18px;
}

.request-analytics-groups > div {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.request-analytics-groups > div > span {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.request-analytics-bars {
  display: grid;
  gap: 8px;
}

.request-analytics-row {
  display: grid;
  gap: 5px;
}

.request-analytics-row div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--text-secondary);
  font-size: 0.72rem;
  font-weight: 800;
}

.request-analytics-row strong {
  color: var(--text-primary);
}

.request-analytics-row i {
  display: block;
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(112, 129, 159, 0.14);
}

.request-analytics-row i::before {
  display: block;
  width: var(--request-bar-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
  content: "";
}

.analytics-card.muted {
  color: var(--text-secondary);
}

.analytics-card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 0 2px;
}

.analytics-card-header span {
  color: var(--green);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.analytics-card-header h2 {
  display: inline;
  margin: 0 0 0 10px;
  color: var(--text-primary);
  font-size: 1.05rem;
}

.analytics-chart-layout {
  display: grid;
  place-items: center;
  margin-top: 12px;
  min-height: 230px;
}

.pie-chart {
  --active-end: 0deg;
  --pending-end: 0deg;
  --invited-end: 0deg;
  display: grid;
  place-items: center;
  width: min(100%, 185px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--bg-surface) 0 42%, transparent 43%),
    conic-gradient(
      var(--green) 0 var(--active-end),
      var(--amber) var(--active-end) var(--pending-end),
      var(--blue) var(--pending-end) var(--invited-end),
      var(--red) var(--invited-end) 360deg
    );
  box-shadow: inset 0 0 0 2px var(--border), 0 18px 48px rgba(0, 0, 0, 0.32);
}

.pie-chart span {
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-base);
  color: var(--text-primary);
  font-size: 2rem;
  font-weight: 900;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 10px 16px;
  margin-bottom: 10px;
}

.chart-legend div {
  display: inline-grid;
  grid-template-columns: 12px auto auto;
  align-items: center;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 800;
}

.chart-legend strong {
  color: var(--text-primary);
}

.chart-range-control {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  background: var(--bg-base);
}

.chart-range-control button {
  min-height: 15px;
  padding: 0 10px;
  border-radius: 4px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.64rem;
  font-weight: 900;
}

.chart-range-control button:hover,
.chart-range-control button.active {
  background: var(--blue);
  color: var(--text-primary);
}

.line-chart-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.line-chart-summary span {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 800;
}

.line-chart-summary em {
  display: inline-block;
  margin-left: 8px;
  color: var(--blue);
  font-style: normal;
  font-weight: 900;
}

.online-metrics {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.online-metrics span {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 900;
}

.online-metrics strong {
  color: var(--text-primary);
  font-size: 2rem;
  line-height: 1;
}

.line-chart {
  display: block;
  width: 100%;
  height: 230px;
  min-height: 0;
  overflow: visible;
}

.line-chart .grid-line {
  stroke: var(--border);
  stroke-width: 1;
}

.line-chart .chart-line {
  fill: none;
  stroke: var(--blue);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.line-chart .chart-point {
  fill: var(--blue);
  stroke: var(--bg-surface);
  stroke-width: 3;
}

.line-chart text {
  fill: var(--text-secondary);
  font-size: 12px;
  font-weight: 800;
}

.line-chart .chart-value {
  fill: var(--text-primary);
  font-size: 13px;
  font-weight: 900;
}

.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legend-swatch.active {
  background: var(--green);
}

.legend-swatch.signups {
  background: var(--purple);
}

.legend-swatch.pending {
  background: var(--amber);
}

.legend-swatch.invited {
  background: var(--blue);
}

.legend-swatch.restricted {
  background: var(--red);
}

.legend-swatch.accepted {
  background: #22C55E;
}

.activation-legend {
  justify-content: flex-start;
}

.bar-chart {
  display: block;
  width: 100%;
  height: 230px;
  min-height: 0;
  overflow: visible;
}

.bar-chart .grid-line {
  stroke: var(--border);
  stroke-width: 1;
}

.bar-chart .chart-axis {
  stroke: rgba(122, 132, 153, 0.45);
  stroke-width: 1;
}

.bar-chart .bar-signups {
  fill: var(--purple);
}

.bar-chart .bar-pending {
  fill: var(--amber);
}

.bar-chart .bar-confirmed {
  fill: var(--green);
}

.bar-chart .bar-invites-sent {
  fill: var(--blue);
}

.bar-chart .bar-invites-accepted {
  fill: #22C55E;
}

.bar-chart text {
  fill: var(--text-secondary);
  font-size: 11px;
  font-weight: 800;
}

.bar-chart .chart-value {
  fill: var(--text-primary);
  font-size: 10px;
  font-weight: 900;
}

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

.analytics-stat-grid div {
  display: grid;
  gap: 8px;
  min-height: 110px;
  align-content: center;
  padding: 18px;
  border: 1px solid var(--border);
  background: var(--bg-base);
}

.analytics-stat-grid span {
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 800;
}

.analytics-stat-grid strong {
  color: var(--text-primary);
  font-size: 2rem;
  line-height: 1;
}

#profile-view.canvas-page {
  width: 100%;
  max-width: none;
  min-height: 100%;
  padding: 24px;
}

#settings-view.canvas-page {
  width: 100%;
  max-width: none;
  min-height: 100%;
  padding: 24px;
}

.page-header {
  margin-bottom: 28px;
}

.page-header h1 {
  margin-bottom: 0;
}

.profile-layout,
.settings-grid {
  display: grid;
  gap: 18px;
}

.profile-hero,
.settings-hero,
.settings-panel,
.permission-panel,
.detail-item {
  border: 1px solid var(--border);
  border-radius: 0px;
  background: var(--bg-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.profile-layout {
  width: 100%;
  min-height: 100%;
  align-content: start;
}

.admin-profile-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  border: 1px solid rgba(43, 127, 255, 0.3);
  background: var(--blue-dim);
}

.admin-profile-notice > div {
  display: grid;
  gap: 2px;
}

.admin-profile-notice span {
  color: var(--text-secondary);
  font-size: 0.78rem;
}

#profile-view.is-admin-profile .detail-item.identity-readonly,
#profile-view.is-admin-profile #profile-security-panel {
  opacity: 0.52;
}

#profile-view.is-admin-profile .profile-avatar-edit {
  display: none;
}

#profile-view.is-admin-profile .profile-avatar.editable {
  cursor: default;
  pointer-events: none;
}

.profile-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.settings-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px;
}

.settings-hero h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.65rem;
}

.settings-hero p {
  margin: 6px 0 0;
  color: var(--text-secondary);
}

.profile-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.profile-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}

.profile-edit-button {
  min-height: 32px;
  padding: 0 12px;
}

.profile-edit-modal form {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.profile-edit-modal form label {
  display: grid;
  gap: 8px;
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 800;
}

.profile-edit-modal form input {
  width: 100%;
}

.sessions-modal {
  width: min(620px, calc(100vw - 32px));
}

.session-list {
  display: grid;
  margin: 18px 0;
  border-top: 1px solid var(--border);
}

.session-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.session-row > div {
  display: grid;
  gap: 3px;
}

.session-row span {
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.profile-summary h2,
.settings-panel h2,
.permission-panel h2 {
  margin: 0;
  color: var(--text-primary);
}

.profile-summary p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.detail-item {
  display: grid;
  gap: 6px;
  padding: 18px;
  align-content: start;
}

.detail-item span,
.settings-row span {
  color: var(--text-secondary);
}

.detail-item strong,
.settings-row strong {
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.permission-panel,
.settings-panel {
  padding: 22px;
}

.access-summary-list {
  display: grid;
  margin-top: 18px;
  border-top: 1px solid var(--border);
}

.access-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.access-summary-row > div {
  display: grid;
  gap: 3px;
}

.access-summary-row strong {
  color: var(--text-primary);
  font-size: 0.9rem;
}

.access-summary-row span,
.access-empty {
  color: var(--text-secondary);
  font-size: 0.76rem;
}

.access-summary-count {
  flex: 0 0 auto;
  color: var(--text-primary) !important;
  font-weight: 800;
}

.access-technical-details {
  margin-top: 16px;
}

.access-technical-details summary {
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.access-technical-details > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.access-technical-details code {
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: var(--bg-base);
  color: var(--text-secondary);
  font-size: 0.7rem;
}

.profile-panel-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.85fr);
  gap: 18px;
}

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

.settings-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.settings-content-layout:has(#platform-feature-settings:not([hidden])) {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
}

.settings-main-column {
  display: grid;
  gap: 18px;
  min-width: 0;
}

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

.settings-right-sidebar {
  min-width: 0;
}

.settings-right-sidebar:has(#platform-feature-settings[hidden]) {
  display: none;
}

.settings-right-sidebar #platform-feature-settings {
  position: sticky;
  top: 18px;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.panel-heading p {
  margin: 6px 0 0;
  color: var(--text-secondary);
}

.security-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.profile-activity-list {
  display: grid;
  margin-top: 10px;
}

.profile-last-login {
  display: grid;
  gap: 3px;
  justify-items: end;
  text-align: right;
}

.profile-last-login span {
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.profile-last-login strong {
  color: var(--text-primary);
  font-size: 0.82rem;
}

.profile-activity-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}

.profile-activity-item:first-child {
  border-top: 0;
}

.profile-activity-marker {
  width: 6px;
  height: 6px;
  margin-top: 6px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-dim);
}

.profile-activity-copy {
  display: grid;
  gap: 1px;
}

.profile-activity-copy strong {
  color: var(--text-primary);
  font-size: 0.82rem;
  line-height: 1.25;
}

.profile-activity-copy span,
.profile-activity-time,
.profile-activity-empty {
  color: var(--text-secondary);
  font-size: 0.68rem;
}

.profile-activity-time {
  padding-top: 1px;
  white-space: nowrap;
}

.security-list div,
.activity-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}

.security-list div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 32px;
}

.profile-security-action {
  width: 30px;
  min-height: 30px;
  border-radius: 6px;
}

.profile-security-action svg {
  width: 14px;
  height: 14px;
}

.profile-security-action .profile-password-add-icon,
.profile-security-action.is-add-password .profile-password-edit-icon {
  display: none;
}

.profile-security-action.is-add-password .profile-password-add-icon {
  display: block;
}

.security-list div:first-child,
.activity-row:first-of-type {
  border-top: 0;
}

.security-list span,
.activity-row span {
  color: var(--text-secondary);
}

.security-list strong,
.activity-row strong {
  color: var(--text-primary);
  text-align: right;
}

.permission-list {
  display: block;
  margin-top: 16px;
}

.permission-list > .access-summary-list,
.permission-list > .access-technical-details {
  width: 100%;
}

.permission-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--blue-dim);
  color: var(--text-primary);
  font-size: 0.82rem;
  font-weight: 800;
}

.permission-pill.muted {
  background: var(--bg-elevated);
  color: var(--text-secondary);
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--border);
}

.settings-row:first-of-type {
  margin-top: 14px;
}

.settings-row div {
  display: grid;
  gap: 4px;
}

.table-panel {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

#users-view .table-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

#accounts-view .table-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.request-page .table-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

#designs-page .table-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

.studio-library {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: transparent;
}

.studio-library .table-toolbar {
  background: transparent;
}

.theme-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
  height: calc(100% - 61px);
  padding: 20px;
  overflow: auto;
  align-content: start;
}

.theme-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-surface);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.theme-card:hover {
  border-color: var(--border-focus);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28);
  transform: translateY(-2px);
}

.theme-card-preview {
  position: relative;
  min-height: 176px;
  overflow: hidden;
  padding: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card-primary) 14%, var(--card-background)), var(--card-background) 58%);
  color: var(--card-text);
}

.theme-card-preview-bar {
  display: flex;
  gap: 5px;
  margin-bottom: 28px;
}

.theme-card-preview-bar span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--card-text) 28%, transparent);
}

.theme-card-preview-content {
  display: grid;
  width: 72%;
  gap: 8px;
}

.theme-card-preview-content small {
  color: var(--card-primary);
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-card-preview-content strong {
  font-size: 1.45rem;
  line-height: 1.1;
}

.theme-card-preview-content i {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card-text) 13%, transparent);
}

.theme-card-preview-content i:last-child {
  width: 68%;
}

.theme-card-preview-accent {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  border-radius: 14px 14px 4px 14px;
  background: var(--card-accent);
  opacity: 0.9;
}

.theme-card-body {
  display: grid;
  gap: 12px;
  padding: 16px;
}

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

.theme-card-heading > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.theme-card-heading h3 {
  margin: 0;
  overflow: hidden;
  color: var(--text-primary);
  font-size: 1rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-card-heading > div > span,
.theme-card-body > p,
.theme-card-footer > span {
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.theme-card-body > p {
  margin: 0;
}

.theme-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 24px;
}

.theme-card-ownership {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-color: rgba(43, 127, 255, 0.38);
  border-style: solid;
  border-width: 1px;
  border-radius: 999px;
  background: rgba(43, 127, 255, 0.14);
  color: #2563eb;
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
}

.theme-card-footer {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 9px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.theme-card-footer > span:first-child {
  justify-self: end;
  min-width: 0;
  overflow: visible;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}

.theme-card .design-row-actions {
  justify-content: flex-end;
  overflow: visible;
}

.theme-card .table-action {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
}

.theme-card .design-row-actions [data-tooltip]::before {
  top: auto;
  bottom: calc(100% + 10px);
  transform: translate(-50%, 4px);
}

.theme-card .design-row-actions [data-tooltip]::after {
  top: auto;
  bottom: calc(100% + 4px);
  border-top-color: var(--border-focus);
  border-bottom-color: transparent;
  transform: translate(-50%, 4px);
}

.theme-card .design-row-actions [data-tooltip]:hover::before,
.theme-card .design-row-actions [data-tooltip]:hover::after,
.theme-card .design-row-actions [data-tooltip]:focus-visible::before,
.theme-card .design-row-actions [data-tooltip]:focus-visible::after {
  transform: translate(-50%, 0);
}

.theme-card-open {
  color: var(--blue) !important;
  font-weight: 800;
}

.theme-card-use {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 0.74rem;
}

.theme-card-empty {
  display: grid;
  grid-column: 1 / -1;
  gap: 6px;
  min-height: 220px;
  place-content: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  text-align: center;
}

.theme-card-empty strong {
  color: var(--text-primary);
  font-size: 1rem;
}

.studio-tabs {
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--border);
  background: var(--bg-base);
}

.studio-tab {
  position: relative;
  flex: 0 0 auto;
  min-width: 132px;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 800;
}

.studio-tab:hover,
.studio-tab.active {
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.studio-tab.active::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--blue);
  content: "";
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
	background-color: var(--bg-base) !important;
  border-bottom: 1px solid var(--border);
}

.table-toolbar span {
  color: var(--text-primary);
  font-weight: 800;
}

.table-wrap {
  overflow: auto;
}

#users-view .table-wrap {
  max-width: 100%;
  height: calc(100% - 61px);
}

#accounts-view .table-wrap {
  max-width: 100%;
  height: calc(100% - 61px);
}

#designs-page .table-wrap {
  max-width: 100%;
  height: calc(100% - 61px);
}

.users-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
}

#designs-page .users-table {
  min-width: 1480px;
}

.design-table-row {
  cursor: pointer;
}

.studio-output-path {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.studio-identifier {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.design-row-actions {
  justify-content: flex-end;
}

.design-row-actions .table-action {
  width: 32px;
  min-height: 32px;
}

#designs-page .status-pill,
#designs-page .studio-category-badge {
  white-space: nowrap;
}

#designs-page .users-table th:last-child,
#designs-page .users-table td:last-child {
  white-space: nowrap;
}

.design-table-row:hover td {
  background: var(--bg-hover);
}

.table-empty {
  color: var(--text-secondary);
  text-align: center;
}

#accounts-view .users-table {
  min-width: 980px;
}

.users-table th,
.users-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
  text-align: left;
  vertical-align: middle;
}

.users-table th {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.users-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.025);
}

.table-subtext {
  display: block;
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  overflow-wrap: anywhere;
}

.table-select {
  min-width: 136px;
  min-height: 34px;
  padding: 0 10px;
  border-radius: 6px;
  background: var(--bg-elevated);
  font-size: 0.82rem;
  font-weight: 800;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: capitalize;
  white-space: nowrap;
}

.status-pill.active {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
}

.status-pill.public {
  border-color: rgba(16, 185, 129, 0.28);
  background: rgba(16, 185, 129, 0.12);
  color: var(--green);
}

.status-pill.private {
  border-color: rgba(100, 116, 139, 0.34);
  background: rgba(100, 116, 139, 0.12);
  color: var(--text-secondary);
}

.status-pill.marketplace {
  border-color: rgba(139, 92, 246, 0.34);
  background: rgba(139, 92, 246, 0.12);
  color: #a78bfa;
}

.status-pill.archived {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
}

.status-pill.pending_email_verification,
.status-pill.invited {
  border-color: rgba(245, 158, 11, 0.3);
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber);
}

.status-pill.disabled,
.status-pill.removed,
.status-pill.invite_expired,
.status-pill.email_verification_expired,
.status-pill.restricted {
  border-color: rgba(239, 68, 68, 0.3);
  background: rgba(239, 68, 68, 0.12);
  color: var(--red);
}

.row-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.table-action {
  display: inline-grid;
  place-items: center;
  width: 34px;
  min-height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.table-action:hover {
  border-color: var(--border-focus);
  background: var(--bg-hover);
}

.table-action.warning {
  color: var(--amber);
}

.table-action.visibility {
  color: var(--blue);
}

.table-action.danger {
  color: var(--red);
}

.table-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(8, 12, 20, 0.62);
  backdrop-filter: blur(10px);
}

#design-history-modal {
  z-index: 1000;
}

#confirm-modal {
  z-index: 1100;
}

.desktop-body .modal-backdrop {
  top: 36px;
}

.notes-modal {
  width: min(760px, calc(100vw - 32px));
  max-height: min(760px, calc(100vh - 96px));
  overflow: auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.desktop-body .notes-modal {
  max-height: calc(100vh - 112px);
}

.notes-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1180px, calc(100vw - 40px));
  height: min(760px, calc(100vh - 48px));
  overflow: hidden;
}

.notes-workspace .modal-header {
  align-items: flex-start;
}

.notes-workspace .modal-header p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.notes-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  min-height: 0;
  border: 1px solid var(--border);
  background: rgba(9, 14, 24, 0.58);
}

.notes-sidebar {
  min-width: 0;
  border-right: 1px solid var(--border);
  background: rgba(8, 13, 22, 0.55);
}

.notes-sidebar-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.notes-sidebar-tools input {
  min-width: 0;
  height: 38px;
}

.notes-list {
  display: grid;
  align-content: start;
  max-height: 100%;
  overflow: auto;
}

.note-list-item {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-bottom: 1px solid rgba(112, 129, 159, 0.14);
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.note-list-item:hover,
.note-list-item.active {
  background: rgba(43, 127, 255, 0.13);
}

.note-list-item strong {
  max-width: calc(100% - 82px);
  font-size: 0.88rem;
}

.note-submission-badges {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  max-width: 45%;
}

.note-submission-badge {
  width: fit-content;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.3;
}

.note-submission-badge.feature {
  color: #20c997;
  background: rgba(32, 201, 151, 0.1);
}

.note-submission-badge.support {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.note-list-item span,
.note-list-item small,
.notes-empty,
.request-empty {
  color: var(--text-muted);
  font-size: 0.72rem;
}

.notes-empty,
.request-empty {
  padding: 18px;
}

.notes-editor {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  align-items: stretch;
}

.note-title-input {
  height: 44px;
  border-color: transparent;
  background: rgba(6, 10, 18, 0.8);
  font-size: 1.05rem;
  font-weight: 800;
}

.notes-editor-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.notes-editor-meta label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.notes-editor-meta select,
.request-detail-grid select {
  width: 100%;
  height: 44px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(112, 129, 159, 0.22);
  border-radius: 6px;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--text-primary) 50%) calc(100% - 18px) 18px / 7px 7px no-repeat,
    linear-gradient(135deg, var(--text-primary) 50%, transparent 50%) calc(100% - 13px) 18px / 7px 7px no-repeat,
    rgba(6, 10, 18, 0.78);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: none;
}

.notes-editor-meta select:hover {
  border-color: rgba(43, 127, 255, 0.38);
  background-color: rgba(9, 16, 28, 0.92);
}

.notes-editor-meta select:focus {
  border-color: rgba(43, 127, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(43, 127, 255, 0.16);
  outline: none;
}

.notes-editor-meta select option {
  background: #070c15;
  color: var(--text-primary);
}

.native-select-hidden {
  display: none !important;
}

.custom-select {
  position: relative;
  min-width: 0;
}

.custom-select-button {
  position: relative;
  width: 100%;
  height: 44px;
  padding: 0 42px 0 14px;
  border: 1px solid rgba(112, 129, 159, 0.22);
  border-radius: 6px;
  background: rgba(6, 10, 18, 0.78);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: left;
}

.custom-select-button::before,
.custom-select-button::after {
  content: "";
  position: absolute;
  top: 19px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: var(--text-primary);
}

.custom-select-button::before {
  right: 19px;
  transform: rotate(45deg);
}

.custom-select-button::after {
  right: 14px;
  transform: rotate(-45deg);
}

.custom-select-button:hover,
.custom-select-button[aria-expanded="true"] {
  border-color: rgba(43, 127, 255, 0.58);
  background: rgba(9, 16, 28, 0.94);
}

.custom-select-button:focus-visible {
  border-color: rgba(43, 127, 255, 0.78);
  box-shadow: 0 0 0 3px rgba(43, 127, 255, 0.16);
  outline: none;
}

.custom-select-list {
  position: absolute;
  z-index: 1200;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(43, 127, 255, 0.38);
  border-radius: 6px;
  background: #070c15;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38);
}

.custom-select-list[hidden] {
  display: none;
}

.custom-select-list button {
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid rgba(112, 129, 159, 0.12);
  background: transparent;
  color: var(--text-primary);
  font-size: 0.78rem;
  font-weight: 750;
  text-align: left;
}

.custom-select-list button:last-child {
  border-bottom: 0;
}

.custom-select-list button:hover,
.custom-select-list button.active {
  background: rgba(43, 127, 255, 0.2);
  color: var(--text-primary);
}

.notes-workspace .notes-editor textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
}

.notes-editor-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: end;
  align-self: end;
  gap: 12px;
}

.notes-editor-footer > span {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.notes-submit-actions {
  display: flex;
  align-items: end;
  gap: 8px;
}

.note-request-thread {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(112, 129, 159, 0.18);
  border-radius: 6px;
  background: rgba(6, 10, 18, 0.54);
}

.note-request-thread[hidden] {
  display: none;
}

.note-request-thread header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.note-request-thread header strong {
  color: var(--text-primary);
  font-size: 0.78rem;
}

.note-request-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.note-request-thread header span {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.note-request-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.notes-workspace .note-request-tabs button {
  width: fit-content;
  min-width: 0;
  min-height: 0;
  height: auto;
  padding: 2px 7px;
  border: 1px solid rgba(112, 129, 159, 0.2);
  border-radius: 999px;
  background: rgba(12, 19, 33, 0.8);
  color: var(--text-secondary);
  font-size: 0.62rem;
  font-weight: 900;
  line-height: 1.3;
}

.note-request-tabs button.active {
  border-color: rgba(43, 127, 255, 0.55);
  background: rgba(43, 127, 255, 0.16);
  color: var(--text-primary);
}

.note-request-tabs button.support.active {
  border-color: rgba(245, 158, 11, 0.75);
  background: rgba(245, 158, 11, 0.14);
  color: #f59e0b;
}

.note-request-tabs button.feature.active {
  border-color: rgba(32, 201, 151, 0.75);
  background: rgba(32, 201, 151, 0.12);
  color: #20c997;
}

.request-list {
  display: grid;
  align-content: start;
  overflow: auto;
}

.request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  border-top: 1px solid var(--border);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.request-row:hover {
  background: rgba(43, 127, 255, 0.08);
}

.request-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.request-main strong {
  color: var(--text-primary);
}

.request-main span,
.request-main p,
.request-main small {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.76rem;
}

.request-main p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: var(--text-secondary);
}

.request-row-meta {
  display: grid;
  justify-items: end;
  gap: 7px;
  align-self: start;
}

.request-status {
  padding: 4px 8px;
  border: 1px solid rgba(43, 127, 255, 0.34);
  border-radius: 999px;
  background: rgba(43, 127, 255, 0.12);
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 800;
}

.request-status.is-resolved {
  border-color: rgba(32, 201, 151, 0.5);
  background: rgba(32, 201, 151, 0.12);
  color: #20c997;
}

.request-status.is-published {
  border-color: rgba(139, 92, 246, 0.58);
  background: rgba(139, 92, 246, 0.14);
  color: #a78bfa;
}

.request-status.is-closed {
  border-color: rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.08);
  color: var(--text-muted);
}

.request-priority {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.request-detail-modal {
  width: min(980px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 64px));
  overflow: auto;
}

.request-detail-modal .modal-header p {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.75rem;
}

.request-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.request-detail-grid label {
  display: grid;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.request-detail-body {
  padding: 12px;
  border: 1px solid rgba(112, 129, 159, 0.18);
  border-radius: 6px;
  background: rgba(6, 10, 18, 0.62);
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.request-message-list {
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
}

.request-message {
  display: grid;
  gap: 5px;
  padding: 9px 10px;
  border: 1px solid rgba(112, 129, 159, 0.16);
  border-radius: 6px;
  background: rgba(12, 19, 33, 0.62);
}

.request-message div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.request-message strong {
  color: var(--text-primary);
  font-size: 0.74rem;
}

.request-message time {
  color: var(--text-muted);
  font-size: 0.68rem;
}

.request-message p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  white-space: pre-wrap;
}

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

.request-reply-row textarea {
  min-height: 54px;
  resize: vertical;
}

.note-request-thread .request-reply-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.notes-workspace .note-request-thread .request-reply-row textarea {
  min-height: 54px;
  height: 54px;
}

.notes-workspace .note-request-thread .request-reply-row button {
  width: auto;
  min-width: 64px;
  min-height: 40px;
  height: 40px;
  align-self: end;
  padding: 0 16px;
}

.request-detail-modal .request-reply-row {
  grid-template-columns: minmax(0, 1fr) 150px;
}

.request-detail-modal .request-reply-row textarea {
  min-height: 120px;
}

.request-detail-action-stack {
  display: grid;
  align-content: start;
  gap: 8px;
}

.request-detail-action-stack button {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 0.82rem;
  line-height: 1.15;
}

#request-detail-complete {
  font-size: 0.78rem;
  white-space: nowrap;
}

.roadmap-workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(1320px, calc(100vw - 48px));
  height: min(860px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  overflow: hidden;
}

.roadmap-workspace .modal-header {
  align-items: flex-start;
}

.roadmap-workspace .modal-header p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.roadmap-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

#add-roadmap-item {
  border-color: rgba(43, 127, 255, 0.45);
  background: rgba(43, 127, 255, 0.12);
  color: var(--blue);
}

#add-roadmap-item:hover {
  border-color: var(--blue);
  background: rgba(43, 127, 255, 0.2);
}

#roadmap-archive-toggle.active {
  border-color: rgba(139, 92, 246, 0.7);
  background: rgba(139, 92, 246, 0.16);
  color: #c4b5fd;
}

.roadmap-board {
  display: grid;
  align-content: start;
  gap: 28px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-gutter: stable;
}

.roadmap-group {
  display: grid;
  gap: 12px;
}

.roadmap-group h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--blue);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.roadmap-group h3 span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.roadmap-planned h3 { color: #8b5cf6; }
.roadmap-future h3 { color: #f59e0b; }
.roadmap-completed h3 { color: #10b981; }
.roadmap-archived h3 { color: var(--text-secondary); }

.roadmap-archived .roadmap-card {
  opacity: 0.78;
}

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

.roadmap-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 190px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-elevated);
}

.roadmap-card.priority-critical { border-color: rgba(239, 68, 68, 0.45); }
.roadmap-card.priority-high { border-color: rgba(245, 158, 11, 0.4); }

.roadmap-card-meta,
.roadmap-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.changelog-modal {
  width: min(860px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 48px));
}

.changelog-list {
  display: grid;
  gap: 18px;
  overflow: auto;
  padding: 18px;
}

.changelog-release {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-base);
}

.changelog-release-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.changelog-release-header > div {
  display: grid;
  gap: 5px;
}

.changelog-release-header h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
}

.changelog-version {
  display: inline-flex;
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(43, 127, 255, 0.14);
  color: var(--blue);
  font-size: 0.68rem;
  font-weight: 900;
}

.changelog-date {
  color: var(--text-secondary);
  font-size: 0.72rem;
  white-space: nowrap;
}

.changelog-categories {
  display: grid;
  gap: 12px;
}

.changelog-category {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 12px;
}

.changelog-category strong {
  color: var(--text-secondary);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.changelog-category ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-primary);
  font-size: 0.8rem;
  line-height: 1.5;
}

.roadmap-card-meta {
  color: var(--blue);
  font-size: 0.68rem;
}

.roadmap-category {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(43, 127, 255, 0.12);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.roadmap-card h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.95rem;
}

.roadmap-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.6;
}

.roadmap-progress {
  height: 4px;
  margin-top: auto;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
}

.roadmap-progress span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--blue), #8b5cf6);
}

.roadmap-note {
  color: #f59e0b;
  font-size: 0.7rem;
  line-height: 1.4;
}

.roadmap-card-actions {
  justify-content: flex-end;
  margin-top: 4px;
}

.roadmap-card-actions button {
  min-height: 30px;
  padding: 0 10px;
  font-size: 0.7rem;
}

.roadmap-item-form {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 8px;
}

.roadmap-item-form textarea {
  min-height: 80px;
}

.roadmap-empty {
  color: var(--text-secondary);
  text-align: center;
}

@media (max-width: 980px) {
  .roadmap-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .roadmap-workspace { width: calc(100vw - 24px); }
  .roadmap-card-grid { grid-template-columns: 1fr; }
}

.confirm-modal {
  width: min(460px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.02);
}

.confirm-modal.design-history-modal-card {
  width: min(760px, calc(100vw - 32px));
  overflow: visible;
}

.design-history-list {
  display: grid;
  gap: 14px;
}

.design-history-table-wrap {
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.28);
}

.design-history-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.design-history-table th,
.design-history-table td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.16);
  color: var(--text-secondary);
  font-size: 0.84rem;
  text-align: left;
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.design-history-table th {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design-history-table tbody tr:last-child td {
  border-bottom: 0;
}

.design-history-table strong {
  display: block;
  color: var(--text-primary);
}

.design-history-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  white-space: nowrap;
}

.design-history-table-actions .table-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 28px;
  min-width: 28px;
  max-width: 28px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  flex: 0 0 28px;
  line-height: 1;
}

.design-history-table-actions .table-action svg {
  width: 15px;
  height: 15px;
}

.design-history-table-actions .secondary {
  min-height: 32px;
  padding: 0 14px;
}

.design-history-table th:nth-child(1),
.design-history-table td:nth-child(1) {
  width: 34%;
}

.design-history-table th:nth-child(2),
.design-history-table td:nth-child(2) {
  width: 28%;
}

.design-history-table th:nth-child(3),
.design-history-table td:nth-child(3) {
  width: 18%;
}

.design-history-table th:nth-child(4),
.design-history-table td:nth-child(4) {
  width: 20%;
}

.design-history-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.design-history-pagination > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.design-history-page-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 32px;
  min-width: 32px;
  max-width: 32px;
  height: 32px;
  min-height: 32px;
  max-height: 32px;
  padding: 0;
  line-height: 1;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.55);
  color: var(--text-secondary);
  font-weight: 800;
}

.design-history-page-button:hover,
.design-history-page-button:focus-visible,
.design-history-page-button.is-active {
  border-color: var(--border-focus);
  background: rgba(43, 127, 255, 0.18);
  color: var(--text-primary);
}

.confirm-modal p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.6;
}

.invite-modal {
  width: min(520px, calc(100vw - 32px));
}

.invite-form {
  gap: 16px;
}

#theme-component-file-modal .invite-modal:has(.theme-component-block-fields:not([hidden])) {
  width: min(720px, calc(100vw - 32px));
}

.theme-component-block-fields {
  display: grid;
  gap: 14px;
  padding-top: 4px;
}

.theme-component-block-fields[hidden] {
  display: none;
}

.design-wizard-modal {
  width: min(650px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
}

.design-wizard-form {
  display: grid;
  gap: 18px;
}

.design-wizard-modal.is-theme-wizard {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(980px, calc(100vw - 48px));
  height: min(900px, calc(100vh - 48px));
  min-height: 0;
  overflow: hidden;
}

.design-wizard-modal.is-theme-wizard .design-wizard-form {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.design-wizard-modal.is-theme-wizard .design-wizard-form > .design-wizard-step {
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
}

.design-wizard-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.design-wizard-intro {
  margin: 0 0 13px !important;
  color: var(--text-secondary);
  font-size: 0.82rem;
}

.design-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.design-type-card {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon description";
  align-content: center;
  column-gap: 10px;
  row-gap: 2px;
  min-height: 74px;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-primary);
  text-align: left;
  box-shadow: none;
}

.design-type-card::before {
  grid-area: icon;
  align-self: start;
  margin-top: 2px;
  color: #7c8497;
  font-size: 0.9rem;
  line-height: 1;
  content: "□";
}

.design-type-card[data-design-type="pattern"]::before {
  color: #20d9c2;
  content: "◇";
}

.design-type-card[data-design-type="block"]::before {
  color: #9670ff;
  content: "◉";
}

.design-type-card[data-design-type="template"]::before {
  color: #ff6464;
  content: "◇";
}

.design-type-card[data-design-type="template_part"]::before {
  color: #58a6ff;
  content: "▣";
}

.design-type-card[data-design-type="other_file"]::before {
  color: #f1b84b;
  content: "▤";
}

.design-type-card:hover,
.design-type-card:focus-visible {
  border-color: rgba(139, 92, 246, 0.62);
  background: rgba(139, 92, 246, 0.07);
}

.design-type-card.selected {
  border-color: rgba(139, 92, 246, 0.78);
  background: rgba(107, 70, 193, 0.12);
  box-shadow: none;
}

.design-type-card strong {
  grid-area: title;
  font-size: 0.86rem;
  line-height: 1.15;
}

.design-type-card span {
  grid-area: description;
  color: var(--text-secondary);
  font-size: 0.72rem;
  line-height: 1.25;
}

.design-wizard-selection {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  padding: 16px;
  border: 1px solid rgba(43, 127, 255, 0.35);
  border-radius: 8px;
  background: rgba(43, 127, 255, 0.08);
}

.design-wizard-selection span {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.design-wizard-selection strong {
  color: var(--text-primary);
}

.pattern-details-form {
  display: grid;
  gap: 14px;
}

.design-form-grid,
.design-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pattern-details-form textarea {
  min-height: 82px;
}

.pattern-details-form input[readonly] {
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.design-field-hint {
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1.3;
}

.design-section-hint {
  margin: -3px 0 9px !important;
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1.3;
}

.design-choice-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.design-choice-fieldset legend {
  margin-bottom: 8px;
  color: var(--text-primary);
  font-size: 0.82rem;
}

.design-choice-card {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  grid-template-areas:
    "control title"
    "control description";
  column-gap: 9px;
  row-gap: 2px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
  cursor: pointer;
}

.design-choice-card:has(input:checked) {
  border-color: rgba(139, 92, 246, 0.78);
  background: rgba(107, 70, 193, 0.12);
}

.design-choice-card input {
  grid-area: control;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  accent-color: #8b5cf6;
}

.design-choice-card strong {
  grid-area: title;
  font-size: 0.82rem;
}

.design-choice-card span {
  grid-area: description;
  color: var(--text-secondary);
  font-size: 0.7rem;
  line-height: 1.3;
}

.pattern-start-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.template-layout-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pattern-start-grid .design-choice-card,
.template-layout-grid .design-choice-card {
  min-height: 110px;
}

.theme-starter-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 16px;
}

.design-wizard-modal.is-editing-theme #theme-start-step > .design-wizard-selection,
.design-wizard-modal.is-editing-theme #theme-start-step > .theme-starter-grid {
  display: none;
}

.theme-wizard-step {
  display: grid;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 14px;
}

.theme-toggle-card,
.theme-cpt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

#theme-add-cpt {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.72rem;
  line-height: 1;
}

.theme-toggle-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
}

.theme-toggle-card > div {
  display: grid;
  gap: 3px;
}

.theme-toggle-card span,
.theme-asset-section small {
  color: var(--text-secondary);
  font-size: 0.7rem;
}

.theme-woocommerce-card:has(input:checked) {
  border-color: rgba(219, 87, 167, 0.55);
  background: rgba(219, 87, 167, 0.08);
}

.theme-asset-section {
  min-width: 0;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.theme-asset-accordion:not([open]) {
  min-height: 0;
}

.theme-asset-accordion summary {
  position: relative;
  padding: 12px 38px 12px 14px;
  color: var(--text-primary);
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  list-style: none;
}

.theme-asset-accordion summary::-webkit-details-marker {
  display: none;
}

.theme-asset-accordion summary::after {
  position: absolute;
  top: 50%;
  right: 15px;
  color: var(--text-secondary);
  content: "+";
  transform: translateY(-50%);
}

.theme-asset-accordion[open] summary {
  border-bottom: 1px solid var(--border);
}

.theme-asset-accordion[open] summary::after {
  content: "−";
}

.theme-asset-content {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.theme-custom-blocks-section {
  border-color: rgba(43, 127, 255, 0.42);
}

.theme-custom-blocks-section > summary {
  background: rgba(43, 127, 255, 0.06);
}

.theme-custom-blocks-section .theme-cpt-header > div {
  display: grid;
  gap: 3px;
}

.theme-custom-blocks-section .theme-cpt-header p {
  margin: 0;
}

.theme-asset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.theme-asset-grid label,
.theme-cpt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
}

.theme-asset-grid input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.theme-conditional-assets {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.theme-conditional-assets > strong {
  color: #ec78c2;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

#theme-cpt-list {
  display: grid;
  gap: 8px;
}

#theme-custom-template-list,
#theme-custom-block-list,
#theme-part-metadata-list,
.theme-studio-assets {
  display: grid;
  gap: 9px;
}

.theme-cpt-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px;
  font-family: inherit;
}

.theme-custom-template-row,
.theme-custom-block-row,
.theme-part-metadata-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 104px;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
}

.theme-row-headings {
  display: grid;
  gap: 8px;
  padding: 0 10px;
  color: var(--text-secondary);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.theme-row-headings small {
  font-size: inherit;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.theme-cpt-headings {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 92px;
}

.theme-template-headings {
  grid-template-columns: repeat(3, minmax(0, 1fr)) 104px;
}

.theme-custom-block-row {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 0 14px 14px;
  overflow: hidden;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.018);
}

.theme-custom-block-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 -14px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: rgba(43, 127, 255, 0.055);
}

.theme-custom-block-card-header > div {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 10px;
}

.theme-custom-block-card-header strong {
  color: var(--text-primary);
  font-size: 0.8rem;
}

.theme-custom-block-card-header code {
  overflow: hidden;
  color: var(--text-secondary);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.theme-custom-block-card-header button {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 5px 11px;
  font-size: 0.72rem;
}

.theme-custom-block-primary,
.theme-custom-block-secondary {
  display: grid;
  gap: 10px;
}

.theme-custom-block-primary {
  grid-template-columns: minmax(140px, 0.8fr) minmax(180px, 1fr) minmax(220px, 1.25fr);
}

.theme-custom-block-secondary {
  grid-template-columns: minmax(125px, 0.8fr) minmax(140px, 1fr) minmax(160px, 1fr) 70px;
  align-items: end;
}

.theme-custom-block-row label {
  display: grid;
  min-width: 0;
  gap: 6px;
}

.theme-custom-block-row label > span {
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.theme-custom-block-row input,
.theme-custom-block-row select {
  width: 100%;
  min-width: 0;
}

@media (max-width: 820px) {
  .theme-custom-block-primary,
  .theme-custom-block-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .theme-custom-block-identifier {
    grid-column: 1 / -1;
  }
}

.theme-part-metadata-row {
  grid-template-columns: minmax(110px, auto) minmax(0, 1fr) 120px minmax(0, 1fr);
}

.theme-part-metadata-row strong {
  align-self: center;
  font-size: 0.72rem;
}

.theme-studio-assets section {
  display: grid;
  gap: 7px;
}

.theme-small-action {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 0.72rem;
}

.theme-cpt-row input {
  min-width: 0;
}

.theme-color-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.theme-color-grid label {
  display: grid;
  gap: 7px;
}

.theme-color-grid input[type="color"] {
  width: 100%;
  height: 44px;
  padding: 4px;
}

.theme-design-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.theme-design-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.theme-design-controls > :first-child {
  grid-column: 1 / -1;
}

.theme-style-preview {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--preview-background, #fff);
  color: var(--preview-text, #1e1e1e);
}

.theme-style-preview > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-primary);
}

.theme-style-preview > header span,
.theme-style-preview-kicker {
  color: var(--preview-primary, var(--green));
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-style-preview-stage {
  min-height: 380px;
  padding: 22px 18px 32px;
  background: var(--preview-background, #fff);
  font-family: var(--preview-body-font, system-ui);
  font-size: var(--preview-font-size, 16px);
  line-height: var(--preview-line-height, 1.6);
}

.theme-style-preview-wide {
  width: min(100%, var(--preview-wide-width, 1200px));
  margin: 0 auto var(--preview-gap, 1.5rem);
  padding: 12px;
  border-radius: 6px;
  background: var(--preview-secondary, #8895a7);
  color: var(--preview-background, #fff);
  text-align: center;
  font-size: 0.72em;
  font-weight: 800;
  text-transform: uppercase;
}

.theme-style-preview-content {
  display: grid;
  width: min(100%, var(--preview-content-width, 720px));
  gap: var(--preview-gap, 1.5rem);
  margin: 0 auto;
}

.theme-style-preview h1,
.theme-style-preview h2 {
  margin: 0;
  font-family: var(--preview-heading-font, system-ui);
  line-height: 1.15;
}

.theme-style-preview h1 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.theme-style-preview h2 {
  font-size: 1.25rem;
}

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

.theme-style-preview-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.theme-style-preview-actions button {
  background: var(--preview-primary, #3858e9);
  color: var(--preview-background, #fff);
}

.theme-style-preview-actions a {
  color: var(--preview-primary, #3858e9);
  font-weight: 800;
}

.theme-style-preview-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--preview-gap, 1.5rem);
}

.theme-style-preview-columns > div {
  display: grid;
  gap: 8px;
  padding: 18px;
  border-left: 4px solid var(--preview-accent, #2dd4bf);
  background: color-mix(in srgb, var(--preview-secondary, #8895a7) 12%, transparent);
}

.theme-screenshot-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 360px);
  gap: 12px 18px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-surface);
}

.theme-screenshot-copy {
  display: grid;
  gap: 4px;
}

.theme-screenshot-copy span,
.theme-screenshot-preview span {
  color: var(--text-secondary);
  font-size: 0.72rem;
}

.theme-screenshot-preview {
  display: grid;
  min-height: 112px;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-base);
}

.theme-screenshot-preview img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.theme-screenshot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  grid-column: 1 / -1;
}

.theme-review-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.theme-review-item,
.theme-file-tree {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.025);
}

.theme-review-item span {
  color: var(--text-secondary);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.theme-review-warnings {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 7px;
  background: rgba(245, 158, 11, 0.08);
}

.theme-review-warnings p {
  color: #fbbf24;
  font-size: 0.72rem;
}

.theme-file-tree pre {
  max-height: 280px;
  margin: 8px 0 0;
  overflow: auto;
  color: #7dd3fc;
  font-size: 0.75rem;
  line-height: 1.7;
}

.pattern-category-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.pattern-category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
}

.pattern-category-badge input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.pattern-category-badge span,
.studio-category-badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-secondary);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.pattern-category-badge:hover span {
  border-color: rgba(139, 92, 246, 0.58);
  color: var(--text-primary);
}

.pattern-category-badge input:focus-visible + span,
.pattern-category-badge input:checked + span {
  border-color: rgba(139, 92, 246, 0.78);
  background: rgba(107, 70, 193, 0.16);
  color: #c4b5fd;
}

#pattern-custom-category-field {
  display: none;
}

.design-choice-fieldset:has(#pattern-custom-category-toggle:checked) + #pattern-custom-category-field {
  display: grid;
}

.studio-category-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.studio-category-badge {
  min-height: 22px;
  padding: 3px 7px;
  border-color: rgba(139, 92, 246, 0.32);
  background: rgba(107, 70, 193, 0.1);
  color: #c4b5fd;
  font-size: 0.66rem;
}

@media (max-width: 620px) {
  .design-type-grid,
  .design-form-grid,
  .design-choice-grid,
  .pattern-start-grid,
  .template-layout-grid {
    grid-template-columns: 1fr;
  }

  .theme-starter-grid,
  .theme-asset-grid,
  .theme-color-grid,
  .theme-review-summary {
    grid-template-columns: 1fr;
  }

  .theme-design-layout,
  .theme-design-controls,
  .theme-style-preview-columns {
    grid-template-columns: 1fr;
  }

  .theme-design-controls > :first-child {
    grid-column: auto;
  }

  .design-type-card {
    min-height: 72px;
  }

  .theme-card-grid {
    grid-template-columns: 1fr;
    padding: 14px;
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.modal-header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1.35rem;
  line-height: 1.1;
}

.notes-modal label {
  color: var(--text-primary);
}

.notes-modal textarea {
  min-height: 280px;
}

.guide-content {
  display: grid;
  gap: 12px;
  color: var(--text-secondary);
}

.guide-content h3 {
  margin: 0;
  color: var(--text-primary);
}

.guide-content p {
  margin: 0;
}

.role-info-content {
  gap: 22px;
}

.info-list {
  display: grid;
  gap: 10px;
  margin: 0;
}

.info-list div {
  display: grid;
  grid-template-columns: minmax(140px, 0.35fr) 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.info-list div:last-child {
  border-bottom: 0;
}

.info-list dt {
  color: var(--text-primary);
  font-weight: 900;
}

.info-list dd {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.plan-info-grid {
  display: grid;
  gap: 14px;
}

.plan-info-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-base);
}

.plan-info-card h4 {
  margin: 0;
  color: var(--text-primary);
  font-size: 1rem;
}

.plan-info-card p {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.5;
}

.plan-info-card strong {
  color: var(--green);
  font-size: 0.78rem;
  text-transform: uppercase;
}

.plan-info-card ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary);
  line-height: 1.45;
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.auth-tab {
  border-radius: 0;
  min-height: 52px;
  background: var(--bg-base);
  color: var(--text-secondary);
}

.auth-tab.active {
  background: var(--bg-surface);
  color: var(--text-primary);
  box-shadow: inset 0 -3px 0 var(--blue), 0 0 24px var(--blue-dim);
}

.auth-form {
  padding: 26px 34px 24px;
}

.auth-form h1 {
  margin-bottom: 24px;
  text-align: center;
  font-size: 2rem;
  font-weight: 400;
}

.dashboard header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--green);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 24px;
  font-size: clamp(2rem, 7vw, 4rem);
  line-height: 1;
}

form,
label {
  display: grid;
  gap: 8px;
}

form {
  gap: 16px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  background: var(--bg-base);
  color: var(--text-primary);
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px var(--blue-dim);
}

select {
  min-height: 44px;
}

.block-inspector .block-inspector-field input[data-block-setting="button-text"],
.block-inspector .block-inspector-field input[data-block-setting="button-url"],
.block-inspector .block-inspector-field input[data-block-setting="text"] {
  padding-right: 8px !important;
  padding-left: 8px !important;
  text-align: left !important;
  text-indent: 0 !important;
}

.auth-form input:not([type="checkbox"]) {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 0 12px;
  background: transparent;
}

.auth-form input:not([type="checkbox"]):focus {
  border-color: var(--blue);
  box-shadow: none;
}

.auth-form label {
  color: var(--text-secondary);
  font-size: 0.98rem;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 8px 0 14px;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
}

.check-label input {
  accent-color: var(--blue);
  width: 20px;
  height: 20px;
}

.check-label a {
  color: var(--blue);
  text-decoration: none;
}

.check-label a:hover {
  color: var(--text-primary);
}

textarea {
  resize: vertical;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}

.confirm-actions {
  justify-content: flex-end;
}

button {
  border: 0;
  border-radius: 6px;
  min-height: 44px;
  padding: 0 18px;
  background: var(--blue);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 700;
}

button:hover {
  background: var(--bg-hover);
}

.danger-button {
  border: 1px solid rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.14);
  color: var(--red);
}

.danger-button:hover {
  background: var(--red);
  color: #ffffff;
}

.primary-wide {
  width: 100%;
  min-height: 56px;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 16px 34px var(--blue-glow);
  font-size: 1.1rem;
}

.primary-wide:hover {
  background: #1f70eb;
}

.auth-action-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 12px;
}

.social-row {
  display: flex;
  justify-content: center;
  margin: 0;
}

.google-web-button {
  position: relative;
  display: inline-flex;
  width: 100%;
  min-height: 46px;
}

.google-web-button .google-local-button {
  width: 100%;
}

.google-click-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.001;
}

.google-click-layer > div,
.google-click-layer iframe {
  width: 100% !important;
  height: 100% !important;
}

.google-local-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font-size: 0.95rem;
  font-weight: 500;
}

.auth-action-row .google-local-button {
  min-height: 56px;
}

.google-mark,
.google-mark svg {
  display: block;
  width: 20px;
  height: 20px;
}

.text-button,
.link-button {
  min-height: auto;
  padding: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 500;
}

.switch-copy {
  margin: 0;
  text-align: center;
  color: var(--text-secondary);
}

button.secondary {
  background: var(--bg-elevated);
  color: var(--text-primary);
	font-size: 0.75rem;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

button:disabled:hover {
  background: var(--bg-elevated);
}

.message {
  min-height: 24px;
  margin: 14px 34px 22px;
  color: var(--red);
}

.message.success {
  color: var(--green);
}

.toast-region {
  position: fixed;
  right: 24px;
  bottom: calc(var(--page-footer-height) + 24px);
  z-index: 10000;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.desktop-body .toast-region {
  position: fixed;
  right: 20px;
  bottom: calc(var(--page-footer-height) + 20px);
  z-index: 9999;
}

.toast {
  padding: 14px 16px;
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.96);
  color: var(--text-primary);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), 0 0 26px rgba(16, 185, 129, 0.08);
  font-weight: 700;
  animation: toast-in 180ms ease-out;
}

.toast.error {
  border-color: rgba(239, 68, 68, 0.42);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), 0 0 26px rgba(239, 68, 68, 0.1);
}

.toast.hide {
  animation: toast-out 180ms ease-in forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (max-width: 1280px) {
  :root {
    --page-sidebar-width: 232px;
  }

  .dashboard-analytics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-analytics-grid .analytics-widget:first-child {
    grid-column: 1 / -1;
  }

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

  .profile-panel-grid,
  .settings-panel-grid,
  .settings-content-layout:has(#platform-feature-settings:not([hidden])) {
    grid-template-columns: 1fr;
  }

  .users-table {
    min-width: 900px;
  }

  #designs-page .users-table {
    min-width: 720px;
  }
}

@media (max-width: 900px) {
  :root {
    --page-sidebar-width: 0px;
  }

  .page-sidebar {
    display: none;
  }

  body:has(.page-sidebar:not([hidden])) .app-shell:has(.canvas:not([hidden])) {
    width: 100vw;
    margin-left: 0;
  }

  body:has(.page-sidebar:not([hidden])) .page-subtopbar {
    width: 100%;
    margin-left: 0;
  }

  .dashboard-analytics-grid,
  .analytics-chart-layout {
    grid-template-columns: 1fr;
  }

  .analytics-widget-wide {
    grid-column: span 1;
  }

  .analytics-card-header {
    justify-content: center;
    text-align: center;
  }

  .line-chart-summary,
  .online-metrics {
    justify-content: center;
  }

  .line-chart-summary {
    flex-wrap: wrap;
  }

  .users-table {
    min-width: 760px;
  }
}

@media (max-width: 640px) {
  .notes-workspace {
    width: calc(100vw - 24px);
  }

  .notes-layout,
  .notes-editor-footer {
    grid-template-columns: 1fr;
  }

  .notes-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .notes-list {
    max-height: 180px;
  }

  .notes-editor-meta {
    grid-template-columns: 1fr;
  }

  .notes-submit-actions {
    flex-wrap: wrap;
  }

  .request-reply-row {
    grid-template-columns: 1fr;
  }

  :root {
    --page-sidebar-width: 0px;
  }

  .info-list div {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .app-shell {
    height: 100vh;
    min-height: 0;
    margin: 0 auto;
    padding: 18px 0;
    width: calc(100vw - 24px);
  }

  .auth-panel {
    padding: 0;
  }

  .app-topbar {
    align-items: center;
    flex-direction: row;
    padding: 14px 16px;
  }

  .page-subtopbar {
    padding: 8px 16px;
  }

  .page-sidebar {
    display: none;
  }

  body:has(.page-sidebar:not([hidden])) .app-shell:has(.canvas:not([hidden])) {
    width: 100vw;
    height: calc(100vh - 64px - 42px - var(--page-footer-height));
    margin-left: 0;
  }

  body:has(.page-sidebar:not([hidden])) .page-subtopbar {
    width: 100%;
    margin-left: 0;
  }

  .auth-form {
    padding: 24px 20px 22px;
  }

  .auth-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .auth-action-row {
    grid-template-columns: 1fr;
  }

  .google-web-button {
    width: 100%;
  }

  .details-grid {
    grid-template-columns: 1fr;
  }

  .canvas-page {
    padding: 28px 0;
  }

  #users-view.canvas-page {
    width: 100%;
    padding: 16px 12px;
  }

  #accounts-view.canvas-page {
    width: 100%;
    padding: 16px 12px;
  }

  #dashboard-page.canvas-page {
    padding: 16px 12px;
  }

  #designs-page.canvas-page {
    padding: 16px 12px;
  }


  .design-source-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .design-source-tabs {
    justify-content: flex-start;
    margin-left: 0;
  }

  #design-editor-page.canvas-page {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  #design-editor-page.canvas-page.is-gallery-open {
    grid-template-columns: 44px minmax(0, 1fr) min(300px, 70vw) 44px;
  }

  #design-editor-page.canvas-page.is-navigation-open {
    grid-template-columns: 44px min(280px, 72vw) minmax(0, 1fr) 44px;
  }

  #design-editor-page.canvas-page.is-navigation-open.is-gallery-open {
    grid-template-columns: 44px min(280px, 72vw) minmax(0, 1fr) min(300px, 70vw) 44px;
  }

  #design-editor-page.canvas-page.is-navigation-open.is-media-open {
    grid-template-columns: 44px min(280px, 72vw) minmax(0, 1fr) min(300px, 70vw) 44px;
  }

  #design-editor-page.canvas-page.is-media-open {
    grid-template-columns: 44px minmax(0, 1fr) min(300px, 70vw) 44px;
  }

  .design-editor-workspace {
    padding: 16px 12px;
  }

  .design-gallery-panel {
    width: 100%;
  }

  .dashboard-analytics-grid,
  .analytics-stat-grid,
  .analytics-chart-layout,
  .request-analytics-card,
  .request-analytics-groups {
    grid-template-columns: 1fr;
  }

  .pie-chart {
    width: min(100%, 220px);
    justify-self: center;
  }

  #profile-view.canvas-page {
    padding: 16px 12px;
  }

  #settings-view.canvas-page {
    padding: 16px 12px;
  }

  .request-page.canvas-page {
    padding: 16px 12px;
  }

  #users-view .table-panel {
    min-height: 0;
  }

  #accounts-view .table-panel {
    min-height: 0;
  }

  #designs-page .table-panel {
    min-height: 0;
  }

  .request-page .table-panel {
    min-height: 0;
  }

  #users-view .table-wrap {
    height: calc(100% - 61px);
  }

  #accounts-view .table-wrap {
    height: calc(100% - 61px);
  }

  #designs-page .table-wrap {
    height: calc(100% - 61px);
  }

  .profile-hero,
  .settings-hero,
  .profile-summary,
  .settings-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-badges {
    justify-content: flex-start;
  }

  .profile-panel-grid {
    grid-template-columns: 1fr;
  }

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

  .panel-heading,
  .security-list div,
  .activity-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .security-list strong,
  .activity-row strong {
    text-align: left;
  }

  .account-dropdown {
    right: -8px;
  }

  .notes-modal {
    padding: 20px;
  }

  .actions button {
    width: 100%;
  }
}