@import "https://fonts.googleapis.com/css2?family=Public+Sans:wght@500;700&family=Inter:wght@400;500;600;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Manrope:wght@600;700&display=swap";
:root {
  --app-min-width: 780px;
  --primary-color: #4647d3;
  --primary-gradient: linear-gradient(170.24deg, #4647d3 0%, #9396ff 100%);
  --primary-gradient-hover: linear-gradient(
    170.24deg,
    #5c4ae4 0%,
    #a6a7ff 100%
  );
  --primary-gradient-disabled:
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0.5) 100%
    ),
    linear-gradient(90deg, #5c4ae4 0%, #5c4ae4 100%);
  --bg-app: #edf2f6;
  --bg-sidebar: #ffffff;
  --bg-canvas: #e5e7eb;
  --text-main: #0f172a;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-white: #ffffff;
  --border-color: #e2e8f0;
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --shadow-md:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-premium:
    0px 10px 15px 0px rgba(15, 23, 42, 0.12),
    0px 4px 6px 0px rgba(15, 23, 42, 0.12);
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}
:root[data-theme="dark"] {
  --stroke-0: #ffffff;
  --bg-app: #2e2e2e;
  --bg-sidebar: #2e2e2e;
  --bg-canvas: #1e1e1e;
  --text-main: #ffffff;
  --text-secondary: #b9b9b9;
  --text-muted: #787878;
  --text-white: #ffffff;
  --border-color: #464646;
  --border-color-light: #343434;
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.2);
  --shadow-md: 0px 4px 6px -1px rgba(0, 0, 0, 0.3), 0px 2px 4px -1px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0px 10px 15px -3px rgba(0, 0, 0, 0.3), 0px 4px 6px -2px rgba(0, 0, 0, 0.2);
  --shadow-premium: 0px 10px 15px 0px rgba(0, 0, 0, 0.4), 0px 4px 6px 0px rgba(0, 0, 0, 0.24);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  cursor: default !important;
}
html {
  min-width: var(--app-min-width);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
body
  *:not(#canvasViewport):not(#canvasViewport *):not(.history-popup):not(
    .history-popup *
  ):not(.history-popup-resize):not(.history-popup-resize *) {
  cursor: default !important;
}
body {
  font-family: Inter, sans-serif;
  background-color: var(--bg-app);
  color: var(--text-main);
  height: 100vh;
  min-width: var(--app-min-width);
  overflow-x: visible;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
.mobile-desktop-notice {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 12000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top, 0px))
    max(40px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px))
    max(40px, env(safe-area-inset-left, 0px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(circle at 18% 14%, #4647d338, #4647d300 38%),
    radial-gradient(circle at 82% 10%, #9396ff3d, #9396ff00 34%),
    linear-gradient(180deg, #f6f8fc, var(--bg-app));
}
.mobile-desktop-notice-card {
  width: min(390px, calc(100vw - 32px));
  border-radius: 20px;
  border: 1px solid rgba(70, 71, 211, 0.16);
  background:
    linear-gradient(152deg, #fffffff0, #ffffffe0),
    linear-gradient(170.2deg, #4647d314, #9396ff14);
  box-shadow:
    0 22px 50px #0f172a24,
    0 2px 10px #0f172a14;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: clamp(26px, 7vw, 42px) clamp(18px, 5vw, 30px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.mobile-desktop-notice-card:before {
  content: "";
  position: absolute;
  top: -80px;
  right: -72px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, #5c4ae438, #5c4ae400 70%);
  pointer-events: none;
}
.mobile-desktop-notice-card:after {
  content: "";
  position: absolute;
  bottom: -92px;
  left: -86px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, #9396ff2e, #9396ff00 72%);
  pointer-events: none;
}
.mobile-desktop-notice-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(92, 74, 228, 0.2);
  background: #5c4ae41f;
  color: #4f46bf;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.mobile-desktop-notice-logo-wrap {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff94;
  border: 1px solid rgba(92, 74, 228, 0.16);
  box-shadow:
    0 14px 24px #4647d32e,
    inset 0 1px #ffffff61;
  position: relative;
  z-index: 1;
}
.mobile-desktop-notice-logo {
  width: 56px;
  height: 56px;
  display: block;
}
.mobile-desktop-notice-title {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 28px;
  color: var(--text-main);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  position: relative;
  z-index: 1;
}
.mobile-desktop-notice-text {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 22px;
  color: #334155;
  margin: 0 0 9px;
  position: relative;
  z-index: 1;
}
.mobile-desktop-notice-subtext {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-secondary);
  margin: 0;
  position: relative;
  z-index: 1;
}
.mobile-desktop-notice-points {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.mobile-desktop-notice-point {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--bg-sidebar);
  padding: 5px 10px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 16px;
  color: #475569;
}
@media (max-width: 1185px) {
  html,
  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  body > *:not(#mobileDesktopNotice) {
    display: none !important;
  }
  #appSyncOverlay,
  .app-container,
  .canvas-toolbar,
  .pwa-install-btn,
  #commandPaletteOverlay,
  #storageOnboardingOverlay,
  toast-notification {
    display: none !important;
  }
  .mobile-desktop-notice {
    display: flex;
  }
}
html.force-mobile-notice,
body.force-mobile-notice {
  min-width: 0 !important;
  overflow: hidden !important;
}
body.force-mobile-notice > *:not(#mobileDesktopNotice) {
  display: none !important;
}
body.force-mobile-notice #mobileDesktopNotice {
  display: flex !important;
}
@media (max-width: 480px) {
  .mobile-desktop-notice-card {
    border-radius: 18px;
    padding: 24px 16px;
  }
  .mobile-desktop-notice-logo-wrap {
    width: 68px;
    height: 68px;
    border-radius: 16px;
  }
  .mobile-desktop-notice-logo {
    width: 52px;
    height: 52px;
  }
  .mobile-desktop-notice-title {
    font-size: 15px;
    line-height: 24px;
  }
  .mobile-desktop-notice-text {
    font-size: 13px;
    line-height: 20px;
  }
  .mobile-desktop-notice-subtext {
    font-size: 12px;
    line-height: 18px;
  }
}
.pwa-install-btn {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 14px);
  z-index: 2200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  height: 34px;
  padding: 0 12px;
  border-radius: 9px;
  border: 1px solid #d8dff7;
  background: var(--bg-sidebar);
  color: #2e3a63;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 18px #1f2a4414;
  cursor: pointer;
  transition:
    transform 0.16s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.pwa-install-btn:hover {
  transform: translateY(-1px);
  border-color: #c4cff9;
  box-shadow: 0 10px 22px #1f2a441c;
}
.pwa-install-btn:active {
  transform: translateY(0);
}
.pwa-install-btn:focus-visible {
  outline: 2px solid rgba(70, 71, 211, 0.35);
  outline-offset: 2px;
}
.pwa-install-btn.hidden {
  display: none;
}
.pwa-install-btn.is-open {
  border-color: #ccd8ff;
  background: #eef2ff;
  color: #2f3cb5;
}
body.standalone-mode .pwa-install-btn {
  display: none !important;
}
body.standalone-mode {
  padding-top: env(safe-area-inset-top, 0px);
}
.app-container {
  position: relative;
  height: 100vh;
  width: max(100%, var(--app-min-width));
  min-width: var(--app-min-width);
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: none;
}
body.app-sync-pending .app-container {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
  pointer-events: none;
}
body.app-sync-ready .app-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: none;
}
.app-sync-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: auto;
  min-width: auto;
  padding: 0;
  border: none;
  background: radial-gradient(
    circle at 50% 40%,
    #5448c70f,
    #edf2f6ad 55%,
    #edf2f6eb
  );
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 2500;
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.22s cubic-bezier(0.2, 0.7, 0.2, 1),
    visibility 0s linear 0ms;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #0f172ae6;
}
.app-sync-credit {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #6e6e73;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.app-sync-overlay.done {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.16s ease,
    visibility 0s linear 0.16s;
}
.sidebar-left,
.sidebar-right {
  opacity: 1;
  transform: translateZ(0) scale(1);
  transition:
    opacity 0.36s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
#canvasViewport {
  opacity: 1;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity;
}
body.app-sync-pending .sidebar-left {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.998);
}
body.ui-mode-standard.app-sync-pending .sidebar-left,
body.ui-mode-standard.app-sync-ready .sidebar-left,
body.ui-mode-standard.app-sync-complete .sidebar-left {
  opacity: 1;
  transform: none;
  transition: none;
}
body.app-sync-pending .sidebar-right {
  opacity: 0;
  transform: translate3d(0, 8px, 0) scale(0.998);
}
body.app-sync-pending #canvasViewport {
  opacity: 0;
}
body.app-sync-ready .sidebar-left {
  transition-delay: 50ms;
}
body.ui-mode-standard.app-sync-ready .sidebar-left {
  transition-delay: 0ms;
}
body.app-sync-ready #canvasViewport {
  transition-delay: 0.12s;
}
body.app-sync-ready .sidebar-right {
  transition-delay: 50ms;
}
body.app-sync-complete .sidebar-left,
body.app-sync-complete .sidebar-right,
body.app-sync-complete #canvasViewport {
  will-change: auto;
}
html.instant-page-switch .app-sync-overlay {
  display: none !important;
}
html.instant-page-switch toast-notification {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
html.instant-page-switch .app-container {
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) scale(0.996) !important;
  transition:
    opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: opacity, transform;
}
html.instant-page-switch .sidebar-left,
html.instant-page-switch .sidebar-right {
  opacity: 0 !important;
  transform: translate3d(0, 6px, 0) scale(0.998) !important;
  transition:
    opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1) 60ms,
    transform 0.36s cubic-bezier(0.22, 1, 0.36, 1) 60ms !important;
}
html.instant-page-switch #canvasViewport {
  opacity: 0 !important;
  transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1) 80ms !important;
}
html.instant-page-switch main:before {
  transition: none !important;
  animation: none !important;
}
html.instant-page-switch body.app-sync-pending .sidebar-left,
html.instant-page-switch body.app-sync-pending .sidebar-right,
html.instant-page-switch body.app-sync-pending #canvasViewport {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  pointer-events: auto !important;
}
html.instant-page-switch body.app-sync-pending main:before {
  opacity: 0 !important;
}
.top-nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 48px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 9px;
  z-index: 2000;
}
.header-logo-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.app-logo {
  width: 29.5px;
  height: 29.5px;
  object-fit: contain;
}
.app-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.app-name {
  font-family:
    Public Sans,
    sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -0.35px;
  line-height: normal;
  margin: 0;
}
.app-version {
  font-family:
    Public Sans,
    sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: normal;
}
.btn-feedback {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  box-shadow: 0 1px 2px #0000000d;
  transition: all 0.2s;
}
.btn-feedback:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}
.btn-feedback svg {
  color: var(--text-secondary);
}
::-webkit-scrollbar {
  width: 4px;
  height: 2px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}
html::-webkit-scrollbar {
  height: 2px;
}
html::-webkit-scrollbar-track {
  background: transparent;
}
html::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}
.sidebar {
  position: absolute;
  top: 0;
  z-index: 500;
  width: 320px;
  pointer-events: none;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-left {
  left: 0;
  width: 378px;
  z-index: 501;
}
body.ui-mode-floating .sidebar-right {
  right: 12px;
  top: 12px;
  height: calc(100vh - 24px);
}
html.ui-mode-floating-preload
  body:not(.ui-mode-standard):not(.ui-mode-floating)
  .sidebar-right {
  right: 12px;
  top: 12px;
  height: calc(100vh - 24px);
}
body.ui-mode-floating .sidebar-right .sidebar-panel {
  margin: 0;
  height: 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
html.ui-mode-floating-preload
  body:not(.ui-mode-standard):not(.ui-mode-floating)
  .sidebar-right
  .sidebar-panel {
  margin: 0;
  height: 100%;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
body.ui-mode-standard .sidebar-left {
  top: 0;
  left: 0;
  height: 100vh;
}
body.ui-mode-standard .sidebar-right {
  top: 0;
  height: 100vh;
}
html.ui-mode-standard-preload
  body:not(.ui-mode-standard):not(.ui-mode-floating)
  .sidebar-right {
  top: 0;
  height: 100vh;
}
body.ui-mode-standard .sidebar-right {
  right: 0;
}
html.ui-mode-standard-preload
  body:not(.ui-mode-standard):not(.ui-mode-floating)
  .sidebar-right {
  right: 0;
}
body.ui-mode-standard .sidebar-right .sidebar-panel {
  margin: 0;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
}
html.ui-mode-standard-preload
  body:not(.ui-mode-standard):not(.ui-mode-floating)
  .sidebar-right
  .sidebar-panel {
  margin: 0;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
}
body.ui-mode-standard .sidebar-right .sidebar-panel {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
html.ui-mode-standard-preload
  body:not(.ui-mode-standard):not(.ui-mode-floating)
  .sidebar-right
  .sidebar-panel {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
body.ui-mode-standard .sidebar-left .sidebar-two-col {
  margin: 0;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
  border-color: transparent;
}
html.ui-mode-standard-preload
  body:not(.ui-mode-standard):not(.ui-mode-floating)
  .sidebar-left
  .sidebar-two-col {
  margin: 0;
  height: 100vh;
  border-radius: 0;
  box-shadow: none;
  border-color: transparent;
}
body.ui-mode-standard .sidebar-collapse-tab {
  left: 60px;
}
.sidebar-left.collapsed {
  width: 92px;
}
.sidebar-right {
  right: 0;
  width: 330px;
  min-width: 330px;
  max-width: 330px;
  transition:
    right 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-panel {
  pointer-events: auto;
  margin: 16px;
  border-radius: 16px;
  height: calc(100vh - 32px);
  position: relative;
  border: 1px solid var(--border-color);
  background: var(--bg-sidebar);
  box-shadow:
    0 4px 12px #00000008,
    0 1px 2px #00000005;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: calc(100% - 32px);
  min-width: calc(100% - 32px);
  max-width: calc(100% - 32px);
  transition:
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
html.ui-mode-switching .sidebar,
html.ui-mode-switching .sidebar-panel,
html.ui-mode-switching .sidebar-right,
html.ui-mode-switching .sidebar-two-col,
html.ui-mode-switching .sidebar-collapse-tab,
body.ui-mode-switching .sidebar,
body.ui-mode-switching .sidebar-panel,
body.ui-mode-switching .sidebar-right,
body.ui-mode-switching .sidebar-two-col,
body.ui-mode-switching .sidebar-collapse-tab {
  transition: none !important;
  animation: none !important;
}
.sidebar-left.collapsed .sidebar-panel {
  overflow: hidden !important;
}
#propertiesPanel,
#stylesPanel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
#propertiesPanel::-webkit-scrollbar,
#stylesPanel::-webkit-scrollbar {
  width: 0;
  height: 0;
}
#stylesPanelElement {
  display: block;
  min-height: 100%;
  height: 100%;
}
.sidebar-section {
  padding: 20px;
  border-bottom: 1px solid #f1f5f9;
  width: 100%;
  min-width: 0;
}
.sidebar-section-feature {
  padding: 20px 20px 0;
  border-bottom: 1px solid #f1f5f9;
  width: 100%;
  min-width: 0;
}
#fileConvertContent,
#dropzoneWrapper,
#dropzoneLoaded {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.sidebar-panel .sidebar-section:first-child {
  position: sticky;
  top: 0;
  background: var(--bg-sidebar);
  z-index: 50;
  border-radius: 16px 16px 0 0;
}
.section-title {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-main);
  text-transform: none;
  margin-bottom: 16px;
  line-height: 16px;
}
.sidebar-right .section-title-with-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
  margin-bottom: 16px;
}
.sidebar-profile-badge {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 999px;
  border: none;
  box-shadow: inset 0 0 0 1.8px #5c4ae4;
  padding: 4px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.sidebar-profile-badge-inner {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 999px;
  background: #5c4ae4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.sidebar-profile-badge-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
}
.sidebar-profile-badge-inner svg {
  width: 18px;
  height: 18px;
  display: block;
}
.sidebar-profile-badge-initial {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-white);
}
.sidebar-profile-badge-avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
.sidebar-profile-badge[data-auth-state="not-signed-in"] {
  box-shadow: inset 0 0 0 1.8px #bdbdbd;
}
.sidebar-profile-badge[data-auth-state="not-signed-in"]
  .sidebar-profile-badge-inner {
  background: #bdbdbd;
}
.sidebar-profile-badge[data-auth-state="not-signed-in"]:hover {
  box-shadow: inset 0 0 0 1.8px #969696;
}
.sidebar-profile-badge[data-auth-state="not-signed-in"]:hover
  .sidebar-profile-badge-inner {
  background: #969696;
}
.sidebar-profile-menu {
  position: fixed;
  z-index: 2200;
  min-width: 248px;
  max-width: min(280px, calc(100vw - 24px));
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.sidebar-profile-menu[data-placement="top"] {
  transform-origin: bottom right;
}
.sidebar-profile-menu.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sidebar-profile-menu.hidden {
  pointer-events: none;
}
.sidebar-profile-menu__panel {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow:
    0 8px 24px #0000001f,
    0 2px 4px #0000000a;
  padding: 8px;
}
.sidebar-profile-menu__header {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 12px 12px;
  border-bottom: 1px solid #f1f5f9;
}
.sidebar-profile-menu__name {
  font-family: Inter, sans-serif;
  font-size: 13px;
  line-height: 14px;
  font-weight: 600;
  color: #000000ed;
}
.sidebar-profile-menu__email {
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 12.65px;
  font-weight: 400;
  color: #000000b8;
  word-break: break-word;
}
.sidebar-profile-menu__email.is-empty {
  color: var(--text-secondary);
}
.sidebar-profile-menu__actions {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
}
.sidebar-profile-menu__item {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  cursor: pointer;
  text-align: left;
  color: #000000ed;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.sidebar-profile-menu__item:hover,
.sidebar-profile-menu__item:focus-visible {
  background: #f5f3ff;
  color: #5c4ae4;
  outline: none;
}
.sidebar-profile-menu__icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 16px;
}
.sidebar-profile-menu__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}
.sidebar-profile-menu__label {
  font-family: Inter, sans-serif;
  font-size: 12px;
  line-height: 12.65px;
  font-weight: 400;
}
.sidebar-profile-badge[data-auth-state="without-profile"] {
  box-shadow: inset 0 0 0 1.8px #5c4ae4;
}
.sidebar-profile-badge[data-auth-state="without-profile"]
  .sidebar-profile-badge-inner {
  background: #5c4ae4;
}
.sidebar-profile-badge[data-auth-state="with-profile"] {
  box-shadow: inset 0 0 0 1.8px #5c4ae4;
}
.sidebar-profile-badge[data-auth-state="with-profile"]
  .sidebar-profile-badge-inner {
  background: transparent;
}
.tab-container {
  background: #f3f4f6;
  padding: 4px;
  border-radius: 12px;
  display: flex;
  margin-bottom: 20px;
}
.tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 20px;
}
.tab-btn.active {
  background: var(--bg-sidebar);
  color: #000;
  box-shadow: 0 1px 2px #0000000d;
}
.url-input-group {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.url-text-input {
  width: 100%;
  height: 44px;
  padding: 9px 13px;
  border: 1px solid #e5e7eb;
  border-radius: 8px 8px 0 0;
  background: var(--bg-sidebar);
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #000;
  line-height: 20px;
  outline: none;
  box-sizing: border-box;
}
.url-text-input::placeholder {
  color: #9ca3af;
}
.url-text-input:focus {
  border-color: #5448c7;
}
.fetch-site-btn {
  display: flex;
  height: 44px;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 16px;
  border: 1px solid rgba(70, 71, 211, 0.12);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(171deg, #4647d314, #9396ff14);
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #5448c7;
  line-height: 24px;
  transition: background 0.15s;
}
.fetch-site-btn:hover {
  background: linear-gradient(171deg, #4647d324, #9396ff24);
}
.fetch-site-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.fetch-site-btn.is-loading,
.fetch-site-btn.is-loading:hover {
  background: #4647d314;
}
.fetch-site-btn svg {
  flex-shrink: 0;
}
.fetch-site-btn.is-loading svg {
  animation: fetchSiteSpin 0.9s linear infinite;
}
@keyframes fetchSiteSpin {
  0% {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.url-fetched-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 140px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  margin-top: 16px;
  width: 100%;
}
.url-fetched-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.url-fetched-list:empty {
  display: none;
}
.dropzone-container {
  border: 2px dashed #e5e7eb;
  border-radius: 16px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition:
    filter 0.16s ease,
    transform 0.12s ease;
  width: 100%;
  background: transparent;
  box-shadow: none;
}
.dropzone-container:hover {
  border-color: #4647d39e;
  background: linear-gradient(180deg, #4647d303, #4647d30a);
}
.dropzone-icon {
  width: 48px;
  height: 48px;
  background: #5c4ae41a;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.dropzone-title {
  font-weight: 600;
  font-size: 14px;
  color: #111827;
  margin-bottom: 4px;
  line-height: 20px;
}
.dropzone-subtitle {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 16px;
  line-height: 16px;
  padding: 12px;
}
.browse-btn {
  background: var(--bg-sidebar);
  border: 1px solid #d1d5db;
  border-radius: 100px;
  padding: 7px 21px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  line-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
}
.browse-btn-leading,
.browse-btn-trailing {
  display: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
}
.browse-btn-leading-icon,
.browse-btn-trailing-icon {
  width: 16px;
  height: 16px;
  display: block;
}
.browse-btn.open .browse-btn-trailing-icon {
  transform: rotate(180deg);
}
.browse-btn-trailing-icon {
  transition: transform 0.18s ease;
}
.new-upload-icon {
  display: none;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
}
#dropzoneWrapper.multi-upload-mode .dropzone-container {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}
#dropzoneWrapper.multi-upload-mode .dropzone-container:hover {
  border-color: transparent;
  background: transparent;
  filter: none;
}
#dropzoneWrapper.multi-upload-mode .dropzone-icon,
#dropzoneWrapper.multi-upload-mode .dropzone-title,
#dropzoneWrapper.multi-upload-mode .dropzone-subtitle {
  display: none;
}
#dropzoneWrapper.multi-upload-mode .browse-btn {
  width: 100%;
  border: 1px solid rgba(70, 71, 211, 0.12);
  border-radius: 8px;
  padding: 10px 16px;
  background: linear-gradient(169.5686deg, #4647d314, #9396ff14);
  color: #5448c7;
  font-size: 12px;
  font-weight: 500;
  font-family: Inter, sans-serif;
  line-height: 24px;
  justify-content: flex-start;
  gap: 0;
}
#dropzoneWrapper.multi-upload-mode .browse-btn:hover {
  border-color: #4647d31f;
  background: linear-gradient(169.5686deg, #4647d314, #9396ff14);
}
#dropzoneWrapper.multi-upload-mode .browse-btn-label {
  margin-left: 8px;
}
#dropzoneWrapper.multi-upload-mode .browse-btn-trailing {
  margin-left: auto;
}
#dropzoneWrapper.multi-upload-mode .browse-btn-leading,
#dropzoneWrapper.multi-upload-mode .browse-btn-trailing {
  display: inline-flex;
}
#dropzoneWrapper.multi-upload-mode .new-upload-icon {
  display: none;
}
.sidebar-two-col {
  display: flex;
  flex-direction: row;
  padding: 0;
  margin: 16px;
  border-radius: 16px;
  height: calc(100vh - 32px);
  overflow: hidden;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  box-shadow:
    0 4px 12px #00000008,
    0 1px 2px #00000005;
  transition:
    margin 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-radius 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-icon-strip {
  display: none !important;
  width: 60px;
  background: var(--bg-sidebar);
  border-right: 1px solid #f1f5f9;
  flex-direction: column;
  align-items: center;
  padding: 14px 12px;
  z-index: 10;
}
.icon-strip-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  flex: 1;
  width: 100%;
}
.strip-bg-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}
.strip-bg-icon img {
  width: 100%;
  height: 100%;
  display: block;
}
.strip-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  align-items: center;
}
.strip-btn {
  width: 36px;
  height: 36px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
  color: var(--text-secondary);
}
.strip-btn .strip-icon-svg {
  width: 18px;
  height: 18px;
  transition: color 0.15s ease;
}
.strip-btn .strip-icon-img {
  width: 18px;
  height: 18px;
  display: block;
  transition: filter 0.15s ease;
}
.strip-btn .strip-btn-svg {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  display: block;
  flex: 0 0 18px;
}
.strip-btn:not(.active):hover,
.strip-btn[data-state="hover"]:not(.active) {
  color: var(--text-secondary);
  background: #64748b14;
}
.strip-btn.active {
  background: #5c4ae414;
  color: #5c4ae4;
}
.strip-btn.active .strip-icon-img {
  filter: invert(28%) sepia(87%) saturate(5451%) hue-rotate(244deg)
    brightness(88%) contrast(98%);
}
.strip-btn .strip-btn-svg path {
  transition: stroke 0.15s ease;
}
.strip-btn:not(.active):hover .strip-btn-svg path {
  stroke: var(--text-secondary);
}
.strip-btn.active .strip-btn-svg path {
  stroke: #5c4ae4;
}
.icon-strip-bottom {
  position: relative;
  margin-top: auto;
  width: 100%;
  display: flex;
  justify-content: center;
}
.strip-settings-menu {
  position: absolute;
  left: calc(100% + 8px);
  bottom: 0;
  min-width: 198px;
  width: auto;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow:
    0 8px 24px #0000001f,
    0 2px 4px #0000000a;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 1400;
}
.strip-settings-title {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
  letter-spacing: 0.02em;
  margin: 2px 6px 6px;
}
.strip-settings-divider {
  height: 1px;
  background: var(--border-color);
  margin: 4px 6px;
}
.strip-settings-hint {
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  margin: -2px 6px 6px;
}
.ui-mode-option {
  width: 100%;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #475569;
  height: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 15px;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}
.ui-mode-option:hover {
  background: #f5f3ff;
  color: #5c4ae4;
}
#urlBetaAuthBtn:hover {
  color: #969696;
  background: transparent;
}
.ui-mode-option.active {
  background: #f5f3ff;
  color: #5c4ae4;
}
.ui-mode-option-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}
.ui-mode-option-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}
.ui-mode-option-icon svg path,
.ui-mode-option-icon svg rect {
  transition:
    stroke 0.2s ease,
    fill 0.2s ease;
}
.explorer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  position: relative;
  padding: 10px 12px 12px;
  min-width: 0;
  white-space: nowrap;
  margin: 12px 16px 16px;
}
.explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 40px;
  min-width: 0;
}
.explorer-title {
  font-family: poppins, sans-serif;
  padding-left: 4px;
  font-weight: 550;
  font-size: 18px;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 132px;
  flex: 0 0 132px;
  line-height: 16px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.explorer-title-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  padding: 0 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe7fb8c, #ede7ff8c 52%, #dff4ff8c);
  color: #7b4cff;
  border: 1px solid rgba(123, 76, 255, 0.18);
  font-family: Inter, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex-shrink: 0;
  box-shadow: none;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}
.explorer-title-badge:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: none;
}
.sidebar-panel-toggle-pill {
  display: flex;
  align-items: center;
  padding: 10px 9px 10px 12px;
  background: linear-gradient(90deg, #00000014, #0000);
  border-radius: 100px 0 0 100px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-right: -12px;
  position: relative;
  z-index: 100;
}
.sidebar-left.collapsed .sidebar-panel-toggle-pill {
  display: flex !important;
}
.sidebar-collapse-tab {
  position: absolute;
  left: 76px;
  top: 48px;
  transform: translateY(-50%);
  width: 24px;
  height: 32px;
  background: linear-gradient(90deg, #00000014, #00000001 115%), var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 16px 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 2px 2px 10px #0000000f;
  z-index: 600;
  color: var(--text-main);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  pointer-events: none;
}
.sidebar-left.collapsed .sidebar-collapse-tab {
  opacity: 1;
  pointer-events: auto;
}
.sidebar-collapse-tab:hover {
  width: 27px;
}
.sidebar-collapse-tab svg {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(180deg);
}
.sidebar-left.collapsed .sidebar-collapse-tab svg {
  transform: rotate(0);
}
.sidebar-left.collapsed .explorer-content {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
  overflow: hidden;
}
.explorer-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  position: relative;
  padding: 12px;
  min-width: 0;
  transform-origin: left center;
  transition:
    opacity 0.24s linear,
    transform 0.3s linear;
  will-change: opacity, transform;
}
.sidebar-panel-toggle-icon {
  width: 20px;
  height: 20px;
  color: var(--text-main);
}
.sidebar-panel-toggle-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.preview-card-wrap {
  margin-top: 16px;
}
.sidemenu-preview-card {
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 262px;
  box-shadow: 0 0 #0f172a00;
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.1s ease,
    border-color 0.15s ease;
}
.sidemenu-preview-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sidemenu-folder-icon {
  width: 38px;
  height: 38px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1px;
}
.sidemenu-folder-icon img {
  width: 20px;
  height: 20px;
}
.sidemenu-folder-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidemenu-folder-name {
  font-family: Inter, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--text-main);
  line-height: normal;
}
.sidemenu-connection {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sidemenu-connection-status {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #878787;
  line-height: normal;
}
.sidemenu-swap-icon {
  width: 20px;
  height: 20px;
}
.sidemenu-preview-card.sidemenu-card-connected,
.sidemenu-preview-card.sidemenu-card-disconnected {
  background: var(--bg-sidebar);
}
.sidemenu-tree {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.tree-tab {
  display: flex;
  align-items: center;
  padding: 10px 9px 10px 12px;
  border-radius: 0 100px 100px 0;
  gap: 8px;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease;
}
.tree-tab.active {
  background: linear-gradient(90.13deg, #5c4ae400, #5c4ae452 99.98%);
  box-shadow: inset -1.8px 0 #5c4ae41f;
}
.tree-tab-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.tree-tab-icon {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 1px;
  color: #000c;
}
.tree-tab:not(.active) .tree-tab-icon,
.tree-tab:not(.active):hover .tree-tab-icon {
  color: #2e2e2e;
}
.tree-tab-icon img {
  max-width: 100%;
  max-height: 100%;
}
.tree-tab-icon-img {
  width: 18px;
  height: 18px;
  display: block;
  object-fit: contain;
}
.tree-tab.active .tree-tab-icon {
  color: #5c4ae4;
}
.tree-tab-collapse-icon {
  width: 14px;
  height: 14px;
}
.tree-tab-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.24s linear;
  transform: rotate(-90deg);
}
.tree-tab-chevron-img {
  width: 14px;
  height: 14px;
  display: block;
  object-fit: contain;
}
.tree-accordion.open .tree-tab-chevron {
  transform: rotate(0);
}
.tree-tab-text {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tree-tab.active .tree-tab-text {
  background:
    linear-gradient(90deg, #0000001a, #0000001a),
    linear-gradient(90deg, #5c4ae4, #5c4ae4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.tree-tab:not(.active) .tree-tab-text {
  color: #000c;
  opacity: 1;
}
.tree-tab:not(.active):hover {
  background: linear-gradient(90.13deg, #0000, #0000001f 99.98%);
}
.tree-accordion > .tree-sub-list {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  transform-origin: top;
  will-change: max-height, opacity, transform;
  transition:
    max-height 0.34s cubic-bezier(0.22, 0.7, 0.2, 1),
    margin-top 0.28s cubic-bezier(0.22, 0.7, 0.2, 1),
    opacity 0.24s ease,
    transform 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
}
.tree-accordion.open > .tree-sub-list {
  max-height: 152px;
  margin-top: 0;
  opacity: 1;
  transform: translateY(0);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}
.tree-accordion.open > .tree-sub-list:not(:empty) {
  margin-top: 8px;
}
.tree-sub-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 0 30px;
  min-width: 0;
}
.tree-sub-tab {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  height: 45px;
  border-radius: 100px;
  gap: 8px;
  width: 100%;
  min-width: 0;
  cursor: pointer;
  box-shadow: inset -1.8px 0 #ffffff1f;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    background-color 0.2s cubic-bezier(0.2, 0.7, 0.2, 1),
    margin-top 0.26s cubic-bezier(0.22, 0.7, 0.2, 1),
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 0.7, 0.2, 1);
  transition-delay: 0ms;
}
.tree-accordion.open .tree-sub-tab {
  opacity: 1;
  transform: translateY(0);
  transition-delay:
    0ms, 0ms, calc(var(--stagger-index, 0) * 16ms),
    calc(var(--stagger-index, 0) * 16ms);
}
.tree-accordion:not(.open) .tree-sub-tab {
  transition-delay: 0ms;
}
.tree-sub-tab.active {
  background-color: #0000000a;
}
.tree-sub-tab:not(.active):hover {
  background-color: #00000005;
}
.tree-sub-tab-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.tree-sub-tab-active-indicator {
  background: #5c4ae4;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  flex-shrink: 0;
  opacity: 0;
  transform: scale(0.7);
  transition:
    opacity 0.14s ease,
    transform 0.18s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.tree-sub-tab-active-indicator.visible {
  opacity: 1;
  transform: scale(1);
}
.icon-active-purple {
  filter: invert(28%) sepia(87%) saturate(5451%) hue-rotate(244deg)
    brightness(88%) contrast(98%);
}
.tree-sub-tab-text {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #000;
  line-height: 25px;
  letter-spacing: -0.24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidemenu-upgrade-bg {
  background: linear-gradient(180deg, #5c4ae400 15.6%, #5c4ae429);
  border-radius: 0 0 10px 10px;
  padding: 56px 20px 20px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.upgrade-icon-overlay {
  position: absolute;
  left: 13px;
  top: -40px;
  width: 89px;
  height: 80px;
  pointer-events: none;
}
.upgrade-icon-overlay img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.sidemenu-upgrade-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sidemenu-upgrade-title {
  font-family:
    Helvetica Neue,
    sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #232323;
  line-height: normal;
  text-align: left;
  letter-spacing: -0.48px;
  margin: 0;
  white-space: normal;
  word-wrap: break-word;
}
.sidemenu-upgrade-title span.gradient {
  background: linear-gradient(90deg, #a6a7ff, #4647d3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidemenu-upgrade-desc {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #313131;
  opacity: 0.8;
  line-height: 18px;
  text-align: left;
  margin: 0;
  white-space: normal;
  word-wrap: break-word;
}
.sidemenu-upgrade-btn {
  border: 1.5px solid rgba(70, 71, 211, 0.32);
  border-radius: 8px;
  background: linear-gradient(169.5deg, #4647d3, #9396ff);
  box-shadow: 0 1px 2px #0000000d;
  padding: 8px 16px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.sidemenu-upgrade-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px #4647d347;
  filter: brightness(1.04);
}
.sidemenu-upgrade-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px #4647d32e;
}
.sidemenu-upgrade-btn img {
  width: 18px;
  height: 18px;
  display: block;
}
.sidemenu-upgrade-btn,
.sidemenu-upgrade-btn * {
  cursor: pointer;
}
.sidemenu-upgrade-btn-text {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-white);
  line-height: 25px;
}
#dropzoneLoaded.multi-upload-mode {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 150px;
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  margin-top: 20px;
}
#dropzoneLoaded.multi-upload-mode::-webkit-scrollbar {
  width: 0;
  height: 0;
}
#dropzoneLoaded .multi-upload-list,
#urlConvertContent .multi-upload-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
#urlConvertContent .multi-upload-list {
  margin-top: 16px;
  max-height: 150px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: none;
}
#urlConvertContent .multi-upload-list::-webkit-scrollbar {
  width: 0;
  height: 0;
}
#dropzoneLoaded .multi-upload-card,
#urlConvertContent .multi-upload-card {
  cursor: default;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  transition:
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}
#dropzoneLoaded .multi-upload-card.active,
#urlConvertContent .multi-upload-card.active {
  border-color: #d8dcf7;
  background-image:
    linear-gradient(90deg, #7063ed0a, #7063ed0a),
    linear-gradient(90deg, var(--bg-sidebar), var(--bg-sidebar));
}
#dropzoneLoaded .status-ready-group.is-ready,
#urlConvertContent .status-ready-group.is-ready {
  color: #059669;
}
.file-item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 17px 13px 13px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.file-icon-box {
  background: #f8fafc;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.file-info-header {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}
.file-info-header .filename {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: normal;
}
.file-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}
.file-size-text {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--text-secondary);
}
.file-meta-separator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.44px;
  height: 20px;
  font-family:
    Public Sans,
    Inter,
    sans-serif;
  font-weight: 400;
  color: #cbd5e1;
  font-size: 14px;
  line-height: 20px;
}
.status-ready-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.status-ready-icon {
  width: 11.667px;
  height: 11.667px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.status-ready-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.status-ready-text {
  font-family: Inter, sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 12px;
  color: currentColor;
  line-height: 20px;
}
.remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.remove-btn:hover {
  filter: none;
}
.remove-btn:hover img {
  filter: invert(28%) sepia(82%) saturate(3784%) hue-rotate(339deg)
    brightness(90%) contrast(101%);
}
.viewport-dimensions-container {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.dimension-input-group {
  background: var(--bg-sidebar);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px;
  flex: 1;
}
.dimension-label {
  font-size: 13px;
  color: var(--text-secondary);
  opacity: 0.6;
  -webkit-user-select: none;
  user-select: none;
}
.dimension-input {
  border: none;
  background: transparent;
  font-size: 13px;
  color: #000;
  width: 100%;
  outline: none;
  font-family: inherit;
}
.options-container {
  display: flex;
  flex-direction: column;
  width: calc(100% + 40px);
  margin-left: -20px;
  margin-top: 16px;
}
.option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--bg-sidebar);
  border-bottom: 1px solid #f1f5f9;
}
.option-row:last-child {
  border-bottom: none;
}
.options-container .option-row:first-child {
  border-top: 1px solid #f1f5f9;
}
.option-label {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000;
}
.toggle-switch {
  width: 32px;
  height: 16px;
  background: #cfcfcf;
  border-radius: 9999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-switch.on {
  background: #4648d4;
}
.toggle-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--bg-sidebar);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: left 0.2s;
}
.toggle-switch.on .toggle-handle {
  left: calc(100% - 14px);
}
main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: var(--bg-app);
  background-image:
    radial-gradient(
      rgba(132, 142, 174, calc(var(--grid-opacity, 1) * 0.46)) 0.82px,
      transparent 0.82px
    ),
    radial-gradient(
      rgba(132, 142, 174, calc(var(--grid-opacity, 1) * 0.2)) 0.82px,
      transparent 0.82px
    ),
    linear-gradient(180deg, #ffffff94, #edf2f6c7);
  background-size:
    var(--grid-cell-size, 24px) var(--grid-cell-size, 24px),
    calc(var(--grid-cell-size, 24px) * 4) calc(var(--grid-cell-size, 24px) * 4),
    100% 100%;
  background-position:
    var(--grid-offset-x, 0px) var(--grid-offset-y, 0px),
    var(--grid-offset-x, 0px) var(--grid-offset-y, 0px),
    0 0;
  z-index: auto;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  --cursor-x: 50%;
  --cursor-y: 50%;
  --cursor-glow-opacity: 0;
}
main:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--bg-app);
  opacity: 0;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
body.app-sync-pending main:before {
  opacity: 1;
}
body.app-sync-ready main:before {
  opacity: 0;
  transition-delay: 0.14s;
}
main:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 1;
  background-image: radial-gradient(
    rgba(112, 99, 237, 0.85) 1.04px,
    transparent 1.04px
  );
  background-size: var(--grid-cell-size, 24px) var(--grid-cell-size, 24px);
  background-position: var(--grid-offset-x, 0px) var(--grid-offset-y, 0px);
  -webkit-mask-image: radial-gradient(
    circle 170px at var(--cursor-x) var(--cursor-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.78) 40%,
    rgba(0, 0, 0, 0) 78%
  );
  mask-image: radial-gradient(
    circle 170px at var(--cursor-x) var(--cursor-y),
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.78) 40%,
    rgba(0, 0, 0, 0) 78%
  );
  transition: opacity 0.14s linear;
  opacity: var(--cursor-glow-opacity);
}
#canvasViewport {
  position: relative;
  z-index: 2;
  cursor: default !important;
  -webkit-user-select: none;
  user-select: none;
  will-change: auto;
}
#canvasViewport[data-canvas-tool="hand"] {
  cursor: grab !important;
}
#canvasViewport[data-canvas-tool="hand"].dragging {
  cursor: grabbing !important;
}
#canvasViewport.dragging:not([data-canvas-tool="hand"]) {
  cursor: default !important;
}
#canvasViewport.dragging.option-duplicate-drag {
  cursor: copy !important;
}
#canvasContainer,
.canvas-preview,
.canvas-preview * {
  -webkit-user-select: none;
  user-select: none;
}
#canvasContainer {
  position: absolute;
  z-index: 2;
  width: 6000px;
  height: 6000px;
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: flat;
  -webkit-transform-style: flat;
}
.canvas-preview {
  background: var(--bg-sidebar);
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 0;
  box-shadow:
    0 2.683px 4.025px -0.671px #0000001a,
    0 1.342px 2.683px -0.671px #0000000f;
  border: none;
  padding: 0;
  transition: opacity 0.12s linear;
}
#canvasViewport.resizing .canvas-preview.primary-selected {
  transition: none !important;
}
#previewFrame,
.canvas-preview iframe {
  width: 100%;
  height: 100%;
  border: none;
  pointer-events: none;
  display: block;
}
.canvas-preview.visible {
  display: block;
}
.canvas-preview.import-enter {
  opacity: 0;
}
.canvas-preview.import-enter.import-enter-active {
  opacity: 1;
  transition:
    opacity 0.19s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.19s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.canvas-preview.import-enter > * {
  opacity: 0;
  transform: scale(0.985);
}
.canvas-preview.import-enter.import-enter-active > * {
  opacity: 1;
  transform: scale(1);
  transition:
    opacity 0.19s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.19s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.canvas-preview.visible:hover:not(.selected):not(.multi-selected):not(
    .primary-selected
  ) {
  outline: calc(1.5px * var(--inverse-scale, 1)) solid rgba(112, 99, 237, 0.65);
  outline-offset: calc(-0.75px * var(--inverse-scale, 1));
}
.canvas-preview.visible:hover:not(.selected):not(.multi-selected):not(
    .primary-selected
  )
  .artboard-label-top-left {
  color: #7063ed;
}
.canvas-preview.selected {
  outline: calc(2px * var(--inverse-scale, 1)) solid #7063ed;
  outline-offset: calc(-0.75px * var(--inverse-scale, 1));
  border: none;
  padding: 0;
}
.canvas-preview.multi-selected {
  outline: calc(2px * var(--inverse-scale, 1)) solid #7063ed;
  outline-offset: calc(-0.75px * var(--inverse-scale, 1));
}
.canvas-marquee {
  position: fixed;
  border: 1px solid rgba(24, 160, 251, 0.85);
  background: #18a0fb24;
  pointer-events: none;
  z-index: 1200;
  display: none;
}
.canvas-marquee.active {
  display: block;
}
.canvas-smart-guide {
  position: absolute;
  pointer-events: none;
  z-index: 1240;
  display: none;
  background: #a259ff;
  box-shadow: 0 0 0 1px #a259ff26;
}
.canvas-smart-guide.vertical {
  width: 1px;
}
.canvas-smart-guide.horizontal {
  height: 1px;
}
.canvas-smart-guide.active {
  display: block;
}
.canvas-smart-guide.spacing {
  background: #a259ff;
  box-shadow: 0 0 0 1px #a259ff26;
}
.canvas-smart-guide-distance-label {
  position: absolute;
  display: none;
  pointer-events: none;
  z-index: 1245;
  background: #a259ff;
  color: var(--text-white);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  transform: translate(-50%, -100%);
  white-space: nowrap;
}
.canvas-smart-guide-distance-label.vertical {
  transform: translateY(-50%);
}
.canvas-smart-guide-distance-label.active {
  display: block;
}
.canvas-spacing-guides-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 1242;
}
.canvas-group-selection {
  position: absolute;
  outline: 2px solid #7063ed;
  outline-offset: -0.75px;
  border: none;
  pointer-events: none;
  z-index: 1250;
  display: none;
  box-sizing: border-box;
}
.canvas-group-selection.active {
  display: block;
}
.group-align-toolbar {
  position: absolute;
  transform: translateY(-50%);
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 8px;
  border: 1px solid #d7dbf1;
  background: var(--bg-sidebar);
  box-shadow: 0 6px 16px #0f172a29;
  z-index: 1300;
}
.group-align-toolbar.active {
  display: flex;
}
.group-align-btn {
  width: 30px;
  height: 28px;
  border: 1px solid #d7dbf1;
  background: #f8f9ff;
  color: #7063ed;
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border-radius: 6px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.group-align-btn:hover {
  background: #ecebff;
}
.group-align-icon {
  line-height: 1;
  transform: translateY(-0.5px);
}
.group-selection-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: var(--bg-sidebar);
  border: 1.5px solid #7063ed;
  border-radius: 2px;
  box-shadow: 0 1px 3px #00000026;
}
.group-selection-handle.tl {
  top: -4.5px;
  left: -4.5px;
}
.group-selection-handle.tr {
  top: -4.5px;
  right: -4.5px;
}
.group-selection-handle.bl {
  bottom: -4.5px;
  left: -4.5px;
}
.group-selection-handle.br {
  bottom: -4.5px;
  right: -4.5px;
}
.group-selection-edge {
  position: absolute;
  pointer-events: auto;
  background: transparent;
}
.group-selection-edge.t,
.group-selection-edge.b {
  left: 6px;
  width: calc(100% - 12px);
  height: 10px;
  cursor: ns-resize !important;
}
.group-selection-edge.t {
  top: -5px;
}
.group-selection-edge.b {
  bottom: -5px;
}
.group-selection-dimension-label {
  position: absolute;
  bottom: -42px;
  left: 50%;
  transform: translate(-50%);
  background: #7063ed;
  color: var(--text-white);
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.2;
  box-shadow: 0 2px 8px #7063ed52;
}
.artboard-label-top-left,
.artboard-label-top-right,
.selection-handle,
.selection-edge,
.artboard-dimension-label {
  display: none;
  position: absolute;
  pointer-events: none;
  z-index: 100;
}
.canvas-preview.visible .artboard-label-top-left {
  display: block;
  color: var(--text-secondary);
}
.canvas-preview.primary-selected .selection-handle,
.canvas-preview.primary-selected .selection-edge,
.canvas-preview.primary-selected .artboard-label-top-left,
.canvas-preview.primary-selected .artboard-label-top-right,
.canvas-preview.primary-selected .artboard-dimension-label {
  display: block;
}
.canvas-preview.primary-selected .artboard-label-top-left {
  color: #7063ed;
  border-color: #7063ed47;
}
#canvasViewport.group-selection-active .canvas-preview .selection-handle,
#canvasViewport.group-selection-active .canvas-preview .selection-edge,
#canvasViewport.group-selection-active
  .canvas-preview
  .artboard-label-top-right,
#canvasViewport.group-selection-active
  .canvas-preview
  .artboard-dimension-label {
  display: none !important;
}
#canvasViewport.group-selection-active
  .canvas-preview
  .artboard-label-top-left {
  display: block !important;
}
#canvasViewport.group-selection-active
  .canvas-preview.selected
  .artboard-label-top-left,
#canvasViewport.group-selection-active
  .canvas-preview.multi-selected
  .artboard-label-top-left,
#canvasViewport.group-selection-active
  .canvas-preview.primary-selected
  .artboard-label-top-left {
  color: #7063ed !important;
  border-color: #7063ed3d !important;
}
#canvasViewport.group-selection-active .canvas-preview.selected,
#canvasViewport.group-selection-active .canvas-preview.multi-selected,
#canvasViewport.group-selection-active .canvas-preview.primary-selected {
  outline: none !important;
}
.artboard-label-top-left {
  top: calc(-22px * var(--inverse-scale, 1));
  left: 0;
  color: #7063ed;
  font-family: Inter, sans-serif;
  font-size: calc(12px * var(--inverse-scale, 1));
  font-weight: 500;
  line-height: 1.25;
  transform-origin: left bottom;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
}
.artboard-label-top-right {
  top: calc(-22px * var(--inverse-scale, 1));
  right: 0;
  color: #7063ed;
  font-family: Inter, sans-serif;
  font-size: calc(12px * var(--inverse-scale, 1));
  font-weight: 500;
  transform-origin: right bottom;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.selection-handle {
  width: calc(9px * var(--inverse-scale, 1));
  height: calc(9px * var(--inverse-scale, 1));
  background: var(--bg-sidebar);
  border: calc(1.5px * var(--inverse-scale, 1)) solid #7063ed;
  border-radius: calc(2px * var(--inverse-scale, 1));
  box-shadow: 0 calc(1px * var(--inverse-scale, 1))
    calc(3px * var(--inverse-scale, 1)) #00000026;
  pointer-events: auto;
}
.selection-handle.tl {
  top: calc(-4.5px * var(--inverse-scale, 1));
  left: calc(-4.5px * var(--inverse-scale, 1));
  cursor: nwse-resize !important;
}
.selection-handle.tr {
  top: calc(-4.5px * var(--inverse-scale, 1));
  right: calc(-4.5px * var(--inverse-scale, 1));
  cursor: nesw-resize !important;
}
.selection-handle.bl {
  bottom: calc(-4.5px * var(--inverse-scale, 1));
  left: calc(-4.5px * var(--inverse-scale, 1));
  cursor: nesw-resize !important;
}
.selection-handle.br {
  bottom: calc(-4.5px * var(--inverse-scale, 1));
  right: calc(-4.5px * var(--inverse-scale, 1));
  cursor: nwse-resize !important;
}
.selection-edge {
  pointer-events: auto;
  background: transparent;
}
.selection-edge.t,
.selection-edge.b {
  left: calc(6px * var(--inverse-scale, 1));
  width: calc(100% - (12px * var(--inverse-scale, 1)));
  height: calc(10px * var(--inverse-scale, 1));
}
.selection-edge.l,
.selection-edge.r {
  top: calc(6px * var(--inverse-scale, 1));
  height: calc(100% - (12px * var(--inverse-scale, 1)));
  width: calc(10px * var(--inverse-scale, 1));
}
.selection-edge.t {
  top: calc(-5px * var(--inverse-scale, 1));
  cursor: ns-resize !important;
}
.selection-edge.b {
  bottom: calc(-5px * var(--inverse-scale, 1));
  cursor: ns-resize !important;
}
.selection-edge.l {
  left: calc(-5px * var(--inverse-scale, 1));
  cursor: ew-resize !important;
}
.selection-edge.r {
  right: calc(-5px * var(--inverse-scale, 1));
  cursor: ew-resize !important;
}
.artboard-dimension-label {
  bottom: calc(-42px * var(--inverse-scale, 1));
  left: 50%;
  transform: translate(-50%);
  background: #7063ed;
  color: var(--text-white);
  font-family: Inter, sans-serif;
  font-size: calc(12px * var(--inverse-scale, 1));
  font-weight: 500;
  padding: calc(3px * var(--inverse-scale, 1))
    calc(10px * var(--inverse-scale, 1));
  border-radius: calc(4px * var(--inverse-scale, 1));
  white-space: nowrap;
  pointer-events: auto;
  cursor: text;
}
.artboard-dimension-label.editing {
  outline: calc(1px * var(--inverse-scale, 1)) solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 calc(2px * var(--inverse-scale, 1)) #7063ed59;
}
.canvas-toolbar {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%) translateY(-12px) scale(0.985);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  padding: 8px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 12px 28px #0f172a0a;
  z-index: 4000;
  height: 50px;
  min-width: 380px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.42s;
}
body.app-sync-ready .canvas-toolbar.icons-ready {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%) translateY(0) scale(1);
  transition-delay: 0ms, 0ms, 0ms;
}
body.app-sync-complete .canvas-toolbar {
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  .app-container,
  .sidebar-left,
  .sidebar-right,
  #canvasViewport,
  .canvas-toolbar,
  .canvas-preview.visible,
  main:before,
  .app-sync-overlay,
  .app-sync-overlay:after {
    animation: none !important;
    transition: none !important;
  }
}
.toolbar-sync-spinner {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid rgba(84, 72, 199, 0.24);
  border-top-color: #5448c7;
  animation: toolbarSyncSpin 0.7s linear infinite;
}
@keyframes toolbarSyncSpin {
  to {
    transform: rotate(360deg);
  }
}
.figma-tool-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: var(--bg-sidebar);
  color: #000c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.figma-tool-btn img {
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.8;
}
.figma-tool-btn .figma-tool-icon-svg {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  display: block;
}
.figma-tool-btn .figma-redo-icon {
  width: 16px;
  height: 16px;
  opacity: 0.8;
  transform: none;
}
.figma-tool-btn.figma-redo-btn {
  margin-left: 2px;
}
.figma-tool-btn:hover,
.figma-arrow-btn:hover,
.figma-toggle-btn:hover {
  background: #0000000d;
}
.figma-select-mode-btn:hover {
  background: var(--bg-sidebar);
}
.figma-tool-btn-primary {
  background: #0000000d;
}
.figma-tools-cluster {
  display: flex;
  align-items: center;
  gap: 4px;
}
.right-padding {
  margin-right: 80px;
}
.figma-divider {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #0000000d;
}
.figma-select-group {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 32px;
}
.figma-select-wrap {
  position: static;
}
.figma-align-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: 216px;
  background: var(--bg-sidebar);
  border-radius: 16px;
  box-shadow: 0 4px 24px #00000014;
  padding: 8px;
  display: none;
  flex-direction: column;
  z-index: 1700;
  overflow: hidden;
}
.figma-align-menu.open {
  display: flex;
}
.figma-align-menu-item {
  width: 100%;
  border: none;
  background: var(--bg-sidebar);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 12.65px;
  color: #000000ed;
  text-align: left;
}
.figma-align-menu-item:hover {
  background:
    linear-gradient(90deg, #5448c70f, #5448c70f),
    linear-gradient(90deg, var(--bg-sidebar), var(--bg-sidebar));
  color: #5448c7;
}
.figma-align-menu-item img {
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.8;
}
.figma-align-menu-item:hover img {
  opacity: 0.95;
  filter: brightness(0) saturate(100%) invert(35%) sepia(57%) saturate(1160%)
    hue-rotate(214deg) brightness(91%) contrast(94%);
}
.figma-add-menu .figma-align-menu-item img {
  filter: brightness(0) saturate(100%);
  opacity: 0.8;
}
.figma-add-menu .figma-align-menu-item .figma-add-redo-icon {
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.8;
  transform: none;
}
.figma-add-menu .figma-align-menu-item:hover img,
.figma-add-menu .figma-align-menu-item:hover .figma-add-redo-icon {
  opacity: 0.95;
  filter: brightness(0) saturate(100%) invert(35%) sepia(57%) saturate(1160%)
    hue-rotate(214deg) brightness(91%) contrast(94%);
}
.figma-align-icon-top,
.figma-align-icon-left,
.figma-align-icon-right {
  transform: none;
}
.figma-arrow-btn {
  width: 16px;
  height: 32px;
  border: none;
  background: var(--bg-sidebar);
  border-radius: 4px;
  color: #000c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.12s ease;
}
.figma-arrow-btn img {
  width: 16px;
  height: 16px;
  display: block;
  opacity: 0.8;
}
.figma-arrow-btn[aria-expanded="true"] {
  background: #0000000d;
}
.figma-toggle {
  width: 66px;
  height: 32px;
  border-radius: 8px;
  background: #0000000d;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.figma-toggle-btn {
  border: none;
  background: transparent;
  color: #000c;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition: background 0.12s ease;
}
.figma-toggle-btn:hover {
  background: transparent;
}
.figma-toggle-btn img {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) saturate(100%);
}
.figma-toggle-btn.active {
  background: #5747cf;
  color: var(--text-white);
}
.figma-toggle-btn.active:hover {
  background: #5747cf;
}
.figma-toggle-btn.active img {
  filter: brightness(0) invert(1);
}
.figma-zoom-pill {
  height: 32px;
  padding: 0 8px;
  border-radius: 8px;
  background: #0000000d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zoom-value {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000000ed;
  line-height: 1;
  white-space: nowrap;
  min-width: 36px;
  text-align: center;
  outline: none;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: text;
}
.zoom-value:hover,
.zoom-value:focus {
  background: transparent;
}
.toolbar-compat-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.project-name-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
#summarySection {
  padding: 20px 20px 16px;
  border-bottom: none;
  transition: opacity 0.12s ease;
}
#summarySection.summary-inactive {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#summarySection .section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-main);
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 16px;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.stat-card {
  background: #f8fafc;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 90px;
}
.stat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 32px;
}
#previewFrame {
  width: 1440px;
  height: 3000px;
  border: none;
  pointer-events: none;
}
.sidebar-action-area {
  position: sticky;
  bottom: 0;
  z-index: 30;
  padding: 20px;
  margin-top: auto;
  background: var(--bg-sidebar);
  border-top: 1px solid #f1f5f9;
  transform: translateZ(0);
  will-change: transform;
  contain: paint;
}
.btn-primary {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(170.2deg, #4647d3, #9396ff);
  border: none;
  border-radius: 8px;
  color: var(--text-white);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 1px 2px #0000000d;
  transition:
    background 0.2s,
    box-shadow 0.2s,
    transform 0.2s,
    opacity 0.2s;
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-primary.ready {
  background: var(--text-main);
  padding: 12px 16px;
  font-weight: 500;
  box-shadow:
    0 10px 15px #0f172a1f,
    0 4px 6px #0f172a1f;
}
.btn-primary img {
  flex-shrink: 0;
}
.btn-copy {
  background: var(--text-main);
  padding: 14px;
  font-weight: 600;
  box-shadow:
    0 10px 15px #0f172a1f,
    0 4px 6px #0f172a1f;
}
.btn-copy:disabled {
  background: var(--text-main);
  opacity: 0.8;
}
.status-slate {
  color: var(--text-secondary);
  font-size: 12px;
  margin-bottom: 8px;
}
.status-emerald {
  color: #10b981;
  font-size: 12px;
  margin-bottom: 8px;
}
.status-amber {
  color: #f59e0b;
  font-size: 12px;
  margin-bottom: 8px;
}
.command-palette-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 11000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 84px 20px 20px;
  background: #0f172a38;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.command-palette {
  width: min(760px, 100%);
  max-height: min(72vh, 640px);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  box-shadow:
    0 26px 54px #0f172a2e,
    0 2px 8px #0f172a14;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.command-palette-header {
  padding: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.command-palette-input {
  width: 100%;
  border: 1px solid #dbe3ed;
  border-radius: 10px;
  height: 44px;
  padding: 0 14px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  background: var(--bg-sidebar);
  outline: none;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}
.command-palette-input::placeholder {
  color: var(--text-muted);
}
.command-palette-input:focus {
  border-color: #4647d373;
  box-shadow: 0 0 0 3px #4647d324;
}
.command-palette-list {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.command-palette-item {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--bg-sidebar);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.16s ease,
    background 0.16s ease;
}
.command-palette-item:hover,
.command-palette-item.is-active {
  border-color: #4647d32e;
  background: linear-gradient(170.2deg, #4647d312, #9396ff12);
}
.command-palette-item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.command-palette-item-title {
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.command-palette-item-subtitle {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.command-palette-item-type {
  flex-shrink: 0;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #5c4ae4;
  background: #5c4ae41a;
  border: 1px solid rgba(92, 74, 228, 0.18);
  border-radius: 999px;
  padding: 3px 8px;
}
.command-palette-empty {
  padding: 12px 16px 16px;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-secondary);
}
.command-palette-footer {
  border-top: 1px solid #f1f5f9;
  padding: 10px 14px;
  font-family: Inter, sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
}
.toast-notification {
  position: fixed;
  top: 24px;
  right: 24px;
  background: #ffffffe6;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 16px;
  padding: 16px;
  width: 340px;
  box-shadow:
    0 20px 25px -5px #0000001a,
    0 8px 10px -6px #0000001a;
  z-index: 10000;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.toast-notification.hidden {
  transform: translate(100%, -20px) scale(0.8);
  opacity: 0;
  pointer-events: none;
}
.toast-content {
  display: flex;
  align-items: center;
  gap: 12px;
}
.toast-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-gradient);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px #4647d34d;
}
.toast-text-group {
  flex: 1;
}
.toast-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 2px;
}
.toast-message {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}
.toast-close {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toast-close:hover {
  background: #0f172a0d;
  color: #475569;
}
.toast-progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--primary-gradient);
  width: 100%;
  transform-origin: left;
}
@keyframes toast-progress {
  0% {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
.toast-active .toast-progress-bar {
  animation: toast-progress 5s linear forwards;
}
.browse-menu-wrapper {
  position: relative;
  z-index: 100;
}
#dropzoneWrapper.multi-upload-mode .browse-menu-wrapper {
  width: 100%;
}
#dropzoneWrapper.multi-upload-mode .browse-menu-wrapper .btn-dropdown {
  left: 0;
  transform: translate(0);
  width: 100%;
  min-width: 0;
}
#dropzoneWrapper.multi-upload-mode .browse-menu-wrapper .btn-dropdown.hidden {
  transform: translateY(-10px);
}
.btn-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%);
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow:
    0 8px 24px #0000001f,
    0 2px 4px #0000000a;
  min-width: 180px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  visibility: visible;
  opacity: 1;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-dropdown.hidden {
  visibility: hidden;
  opacity: 0;
  transform: translate(-50%) translateY(-10px);
  pointer-events: none;
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}
.dropdown-item img {
  transition: filter 0.2s;
  flex-shrink: 0;
}
.dropdown-item:hover {
  background: #f5f3ff;
  color: #5c4ae4;
}
#urlBetaAuthBtn:hover:not(:disabled) {
  color: #969696;
  background: transparent;
}
.dropdown-item:hover img {
  filter: invert(32%) sepia(93%) saturate(3695%) hue-rotate(238deg)
    brightness(92%) contrast(95%);
}
.styles-props-panel {
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  height: 100%;
  border-left: 1px solid var(--border-color);
}
.styles-props-section {
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
}
.styles-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.style-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.color-preview {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  padding: 7px;
  display: flex;
  align-items: flex-end;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.color-hex {
  font-size: 9px;
  color: #fffc;
  font-family:
    Liberation Mono,
    monospace;
  line-height: 13.5px;
}
.style-info {
  width: 100%;
}
.style-label {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 15px;
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.typography-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.typography-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 10px 12px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--bg-sidebar), #fbfdff);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.typography-item.last {
  margin-bottom: 0;
}
.typography-header {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  line-height: normal;
}
.type-tag {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 2px 7px;
}
.type-meta {
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: right;
  white-space: nowrap;
}
.type-preview {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-main);
  line-height: 1.4;
  min-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spacing-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.spacing-row {
  display: grid;
  grid-template-columns: minmax(24px, 120px) auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: var(--bg-sidebar);
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.spacing-bar {
  height: 12px;
  background: linear-gradient(90deg, #ec5b1338, #ec5b1361);
  border-radius: 999px;
  flex-shrink: 0;
}
.spacing-label {
  font-size: 10px;
  font-weight: 600;
  color: #334155;
  line-height: 15px;
  white-space: nowrap;
}
.radius-grid {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: nowrap;
}
.radius-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.radius-box {
  width: 32px;
  height: 32px;
  border: 2px solid var(--border-color);
}
.radius-label {
  font-size: 10px;
  color: var(--text-main);
  text-align: center;
}
.styles-props-panel .btn-primary.btn-copy {
  padding: 12px 16px;
}
.empty-msg {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  padding: 20px 0;
}
.sp-search-bar {
  padding: 10px;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  background: var(--bg-sidebar);
  z-index: 5;
}
.sp-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.sp-search-icon {
  position: absolute;
  left: 10px;
  pointer-events: none;
  flex-shrink: 0;
}
.sp-search-input {
  width: 100%;
  height: 38px;
  padding: 8px 64px 8px 32px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 12px;
  font-family: Inter, sans-serif;
  color: var(--text-main);
  background: #f8fafc;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.sp-search-input:focus {
  border-color: #5c4ae4;
  box-shadow: 0 0 0 3px #5c4ae41a;
  background: var(--bg-sidebar);
}
.sp-search-input::placeholder {
  color: var(--text-muted);
}
.sp-search-clear {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  border-radius: 4px;
  transition:
    color 0.15s,
    background 0.15s;
}
.sp-search-clear:hover {
  color: var(--text-main);
  background: #f1f5f9;
}
.sp-filter-icon-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-sidebar);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
}
.sp-filter-icon-btn:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #334155;
}
.sp-filter-icon-btn.is-active {
  color: #5c4ae4;
  border-color: #5c4ae452;
  background: #5c4ae414;
}
.sp-search-input-wrap .sp-filter-menu.btn-dropdown {
  left: auto;
  right: 0;
  transform: none;
  min-width: 170px;
  top: calc(100% + 8px);
  z-index: 20;
}
.sp-search-input-wrap .sp-filter-menu.btn-dropdown.hidden {
  transform: translateY(-10px);
}
.sp-filter-menu-item {
  width: 100%;
  border: none;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-filter-menu-item.active {
  background: #f5f3ff;
  color: #5c4ae4;
}
.sp-pill-count {
  font-size: 9px;
  font-weight: 700;
  opacity: 1;
  background: var(--border-color);
  color: #334155;
  border: none;
  border-radius: 4px;
  padding: 0 4px;
  min-width: 15px;
  text-align: center;
  line-height: 14px;
}
.sp-filter-menu-item.active .sp-pill-count {
  background: #5c4ae424;
  color: #5c4ae4;
}
.sp-sections-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
  scrollbar-gutter: stable both-edges;
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.sp-sections-wrap::-webkit-scrollbar {
  width: 4px;
}
.sp-sections-wrap::-webkit-scrollbar-track {
  background: transparent;
}
.sp-sections-wrap::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 2px;
}
.sp-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  padding: 2px 0;
  border-radius: 4px;
  transition: background 0.15s;
}
.sp-section-title {
  margin-bottom: 0 !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sp-count-badge {
  font-family: Inter, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 10px;
  height: auto;
  font-weight: 600;
  color: #5c4ae4ce;
  background: #5c4ae412;
  padding: 2px 8px;
  border-radius: 10px;
}
.sp-chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.sp-chevron.collapsed {
  transform: rotate(-90deg);
}
.sp-section-body {
  margin-top: 16px;
  max-height: none;
  overflow: visible;
  transition:
    opacity 0.25s ease,
    margin 0.25s ease;
  opacity: 1;
}
.sp-section-body.sp-collapsed {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
}
.sp-style-item {
  position: relative;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
  border-radius: 8px;
}
.sp-style-item:hover {
  background: #f8fafc;
}
.sp-style-item:focus {
  outline: none;
}
.sp-style-item:focus-visible {
  background: #5c4ae40f;
  box-shadow: inset 0 0 0 1.5px #5c4ae433;
}
.typography-item.sp-style-item:hover {
  background: #f8fafc;
  border-color: #d8e1ee;
  box-shadow: 0 2px 8px #0f172a0a;
}
.typography-item.sp-style-item.sp-selected {
  background: linear-gradient(180deg, var(--bg-sidebar), #fbfdff);
  border-color: #edf2f7;
  box-shadow: none;
}
.sp-style-item.sp-selected {
  background: #5c4ae40f;
  box-shadow: inset 0 0 0 1.5px #5c4ae433;
}
.sp-style-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s;
  position: absolute;
  right: 4px;
  top: 4px;
}
.sp-style-item:hover .sp-style-actions {
  opacity: 1;
}
.sp-font-actions {
  position: relative;
  opacity: 1;
  top: auto;
  right: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
  padding-top: 6px;
  border-top: 1px dashed #edf2f7;
}
.sp-font-detail {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-action-btn {
  width: 22px;
  height: 22px;
  border: 1px solid var(--border-color);
  background: var(--bg-sidebar);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.sp-action-btn:hover {
  border-color: #5c4ae4;
  color: #5c4ae4;
  background: #5c4ae40f;
}
.sp-action-btn.sp-applied {
  border-color: #059669;
  color: #059669;
  background: #05966914;
  transform: scale(1.1);
}
.sp-action-small {
  width: 20px;
  height: 20px;
}
.sp-inline-edit {
  width: 100%;
  font-size: 10px;
  font-weight: 500;
  font-family: Inter, sans-serif;
  color: var(--text-main);
  border: 1px solid #5c4ae4;
  border-radius: 4px;
  padding: 2px 4px;
  outline: none;
  background: var(--bg-sidebar);
  box-shadow: 0 0 0 3px #5c4ae41a;
}
.sp-editable {
  cursor: text;
  border-radius: 3px;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: background 0.15s;
}
.sp-editable:hover {
  background: #f1f5f9;
}
.sp-empty-state {
  padding: 40px 20px;
  text-align: center;
}
.sp-sub-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  padding: 2px 0;
}
.sp-border-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-border-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: var(--bg-sidebar);
  position: relative;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.sp-border-item:hover {
  background: #f8fafc;
  border-color: #d8e1ee;
  box-shadow: 0 2px 8px #0f172a0a;
}
.sp-border-item.sp-selected {
  background: #5c4ae40f;
  border-color: #5c4ae43d;
  box-shadow: inset 0 0 0 1px #5c4ae429;
}
.sp-border-item:focus-visible,
.sp-shadow-item:focus-visible,
.radius-item:focus-visible,
.spacing-row:focus-visible,
.typography-item:focus-visible {
  border-color: #5c4ae43d;
}
.sp-border-preview {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  box-shadow: inset 0 0 0 1px #f1f5f9;
}
.sp-border-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-border-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-border-value {
  font-size: 9px;
  color: var(--text-secondary);
  font-family:
    Liberation Mono,
    monospace;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-border-item .sp-action-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s;
}
.sp-border-item:hover .sp-action-btn {
  opacity: 1;
}
.radius-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sp-shadow-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sp-shadow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #edf2f7;
  border-radius: 10px;
  background: var(--bg-sidebar);
  position: relative;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    background 0.15s;
}
.sp-shadow-item:hover {
  background: #f8fafc;
  border-color: #d8e1ee;
  box-shadow: 0 2px 8px #0f172a0a;
}
.sp-shadow-item.sp-selected {
  background: #5c4ae40f;
  border-color: #5c4ae43d;
  box-shadow: inset 0 0 0 1px #5c4ae429;
}
.sp-shadow-preview {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--bg-sidebar);
  flex-shrink: 0;
  border: 1px solid #f1f5f9;
  box-shadow: inset 0 0 0 1px #f8fafc;
}
.sp-shadow-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sp-shadow-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-main);
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sp-shadow-value {
  font-size: 9px;
  color: var(--text-secondary);
  font-family:
    Liberation Mono,
    monospace;
  line-height: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.sp-shadow-item .sp-action-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s;
}
.sp-shadow-item:hover .sp-action-btn {
  opacity: 1;
}
.sp-spacing-name {
  font-size: 10px;
  color: var(--text-secondary);
  margin-left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.spacing-list.is-dense {
  gap: 12px;
}
.spacing-list.is-dense .spacing-row {
  gap: 8px;
  padding: 6px 8px;
}
.spacing-list.is-dense .spacing-label,
.spacing-list.is-dense .sp-spacing-name {
  font-size: 9px;
}
.spacing-list.is-dense .spacing-bar {
  height: 10px;
}
.spacing-row {
  position: relative;
  cursor: default;
}
.spacing-row:hover {
  background: #f8fafc;
  border-color: #d8e1ee;
  box-shadow: 0 2px 8px #0f172a0a;
}
.spacing-row.sp-selected {
  background: var(--bg-sidebar);
  border-color: #edf2f7;
  box-shadow: none;
}
.spacing-row .sp-action-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.spacing-row:hover .sp-action-btn {
  opacity: 1;
}
@media (hover: none), (pointer: coarse) {
  .spacing-row .sp-action-btn {
    opacity: 1;
  }
}
.radius-item {
  cursor: pointer;
  transition:
    background 0.15s,
    box-shadow 0.15s,
    border-color 0.15s;
  padding: 8px 6px;
  border-radius: 10px;
  border: 1px solid #edf2f7;
  background: var(--bg-sidebar);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.radius-item:hover {
  background: #f8fafc;
  border-color: #d8e1ee;
  box-shadow: 0 2px 8px #0f172a0a;
}
.radius-item.sp-selected {
  background: #5c4ae40f;
  border-color: #5c4ae43d;
  box-shadow: inset 0 0 0 1px #5c4ae429;
}
.radius-box {
  width: 30px;
  height: 30px;
  border: 1.5px solid #dbe2ea;
  background: linear-gradient(180deg, var(--bg-sidebar), #f8fafc);
}
.radius-label {
  font-size: 9px;
  font-weight: 600;
  line-height: 12px;
  color: #334155;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.radius-meta {
  font-size: 9px;
  line-height: 12px;
  color: var(--text-secondary);
}
@media (max-width: 420px) {
  .radius-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.style-card {
  position: relative;
}
.styles-grid .style-card.sp-style-item:hover,
.styles-grid .style-card.sp-style-item.sp-selected {
  background: transparent;
  box-shadow: none;
}
.style-card .sp-style-actions {
  top: 4px;
  right: 4px;
}
.hidden {
  display: none !important;
}
.storage-onboarding-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ffffff1a !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  font-family: Inter, sans-serif;
  padding: 20px;
}
.storage-onboarding-overlay.hidden {
  display: none !important;
}
.storage-card {
  background: var(--bg-sidebar, var(--bg-sidebar));
  border: 1px solid var(--border-color, var(--border-color));
  border-radius: 32px;
  box-shadow:
    0 24px 56px -12px #0f172a38,
    0 8px 16px -6px #0f172a14;
  width: min(900px, 100%);
  padding: 2px;
  display: flex;
  gap: 2px;
}
.storage-pane {
  border-radius: 28px;
  display: flex;
  flex-direction: column;
}
.storage-card-compact {
  width: min(680px, 96%);
  padding: 16px;
  border-radius: 22px;
  box-shadow:
    0 14px 34px -16px #0f172a33,
    0 6px 14px -10px #0f172a14;
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 12px;
}
.storage-card-compact .storage-pane-compact {
  width: 100%;
  padding: 20px;
  border-radius: 16px;
  height: 100%;
}
.storage-card-compact .storage-pane-info {
  order: 1;
  background: linear-gradient(180deg, #5c4ae40d, #5c4ae400);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.storage-card-compact .storage-pane-recents {
  order: 2;
  background: var(--bg-sidebar);
}
.storage-card-compact .storage-card-toprow {
  margin-bottom: 8px;
}
.storage-card-compact .storage-card-header {
  margin-bottom: 6px;
}
.storage-card-compact .storage-divider {
  margin-bottom: 8px;
}
.storage-card-compact .storage-features {
  margin: 0 0 32px;
  gap: 6px;
}
.storage-card-compact .storage-warning {
  margin-bottom: 80px;
}
.storage-card-compact .storage-actions {
  flex-direction: column;
  gap: 12px;
}
.storage-card-compact .storage-actions .storage-btn-primary,
.storage-card-compact .storage-actions .storage-btn-danger,
.storage-card-compact .storage-actions .storage-btn-ghost {
  width: 100%;
}
.storage-card-compact .storage-recents-header {
  margin-bottom: 16px;
}
.storage-card-compact .storage-recents-list {
  flex: 1;
  min-height: 0;
  max-height: none;
}
.storage-card-compact .storage-recents-empty {
  height: 100%;
}
.storage-pane-info {
  background: linear-gradient(180deg, #5c4ae412, #5c4ae408);
  padding: 40px;
  width: 420px;
}
.storage-pane-recents {
  background: linear-gradient(180deg, #fffffff5, #ffffffe0);
  padding: 40px;
  flex: 1;
  min-width: 0;
  border-radius: 28px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
@media (max-width: 980px) {
  .storage-card {
    flex-direction: column;
  }
  .storage-pane-info,
  .storage-pane-recents {
    width: 100%;
  }
}
.storage-card-toprow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.storage-icon {
  width: 56px;
  height: 56px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.storage-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.storage-icon--danger {
  background: #ef4444;
  box-shadow: 0 4px 18px #ef444447;
}
.storage-close-btn {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-color, var(--border-color));
  background: transparent;
  color: var(--text-muted, var(--text-muted));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.storage-close-btn:hover {
  background: var(--border-color-light, #f1f5f9);
  color: var(--text-main, var(--text-main));
  border-color: var(--text-muted, var(--text-muted));
}
.storage-card-title {
  font-family:
    Manrope,
    Public Sans,
    sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-main, var(--text-main));
  letter-spacing: -0.04em;
  line-height: 36px;
  margin: 0 0 8px;
}
.storage-card-desc {
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: var(--text-secondary, var(--text-secondary));
  line-height: 24px;
  font-weight: 400;
  margin: 0;
}
.storage-divider {
  width: 100%;
  height: 1px;
  background: var(--border-color-light, #f1f5f9);
  margin-bottom: 20px;
}
.storage-features {
  list-style: none;
  margin: 0 0 80px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: none;
  background: transparent;
}
.storage-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  color: #191c1e;
}
.storage-feature-check {
  width: 20px;
  height: 20px;
  min-width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.storage-feature-check img {
  width: 100%;
  height: 100%;
  display: block;
}
.storage-feature-text {
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  color: #191c1e;
}
.storage-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #ef44440d;
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  margin-bottom: 140px;
  color: #dc2626;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.55;
}
.storage-warning-icon {
  flex-shrink: 0;
  margin-top: 1px;
}
.storage-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}
.storage-btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(170deg, #5448c7, #8a7bff);
  color: var(--text-white, var(--text-white));
  border: none;
  border-radius: 100px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 6px 20px #5448c733;
  transition:
    box-shadow 0.2s ease,
    transform 0.15s ease;
}
.storage-btn-primary:hover {
  background: linear-gradient(170deg, #5c4ae4, #9f95ff);
  box-shadow: 0 12px 26px #5448c742;
  transform: translateY(-1px);
}
.storage-btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px #4647d340;
}
.storage-btn-primary img {
  width: 20px;
  height: 20px;
}
.storage-btn-ghost {
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  color: #6f6b80;
  border: 1px solid rgba(120, 113, 142, 0.2);
  border-radius: 100px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.storage-btn-ghost:hover {
  color: var(--text-secondary, var(--text-secondary));
  border-color: #78718e80;
}
.storage-recents-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.storage-recents-title {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #787585;
  letter-spacing: -0.4px;
  text-transform: capitalize;
}
.storage-recents-count {
  font-family: Inter, sans-serif;
  font-size: 12px;
  color: #474554;
  text-align: right;
}
.storage-recents-empty {
  border: 1px dashed rgba(120, 113, 142, 0.3);
  border-radius: 16px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  max-width: 420px;
  color: #8b8aa0;
  font-family: Inter, sans-serif;
  font-size: 13px;
}
.storage-recents-empty.hidden {
  display: none;
}
.storage-recents-empty-btn {
  transition: filter 0.2s ease;
  filter: grayscale(100%) brightness(1);
  background: #5c4ae414;
  color: #5c4ae4;
  border: none;
  border-radius: 100px;
  padding: 10px 18px;
  font-weight: 600;
  font-family: Inter, sans-serif;
  font-size: 13px;
  letter-spacing: -0.01em;
  cursor: pointer;
}
.storage-recents-empty-btn:hover {
  background: #5c4ae41f;
}
.storage-recents-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 418px;
  overflow-y: auto;
}
.storage-recent-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 1px solid rgba(120, 113, 142, 0.1);
  border-radius: 16px;
  padding: 17px 21px 17px 17px;
  background: var(--bg-sidebar);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  position: relative;
  z-index: 0;
}
.storage-recent-card:hover,
.storage-recent-card:focus-visible {
  border-color: #78718e18;
  background-image:
    linear-gradient(90deg, #5c4ae40a, #5c4ae40a),
    linear-gradient(90deg, var(--bg-sidebar), var(--bg-sidebar));
  box-shadow: none;
  outline: none;
  z-index: 1;
}
.storage-recent-icon {
  width: 40px;
  height: 40px;
  border-radius: 100px;
  background: #f5f5f5;
  border: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}
.storage-recent-card:hover .storage-recent-icon,
.storage-recent-card:focus-visible .storage-recent-icon {
  background: var(--bg-sidebar);
  border-color: #f1f5f9;
}
.storage-recent-icon img {
  width: 20px;
  height: 20px;
}
.storage-recent-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.storage-recent-name {
  display: block;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #191c1e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-recent-meta {
  display: block;
  width: 100%;
  font-family: Inter, sans-serif;
  font-size: 10px;
  line-height: 15px;
  color: #00000089;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.storage-recent-delete {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.storage-recent-card:hover .storage-recent-delete,
.storage-recent-card:focus-visible .storage-recent-delete {
  opacity: 1;
  pointer-events: auto;
}
.storage-recent-delete img {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) saturate(100%) invert(63%) sepia(7%) saturate(94%)
    hue-rotate(184deg) brightness(94%) contrast(88%);
  transition: filter 0.2s ease;
}
.storage-recent-delete:hover img,
.storage-recent-delete:focus-visible img {
  filter: invert(28%) sepia(82%) saturate(3784%) hue-rotate(339deg)
    brightness(90%) contrast(101%);
}
.storage-btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  background: transparent;
  filter: grayscale(100%) brightness(0.5);
  border: 1.5px solid rgba(239, 68, 68, 0.3);
  border-radius: 100px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  filter: invert(12%) sepia(25%) saturate(6624%) hue-rotate(343deg)
    brightness(93%) contrast(101%);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.storage-btn-danger:hover {
  background: #ef444407;
  border-color: #ef44445c;
  transform: translateY(-1px);
}
.storage-btn-danger:active {
  transform: translateY(0);
}
.connector-trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.2s;
}
.connector-trigger:hover {
  background: #0000000a;
}
.connector-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 320px;
  background: var(--bg-sidebar);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: 0 10px 25px #0f172a26;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.connector-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.connector-dropdown-content {
  padding: 24px;
  text-align: center;
}
.connector-dropdown h2 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  color: var(--text-main);
  font-weight: 700;
}
.connector-dropdown p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.connector-dropdown .storage-card-features {
  font-size: 12px;
  margin-bottom: 24px;
  gap: 10px;
}
#canvasOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}
body.styles-page .sidebar-left {
  width: 100%;
  max-width: 100%;
}
body.styles-page .sidebar-left .sidebar-panel,
body.styles-page .sidebar-left .sidebar-two-col {
  margin: 16px;
  width: auto;
  min-width: 0;
  max-width: none;
  height: calc(100vh - 32px);
  border-radius: 16px;
}
body.styles-page.ui-mode-standard .sidebar-left .sidebar-panel,
body.styles-page.ui-mode-standard .sidebar-left .sidebar-two-col {
  margin: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100vh;
  border-radius: 0;
}
html.ui-mode-standard-preload
  body.styles-page:not(.ui-mode-standard):not(.ui-mode-floating)
  .sidebar-left
  .sidebar-panel,
html.ui-mode-standard-preload
  body.styles-page:not(.ui-mode-standard):not(.ui-mode-floating)
  .sidebar-left
  .sidebar-two-col {
  margin: 0;
  width: auto;
  min-width: 0;
  max-width: none;
  height: 100vh;
  border-radius: 0;
}
body.styles-page .explorer-content {
  padding: 0;
  overflow: auto;
  background: var(--bg-sidebar);
}
.styles-explorer {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  color: var(--text-main);
}
.styles-explorer-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 56px;
  padding: 10px 0 10px;
  background: var(--bg-sidebar);
  position: sticky;
  top: 0;
  z-index: 2;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.styles-explorer-topbar > .explorer-title {
  min-width: 132px;
  flex: 0 0 132px;
}
.styles-explorer-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  padding: 4px 0 4px 8px;
}
.styles-explorer-toolbar::-webkit-scrollbar {
  display: none;
}
.styles-toolbar-group {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 4px;
}
.styles-toolbar-group-primary,
.styles-toolbar-group-history {
  padding: 0 12px;
}
.styles-toolbar-group-actions {
  padding-left: 8px;
  padding-right: 8px;
}
.styles-toolbar-profile-badge {
  margin-left: 12px;
  flex: 0 0 auto;
}
.styles-toolbar-icon,
.styles-toolbar-button {
  border: none;
  background: var(--bg-sidebar);
  color: var(--text-main);
  padding: 0;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.22s ease;
  box-shadow: none;
  position: relative;
}
.styles-toolbar-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex: 0 0 auto;
}
.styles-toolbar-icon:disabled,
.styles-toolbar-button:disabled {
  pointer-events: none;
}
.styles-toolbar-icon svg,
.styles-toolbar-button svg,
.styles-palette-tool svg {
  width: 18px;
  height: 18px;
  display: block;
}
.styles-toolbar-asset {
  display: block;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  pointer-events: none;
  transition:
    filter 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}
@keyframes styles-toolbar-icon-activate {
  0% {
    transform: scale(0.97);
  }
  65% {
    transform: scale(1.02);
  }
  to {
    transform: scale(1);
  }
}
@keyframes styles-toolbar-button-press {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(0.96);
  }
  68% {
    transform: scale(1.03);
  }
  to {
    transform: scale(1);
  }
}
.styles-toolbar-asset-camera {
  width: 15.3px;
  height: 13px;
}
.styles-toolbar-asset-grid,
.styles-toolbar-asset-palette {
  width: 14px;
  height: 14px;
}
.styles-toolbar-asset-adjust {
  width: 14.5px;
  height: 13px;
}
.styles-toolbar-asset-undo,
.styles-toolbar-asset-redo {
  width: 13px;
  height: 13px;
}
.styles-toolbar-asset-redo {
  transform: scaleX(-1);
}
.styles-toolbar-asset-view {
  width: 15px;
  height: 11px;
}
.styles-toolbar-export-icon {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.styles-toolbar-asset-export-base {
  position: absolute;
  top: 3.33px;
  left: 2px;
  width: 10.67px;
  height: 10.67px;
}
.styles-toolbar-asset-export-accent {
  position: absolute;
  top: 2px;
  left: 7.33px;
  width: 6.67px;
  height: 6.67px;
}
.styles-toolbar-icon:hover,
.styles-toolbar-button:hover,
.styles-palette-tool:hover {
  background: #f2f2f2;
}
.styles-toolbar-icon.is-active,
.styles-toolbar-icon[aria-pressed="true"] {
  background: #eae7ff;
  color: #7b4cff;
  animation: styles-toolbar-icon-activate 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.styles-toolbar-icon.is-active .styles-toolbar-asset,
.styles-toolbar-icon[aria-pressed="true"] .styles-toolbar-asset {
  filter: brightness(0) saturate(100%) invert(35%) sepia(92%) saturate(4091%)
    hue-rotate(241deg) brightness(102%) contrast(101%);
}
.styles-toolbar-icon:active:not(:disabled) {
  transform: scale(0.97);
}
.styles-toolbar-icon:active:not(:disabled) .styles-toolbar-asset {
  transform: scale(0.97);
}
.styles-toolbar-icon:active:not(:disabled) .styles-toolbar-asset-redo {
  transform: scaleX(-1) scale(0.97);
}
.styles-toolbar-icon.is-muted {
  opacity: 0.5;
}
.styles-toolbar-divider {
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: #0000000d;
  flex: 0 0 auto;
}
.styles-toolbar-button {
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
  transition:
    background-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}
.styles-toolbar-button:active:not(:disabled) {
  transform: scale(0.97);
}
.styles-toolbar-button-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.styles-toolbar-save-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: currentColor;
}
.styles-toolbar-button-save {
  padding-left: 13px;
  padding-right: 13px;
  transform-origin: center center;
}
.styles-toolbar-button-save.is-animating {
  animation: styles-toolbar-button-press 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.styles-toolbar-button-save.is-active {
  background: #eae7ff;
  color: #7b4cff;
  box-shadow: inset 0 0 0 1px #7b4cff14;
}
.styles-toolbar-button-save.is-active .styles-toolbar-save-icon {
  animation: styles-toolbar-icon-activate 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.styles-toolbar-button-save.is-saved {
  position: relative;
}
.styles-toolbar-button-save.is-saved:after {
  content: "";
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7b4cff;
  pointer-events: none;
}
.styles-toolbar-save-card {
  width: min(448px, calc(100vw - 32px));
  background: var(--bg-sidebar);
}
.styles-toolbar-save-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--bg-sidebar);
}
.styles-toolbar-save-description {
  margin: 0;
  font:
    400 13px/20px Inter,
    sans-serif;
  color: #5f6368;
}
.styles-toolbar-save-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.styles-toolbar-save-label {
  font:
    500 12px/16px Inter,
    sans-serif;
  color: #0a0a0a;
}
.styles-toolbar-save-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background: var(--bg-sidebar);
  box-sizing: border-box;
  font:
    400 14px/20px Inter,
    sans-serif;
  color: #0a0a0a;
  outline: none;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}
.styles-toolbar-save-input::placeholder {
  color: #8c8c8c;
}
.styles-toolbar-save-input:focus {
  border-color: #4647d36b;
  box-shadow: 0 0 0 4px #4647d31f;
}
.styles-toolbar-save-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.styles-toolbar-save-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 0;
  font:
    500 13px/1 Inter,
    sans-serif;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}
.styles-toolbar-save-action:active {
  transform: scale(0.985);
}
.styles-toolbar-save-action-secondary {
  background: #0000000f;
  color: #0a0a0a;
}
.styles-toolbar-save-action-secondary:hover,
.styles-toolbar-save-action-secondary:focus-visible {
  background: #00000017;
  outline: none;
}
.styles-toolbar-save-action-primary {
  background: #0a0a0a;
  color: var(--text-white);
  box-shadow: 0 10px 24px #0000001f;
}
.styles-toolbar-save-action-primary:hover,
.styles-toolbar-save-action-primary:focus-visible {
  background: #1c1c1c;
  outline: none;
}
.styles-toolbar-preview-popover {
  position: fixed;
  z-index: 10018;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 160px 16px 16px;
  background: #000000b3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease-out,
    visibility 0ms linear 0.22s;
}
toast-notification {
  position: fixed !important;
  z-index: 2147483647 !important;
  isolation: isolate;
}
.styles-toolbar-preview-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity 0.18s ease-out,
    visibility 0ms;
}
.styles-toolbar-preview-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(468px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  background: var(--bg-sidebar);
  border-radius: inherit;
  border-radius: 14px;
  box-shadow: 0 0 0 1px #00000012;
  transform: translateY(8px) scale(0.98);
  transform-origin: center center;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.styles-toolbar-preview-popover.is-open .styles-toolbar-preview-card {
  transform: translateY(0) scale(1);
}
.styles-toolbar-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 46px;
  padding: 0 6px 0 12px;
  box-shadow: inset 0 -1px #0f172a12;
}
.styles-toolbar-preview-title {
  flex: 1 1 auto;
  font:
    500 16px/46px Inter,
    sans-serif;
  color: #0a0a0a;
}
.styles-toolbar-preview-close {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 6px;
  border: 0;
  background: var(--bg-sidebar);
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    transform 0.16s ease,
    opacity 0.16s ease;
}
.styles-toolbar-preview-close:hover,
.styles-toolbar-preview-close:focus-visible {
  background: #f2f2f2;
  outline: none;
}
.styles-toolbar-preview-close:active {
  transform: scale(0.96);
}
.styles-toolbar-preview-close-icon {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.styles-toolbar-preview-close-icon:before,
.styles-toolbar-preview-close-icon:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1.5px;
  height: 14px;
  border-radius: 999px;
  background: #000;
  transform-origin: center center;
}
.styles-toolbar-preview-close-icon:before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.styles-toolbar-preview-close-icon:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.styles-toolbar-preview-body {
  background: #4f191c;
  height: 368px;
  overflow: clip;
  padding: 10.117px 10px 0;
}
.styles-toolbar-preview-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
  background: transparent;
}
.styles-toolbar-preview-list::-webkit-scrollbar {
  display: none;
}
.styles-toolbar-preview-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 15px;
  min-height: 62px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.16s ease;
}
.styles-toolbar-preview-row:hover,
.styles-toolbar-preview-row:focus-visible {
  background: #ffffff0f;
  outline: none;
}
.styles-toolbar-preview-row-copy {
  align-items: center;
  background: transparent;
}
.styles-toolbar-preview-row-copy:hover,
.styles-toolbar-preview-row-copy:focus-visible {
  background: #ffffff1a;
  outline: none;
}
.styles-toolbar-export-card {
  width: min(472px, calc(100vw - 32px));
  background: var(--bg-sidebar);
}
.styles-toolbar-export-body {
  padding: 14px;
  background: var(--bg-sidebar);
}
.styles-toolbar-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.styles-toolbar-export-option {
  display: flex;
  min-height: 118px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 30px;
  border: 0;
  border-radius: 10px;
  background: #0000000f;
  color: #0a0a0a;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    transform 0.16s ease;
}
.styles-toolbar-export-option:hover,
.styles-toolbar-export-option:focus-visible {
  background: #00000017;
  outline: none;
}
.styles-toolbar-export-option:active {
  transform: scale(0.985);
}
.styles-toolbar-export-option-icon {
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: #0a0a0a;
}
.styles-toolbar-export-option-icon svg {
  width: 34px;
  height: 34px;
  display: block;
}
.styles-toolbar-export-option-label {
  font:
    400 14px/21px Inter,
    sans-serif;
  color: #0a0a0a;
}
.styles-toolbar-preview-copy-text {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}
.styles-toolbar-preview-label {
  font:
    400 11.2px/11.2px Inter,
    sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff6;
}
.styles-toolbar-preview-value {
  font:
    400 15px/15px Inter,
    sans-serif;
  color: var(--text-white);
}
.styles-toolbar-preview-copy-icon {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.16s ease,
    visibility 0ms linear 0.16s;
}
.styles-toolbar-preview-row-copy:hover .styles-toolbar-preview-copy-icon,
.styles-toolbar-preview-row-copy:focus-visible
  .styles-toolbar-preview-copy-icon {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.16s ease,
    visibility 0ms;
}
.styles-toolbar-preview-copy-icon:before,
.styles-toolbar-preview-copy-icon:after {
  content: "";
  position: absolute;
  border: 2px solid var(--border-color);
  border-radius: 4px;
  box-sizing: border-box;
}
.styles-toolbar-preview-copy-icon:before {
  width: 12px;
  height: 12px;
  left: 7px;
  top: 7px;
  opacity: 0.78;
}
.styles-toolbar-preview-copy-icon:after {
  width: 12px;
  height: 12px;
  left: 13px;
  top: 13px;
}
.styles-toolbar-preview-footer {
  padding: 20px;
  box-shadow: inset 0 1px #0f172a12;
}
.styles-toolbar-preview-strip {
  display: flex;
  align-items: stretch;
  height: 46px;
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  box-shadow: inset 0 0 0 1px #0f172a12;
}
.styles-toolbar-preview-strip-swatch {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  box-shadow: 1px 0 0 currentColor;
  cursor: pointer;
}
.styles-toolbar-preview-strip-swatch:last-child {
  box-shadow: none;
}
.styles-toolbar-preview-strip-swatch:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: -2px;
}
.styles-toolbar-preview-strip-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--bg-sidebar);
  transform: translate(-50%, -50%);
}
.styles-explorer-main {
  --styles-explorer-radius: 16px;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: stretch;
  position: relative;
  background: var(--bg-sidebar);
  border-radius: var(--styles-explorer-radius);
  overflow: hidden;
  isolation: isolate;
  clip-path: inset(0 round var(--styles-explorer-radius));
  backface-visibility: hidden;
  transform: translateZ(0);
}
.styles-explorer-main[data-styles-active-view="none"],
.styles-explorer-main[data-styles-active-view="snapshot"],
.styles-explorer-main[data-styles-active-view="grid"],
.styles-explorer-main[data-styles-active-view="adjust"] {
  gap: 0;
}
.styles-palette-board {
  flex: none;
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  min-height: 560px;
  margin: 0;
  width: 100%;
  border-radius: 16px;
  border-right: 1px solid #f1f5f9;
  overflow: hidden;
  backface-visibility: hidden;
  contain: layout paint;
  will-change: width;
  transition:
    width 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    border-right-color 0.28s ease-out,
    grid-template-columns 0.19s cubic-bezier(0.22, 1, 0.36, 1);
}
.styles-palette-board.has-variant-swatches:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  pointer-events: none;
  z-index: 5;
}
.styles-palette-board.is-removing-palette .styles-palette-edge-layer,
.styles-palette-board.is-adding-palette .styles-palette-edge-layer,
.styles-palette-board.is-dragging-palette .styles-palette-edge-layer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
}
.styles-palette-edge-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  z-index: 3;
}
.styles-palette-edge {
  position: absolute;
  left: var(--styles-edge-position, 50%);
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}
.styles-palette-edge-hitarea {
  position: relative;
  width: 72px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.styles-palette-edge-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 6px;
  border: none;
  border-radius: 999px;
  background: var(--bg-sidebar);
  color: #111;
  box-shadow: none;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.styles-palette-edge:hover .styles-palette-edge-trigger,
.styles-palette-edge:focus-within .styles-palette-edge-trigger,
.styles-palette-edge.is-open .styles-palette-edge-trigger {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.styles-palette-edge-trigger-inner,
.styles-palette-edge-level-option-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  transition:
    background-color 0.18s ease-out,
    transform 0.18s ease-out;
}
.styles-palette-edge-trigger:hover .styles-palette-edge-trigger-inner,
.styles-palette-edge-trigger:focus-visible .styles-palette-edge-trigger-inner {
  background: #f2f2f2;
}
.styles-palette-edge-trigger-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
}
.styles-palette-edge-trigger-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  flex: 0 0 100%;
}
.styles-palette-edge-trigger:focus-visible,
.styles-palette-edge-level-option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #7e22ce38;
}
.styles-palette-edge-levels {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 21px) scaleY(0.18) scaleX(0.94);
  transform-origin: center bottom;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 6px;
  border-radius: 999px;
  background: var(--bg-sidebar);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.16s ease-out,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms linear 0.26s;
  box-shadow: none;
  width: max-content;
}
.styles-palette-edge.is-open .styles-palette-edge-levels {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 21px) scaleY(1) scaleX(1);
  transition:
    opacity 0.16s ease-out,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms;
}
.styles-palette-edge.is-closing .styles-palette-edge-levels {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
  transform: translate(-50%, 21px) scaleY(0.18) scaleX(0.94);
  transition:
    opacity 0.15s ease-out,
    transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0ms;
}
.styles-palette-edge.is-open .styles-palette-edge-trigger,
.styles-palette-edge.is-closing .styles-palette-edge-trigger {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.94);
}
.styles-palette-edge-level-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  border: none;
  border-radius: 999px;
  background: var(--bg-sidebar);
  color: #111;
  font:
    500 13px/normal Inter,
    sans-serif;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    transform 0.18s ease-out,
    background-color 0.18s ease-out;
}
.styles-palette-edge-level-option-inner {
  position: relative;
  overflow: hidden;
  text-align: center;
}
.styles-palette-edge-level-option:hover .styles-palette-edge-level-option-inner,
.styles-palette-edge-level-option:focus-visible
  .styles-palette-edge-level-option-inner {
  background: #f2f2f2;
  transform: scale(1.02);
}
.styles-explorer-main[data-styles-active-view="palette"] .styles-palette-board {
  width: calc(100% - 400px);
  border-radius: 16px;
  border-right: none;
}
.styles-explorer-main[data-styles-panel-view="adjust"][data-styles-active-view="palette"]
  .styles-palette-board {
  width: calc(100% - 300px);
}
.styles-explorer-main[data-styles-active-view="none"] .styles-palette-board,
.styles-explorer-main[data-styles-active-view="snapshot"] .styles-palette-board,
.styles-explorer-main[data-styles-active-view="grid"] .styles-palette-board,
.styles-explorer-main[data-styles-active-view="adjust"] .styles-palette-board {
  width: 100%;
  border-right: none;
}
.styles-palette-column {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 16px 82px;
  min-height: calc(100vh - 145px);
  box-shadow: inset 0 0 #6369d1;
  border-radius: 0;
  overflow: hidden;
  color: var(--styles-palette-fg, #111111);
  --styles-palette-icon-filter: none;
  transform-origin: center center;
  transition:
    gap 0.32s cubic-bezier(0.2, 0.85, 0.32, 1),
    opacity 0.22s ease-out,
    transform 0.26s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.22s ease-out;
}
.styles-palette-column.is-removing {
  opacity: 1;
  transform: none;
  filter: none;
  pointer-events: none;
}
.styles-palette-column.is-dragging {
  transition: none;
  box-shadow: 0 18px 38px #0f172a2e;
  cursor: grabbing;
  will-change: transform;
}
.styles-palette-column.is-removing .styles-palette-column-tools {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition: none;
}
.styles-palette-column:hover,
.styles-palette-column:focus-within {
  gap: 42px;
}
.styles-palette-column.is-variants-open {
  padding: 0;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  background: transparent !important;
}
.styles-palette-column.is-variants-open:hover,
.styles-palette-column.is-variants-open:focus-within {
  gap: 0;
}
.styles-palette-column.is-first,
.styles-palette-column:first-child {
  border-radius: 16px 0 0 16px;
}
.styles-palette-column.is-last,
.styles-palette-column:last-child {
  border-radius: 0 16px 16px 0;
}
.styles-palette-column.is-indigo {
  background: #6369d1;
  --styles-palette-fg: #ffffff;
  --styles-palette-chip-bg: rgba(0, 0, 0, 0.07);
  --styles-palette-icon-filter: brightness(0) saturate(100%) invert(100%);
}
.styles-palette-column.is-aqua {
  background: #a9efef;
  --styles-palette-fg: #111111;
  --styles-palette-chip-bg: rgba(0, 0, 0, 0.07);
}
.styles-palette-column.is-lavender {
  background: #d8d2e1;
  --styles-palette-fg: #111111;
  --styles-palette-chip-bg: rgba(0, 0, 0, 0.07);
}
.styles-palette-column.is-rose {
  background: #b88e8d;
  --styles-palette-fg: #111111;
  --styles-palette-chip-bg: rgba(0, 0, 0, 0.07);
}
.styles-palette-column.is-navy {
  background: #34435e;
  --styles-palette-fg: #ffffff;
  --styles-palette-chip-bg: rgba(0, 0, 0, 0.07);
  --styles-palette-icon-filter: brightness(0) saturate(100%) invert(100%);
}
.styles-palette-column-tools {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 36px;
  height: auto;
  opacity: 0;
  visibility: hidden;
  overflow: visible;
  pointer-events: none;
  transform: none;
  transition: none;
}
.styles-palette-column.is-variants-open .styles-palette-column-tools {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.styles-palette-column:hover .styles-palette-column-tools,
.styles-palette-column:focus-within .styles-palette-column-tools {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
.styles-palette-column.is-removing .styles-palette-column-tools,
.styles-palette-column.is-removing:hover .styles-palette-column-tools,
.styles-palette-column.is-removing:focus-within .styles-palette-column-tools {
  display: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition: none;
}
.styles-palette-board.is-dragging-palette .styles-palette-column-tools {
  pointer-events: none;
}
.styles-palette-meta {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  text-align: center;
  transform-origin: 50% 50%;
}
.styles-palette-column.is-variants-open .styles-palette-meta {
  display: none;
}
.styles-palette-variant-stack {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 52px;
  align-items: stretch;
  justify-content: stretch;
  z-index: 1;
  overflow: hidden;
}
.styles-palette-variant-swatches {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.styles-palette-variant-swatch {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  transition:
    filter 0.16s ease-out,
    transform 0.16s ease-out;
}
.styles-palette-variant-swatch:first-child:before,
.styles-palette-variant-footer:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: #e5e7eb;
  pointer-events: none;
  z-index: 1;
}
.styles-palette-variant-swatch:first-child:before {
  top: 0;
}
.styles-palette-variant-footer:after {
  bottom: 0;
}
.styles-palette-variant-swatch:hover,
.styles-palette-variant-swatch:focus-visible {
  filter: brightness(0.98);
  outline: none;
}
.styles-palette-variant-applied-dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: currentColor;
  transform: translate(-50%, -50%);
  opacity: 0.88;
  pointer-events: none;
}
.styles-palette-variant-footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  background: #ffffff94;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.16s ease-out;
  pointer-events: none;
}
.styles-palette-variant-footer.has-label {
  opacity: 1;
}
.styles-palette-variant-swatch-label {
  width: 100%;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: #111;
  pointer-events: none;
}
.styles-palette-hex-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transform-origin: 50% 50%;
  transition:
    background-color 0.22s ease-out,
    box-shadow 0.18s ease-out;
}
.styles-palette-hex-shell:hover,
.styles-palette-hex-shell:focus-visible {
  background: var(--styles-palette-chip-bg);
}
.styles-palette-hex-shell:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px #ffffff4d,
    0 0 0 4px #0f172a2e;
}
.styles-palette-picker-popover {
  position: fixed;
  z-index: 10020;
  width: 272px;
  border-radius: 14px;
  background: var(--bg-sidebar);
  box-shadow:
    0 0 0 1px #00000012,
    0 5px 10px #0000001a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom center;
  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms linear 0.22s;
  overflow: hidden;
}
.styles-palette-picker-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms;
}
.styles-palette-picker-popover.is-bottom {
  transform-origin: top center;
}
.styles-palette-picker-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px;
}
.styles-palette-picker-spectrum {
  position: relative;
  width: 242px;
  height: 151px;
  border-radius: 8px;
  overflow: visible;
  isolation: isolate;
  cursor: crosshair;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  background: #fc9827;
  box-shadow: inset 0 0 0 1px #0000001a;
}
.styles-palette-picker-spectrum:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--bg-sidebar), #fff0);
}
.styles-palette-picker-spectrum:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, #fff0, #000);
}
.styles-palette-picker-spectrum-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  padding: 5px;
  background: var(--bg-sidebar);
  border-radius: 15px;
  box-shadow: 0 10px 10px #0000000d;
  display: block;
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
  left: 50%;
  top: 50%;
}
.styles-palette-picker-spectrum-cursor-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #dcb487;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.styles-palette-picker-hue-thumb-dot,
.styles-palette-picker-input-preview {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background: #dcb487;
}
.styles-palette-picker-hue-wrap {
  position: relative;
  width: 242px;
  height: 26px;
}
.styles-palette-picker-hue-track {
  position: absolute;
  left: 0;
  top: 8px;
  width: 242px;
  height: 10px;
  border-radius: 24px;
  background: linear-gradient(90deg, red, #ff0, #0f0, #0ff, #00f, #f0f, red);
  box-shadow: inset 0 0 0 1px #0000001a;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.styles-palette-picker-hue-thumb {
  position: absolute;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--bg-sidebar);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%);
  pointer-events: none;
  left: 10px;
}
.styles-palette-picker-input-row {
  position: relative;
  width: 242px;
  height: 36px;
}
.styles-palette-picker-input-shell {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  padding: 0 38px 0 10px;
  border-radius: 8px;
  background: var(--bg-sidebar);
  box-shadow: inset 0 0 0 1px #0003;
}
.styles-palette-picker-hex-input {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: #525252;
  text-transform: uppercase;
  box-sizing: border-box;
}
.styles-palette-picker-hex-input:focus {
  outline: none;
}
.styles-palette-picker-input-preview {
  position: absolute;
  right: 6px;
  top: 6px;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px #00000012;
}
.styles-palette-picker-footer {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 8px;
  box-shadow: inset 0 1px #00000012;
}
.styles-palette-picker-mode {
  height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 32px;
  color: #000;
}
.styles-palette-picker-mode svg {
  width: 20px;
  height: 20px;
  color: #171717;
}
.styles-palette-picker-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.styles-palette-picker-action {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  color: #000;
}
.styles-palette-picker-action:hover,
.styles-palette-picker-action:focus-visible,
.styles-palette-picker-mode:hover,
.styles-palette-picker-mode:focus-visible {
  outline: none;
  background: #0000000a;
}
.styles-palette-picker-action svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.styles-palette-picker-action:disabled {
  opacity: 0.45;
  cursor: default;
}
.styles-palette-info-popover {
  position: fixed;
  z-index: 10018;
  width: 248px;
  border-radius: 16px;
  background: var(--bg-sidebar);
  box-shadow:
    0 0 0 1px #00000012,
    0 12px 28px #0f172a24;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom center;
  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms linear 0.22s;
  overflow: hidden;
}
.styles-palette-info-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms;
}
.styles-palette-info-popover.is-bottom {
  transform-origin: top center;
}
.styles-palette-info-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}
.styles-palette-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
}
.styles-palette-info-swatch {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px #00000014;
  background: #111;
}
.styles-palette-info-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.styles-palette-info-name {
  font:
    600 15px/20px Inter,
    sans-serif;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.styles-palette-info-subtitle {
  font:
    400 12px/16px Inter,
    sans-serif;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.styles-palette-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.styles-palette-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: #f8fafc;
  color: #111827;
  text-align: left;
  cursor: pointer;
}
.styles-palette-info-row:hover,
.styles-palette-info-row:focus-visible,
.styles-palette-info-close:hover,
.styles-palette-info-close:focus-visible {
  outline: none;
  background: #f1f5f9;
}
.styles-palette-info-label {
  font:
    500 12px/16px Inter,
    sans-serif;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.styles-palette-info-value {
  font:
    500 12px/16px Inter,
    sans-serif;
  color: #111827;
  text-align: right;
}
.styles-palette-info-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.styles-palette-info-hint {
  font:
    400 12px/16px Inter,
    sans-serif;
  color: #6b7280;
}
.styles-palette-info-close {
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  background: transparent;
  font:
    500 12px/16px Inter,
    sans-serif;
  color: #111827;
  cursor: pointer;
}
.styles-palette-contrast-popover {
  position: fixed;
  z-index: 10018;
  width: 268px;
  border-radius: 18px;
  background: var(--bg-sidebar);
  box-shadow:
    0 0 0 1px #0000000f,
    0 18px 36px #0f172a24;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom center;
  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms linear 0.22s;
  overflow: hidden;
}
.styles-palette-contrast-popover.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 0.18s ease-out,
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0ms;
}
.styles-palette-contrast-popover.is-bottom {
  transform-origin: top center;
}
.styles-palette-contrast-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
}
.styles-palette-contrast-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.styles-palette-contrast-swatch {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  box-shadow:
    inset 0 0 0 1px #ffffff38,
    0 10px 20px #0f172a1a;
  background: #111;
}
.styles-palette-contrast-heading {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.styles-palette-contrast-name {
  font:
    600 14px/18px Inter,
    sans-serif;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.styles-palette-contrast-subtitle {
  font:
    400 11px/15px Inter,
    sans-serif;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.styles-palette-contrast-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.styles-palette-contrast-option {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  padding: 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fbfcfe, #f8fafc);
  box-shadow: inset 0 0 0 1px #94a3b824;
  transition:
    box-shadow 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}
.styles-palette-contrast-option.is-pass {
  background: linear-gradient(180deg, #f3fcf6, #ecfdf3);
  box-shadow:
    inset 0 0 0 1px #22c55e38,
    0 8px 16px #22c55e14;
  transform: translateY(-1px);
}
.styles-palette-contrast-option.is-fail {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  box-shadow:
    inset 0 0 0 1px #94a3b82e,
    0 8px 16px #94a3b814;
  transform: translateY(-1px);
}
.styles-palette-contrast-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 100%;
  min-height: 58px;
  border-radius: 13px;
  font:
    700 22px/1 Inter,
    sans-serif;
  letter-spacing: -0.02em;
  box-shadow:
    inset 0 0 0 1px #00000014,
    0 6px 14px #0f172a14;
}
.styles-palette-contrast-body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.styles-palette-contrast-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}
.styles-palette-contrast-label-wrap {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.styles-palette-contrast-label {
  font:
    600 12px/16px Inter,
    sans-serif;
  color: #111827;
}
.styles-palette-contrast-ratio {
  font:
    600 11px/15px Inter,
    sans-serif;
  color: var(--text-secondary);
  white-space: nowrap;
}
.styles-palette-contrast-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.styles-palette-contrast-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #94a3b81f;
  color: var(--text-muted);
  font:
    600 10px/1 Inter,
    sans-serif;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.styles-palette-contrast-badge.is-pass {
  background: #22c55e24;
  color: #15803d;
}
.styles-palette-contrast-badge.is-fail {
  background: #94a3b829;
  color: var(--text-secondary);
}
.styles-palette-hex {
  font-size: var(--styles-palette-hex-size, 28px);
  line-height: var(--styles-palette-hex-line-height, 30px);
  font-weight: 500;
  letter-spacing: var(--styles-palette-hex-letter-spacing, 0.032em);
  text-transform: uppercase;
  max-width: 100%;
  transform-origin: 50% 50%;
}
.styles-palette-name {
  font-size: 11.2px;
  line-height: 14px;
  font-weight: 400;
  opacity: 0.6;
  letter-spacing: 0.04em;
  transform-origin: 50% 50%;
}
.styles-palette-tool {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  max-width: 36px;
  max-height: 36px;
  padding: 0;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: currentColor;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  line-height: 0;
  cursor: pointer;
  -moz-appearance: none;
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
}
.styles-palette-tool:hover,
.styles-palette-tool:focus,
.styles-palette-tool:focus-visible,
.styles-palette-tool:active {
  background: var(--styles-palette-tool-hover-bg, rgba(15, 23, 42, 0.08));
  outline: none;
  box-shadow: none;
}
.styles-palette-tool[aria-label="Drag palette"] {
  cursor: grab;
}
.styles-palette-column.is-dragging
  .styles-palette-tool[aria-label="Drag palette"] {
  cursor: grabbing;
}
.styles-palette-tool[aria-label="Lock palette"] {
  position: relative;
  overflow: hidden;
}
.styles-palette-tool[aria-label="Lock palette"].is-locked {
  background: #0000001a;
}
.styles-palette-lock-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.styles-palette-lock-icon svg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 16px;
  height: 16px;
  stroke: currentColor;
  transition:
    opacity 0.2s ease-out,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: 50% 50%;
}
.styles-palette-lock-icon-locked {
  opacity: 0;
  transform: translateY(1px) scale(0.84) rotate(-10deg);
}
.styles-palette-lock-icon-unlocked,
.styles-palette-tool[aria-label="Lock palette"].is-locked
  .styles-palette-lock-icon-locked {
  opacity: 1;
  transform: translateY(0) scale(1) rotate(0);
}
.styles-palette-tool[aria-label="Lock palette"].is-locked
  .styles-palette-lock-icon-unlocked {
  opacity: 0;
  transform: translateY(-1px) scale(0.84) rotate(10deg);
}
.styles-palette-board[data-palette-count="2"]
  .styles-palette-tool[aria-label="Remove color"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.styles-palette-tool img {
  width: 16px;
  height: 16px;
  display: block;
  margin: auto;
  flex: 0 0 16px;
  object-fit: contain;
  filter: var(--styles-palette-icon-filter);
}
.styles-palette-tool[aria-label="Remove color"] img {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}
.styles-visualizer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  width: 400px;
  min-width: 400px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 0 0 16px;
  background: var(--bg-sidebar);
  border-radius: 0 16px 16px 0;
  clip-path: inset(0 0 0 0 round 0 16px 16px 0);
  overflow: hidden;
  opacity: 1;
  transform: translateZ(0);
  transform-origin: right center;
  z-index: 1;
  backface-visibility: hidden;
  contain: layout paint;
  will-change: clip-path, opacity, transform;
  transition:
    clip-path 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.3s ease-out;
}
.styles-explorer-main[data-styles-panel-view="adjust"]
  .styles-visualizer-panel {
  width: 300px;
  min-width: 300px;
  max-width: 300px;
}
.styles-visualizer-panel-inner {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-left: 8px;
  padding-right: 8px;
  gap: 28px;
  opacity: 1;
  transform: translate(0) scaleX(1);
  transform-origin: right center;
  filter: blur(0);
  will-change: transform, opacity, filter;
  transition:
    opacity 0.32s ease-out 70ms,
    transform 0.46s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.3s ease-out;
}
.styles-visualizer-mode {
  display: none;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 14px;
}
.styles-visualizer-mode.is-active {
  display: flex;
}
.styles-visualizer-panel.is-collapsed {
  clip-path: inset(0 0 0 100% round 0 16px 16px 0);
  opacity: 0;
  transform: translate3d(22px, 0, 0);
  pointer-events: none;
}
.styles-visualizer-panel.is-collapsed .styles-visualizer-panel-inner {
  opacity: 0;
  transform: translate(12px) scaleX(0.94);
  filter: blur(2px);
}
.styles-visualizer-panel[hidden] {
  display: none !important;
}
.styles-visualizer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}
.styles-visualizer-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
  color: var(--text-main);
}
.styles-visualizer-filter {
  display: block;
  width: 100%;
  z-index: 5;
}
.styles-visualizer-filter-button {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: var(--bg-sidebar);
  color: #111;
  font-size: 13px;
  font-weight: 400;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.styles-visualizer-filter-button:hover,
.styles-visualizer-filter-button:focus-visible,
.styles-visualizer-filter-button[aria-expanded="true"] {
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px #5c4ae414;
}
.styles-visualizer-filter-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.styles-visualizer-filter-menu {
  left: 0;
  transform: translate(0);
  width: 100%;
  min-width: 0;
}
.styles-visualizer-filter-menu.hidden {
  transform: translateY(-10px);
}
.styles-visualizer-filter-item {
  width: 100%;
  justify-content: flex-start;
  border: 0;
  background: transparent;
  text-align: left;
}
.styles-visualizer-filter-item.is-active {
  background: #f5f3ff;
  color: #5c4ae4;
}
.styles-visualizer-gallery {
  border-radius: 16px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  -webkit-overflow-scrolling: touch;
}
.styles-visualizer-gallery::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  display: none !important;
}
.styles-visualizer-gallery::-webkit-scrollbar-track,
.styles-visualizer-gallery::-webkit-scrollbar-thumb,
.styles-visualizer-gallery::-webkit-scrollbar-corner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.styles-gallery-card {
  background: #e6e6e6;
  border-radius: 16px;
  min-height: 322px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.styles-gallery-card[hidden] {
  display: none;
}
.styles-gallery-surface {
  width: 100%;
  height: 100%;
  min-height: 322px;
  background: #e5e5e5;
  overflow: hidden;
  position: relative;
}
aside.styles-visualizer-panel[data-panel-view="snapshot"]
  .styles-visualizer-header {
  display: none;
}
.styles-snapshot-panel {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  background: var(--bg-sidebar);
}
.styles-snapshot-shell {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding-top: 8px;
}
.styles-snapshot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 20px;
  gap: 16px;
}
.styles-snapshot-heading {
  margin: 0;
  font-size: 14px;
  line-height: 16px;
  font-weight: 600;
  color: var(--text-main);
}
.styles-snapshot-close-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 6px;
  border: none;
  border-radius: 8px;
  background: var(--bg-sidebar);
  color: #111827;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease;
}
.styles-snapshot-close-button:hover {
  background: #f8fafc;
}
.styles-snapshot-tabs {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 12px;
}
.styles-snapshot-tab {
  flex: 1 1 0;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #6b7280;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease;
}
.styles-snapshot-tab.is-active {
  background: var(--bg-sidebar);
  color: #000;
  box-shadow: 0 1px 2px #0000000d;
}
.styles-snapshot-body {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding: 20px 0;
  gap: 20px;
  overflow: hidden;
}
.styles-snapshot-upload {
  display: flex;
  flex: 0 0 260px;
  height: 260px;
  min-height: 260px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 26px;
  border-radius: 16px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease;
}
.styles-snapshot-upload.dropzone-container {
  padding: 30px 26px;
  border-radius: 16px;
  min-height: 260px;
  height: 260px;
  border-width: 2px;
}
.styles-snapshot-upload .browse-menu-wrapper,
.styles-snapshot-upload .browse-btn,
.styles-snapshot-upload .browse-btn * {
  pointer-events: none;
}
.styles-snapshot-upload.is-dragover {
  border-color: #4647d39e;
  background: linear-gradient(180deg, #4647d303, #4647d30a);
  box-shadow: none;
}
.styles-snapshot-upload[hidden] {
  display: none !important;
}
.styles-snapshot-upload-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: #7c6cff;
}
.styles-snapshot-upload-title {
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  color: #111827;
}
.styles-snapshot-upload-hint {
  margin-top: 8px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 16px;
  color: #9ca3af;
  text-align: center;
  padding: 0;
}
.styles-snapshot-upload-browse {
  pointer-events: none;
}
.styles-snapshot-result {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 20px;
}
.styles-snapshot-result[hidden] {
  display: none !important;
}
.styles-snapshot-preview {
  position: relative;
  height: 240px;
  border-radius: 16px;
  overflow: hidden;
  background: #e5e7eb;
  box-shadow: inset 0 0 0 1px #0f172a0f;
}
.styles-snapshot-preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.styles-snapshot-replace-button {
  position: absolute;
  left: var(--snapshot-picker-x, 82%);
  top: var(--snapshot-picker-y, 14%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 3px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  box-shadow:
    0 0 0 1px #0000000d,
    0 4px 10px #0f172a1f;
  cursor: grab;
  touch-action: none;
  transform: translate(-50%, -50%);
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
  z-index: 2;
}
.styles-snapshot-replace-button:hover {
  transform: translate(-50%, -50%) scale(1.06);
  background: #ffffff1f;
}
.styles-snapshot-replace-button.is-dragging {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.04);
  box-shadow:
    0 0 0 1px #0000000d,
    0 8px 18px #0f172a2e;
}
.styles-snapshot-replace-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: translate(-50%, -50%);
}
.styles-snapshot-palette-bar {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  width: 100%;
  height: 46px;
  border-radius: 10px;
  background: #f3f4f6;
}
.styles-snapshot-palette-bar:empty {
  display: none;
}
.styles-snapshot-color-strip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 0;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: inset -1px 0 #ffffff29;
  cursor: pointer;
}
.styles-snapshot-color-strip:last-child {
  box-shadow: none;
}
.styles-snapshot-color-strip:hover {
  filter: brightness(1.03);
}
.styles-snapshot-color-strip:focus-visible {
  outline: 2px solid rgba(99, 105, 209, 0.9);
  outline-offset: -2px;
  z-index: 2;
}
.styles-snapshot-palette-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-sidebar);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 1px #00000012;
}
.styles-snapshot-controls {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
}
.styles-snapshot-range {
  flex: 1 1 auto;
  width: 100%;
  height: 6px;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #eee;
  border-radius: 24px;
  outline: none;
}
.styles-snapshot-range::-webkit-slider-runnable-track {
  height: 6px;
  background: #eee;
  border-radius: 24px;
}
.styles-snapshot-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -7px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--bg-sidebar);
  box-shadow: 0 0 0 1px #00000005;
  cursor: pointer;
}
.styles-snapshot-range::-moz-range-track {
  height: 6px;
  background: #eee;
  border: none;
  border-radius: 24px;
}
.styles-snapshot-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: var(--bg-sidebar);
  box-shadow: 0 0 0 1px #00000005;
  cursor: pointer;
}
.styles-snapshot-stepper {
  display: flex;
  align-items: stretch;
  gap: 2px;
  height: 27px;
  flex: 0 0 auto;
}
.styles-snapshot-stepper-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 27px;
  padding: 0 8px;
  border: none;
  background: #f0f0f0;
  color: #5f6368;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.styles-snapshot-stepper-button:first-child {
  border-radius: 4px 0 0 4px;
}
.styles-snapshot-stepper-button:last-child {
  border-radius: 0 4px 4px 0;
}
.styles-snapshot-stepper-button:hover {
  background: #e7e7e7;
}
.styles-snapshot-stepper-button:disabled,
.styles-snapshot-range:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.styles-snapshot-footer {
  margin-top: auto;
}
.styles-snapshot-reset-button[hidden] {
  display: none !important;
}
.styles-snapshot-apply-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: var(
    --primary-gradient,
    linear-gradient(170.24deg, #4647d3 0%, #9396ff 100%)
  );
  box-shadow: 0 1px 2px #0000000d;
  color: var(--text-white);
  font-size: 14px;
  line-height: 24px;
  font-weight: 500;
  cursor: pointer;
  transition:
    filter 0.16s ease,
    opacity 0.16s ease;
}
.styles-snapshot-apply-button:hover {
  filter: brightness(1.03);
}
.styles-snapshot-apply-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: none;
}
.styles-snapshot-apply-button img {
  flex: 0 0 auto;
}
.styles-gallery-hero {
  padding: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.styles-gallery-hero > svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.styles-gallery-hero-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 4.3px;
  font-weight: 600;
  color: #455065;
}
.styles-gallery-hero-brand {
  position: relative;
  padding-left: 10px;
  font-size: 5.7px;
  font-weight: 700;
  color: #172033;
}
.styles-gallery-hero-brand:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 999px 999px 999px 2px;
  background: linear-gradient(135deg, #5d59e8, #8fdbe8);
  transform: translateY(-50%);
}
.styles-gallery-hero-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.styles-gallery-hero-chip {
  padding: 2px 5px;
  border: 0.75px solid #c8d0dd;
  border-radius: 1px;
  font-size: 4.1px;
  font-weight: 700;
  color: #243146;
  background: var(--bg-sidebar);
}
.styles-gallery-hero-chip--accent {
  background: #d7fffa;
  border-color: #d7fffa;
  color: #193541;
}
.styles-gallery-hero-body {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 14px;
}
.styles-gallery-hero-copy {
  width: 46%;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  color: #111;
}
.styles-gallery-hero-copy h3 {
  margin: 0;
  font-size: 13px;
  line-height: 0.98;
  font-weight: 800;
  letter-spacing: -0.03em;
}
.styles-gallery-hero-copy p {
  margin: 0;
  font-size: 5.2px;
  line-height: 1.4;
  color: #616161;
}
.styles-gallery-hero-stats {
  display: flex;
  gap: 14px;
  margin-top: 6px;
}
.styles-gallery-hero-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.styles-gallery-hero-stats strong {
  font-size: 8.2px;
  line-height: 1;
  font-weight: 700;
  color: #111;
}
.styles-gallery-hero-stats span {
  font-size: 4px;
  line-height: 1.2;
  color: #7a7a7a;
}
.styles-gallery-hero-art {
  flex: 1;
  min-width: 0;
  position: relative;
  min-height: 148px;
  align-self: center;
}
.hero-shape {
  display: block;
  position: relative;
  position: absolute;
}
.hero-shape--purple-pill {
  left: 4px;
  top: 18px;
  width: 42px;
  height: 40px;
  background: #6369d1;
  border-radius: 16px;
}
.hero-shape--aqua-diamond {
  left: 44px;
  top: 21px;
  width: 28px;
  height: 28px;
  background: #a9efef;
  transform: rotate(45deg);
}
.hero-shape--lavender-arch {
  right: 4px;
  top: 18px;
  width: 41px;
  height: 82px;
  background: #d9d4e6;
  border-radius: 0 42px 42px 0;
}
.hero-shape--rose-block {
  left: 4px;
  top: 64px;
  width: 42px;
  height: 42px;
  background: #bc8f91;
}
.hero-shape--navy-circle {
  left: 44px;
  top: 56px;
  width: 40px;
  height: 40px;
  background: #34435e;
  border-radius: 50%;
}
.hero-shape--rose-arch {
  right: 4px;
  bottom: 2px;
  width: 41px;
  height: 42px;
  background: #bc8f91;
  border-radius: 42px 42px 0 0;
}
.hero-shape--navy-triangle {
  left: 46px;
  bottom: 1px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 38px solid #34435e;
}
.hero-shape--navy-triangle:before {
  content: "";
  position: absolute;
  left: -11px;
  top: 13px;
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 21px solid var(--border-color);
}
.styles-gallery-ribbon {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e5e5e5;
}
.styles-gallery-ribbon-stars {
  position: absolute;
  left: 28px;
  top: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
}
.styles-gallery-ribbon-stars .star--navy {
  color: #34435e;
}
.styles-gallery-ribbon-stars .star--rose {
  color: #b88e8d;
  font-size: 15px;
}
.styles-gallery-ribbon-stars .star--rose-soft {
  color: #d9b5a9;
  font-size: 11px;
}
.styles-gallery-ribbon-wordmark {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 0.78;
  transform: translateY(18px) rotate(-7deg);
  text-shadow: 0 3px 0 rgba(99, 105, 209, 0.05);
}
.wordmark-line {
  font-family:
    Brush Script MT,
    Segoe Script,
    cursive;
  font-weight: 700;
  white-space: nowrap;
}
.wordmark-line--top {
  font-size: 78px;
  color: #a9efef;
}
.wordmark-line--bottom {
  font-size: 88px;
  color: #a9efef;
  margin-top: -14px;
}
.styles-gallery-ribbon-blob {
  position: absolute;
  border-radius: 999px;
}
.styles-gallery-ribbon-blob--left {
  width: 28px;
  height: 118px;
  left: 46px;
  top: 110px;
  background: #6369d1;
  transform: rotate(-30deg);
}
.styles-gallery-ribbon-blob--right {
  width: 28px;
  height: 118px;
  right: 44px;
  top: 118px;
  background: #6369d1;
  transform: rotate(28deg);
}
.styles-gallery-ribbon-blob--left-small {
  width: 24px;
  height: 58px;
  left: 62px;
  bottom: 26px;
  background: #34435e;
  transform: rotate(28deg);
}
.styles-gallery-ribbon-blob--right-small {
  width: 24px;
  height: 58px;
  right: 70px;
  bottom: 24px;
  background: #34435e;
  transform: rotate(-26deg);
}
.styles-gallery-surface--glyph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #111;
}
.styles-gallery-glyph {
  display: block;
  width: auto;
  height: auto;
  max-width: 76%;
  max-height: 44%;
}
.styles-visualizer-action-button {
  margin-top: auto;
}
.styles-adjust-panel {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 14px;
  box-sizing: border-box;
}
.styles-adjust-description {
  margin: 0;
  color: #0000009e;
  font-size: 13px;
  line-height: 1.55;
}
.styles-adjust-slider-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.styles-adjust-slider {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.styles-adjust-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  font-weight: 500;
  color: #111;
}
.styles-adjust-slider-value {
  min-width: 52px;
  text-align: right;
  color: #00000094;
  font-size: 12px;
  font-weight: 500;
}
.styles-adjust-range {
  --styles-adjust-progress: 50%;
  --styles-adjust-track: linear-gradient(
    90deg,
    #ff0000 0%,
    #ffd400 16.66%,
    #3dff00 33.33%,
    #00eaff 50%,
    #1f45ff 66.66%,
    #ff00c8 83.33%,
    #ff0000 100%
  );
  --styles-adjust-thumb-ring: rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
  background: transparent;
  cursor: pointer;
}
.styles-adjust-range::-webkit-slider-runnable-track {
  height: 10px;
  border-radius: 999px;
  background: var(--styles-adjust-track);
  border: 0;
  box-shadow: inset 0 0 0 1px #0000001a;
}
.styles-adjust-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -7px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background: var(--bg-sidebar);
  box-shadow: none;
  cursor: pointer;
}
.styles-adjust-range:hover::-webkit-slider-thumb {
  transform: none;
}
.styles-adjust-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  background: var(--bg-sidebar);
  box-shadow: none;
  cursor: pointer;
}
.styles-adjust-range::-moz-range-track {
  height: 10px;
  border-radius: 999px;
  background: var(--styles-adjust-track);
  border: 0;
  box-shadow: inset 0 0 0 1px #0000001a;
}
.styles-adjust-range:focus-visible {
  outline: none;
}
.styles-adjust-range:focus-visible::-webkit-slider-runnable-track,
.styles-adjust-range:focus-visible::-moz-range-track {
  box-shadow:
    inset 0 0 0 1px #0000001a,
    0 0 0 3px #6c46ff1f;
}
.styles-adjust-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-top: auto;
}
.styles-adjust-reset-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: var(--bg-sidebar);
  color: #111;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
  cursor: pointer;
}
.styles-adjust-reset-button:hover {
  background: #f7f7fb;
  border-color: #6c46ff2e;
}
.styles-adjust-reset-button:active {
  transform: scale(0.98);
}
.styles-adjust-actions .styles-visualizer-action-button {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  margin-top: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 1180px) {
  .styles-explorer-topbar {
    flex-direction: column;
    align-items: flex-start;
    padding-right: 16px;
  }
  .styles-explorer-toolbar {
    justify-content: flex-start;
    width: 100%;
  }
  .styles-explorer-main {
    flex-direction: column;
  }
  .styles-palette-board,
  .styles-palette-column {
    min-height: 420px;
  }
  .styles-visualizer-panel {
    width: 100%;
    min-width: 0;
    max-width: none;
    border-top: 1px solid #f1f5f9;
  }
}


/* ═══════════════════════════════════════════════════════════
   DARK THEME OVERRIDES (auto-generated)
   ═══════════════════════════════════════════════════════════ */

:root[data-theme="dark"] .mobile-desktop-notice-card {
  background: linear-gradient(152deg, #38383890, #38383870),
    linear-gradient(170.2deg, #4647d314, #9396ff14);
  box-shadow: 0 22px 50px #00000024,
    0 2px 10px #00000014;
}

:root[data-theme="dark"] .mobile-desktop-notice-card:before {
  background: radial-gradient(circle, #9d8aff38, #9d8aff00 70%);
}

:root[data-theme="dark"] .mobile-desktop-notice-chip {
  background: #9d8aff1f;
  color: #a8a0ff;
}

:root[data-theme="dark"] .mobile-desktop-notice-logo-wrap {
  background: #38383894;
  box-shadow: 0 14px 24px #4647d32e,
    inset 0 1px #38383861;
}

:root[data-theme="dark"] .mobile-desktop-notice-text {
  color: #b9b9b9;
}

:root[data-theme="dark"] .mobile-desktop-notice-point {
  color: #9a9a9a;
}

:root[data-theme="dark"] .pwa-install-btn {
  border: 1px solid #3b4470;
  color: #c0c0c0;
  box-shadow: 0 8px 18px #00000014;
}

:root[data-theme="dark"] .pwa-install-btn:hover {
  border-color: #4a5580;
  box-shadow: 0 10px 22px #0000001c;
}

:root[data-theme="dark"] .pwa-install-btn.is-open {
  border-color: #4a5580;
  background: #2e3350;
  color: #a0a8ff;
}

:root[data-theme="dark"] .app-sync-overlay {
  background: radial-gradient(
    circle at 50% 40%,
    #b0a8ff0f,
    #2e2e2ead 55%,
    #2e2e2eeb
  );
  color: #e0e0e0e6;
}

:root[data-theme="dark"] .app-sync-credit {
  color: #9a9a9a;
}

:root[data-theme="dark"] .btn-feedback {
  color: #9a9a9a;
  box-shadow: 0 1px 2px #ffffff0d;
}

:root[data-theme="dark"] .btn-feedback:hover {
  background: #343434;
  border-color: #555555;
}

:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #555555;
}

:root[data-theme="dark"] .sidebar-panel {
  box-shadow: 0 4px 12px #ffffff08,
    0 1px 2px #ffffff05;
}

:root[data-theme="dark"] .sidebar-section {
  border-bottom: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .sidebar-section-feature {
  border-bottom: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .sidebar-profile-badge[data-auth-state="not-signed-in"]:hover
  .sidebar-profile-badge-inner {
  background: #787878;
}

:root[data-theme="dark"] .sidebar-profile-menu__panel {
  box-shadow: 0 8px 24px #ffffff1f,
    0 2px 4px #ffffff0a;
}

:root[data-theme="dark"] .sidebar-profile-menu__header {
  border-bottom: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .sidebar-profile-menu__name {
  color: #ffffffed;
}

:root[data-theme="dark"] .sidebar-profile-menu__email {
  color: #ffffffb8;
}

:root[data-theme="dark"] .sidebar-profile-menu__item {
  color: #ffffffed;
}

:root[data-theme="dark"] .sidebar-profile-menu__item:hover,
:root[data-theme="dark"] .sidebar-profile-menu__item:focus-visible {
  background: #ffffff14;
}

:root[data-theme="dark"] .tab-container {
  background: #3D3D3D;
}

:root[data-theme="dark"] .tab-btn {
  color: #888888;
}

:root[data-theme="dark"] .tab-btn.active {
  color: #ffffff;
  box-shadow: 0 1px 2px #ffffff0d;
}

:root[data-theme="dark"] .url-text-input {
  border: 1px solid #464646;
  color: #ffffff;
}

:root[data-theme="dark"] .url-text-input::placeholder {
  color: #787878;
}

:root[data-theme="dark"] .fetch-site-btn {
  color: #b0a8ff;
}

:root[data-theme="dark"] .dropzone-container {
  border: 2px dashed #464646;
}

:root[data-theme="dark"] .dropzone-icon {
  background: #9d8aff1a;
}

:root[data-theme="dark"] .dropzone-title {
  color: #e0e0e0;
}

:root[data-theme="dark"] .dropzone-subtitle {
  color: #787878;
}

:root[data-theme="dark"] .browse-btn {
  border: 1px solid #555555;
  color: #b9b9b9;
}

:root[data-theme="dark"] #dropzoneWrapper.multi-upload-mode .browse-btn {
  color: #b0a8ff;
}

:root[data-theme="dark"] .sidebar-two-col {
  box-shadow: 0 4px 12px #ffffff08,
    0 1px 2px #ffffff05;
}

:root[data-theme="dark"] .sidebar-icon-strip {
  border-right: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .strip-btn:not(.active):hover,
:root[data-theme="dark"] .strip-btn[data-state="hover"]:not(.active) {
  background: #9a9a9a14;
}

:root[data-theme="dark"] .strip-btn.active {
  background: #9d8aff14;
}

:root[data-theme="dark"] .strip-settings-menu {
  box-shadow: 0 8px 24px #ffffff1f,
    0 2px 4px #ffffff0a;
}

:root[data-theme="dark"] .strip-settings-title {
  color: #9a9a9a;
}

:root[data-theme="dark"] .ui-mode-option {
  color: #9a9a9a;
}

:root[data-theme="dark"] .ui-mode-option:hover {
  background: #ffffff14;
}

:root[data-theme="dark"] #urlBetaAuthBtn:hover {
  color: #787878;
}

:root[data-theme="dark"] .ui-mode-option.active {
  background: #ffffff14;
}

:root[data-theme="dark"] .sidebar-panel-toggle-pill {
  background: linear-gradient(90deg, #3838380a, #0000);
}

:root[data-theme="dark"] .sidebar-collapse-tab {
  background: linear-gradient(90deg, #ffffff14, #ffffff01 115%), var(--bg-sidebar);
  box-shadow: 2px 2px 10px #ffffff0f;
}

:root[data-theme="dark"] .sidemenu-preview-card {
  box-shadow: 0 0 #00000000;
}

:root[data-theme="dark"] .sidemenu-folder-icon {
  background: #343434;
  border: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .tree-tab.active {
  background: linear-gradient(90.13deg, #9d8aff00, #9d8aff52 99.98%);
  box-shadow: inset -1.8px 0 #9d8aff1f;
}

:root[data-theme="dark"] .tree-tab.active .tree-tab-text {
  background: linear-gradient(90deg, #ffffff1a, #ffffff1a),
    linear-gradient(90deg, #5c4ae4, #5c4ae4);
}

:root[data-theme="dark"] .tree-tab:not(.active):hover {
  background: linear-gradient(90.13deg, #0000, #ffffff1f 99.98%);
}

:root[data-theme="dark"] .tree-sub-tab {
  box-shadow: inset -1.8px 0 #3838381f;
}

:root[data-theme="dark"] .tree-sub-tab.active {
  background-color: #ffffff0a;
}

:root[data-theme="dark"] .tree-sub-tab:not(.active):hover {
  background-color: #ffffff05;
}

:root[data-theme="dark"] .tree-sub-tab-text {
  color: #ffffff;
}

:root[data-theme="dark"] .sidemenu-upgrade-bg {
  background: linear-gradient(180deg, #9d8aff00 15.6%, #9d8aff29);
}

:root[data-theme="dark"] .sidemenu-upgrade-btn {
  box-shadow: 0 1px 2px #ffffff0d;
}

:root[data-theme="dark"] .file-icon-box {
  background: #343434;
  border: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .dimension-input-group {
  border: 1px solid #464646;
}

:root[data-theme="dark"] .dimension-input {
  color: #ffffff;
}

:root[data-theme="dark"] .option-row {
  border-bottom: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .options-container .option-row:first-child {
  border-top: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .option-label {
  color: #ffffff;
}

:root[data-theme="dark"] main {
  background-image: radial-gradient(
      rgba(132, 142, 174, calc(var(--grid-opacity, 1) * 0.46)) 0.82px,
      transparent 0.82px
    ),
    radial-gradient(
      rgba(132, 142, 174, calc(var(--grid-opacity, 1) * 0.2)) 0.82px,
      transparent 0.82px
    ),
    linear-gradient(180deg, #38383894, #2e2e2ec7);
}

:root[data-theme="dark"] .canvas-preview {
  box-shadow: 0 2.683px 4.025px -0.671px #ffffff1a,
    0 1.342px 2.683px -0.671px #ffffff0f;
}

:root[data-theme="dark"] .group-align-toolbar {
  box-shadow: 0 6px 16px #00000029;
}

:root[data-theme="dark"] .group-selection-handle {
  box-shadow: 0 1px 3px #ffffff26;
}

:root[data-theme="dark"] .selection-handle {
  box-shadow: 0 calc(1px * var(--inverse-scale, 1))
    calc(3px * var(--inverse-scale, 1)) #ffffff26;
}

:root[data-theme="dark"] .canvas-toolbar {
  box-shadow: 0 12px 28px #0000000a;
}

:root[data-theme="dark"] .figma-tool-btn:hover,
:root[data-theme="dark"] .figma-arrow-btn:hover,
:root[data-theme="dark"] .figma-toggle-btn:hover {
  background: #ffffff0d;
}

:root[data-theme="dark"] .figma-tool-btn-primary {
  background: #ffffff0d;
}

:root[data-theme="dark"] .figma-divider {
  background: #ffffff0d;
}

:root[data-theme="dark"] .figma-align-menu {
  box-shadow: 0 4px 24px #ffffff14;
}

:root[data-theme="dark"] .figma-align-menu-item {
  color: #ffffffed;
}

:root[data-theme="dark"] .figma-align-menu-item:hover {
  background: linear-gradient(90deg, #b0a8ff0f, #b0a8ff0f),
    linear-gradient(90deg, var(--bg-sidebar), var(--bg-sidebar));
  color: #b0a8ff;
}

:root[data-theme="dark"] .figma-arrow-btn[aria-expanded="true"] {
  background: #ffffff0d;
}

:root[data-theme="dark"] .figma-toggle {
  background: #ffffff0d;
}

:root[data-theme="dark"] .figma-zoom-pill {
  background: #ffffff0d;
}

:root[data-theme="dark"] .zoom-value {
  color: #ffffffed;
}

:root[data-theme="dark"] .stat-card {
  background: #343434;
}

:root[data-theme="dark"] .sidebar-action-area {
  border-top: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .btn-primary {
  box-shadow: 0 1px 2px #ffffff0d;
}

:root[data-theme="dark"] .btn-primary.ready {
  box-shadow: 0 10px 15px #0000001f,
    0 4px 6px #0000001f;
}

:root[data-theme="dark"] .btn-copy {
  box-shadow: 0 10px 15px #0000001f,
    0 4px 6px #0000001f;
}

:root[data-theme="dark"] .command-palette-overlay {
  background: #e0e0e038;
}

:root[data-theme="dark"] .command-palette {
  box-shadow: 0 26px 54px #0000002e,
    0 2px 8px #00000014;
}

:root[data-theme="dark"] .command-palette-header {
  border-bottom: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .command-palette-item-type {
  background: #9d8aff1a;
}

:root[data-theme="dark"] .command-palette-footer {
  border-top: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .toast-notification {
  background: #383838e6;
  box-shadow: 0 20px 25px -5px #ffffff1a,
    0 8px 10px -6px #ffffff1a;
}

:root[data-theme="dark"] .toast-close:hover {
  background: #e0e0e00d;
  color: #9a9a9a;
}

:root[data-theme="dark"] .btn-dropdown {
  box-shadow: 0 8px 24px #ffffff1f,
    0 2px 4px #ffffff0a;
}

:root[data-theme="dark"] .dropdown-item {
  color: #9a9a9a;
}

:root[data-theme="dark"] .dropdown-item:hover {
  background: #ffffff14;
}

:root[data-theme="dark"] #urlBetaAuthBtn:hover:not(:disabled) {
  color: #787878;
}

:root[data-theme="dark"] .styles-props-section {
  border-bottom: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .type-tag {
  color: #9a9a9a;
  background: #2e2e2e;
}

:root[data-theme="dark"] .spacing-label {
  color: #b9b9b9;
}

:root[data-theme="dark"] .sp-search-bar {
  border-bottom: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .sp-search-input {
  background: #343434;
}

:root[data-theme="dark"] .sp-search-input:focus {
  box-shadow: 0 0 0 3px #9d8aff1a;
}

:root[data-theme="dark"] .sp-search-clear:hover {
  background: #2e2e2e;
}

:root[data-theme="dark"] .sp-filter-icon-btn:hover {
  border-color: #555555;
  background: #343434;
  color: #b9b9b9;
}

:root[data-theme="dark"] .sp-filter-icon-btn.is-active {
  border-color: #9d8aff52;
  background: #9d8aff14;
}

:root[data-theme="dark"] .sp-filter-menu-item.active {
  background: #ffffff14;
}

:root[data-theme="dark"] .sp-pill-count {
  color: #b9b9b9;
}

:root[data-theme="dark"] .sp-filter-menu-item.active .sp-pill-count {
  background: #9d8aff24;
}

:root[data-theme="dark"] .sp-count-badge {
  color: #9d8affce;
  background: #9d8aff12;
}

:root[data-theme="dark"] .sp-style-item:hover {
  background: #343434;
}

:root[data-theme="dark"] .sp-style-item:focus-visible {
  background: #9d8aff0f;
  box-shadow: inset 0 0 0 1.5px #9d8aff33;
}

:root[data-theme="dark"] .typography-item.sp-style-item:hover {
  background: #343434;
  box-shadow: 0 2px 8px #0000000a;
}

:root[data-theme="dark"] .sp-style-item.sp-selected {
  background: #9d8aff0f;
  box-shadow: inset 0 0 0 1.5px #9d8aff33;
}

:root[data-theme="dark"] .sp-action-btn:hover {
  background: #9d8aff0f;
}

:root[data-theme="dark"] .sp-inline-edit {
  box-shadow: 0 0 0 3px #9d8aff1a;
}

:root[data-theme="dark"] .sp-editable:hover {
  background: #2e2e2e;
}

:root[data-theme="dark"] .sp-border-item:hover {
  background: #343434;
  box-shadow: 0 2px 8px #0000000a;
}

:root[data-theme="dark"] .sp-border-item.sp-selected {
  background: #9d8aff0f;
  border-color: #9d8aff3d;
  box-shadow: inset 0 0 0 1px #9d8aff29;
}

:root[data-theme="dark"] .sp-border-item:focus-visible,
:root[data-theme="dark"] .sp-shadow-item:focus-visible,
:root[data-theme="dark"] .radius-item:focus-visible,
:root[data-theme="dark"] .spacing-row:focus-visible,
:root[data-theme="dark"] .typography-item:focus-visible {
  border-color: #9d8aff3d;
}

:root[data-theme="dark"] .sp-shadow-item:hover {
  background: #343434;
  box-shadow: 0 2px 8px #0000000a;
}

:root[data-theme="dark"] .sp-shadow-item.sp-selected {
  background: #9d8aff0f;
  border-color: #9d8aff3d;
  box-shadow: inset 0 0 0 1px #9d8aff29;
}

:root[data-theme="dark"] .sp-shadow-preview {
  border: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .spacing-row:hover {
  background: #343434;
  box-shadow: 0 2px 8px #0000000a;
}

:root[data-theme="dark"] .radius-item:hover {
  background: #343434;
  box-shadow: 0 2px 8px #0000000a;
}

:root[data-theme="dark"] .radius-item.sp-selected {
  background: #9d8aff0f;
  border-color: #9d8aff3d;
  box-shadow: inset 0 0 0 1px #9d8aff29;
}

:root[data-theme="dark"] .radius-box {
  background: linear-gradient(180deg, var(--bg-sidebar), #343434);
}

:root[data-theme="dark"] .radius-label {
  color: #b9b9b9;
}

:root[data-theme="dark"] .storage-onboarding-overlay {
  background: #3838381a !important;
}

:root[data-theme="dark"] .storage-card {
  box-shadow: 0 24px 56px -12px #00000038,
    0 8px 16px -6px #00000014;
}

:root[data-theme="dark"] .storage-card-compact {
  box-shadow: 0 14px 34px -16px #00000033,
    0 6px 14px -10px #00000014;
}

:root[data-theme="dark"] .storage-card-compact .storage-pane-info {
  background: linear-gradient(180deg, #9d8aff0d, #9d8aff00);
}

:root[data-theme="dark"] .storage-pane-info {
  background: linear-gradient(180deg, #9d8aff12, #9d8aff08);
}

:root[data-theme="dark"] .storage-pane-recents {
  background: linear-gradient(180deg, #383838f5, #383838e0);
}

:root[data-theme="dark"] .storage-close-btn:hover {
  background: var(--border-color-light, #2e2e2e);
}

:root[data-theme="dark"] .storage-divider {
  background: var(--border-color-light, #2e2e2e);
}

:root[data-theme="dark"] .storage-btn-primary {
  background: linear-gradient(170deg, #b0a8ff, #8a7bff);
  box-shadow: 0 6px 20px #b0a8ff33;
}

:root[data-theme="dark"] .storage-btn-primary:hover {
  box-shadow: 0 12px 26px #b0a8ff42;
}

:root[data-theme="dark"] .storage-recents-empty-btn {
  background: #9d8aff14;
}

:root[data-theme="dark"] .storage-recents-empty-btn:hover {
  background: #9d8aff1f;
}

:root[data-theme="dark"] .storage-recent-card:hover,
:root[data-theme="dark"] .storage-recent-card:focus-visible {
  background-image: linear-gradient(90deg, #9d8aff0a, #9d8aff0a),
    linear-gradient(90deg, var(--bg-sidebar), var(--bg-sidebar));
}

:root[data-theme="dark"] .storage-recent-icon {
  border: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .storage-recent-card:hover .storage-recent-icon,
:root[data-theme="dark"] .storage-recent-card:focus-visible .storage-recent-icon {
  border-color: #3a3a3a;
}

:root[data-theme="dark"] .storage-recent-meta {
  color: #ffffff89;
}

:root[data-theme="dark"] .connector-trigger:hover {
  background: #ffffff0a;
}

:root[data-theme="dark"] .connector-dropdown {
  box-shadow: 0 10px 25px #00000026;
}

:root[data-theme="dark"] .styles-toolbar-divider {
  background: #ffffff0d;
}

:root[data-theme="dark"] .styles-toolbar-button-save.is-active {
  box-shadow: inset 0 0 0 1px #b89cff14;
}

:root[data-theme="dark"] .styles-toolbar-save-description {
  color: #9a9a9a;
}

:root[data-theme="dark"] .styles-toolbar-save-action-secondary {
  background: #ffffff0f;
}

:root[data-theme="dark"] .styles-toolbar-save-action-secondary:hover,
:root[data-theme="dark"] .styles-toolbar-save-action-secondary:focus-visible {
  background: #ffffff17;
}

:root[data-theme="dark"] .styles-toolbar-save-action-primary {
  box-shadow: 0 10px 24px #ffffff1f;
}

:root[data-theme="dark"] .styles-toolbar-preview-popover {
  background: #ffffffb3;
}

:root[data-theme="dark"] .styles-toolbar-preview-card {
  box-shadow: 0 0 0 1px #ffffff12;
}

:root[data-theme="dark"] .styles-toolbar-preview-header {
  box-shadow: inset 0 -1px #00000012;
}

:root[data-theme="dark"] .styles-toolbar-preview-close-icon:before,
:root[data-theme="dark"] .styles-toolbar-preview-close-icon:after {
  background: #ffffff;
}

:root[data-theme="dark"] .styles-toolbar-preview-row:hover,
:root[data-theme="dark"] .styles-toolbar-preview-row:focus-visible {
  background: #3838380f;
}

:root[data-theme="dark"] .styles-toolbar-preview-row-copy:hover,
:root[data-theme="dark"] .styles-toolbar-preview-row-copy:focus-visible {
  background: #3838381a;
}

:root[data-theme="dark"] .styles-toolbar-export-option {
  background: #ffffff0f;
}

:root[data-theme="dark"] .styles-toolbar-export-option:hover,
:root[data-theme="dark"] .styles-toolbar-export-option:focus-visible {
  background: #ffffff17;
}

:root[data-theme="dark"] .styles-toolbar-preview-footer {
  box-shadow: inset 0 1px #00000012;
}

:root[data-theme="dark"] .styles-toolbar-preview-strip {
  background: #343434;
  box-shadow: inset 0 0 0 1px #00000012;
}

:root[data-theme="dark"] .styles-palette-board {
  border-right: 1px solid #3a3a3a;
}

:root[data-theme="dark"] .styles-palette-board.has-variant-swatches:after {
  border: 1px solid #464646;
}

:root[data-theme="dark"] .styles-palette-edge-trigger {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-palette-edge-level-option {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-palette-column {
  color: var(--styles-palette-fg, #ffffff);
}

:root[data-theme="dark"] .styles-palette-column.is-dragging {
  box-shadow: 0 18px 38px #0000002e;
}

:root[data-theme="dark"] .styles-palette-column.is-rose {
  background: #d4b0af;
}

:root[data-theme="dark"] .styles-palette-column.is-navy {
  background: #a0b0c8;
}

:root[data-theme="dark"] .styles-palette-variant-swatch:first-child:before,
:root[data-theme="dark"] .styles-palette-variant-footer:after {
  background: #464646;
}

:root[data-theme="dark"] .styles-palette-variant-footer {
  background: #38383894;
}

:root[data-theme="dark"] .styles-palette-variant-swatch-label {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-palette-hex-shell:focus-visible {
  box-shadow: 0 0 0 2px #3838384d,
    0 0 0 4px #0000002e;
}

:root[data-theme="dark"] .styles-palette-picker-popover {
  box-shadow: 0 0 0 1px #ffffff12,
    0 5px 10px #ffffff1a;
}

:root[data-theme="dark"] .styles-palette-picker-spectrum {
  box-shadow: inset 0 0 0 1px #ffffff1a;
}

:root[data-theme="dark"] .styles-palette-picker-spectrum:after {
  background: linear-gradient(180deg, #fff0, #ffffff);
}

:root[data-theme="dark"] .styles-palette-picker-spectrum-cursor {
  box-shadow: 0 10px 10px #ffffff0d;
}

:root[data-theme="dark"] .styles-palette-picker-hue-track {
  box-shadow: inset 0 0 0 1px #ffffff1a;
}

:root[data-theme="dark"] .styles-palette-picker-input-preview {
  box-shadow: inset 0 0 0 1px #ffffff12;
}

:root[data-theme="dark"] .styles-palette-picker-footer {
  box-shadow: inset 0 1px #ffffff12;
}

:root[data-theme="dark"] .styles-palette-picker-mode {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-palette-picker-action {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-palette-picker-action:hover,
:root[data-theme="dark"] .styles-palette-picker-action:focus-visible,
:root[data-theme="dark"] .styles-palette-picker-mode:hover,
:root[data-theme="dark"] .styles-palette-picker-mode:focus-visible {
  background: #ffffff0a;
}

:root[data-theme="dark"] .styles-palette-info-popover {
  box-shadow: 0 0 0 1px #ffffff12,
    0 12px 28px #00000024;
}

:root[data-theme="dark"] .styles-palette-info-swatch {
  box-shadow: inset 0 0 0 1px #ffffff14;
  background: #ffffff;
}

:root[data-theme="dark"] .styles-palette-info-name {
  color: #e0e0e0;
}

:root[data-theme="dark"] .styles-palette-info-subtitle {
  color: #888888;
}

:root[data-theme="dark"] .styles-palette-info-row {
  background: #343434;
  color: #e0e0e0;
}

:root[data-theme="dark"] .styles-palette-info-row:hover,
:root[data-theme="dark"] .styles-palette-info-row:focus-visible,
:root[data-theme="dark"] .styles-palette-info-close:hover,
:root[data-theme="dark"] .styles-palette-info-close:focus-visible {
  background: #2e2e2e;
}

:root[data-theme="dark"] .styles-palette-info-label {
  color: #888888;
}

:root[data-theme="dark"] .styles-palette-info-value {
  color: #e0e0e0;
}

:root[data-theme="dark"] .styles-palette-info-hint {
  color: #888888;
}

:root[data-theme="dark"] .styles-palette-info-close {
  color: #e0e0e0;
}

:root[data-theme="dark"] .styles-palette-contrast-popover {
  box-shadow: 0 0 0 1px #ffffff0f,
    0 18px 36px #00000024;
}

:root[data-theme="dark"] .styles-palette-contrast-swatch {
  box-shadow: inset 0 0 0 1px #38383838,
    0 10px 20px #0000001a;
  background: #ffffff;
}

:root[data-theme="dark"] .styles-palette-contrast-name {
  color: #e0e0e0;
}

:root[data-theme="dark"] .styles-palette-contrast-subtitle {
  color: #888888;
}

:root[data-theme="dark"] .styles-palette-contrast-option {
  background: linear-gradient(180deg, #fbfcfe, #343434);
}

:root[data-theme="dark"] .styles-palette-contrast-option.is-pass {
  background: linear-gradient(180deg, #1a3329, #1e3b2e);
}

:root[data-theme="dark"] .styles-palette-contrast-option.is-fail {
  background: linear-gradient(180deg, #343434, #2e2e2e);
}

:root[data-theme="dark"] .styles-palette-contrast-preview {
  box-shadow: inset 0 0 0 1px #ffffff14,
    0 6px 14px #00000014;
}

:root[data-theme="dark"] .styles-palette-contrast-label {
  color: #e0e0e0;
}

:root[data-theme="dark"] .styles-palette-tool[aria-label="Lock palette"].is-locked {
  background: #ffffff1a;
}

:root[data-theme="dark"] .styles-visualizer-filter-button {
  border: 1px solid #464646;
  color: #ffffff;
}

:root[data-theme="dark"] .styles-visualizer-filter-button:hover,
:root[data-theme="dark"] .styles-visualizer-filter-button:focus-visible,
:root[data-theme="dark"] .styles-visualizer-filter-button[aria-expanded="true"] {
  border-color: #555555;
  box-shadow: 0 0 0 3px #9d8aff14;
}

:root[data-theme="dark"] .styles-visualizer-filter-item.is-active {
  background: #ffffff14;
}

:root[data-theme="dark"] .styles-gallery-card {
  background: #464646;
}

:root[data-theme="dark"] .styles-gallery-surface {
  background: #464646;
}

:root[data-theme="dark"] .styles-snapshot-close-button {
  color: #e0e0e0;
}

:root[data-theme="dark"] .styles-snapshot-close-button:hover {
  background: #343434;
}

:root[data-theme="dark"] .styles-snapshot-tabs {
  background: #343434;
}

:root[data-theme="dark"] .styles-snapshot-tab {
  color: #888888;
}

:root[data-theme="dark"] .styles-snapshot-tab.is-active {
  color: #ffffff;
  box-shadow: 0 1px 2px #ffffff0d;
}

:root[data-theme="dark"] .styles-snapshot-upload {
  color: #888888;
}

:root[data-theme="dark"] .styles-snapshot-upload-title {
  color: #e0e0e0;
}

:root[data-theme="dark"] .styles-snapshot-upload-hint {
  color: #787878;
}

:root[data-theme="dark"] .styles-snapshot-preview {
  background: #464646;
  box-shadow: inset 0 0 0 1px #0000000f;
}

:root[data-theme="dark"] .styles-snapshot-replace-button {
  box-shadow: 0 0 0 1px #ffffff0d,
    0 4px 10px #0000001f;
}

:root[data-theme="dark"] .styles-snapshot-replace-button:hover {
  background: #3838381f;
}

:root[data-theme="dark"] .styles-snapshot-replace-button.is-dragging {
  box-shadow: 0 0 0 1px #ffffff0d,
    0 8px 18px #0000002e;
}

:root[data-theme="dark"] .styles-snapshot-palette-bar {
  background: #343434;
}

:root[data-theme="dark"] .styles-snapshot-color-strip {
  box-shadow: inset -1px 0 #38383829;
}

:root[data-theme="dark"] .styles-snapshot-palette-indicator {
  box-shadow: 0 0 0 1px #ffffff12;
}

:root[data-theme="dark"] .styles-snapshot-range {
  background: #3a3a3a;
}

:root[data-theme="dark"] .styles-snapshot-range::-webkit-slider-runnable-track {
  background: #3a3a3a;
}

:root[data-theme="dark"] .styles-snapshot-range::-webkit-slider-thumb {
  box-shadow: 0 0 0 1px #ffffff05;
}

:root[data-theme="dark"] .styles-snapshot-range::-moz-range-track {
  background: #3a3a3a;
}

:root[data-theme="dark"] .styles-snapshot-range::-moz-range-thumb {
  box-shadow: 0 0 0 1px #ffffff05;
}

:root[data-theme="dark"] .styles-snapshot-stepper-button {
  background: #3a3a3a;
  color: #9a9a9a;
}

:root[data-theme="dark"] .styles-snapshot-stepper-button:hover {
  background: #424242;
}

:root[data-theme="dark"] .styles-snapshot-apply-button {
  box-shadow: 0 1px 2px #ffffff0d;
}

:root[data-theme="dark"] .styles-gallery-hero-topbar {
  color: #a0aabb;
}

:root[data-theme="dark"] .styles-gallery-hero-brand {
  color: #e0e0e0;
}

:root[data-theme="dark"] .styles-gallery-hero-chip {
  border: 0.75px solid #555555;
  color: #c0c0c0;
}

:root[data-theme="dark"] .styles-gallery-hero-chip--accent {
  color: #c0dddd;
}

:root[data-theme="dark"] .styles-gallery-hero-copy {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-gallery-hero-copy p {
  color: #9a9a9a;
}

:root[data-theme="dark"] .styles-gallery-hero-stats strong {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-gallery-hero-stats span {
  color: #888888;
}

:root[data-theme="dark"] .hero-shape--navy-circle {
  background: #a0b0c8;
}

:root[data-theme="dark"] .styles-gallery-ribbon {
  background: #464646;
}

:root[data-theme="dark"] .styles-gallery-ribbon-stars .star--navy {
  color: #a0b0c8;
}

:root[data-theme="dark"] .styles-gallery-ribbon-stars .star--rose {
  color: #d4b0af;
}

:root[data-theme="dark"] .styles-gallery-ribbon-stars .star--rose-soft {
  color: #e8c8bc;
}

:root[data-theme="dark"] .styles-gallery-ribbon-blob--left-small {
  background: #a0b0c8;
}

:root[data-theme="dark"] .styles-gallery-ribbon-blob--right-small {
  background: #a0b0c8;
}

:root[data-theme="dark"] .styles-gallery-surface--glyph {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-adjust-description {
  color: #ffffff9e;
}

:root[data-theme="dark"] .styles-adjust-slider-head {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-adjust-slider-value {
  color: #ffffff94;
}

:root[data-theme="dark"] .styles-adjust-range::-webkit-slider-runnable-track {
  box-shadow: inset 0 0 0 1px #ffffff1a;
}

:root[data-theme="dark"] .styles-adjust-range::-moz-range-track {
  box-shadow: inset 0 0 0 1px #ffffff1a;
}

:root[data-theme="dark"] .styles-adjust-range:focus-visible::-webkit-slider-runnable-track,
:root[data-theme="dark"] .styles-adjust-range:focus-visible::-moz-range-track {
  box-shadow: inset 0 0 0 1px #ffffff1a,
    0 0 0 3px #6c46ff1f;
}

:root[data-theme="dark"] .styles-adjust-reset-button {
  color: #ffffff;
}

:root[data-theme="dark"] .styles-adjust-reset-button:hover {
  background: #2e2e3e;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL DARK THEME ICON OVERRIDES
   ═══════════════════════════════════════════════════════════ */
:root[data-theme="dark"] img[src*="image/svg"],
:root[data-theme="dark"] [class*="icon"] svg,
:root[data-theme="dark"] svg[class*="icon"],
:root[data-theme="dark"] button svg,
:root[data-theme="dark"] button img,
:root[data-theme="dark"] .sidebar-panel-toggle-icon img,
:root[data-theme="dark"] .tree-tab-icon img,
:root[data-theme="dark"] .figma-tool-btn img,
:root[data-theme="dark"] .figma-align-menu-item img,
:root[data-theme="dark"] .sidebar-profile-menu__icon svg,
:root[data-theme="dark"] .sidebar-profile-badge-icon svg,
:root[data-theme="dark"] .dropzone-icon svg,
:root[data-theme="dark"] .theme-icon {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
    transition: opacity 0.2s ease !important;
}

/* Hover state restored to white */
:root[data-theme="dark"] *:hover > img[src*="image/svg"],
:root[data-theme="dark"] *:hover > svg[class*="icon"],
:root[data-theme="dark"] *:hover > [class*="icon"] svg,
:root[data-theme="dark"] button:hover svg,
:root[data-theme="dark"] button:hover img,
:root[data-theme="dark"] .sidebar-panel-toggle-icon:hover img,
:root[data-theme="dark"] .tree-tab:hover .tree-tab-icon img,
:root[data-theme="dark"] .figma-tool-btn:hover img,
:root[data-theme="dark"] .figma-align-menu-item:hover img,
:root[data-theme="dark"] .sidebar-profile-menu__item:hover .sidebar-profile-menu__icon svg,
:root[data-theme="dark"] [class*="btn"]:hover img[src*="image/svg"],
:root[data-theme="dark"] [class*="btn"]:hover svg,
:root[data-theme="dark"] div:hover > img[src*="image/svg"],
:root[data-theme="dark"] div:hover > svg {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}

/* Toolbar Icon Backgrounds */
:root[data-theme="dark"] .styles-toolbar-icon:hover {
    background-color: #ffffff14 !important;
}

:root[data-theme="dark"] .styles-toolbar-icon.is-active,
:root[data-theme="dark"] .styles-toolbar-icon[aria-pressed="true"],
:root[data-theme="dark"] .styles-toolbar-icon:active {
    background-color: #2a2931 !important;
}


/* Toolbar Button Hover & Active States */
:root[data-theme="dark"] .styles-toolbar-button:hover,
:root[data-theme="dark"] .styles-toolbar-button-save:hover {
    background-color: #ffffff14 !important;
}

:root[data-theme="dark"] .styles-toolbar-button:active,
:root[data-theme="dark"] .styles-toolbar-button.is-active,
:root[data-theme="dark"] .styles-toolbar-button[aria-pressed="true"],
:root[data-theme="dark"] .styles-toolbar-button-save:active,
:root[data-theme="dark"] .styles-toolbar-button-save.is-active {
    background-color: #2a2931 !important;
}


/* Standardized Dark Theme Dropdown Panel Styles (Matching .free-paid-dropdown-panel) */
:root[data-theme="dark"] .btn-dropdown,
:root[data-theme="dark"] .sidebar-profile-menu__panel,
:root[data-theme="dark"] .figma-align-menu,
:root[data-theme="dark"] .history-card-header-menu,
:root[data-theme="dark"] .sp-dropdown-menu,
:root[data-theme="dark"] .styles-palette-menu {
    background: #1e1e1e !important;
    border: 1px solid #343434 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3), 3px 0 20px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
}

/* Adjust gap if they wanted the 8px spacing, though 2px-4px is standard for standard menus, let's just make the wrappers flex and gap 8px where it applies directly to children */
:root[data-theme="dark"] .btn-dropdown,
:root[data-theme="dark"] .sidebar-profile-menu__actions,
:root[data-theme="dark"] .figma-align-menu,
:root[data-theme="dark"] .history-card-header-menu {
    gap: 8px !important;
}


/* Force dropdown text to be white in dark mode */
:root[data-theme="dark"] .typeface-font-picker__option,
:root[data-theme="dark"] .typeface-select-menu > *,
:root[data-theme="dark"] .btn-dropdown > *,
:root[data-theme="dark"] .dropdown-item,
:root[data-theme="dark"] .sidebar-profile-menu__item,
:root[data-theme="dark"] .sidebar-profile-menu__name,
:root[data-theme="dark"] .sidebar-profile-menu__email,
:root[data-theme="dark"] .figma-align-menu-item,
:root[data-theme="dark"] .history-card-header-menu-item,
:root[data-theme="dark"] .styles-toolbar-button,
:root[data-theme="dark"] .styles-toolbar-button-save,
:root[data-theme="dark"] .styles-toolbar-button-label {
    color: #ffffff !important;
}


/* Active Text Color in Dark Mode */
:root[data-theme="dark"] .typeface-font-picker__option.is-active,
:root[data-theme="dark"] .typeface-select-menu > *.is-active,
:root[data-theme="dark"] .btn-dropdown > *.is-active,
:root[data-theme="dark"] .btn-dropdown > *.active,
:root[data-theme="dark"] .dropdown-item.is-active,
:root[data-theme="dark"] .dropdown-item.active,
:root[data-theme="dark"] .sidebar-profile-menu__item.is-active,
:root[data-theme="dark"] .sidebar-profile-menu__item.active,
:root[data-theme="dark"] .figma-align-menu-item.is-active,
:root[data-theme="dark"] .figma-align-menu-item.active,
:root[data-theme="dark"] .history-card-header-menu-item.is-active,
:root[data-theme="dark"] .history-card-header-menu-item.active,
:root[data-theme="dark"] .styles-toolbar-button:active,
:root[data-theme="dark"] .styles-toolbar-button.is-active,
:root[data-theme="dark"] .styles-toolbar-button[aria-pressed="true"],
:root[data-theme="dark"] .styles-toolbar-button-save:active,
:root[data-theme="dark"] .styles-toolbar-button-save.is-active {
    color: #705BEF !important;
}

/* Also ensure any nested text inside active buttons gets the color */
:root[data-theme="dark"] .styles-toolbar-button:active .styles-toolbar-button-label,
:root[data-theme="dark"] .styles-toolbar-button.is-active .styles-toolbar-button-label,
:root[data-theme="dark"] .styles-toolbar-button[aria-pressed="true"] .styles-toolbar-button-label {
    color: #705BEF !important;
}


/* Update edge trigger hover for dark mode */
:root[data-theme="dark"] .styles-palette-edge-trigger:hover .styles-palette-edge-trigger-inner,
:root[data-theme="dark"] .styles-palette-edge-trigger:focus-visible .styles-palette-edge-trigger-inner,
:root[data-theme="dark"] .styles-palette-edge.is-open .styles-palette-edge-trigger-inner {
    background-color: #ffffff24 !important;
}


/* FINAL DARK THEME AUDIT OVERRIDES */

/* 1. Missing Search Inputs & Wrappers */
:root[data-theme="dark"] .command-palette-input,
:root[data-theme="dark"] .history-popup-search,
:root[data-theme="dark"] .sp-search-input-wrap,
:root[data-theme="dark"] .typeface-font-picker__search-wrap {
    background-color: #1e1e1e !important;
    border-color: #343434 !important;
}

/* Ensure the inputs themselves are transparent or dark and text is white */
:root[data-theme="dark"] .history-popup-search-input,
:root[data-theme="dark"] .sp-search-input,
:root[data-theme="dark"] .typeface-font-picker__search,
:root[data-theme="dark"] .command-palette-input {
    background: transparent !important;
    color: #ffffff !important;
}

/* 2. Placeholders */
:root[data-theme="dark"] .command-palette-input::placeholder,
:root[data-theme="dark"] .history-popup-search-input::placeholder,
:root[data-theme="dark"] .typeface-font-picker__search::placeholder,
:root[data-theme="dark"] .sp-search-input::placeholder {
    color: #888888 !important;
}

/* 3. Invert Search Icons */
:root[data-theme="dark"] .command-palette-search-icon,
:root[data-theme="dark"] .history-popup-search-icon,
:root[data-theme="dark"] .typeface-font-picker__search-icon,
:root[data-theme="dark"] .sp-search-icon {
    filter: brightness(0) invert(1) !important;
    opacity: 0.6 !important;
}

/* 4. Scrollbar Tracks */
:root[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #1a1a1a !important;
}
:root[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #343434 !important;
}

/* 5. Modals & Popups Backgrounds */
:root[data-theme="dark"] .command-palette,
:root[data-theme="dark"] .command-palette-modal,
:root[data-theme="dark"] .history-popup {
    background: #1a1a1a !important;
    border: 1px solid #343434 !important;
}

/* 6. Stray Dividers / Borders in Modals */
:root[data-theme="dark"] .command-palette-header,
:root[data-theme="dark"] .command-palette-footer,
:root[data-theme="dark"] .history-popup-header,
:root[data-theme="dark"] .history-popup-section-menu,
:root[data-theme="dark"] .history-popup-title-btn {
    border-color: #343434 !important;
}

/* Ensure command palette items are visible */
:root[data-theme="dark"] .command-palette-item-title {
    color: #ffffff !important;
}
:root[data-theme="dark"] .command-palette-item-subtitle {
    color: #aaaaaa !important;
}


/* Fixes for Toolbar Preview/Export Cards and Backdrop */

/* Fix the blinding white backdrop overlay */
:root[data-theme="dark"] .styles-toolbar-preview-popover {
    background: rgba(0, 0, 0, 0.7) !important;
}

/* Update the cards to use standard dark theme panel styles */
:root[data-theme="dark"] .styles-toolbar-preview-card,
:root[data-theme="dark"] .styles-toolbar-export-card,
:root[data-theme="dark"] .styles-toolbar-export-body {
    background: #1a1a1a !important;
    border: 1px solid #343434 !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8) !important;
}

/* Ensure text inside headers is white */
:root[data-theme="dark"] .styles-toolbar-preview-title,
:root[data-theme="dark"] .styles-toolbar-export-title {
    color: #ffffff !important;
}

/* Ensure the header border matches */
:root[data-theme="dark"] .styles-toolbar-preview-header {
    border-bottom: 1px solid #343434 !important;
    box-shadow: none !important;
}


/* Fixes for Toolbar Preview/Export Cards Text & Hover States */

/* Hover states for rows */
:root[data-theme="dark"] .styles-toolbar-preview-row:hover,
:root[data-theme="dark"] .styles-toolbar-preview-row:focus-visible,
:root[data-theme="dark"] .styles-toolbar-preview-row-copy:hover,
:root[data-theme="dark"] .styles-toolbar-preview-row-copy:focus-visible,
:root[data-theme="dark"] .styles-toolbar-export-option:hover,
:root[data-theme="dark"] .styles-toolbar-export-option:focus-visible {
    background: #ffffff14 !important;
}

/* Close button hover */
:root[data-theme="dark"] .styles-toolbar-preview-close:hover,
:root[data-theme="dark"] .styles-toolbar-preview-close:focus-visible,
:root[data-theme="dark"] .styles-toolbar-export-close:hover,
:root[data-theme="dark"] .styles-toolbar-export-close:focus-visible {
    background: #ffffff14 !important;
}

/* Text Colors */
:root[data-theme="dark"] .styles-toolbar-preview-label {
    color: #a0a0a0 !important;
}
:root[data-theme="dark"] .styles-toolbar-preview-value {
    color: #ffffff !important;
}

:root[data-theme="dark"] .styles-toolbar-export-option-label {
    color: #ffffff !important;
}
:root[data-theme="dark"] .styles-toolbar-export-option-desc {
    color: #a0a0a0 !important;
}

/* Ensure icons/svgs in these rows invert correctly */
:root[data-theme="dark"] .styles-toolbar-preview-copy-icon,
:root[data-theme="dark"] .styles-toolbar-export-icon {
    filter: brightness(0) invert(1) !important;
}


/* Fix border stroke issue (prevent double borders and box model shifts) */
:root[data-theme="dark"] .styles-toolbar-preview-card,
:root[data-theme="dark"] .styles-toolbar-export-card {
    background: #1e1e1e !important;
    border: none !important;
    box-shadow: 0 0 0 1px #343434, 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    border-radius: 12px !important;
}

/* Strip inner body of redundant styling */
:root[data-theme="dark"] .styles-toolbar-export-body {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* Fix toggle pill background to have a right transparent gradient */
:root[data-theme="dark"] .sidebar-panel-toggle-pill {
    background: linear-gradient(90deg, #ffffff1a 0%, rgba(255, 255, 255, 0) 100%) !important;
}

/* Fix figma-align-menu-item hover states (for toolbarAddMenu and toolbarAlignMenu) */
:root[data-theme="dark"] #toolbarAddMenu .figma-align-menu-item:hover,
:root[data-theme="dark"] #toolbarAlignMenu .figma-align-menu-item:hover,
:root[data-theme="dark"] .figma-align-menu-item:hover {
    background: #ffffff14 !important;
}


/* Explicitly style toolbarAddMenu and toolbarAlignMenu exactly like btn-dropdown */
:root[data-theme="dark"] #toolbarAddMenu,
:root[data-theme="dark"] #toolbarAlignMenu {
    background: #1e1e1e !important;
    border: 1px solid #343434 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3), 3px 0 20px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
    gap: 8px !important;
    display: flex;
    flex-direction: column;
}

/* Ensure text inside them defaults to white */
:root[data-theme="dark"] #toolbarAddMenu > *,
:root[data-theme="dark"] #toolbarAlignMenu > * {
    color: #ffffff !important;
}


/* Fix always-open bug: only display when .open is present */
:root[data-theme="dark"] #toolbarAddMenu:not(.open),
:root[data-theme="dark"] #toolbarAlignMenu:not(.open) {
    display: none !important;
}

/* Fix figma-align-menu-item hover to be a nice dark grey, completely removing any 'white' background */
:root[data-theme="dark"] #toolbarAddMenu .figma-align-menu-item:hover,
:root[data-theme="dark"] #toolbarAlignMenu .figma-align-menu-item:hover,
:root[data-theme="dark"] .figma-align-menu-item:hover {
    background: rgb(87, 56, 207) !important;
  color: #ffffff !important;
  outline: none !important;
}


/* Fix base background of menu items so they are transparent and blend perfectly into the #1e1e1e popup panel */
:root[data-theme="dark"] .figma-align-menu-item {
    background: transparent !important;
}


/* Unify all dropdown menu items to use the free-paid-dropdown-option hover style (rgb(87, 56, 207)) */
:root[data-theme="dark"] .figma-align-menu-item:hover,
:root[data-theme="dark"] .dropdown-item:hover,
:root[data-theme="dark"] .sidebar-profile-menu__item:hover,
:root[data-theme="dark"] .history-card-header-menu-item:hover,
:root[data-theme="dark"] .history-popup-filter-item:hover,
:root[data-theme="dark"] .styles-toolbar-export-option:hover,
:root[data-theme="dark"] .typeface-font-picker__option:hover,
:root[data-theme="dark"] .sp-dropdown-menu > *:hover {
    background: rgb(87, 56, 207) !important;
    outline: none !important;
    color: #ffffff !important;
}

/* Ensure any svgs or images inside these items become perfectly white on hover */
:root[data-theme="dark"] .figma-align-menu-item:hover img,
:root[data-theme="dark"] .figma-align-menu-item:hover svg,
:root[data-theme="dark"] .dropdown-item:hover img,
:root[data-theme="dark"] .dropdown-item:hover svg,
:root[data-theme="dark"] .sidebar-profile-menu__item:hover img,
:root[data-theme="dark"] .sidebar-profile-menu__item:hover svg,
:root[data-theme="dark"] .history-card-header-menu-item:hover img,
:root[data-theme="dark"] .history-card-header-menu-item:hover svg {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}


/* Make toolbar menus globally dark and match the free-paid panel sizing across ALL themes */
#toolbarAddMenu,
#toolbarAlignMenu {
    background: #1e1e1e !important;
    border: 1px solid #343434 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.3), 3px 0 20px rgba(0, 0, 0, 0.12) !important;
    padding: 8px !important;
    gap: 8px !important;
    flex-direction: column;
}

#toolbarAddMenu > *,
#toolbarAlignMenu > * {
    color: #ffffff !important;
}

#toolbarAddMenu .figma-align-menu-item,
#toolbarAlignMenu .figma-align-menu-item,
.figma-align-menu-item {
    background: transparent !important;
    color: #ffffff !important;
    padding: 5.5px 8px !important;
}

/* Unified hover state globally (no data-theme prefix) */
#toolbarAddMenu .figma-align-menu-item:hover,
#toolbarAlignMenu .figma-align-menu-item:hover,
.figma-align-menu-item:hover {
    background: rgb(87, 56, 207) !important;
    outline: none !important;
    color: #ffffff !important;
}

/* Ensure nested SVGs invert correctly by default (against dark panel) and on hover */
#toolbarAddMenu .figma-align-menu-item img,
#toolbarAddMenu .figma-align-menu-item svg,
#toolbarAlignMenu .figma-align-menu-item img,
#toolbarAlignMenu .figma-align-menu-item svg,
.figma-align-menu-item img,
.figma-align-menu-item svg {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important;
}


/* Standardize padding, size, and color for ALL menu items across the entire app */
.figma-align-menu-item,
.dropdown-item,
.sidebar-profile-menu__item,
.history-card-header-menu-item,
.history-popup-filter-item,
.styles-toolbar-export-option,
.typeface-font-picker__option {
    background: transparent !important;
    color: #ffffff !important;
    padding: 5.5px 8px !important;
    font-size: 11px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 400 !important;
}


/* Reduce width of the toolbar dropdowns */
#toolbarAddMenu,
#toolbarAlignMenu {
    width: max-content !important;
    min-width: 130px !important;
}


/* Force exact width of 150px as requested */
#toolbarAddMenu,
#toolbarAlignMenu {
    width: 150px !important;
    min-width: 150px !important;
}


/* Premium dark-mode styling for the explorer-title-badge */
:root[data-theme="dark"] .explorer-title-badge {
    background: rgba(87, 56, 207, 0.15) !important;
    color: #9988FF !important;
    border: 1px solid rgba(153, 136, 255, 0.25) !important;
}



/* Premium dark-mode styling for the active tab button */
:root[data-theme="dark"] .tab-btn.active {
    background: #383838 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
    border-radius: 8px !important;
}


/* Make the active tab button highly noticeable without being a heavy panel */
:root[data-theme="dark"] .tab-btn.active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px !important;
}


/* Increase tab-container contrast (darker/higher opacity feel) in dark mode */
:root[data-theme="dark"] .tab-container {
    background: #3D3D3D !important;
    border: none !important;
}

/* Add smooth tab switch animation for the active state */
.tab-btn {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ═══════════════ GLOBALLY SYNCED DARK THEME OVERRIDES ═══════════════ */

/* Fix for logo showing solid white due to global icon filter */
:root[data-theme="dark"] .storage-onboarding-overlay .storage-icon img {
  filter: none !important;
}

/* Overlay Backdrop */
:root[data-theme="dark"] .storage-onboarding-overlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* Storage pane backgrounds */
:root[data-theme="dark"] .storage-onboarding-overlay .storage-pane-info,
:root[data-theme="dark"] .storage-onboarding-overlay .storage-pane-recents,
:root[data-theme="dark"] .storage-onboarding-overlay .storage-pane-compact {
  background: #18181b !important;
}

/* Storage pane recents text and empty state */
:root[data-theme="dark"] .storage-onboarding-overlay .storage-recents-title {
  color: #e4e4e7;
}

:root[data-theme="dark"] .storage-onboarding-overlay .storage-recents-count {
  color: #a1a1aa;
}

:root[data-theme="dark"] .storage-onboarding-overlay .storage-recents-empty {
  border-color: #3f3f46;
  color: #a1a1aa;
}

:root[data-theme="dark"] .storage-onboarding-overlay .storage-recent-card {
  background: #27272a;
  border-color: #3f3f46;
}

:root[data-theme="dark"] .storage-onboarding-overlay .storage-recent-name {
  color: #e4e4e7;
}

:root[data-theme="dark"] .storage-onboarding-overlay .storage-recent-meta {
  color: #a1a1aa;
}

:root[data-theme="dark"] .storage-onboarding-overlay .storage-recent-icon {
  background: #18181b;
  border-color: #3f3f46;
}

/* MOBILE DESKTOP NOTICE DARK THEME */
:root[data-theme="dark"] .mobile-desktop-notice {
  background: var(--bg-app, #2e2e2e) !important;
}

:root[data-theme="dark"] .mobile-desktop-notice-card {
  background: var(--bg-app, #2e2e2e) !important;
  border-color: var(--border-color, #464646) !important;
  box-shadow: 0 22px 50px #00000024,
    0 2px 10px #00000014;
}

:root[data-theme="dark"] .mobile-desktop-notice-title {
  color: #ffffff;
}

:root[data-theme="dark"] .mobile-desktop-notice-subtext {
  color: #a1a1aa;
}