/* src/styles/foundation.css */
@font-face {
  font-family: "Graphik Arabic";
  src: url(../assets/fonts/system/graphik-arabic/graphik-arabic-100.woff2) format("woff2");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Graphik Arabic";
  src: url(../assets/fonts/system/graphik-arabic/graphik-arabic-200.woff2) format("woff2");
  font-style: normal;
  font-weight: 200;
  font-display: swap;
}
@font-face {
  font-family: "Graphik Arabic";
  src: url(../assets/fonts/system/graphik-arabic/graphik-arabic-300.woff2) format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: "Graphik Arabic";
  src: url(../assets/fonts/system/graphik-arabic/graphik-arabic-400.woff2) format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Graphik Arabic";
  src: url(../assets/fonts/system/graphik-arabic/graphik-arabic-500.woff2) format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Graphik Arabic";
  src: url(../assets/fonts/system/graphik-arabic/graphik-arabic-600.woff2) format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Graphik Arabic";
  src: url(../assets/fonts/system/graphik-arabic/graphik-arabic-700.woff2) format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Graphik Arabic";
  src: url(../assets/fonts/system/graphik-arabic/graphik-arabic-900.woff2) format("woff2");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
:root {
  --reset-accent: #fac145;
  --idea-accent: #f0569a;
  --ui-radius-sm: 12px;
  --ui-radius-md: 18px;
  --ui-radius-lg: 28px;
  --ui-control-height: 52px;
  --ui-touch-target: 44px;
  --popup-surface: rgba(40, 43, 66, 0.96);
  --popup-surface-solid: #282b42;
  --popup-line: rgba(255, 255, 255, 0.085);
  --popup-radius: 28px;
  --popup-header-h: 64px;
  --popup-shadow: 0 -18px 44px rgba(0, 0, 0, 0.34);
  --popup-blur: 22px;
  --window-overlay: rgba(10, 12, 24, 0.56);
  --window-surface: rgba(43, 46, 70, 0.99);
  --window-border: rgba(255, 255, 255, 0.1);
  --window-radius: 20px;
  --window-shadow: 0 18px 44px rgba(0, 0, 0, 0.36);
  --window-safe-pad: 16px;
  --window-max-width: 390px;
  --window-title-size: 15px;
  --window-body-size: 12px;
  color-scheme: dark;
  --bg: #202338;
  --shell: #282b42;
  --panel: rgba(49, 52, 78, 0.96);
  --panel-soft: #2c2f48;
  --panel-raised: #353852;
  --control-card-bg: rgba(255, 255, 255, 0.038);
  --control-card-bg-hover: rgba(255, 255, 255, 0.052);
  --control-card-border: rgba(255, 255, 255, 0.095);
  --control-card-radius: 20px;
  --control-card-pad: 20px;
  --control-card-gap: 20px;
  --control-option-bg: rgba(255, 255, 255, 0.018);
  --control-option-active-bg: rgba(107, 85, 226, 0.095);
  --control-option-active-border: rgba(107, 85, 226, 0.62);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.13);
  --text: #f5f6f8;
  --text-2: #a2a9b5;
  --text-3: #707986;
  --accent: #6b55e2;
  --accent-soft: rgba(107, 85, 226, 0.1);
  --danger: #dd5656;
  --r-shell: 0px;
  --r-sheet: var(--popup-radius);
  --r-control: 12px;
  --r-small: 9px;
  --touch: 44px;
  --topbar-h: 58px;
  --nav-h: 70px;
  --font-ui: "Graphik Arabic", sans-serif;
  --editor-bg: #282b42;
  --editor-surface: #31344e;
  --editor-surface-2: #3a3d59;
  --editor-line: rgba(255, 255, 255, 0.075);
  --editor-border: rgba(255, 255, 255, 0.1);
  --editor-text: #f4f6f8;
  --editor-muted: #8d96a3;
  --editor-accent: #6b55e2;
  --editor-accent-soft: rgba(107, 85, 226, 0.1);
  --editor-accent-border: rgba(107, 85, 226, 0.45);
  --editor-stage-h: 108px;
  --editor-panel-tabs-h: 34px;
  --editor-panel-content-h: 56px;
  --editor-panel-gap: 4px;
  --editor-panel-pad-x: 12px;
  --editor-theme-swatch-size: 40px;
  --editor-nav-h: 70px;
  --editor-nav-button-h: 58px;
  --editor-nav-icon: 22px;
  --editor-nav-indicator-w: 18px;
  --editor-nav-indicator-h: 2px;
  --editor-dock-radius: 0px;
  --editor-template-card-size: 62px;
  --editor-template-card-radius: 17px;
  --editor-template-thumb-size: 56px;
  --editor-template-thumb-radius: 15px;
  --editor-template-card-gap: 10px;
  --editor-chip-h: 48px;
  --editor-chip-square: 48px;
  --editor-chip-w: 56px;
  --editor-chip-preview-w: 64px;
  --editor-chip-wide-w: 104px;
  --editor-chip-radius: 12px;
  --editor-chip-gap: 8px;
  --ui-type-panel-title: 16px;
  --ui-type-nav: 9.5px;
  --ui-type-tab: 10px;
  --ui-type-control: 10px;
  --ui-type-label: 9px;
  --ui-type-value: 12.5px;
  --ui-type-helper: 8.5px;
  --ui-type-curve-label: 9.5px;
  --ui-weight-medium: 600;
  --ui-weight-strong: 650;
  --ui-segment-h: 44px;
  --ui-segment-compact-h: 34px;
  --ui-segment-radius: 12px;
  --ui-segment-option-radius: 9px;
  --ui-segment-pad: 4px;
  --ds-space-hairline: 1px;
  --ds-space-micro: 2px;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-type-badge: 8px;
  --ds-type-nano: 8.5px;
  --ds-type-micro: 9px;
  --ds-type-caption: 9.5px;
  --ds-type-xs: 10px;
  --ds-type-sm: 11px;
  --ds-type-md: 12px;
  --ds-type-body: 13px;
  --ds-type-action: 14px;
  --ds-type-lg: 16px;
  --ds-type-title: 15px;
  --ds-line-tight: 1.2;
  --ds-line-normal: 1.4;
  --ds-control-h: 44px;
  --ds-tab-secondary-h: 36px;
  --ds-tab-secondary-font: 12px;
  --ds-tab-indicator-w: 34px;
  --ds-tab-indicator-h: 2px;
  --ds-swatch: 38px;
  --ds-color-field-swatch: var(--ds-swatch);
  --ds-section-gap: 20px;
  --ds-control-gap: var(--ds-space-4);
  --ds-drawer-h: 300px;
  --ds-drawer-pad-x: 18px;
  --ds-drawer-pad-bottom: 20px;
}
* {
  box-sizing: border-box;
}
html,
body {
  font-synthesis: weight style;
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
  background: #202338;
  color: var(--text);
  font-family: var(--font-ui);
}
body {
  display: grid;
  place-items: center;
}
button,
input,
textarea {
  font: inherit;
}
button {
  color: inherit;
}
button,
label {
  -webkit-tap-highlight-color: transparent;
}
.tabler-ui-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  vector-effect: non-scaling-stroke;
}
:root {
  --flinzr-navy-950: #202338;
  --flinzr-navy-900: #282b42;
  --flinzr-navy-800: #31344e;
  --flinzr-navy-700: #3a3d59;
}
:root:where([data-layout=phone]) {
  --topbar-h: 0px;
  --nav-h: calc(var(--mobile-dynamic-nav-h, 72px) + env(safe-area-inset-bottom));
  --editor-nav-h: var(--nav-h);
  --editor-nav-button-h: clamp(48px, calc(var(--mobile-dynamic-nav-h, 72px) - 6px), 60px);
  --editor-nav-icon: clamp(22px, 5.8vw, 27px);
}
@media (max-height: 720px) {
  :root:where(:not([data-layout=phone])) {
    --topbar-h: 54px;
    --nav-h: 64px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* src/styles/shell.css */
html:not([data-editor-ready=true]):not([data-editor-fatal=true]):not([data-returning-user=true]) .phone-shell {
  opacity: 0;
  visibility: hidden;
}
html[data-returning-user=true]:not([data-editor-ready=true]):not([data-editor-fatal=true]) .phone-shell,
html[data-editor-ready=true] .phone-shell,
html[data-editor-fatal=true] .phone-shell {
  opacity: 1;
  visibility: visible;
}
.phone-shell {
  transition: opacity 0.12s ease;
  position: relative;
  width: min(100vw, 430px);
  height: min(100svh, 900px);
  max-height: 100svh;
  min-height: 640px;
  overflow: hidden;
  background: var(--shell);
  border: 1px solid var(--line);
  border-radius: var(--r-shell);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
  contain: layout paint size style;
  isolation: isolate;
}
.topbar {
  --top-action-state-surface: rgba(255, 255, 255, 0.055);
  position: relative;
  z-index: 30;
  height: var(--topbar-h);
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-space-3);
  background: rgba(40, 43, 66, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.top-left-actions {
  display: flex;
  align-items: center;
  gap: var(--ds-space-micro);
}
.icon-button,
.close-drawer {
  width: var(--touch);
  height: var(--touch);
  min-width: var(--touch);
  border: 0;
  background: transparent;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--text-2);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    transform 0.1s ease;
}
.icon-button .ui-icon,
.close-drawer .ui-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  line-height: 0;
}
.icon-button svg,
.close-drawer svg,
.icon-button .tabler-ui-icon,
.close-drawer .tabler-ui-icon {
  display: block;
  width: 21px;
  height: 21px;
  margin: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-box: view-box;
  transform-origin: center;
}
.icon-button:hover,
.icon-button:focus-visible,
.close-drawer:hover,
.close-drawer:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.055);
  outline: none;
}
.icon-button:active,
.close-drawer:active {
  transform: scale(0.93);
}
.icon-button.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.icon-button:disabled {
  opacity: 0.28;
  cursor: default;
}
.template-toggle {
  box-sizing: border-box;
  width: 38px;
  min-width: 38px;
  height: 34px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-raised);
  color: var(--text);
  cursor: pointer;
  overflow: hidden;
  font-size: var(--ds-type-sm);
  font-weight: 760;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  appearance: none;
  -webkit-appearance: none;
  opacity: 1;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background-color 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.template-toggle:hover,
.template-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.075);
  color: var(--text);
  outline: none;
}
.template-toggle:active {
  opacity: 1;
  background: var(--panel-raised);
  border-color: var(--line);
  color: var(--text);
  transform: none;
}
.template-toggle .ui-icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  line-height: 0;
}
.template-toggle svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
}
.topbar-right-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.desktop-preview-toggle {
  box-sizing: border-box;
  width: 38px;
  min-width: 38px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-raised);
  color: #63c7ff;
}
.desktop-preview-toggle:hover,
.desktop-preview-toggle:focus-visible {
  background: rgba(99, 199, 255, 0.1);
  color: #82d3ff;
}
.desktop-preview-toggle.active {
  color: #8cdaff;
  background: rgba(99, 199, 255, 0.12);
}
.icon-button .tabler-ui-icon,
.close-drawer .tabler-ui-icon {
  width: 21px;
  height: 21px;
  margin: auto;
}
@media (max-width: 360px) {
  .topbar {
    padding-inline: 6px;
    gap: 2px;
  }
  .top-left-actions {
    gap: 0;
    min-width: 0;
  }
  .topbar .top-action {
    width: 38px;
    min-width: 38px;
    height: 44px;
  }
  .template-toggle {
    width: 38px;
    min-width: 38px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .icon-button:active,
  .close-drawer:active {
    transform: none;
  }
  .topbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(40, 43, 66, 0.985);
  }
}
@supports (-webkit-touch-callout: none) {
  .phone-shell {
    contain: layout size;
  }
}
#exportBtn {
  color: #b83f6b !important;
}
#exportBtn:hover,
#exportBtn:focus-visible,
#exportBtn:active {
  color: #c94a77 !important;
  background: rgba(184, 63, 107, 0.1) !important;
}
.desktop-size-stepper {
  display: grid;
  grid-template-columns: 34px 34px;
  height: 36px;
  margin-left: 3px;
  padding-left: 5px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  align-items: center;
}
.desktop-size-stepper button {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-2);
  font: 500 20px/1 var(--font-ui);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.desktop-size-stepper button:hover,
.desktop-size-stepper button:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}
.desktop-size-stepper button:disabled {
  opacity: 0.28;
  cursor: default;
}
:where(html[data-layout=phone]) .desktop-size-stepper {
  display: none;
}
:where(html[data-layout=phone]) .phone-shell {
  width: 100vw;
  height: var(--flinzr-visual-height, 100dvh);
  min-height: 0;
  border: 0;
  border-radius: 0;
}
:where(html[data-layout=phone]) .topbar {
  display: none !important;
}
.topbar .top-action.active,
.topbar .top-action[aria-pressed=true],
.topbar .top-action:hover,
.topbar .top-action:focus-visible {
  background: var(--top-action-state-surface);
}
#resetAppBtn {
  color: var(--reset-accent);
}
#resetAppBtn:hover,
#resetAppBtn:focus-visible {
  color: #ffd166;
  background: rgba(250, 193, 69, 0.08);
}
#globalLockBtn {
  color: var(--accent);
}
#globalLockBtn[aria-pressed=true] {
  color: var(--accent);
  background: rgba(107, 85, 226, 0.1);
}
#globalLockBtn[aria-pressed=false] {
  color: var(--text-2);
  background: transparent;
}
#globalLockBtn:hover,
#globalLockBtn:focus-visible {
  color: var(--accent);
  background: rgba(107, 85, 226, 0.1);
}

/* src/styles/startup-screen.css */
.startup-screen {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      #1d2033 0%,
      #202338 52%,
      #1a1d2d 100%);
  color: var(--editor-text, #f5f6f8);
  font-family: var(--font-ui, system-ui);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}
.startup-screen::before,
.startup-screen::after {
  content: "";
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.18;
  pointer-events: none;
}
.startup-screen::before {
  top: -34vmax;
  right: -28vmax;
  background:
    radial-gradient(
      circle,
      rgba(118, 92, 246, 0.92) 0%,
      rgba(118, 92, 246, 0) 66%);
}
.startup-screen::after {
  bottom: -38vmax;
  left: -30vmax;
  background:
    radial-gradient(
      circle,
      rgba(84, 167, 255, 0.72) 0%,
      rgba(84, 167, 255, 0) 68%);
}
.startup-screen.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.22s ease;
}
.startup-card {
  position: relative;
  z-index: 1;
  width: min(318px, 88vw);
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.startup-brand {
  display: grid;
  justify-items: center;
  gap: 12px;
}
.startup-orbit {
  position: relative;
  width: 70px;
  height: 70px;
  display: grid;
  place-items: center;
}
.startup-orbit::before,
.startup-orbit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.11);
  transform: rotate(12deg);
  animation: startupOrbit 5.5s linear infinite;
}
.startup-orbit::after {
  inset: 8px;
  border-color: rgba(118, 92, 246, 0.38);
  transform: rotate(-14deg);
  animation-duration: 4.2s;
  animation-direction: reverse;
}
.startup-mark {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(118, 92, 246, 0.34),
      rgba(118, 92, 246, 0.12));
  box-shadow: 0 12px 34px rgba(13, 12, 34, 0.34), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  color: #b6a8ff;
  font-size: 24px;
  line-height: 1;
  animation: startupPulse 1.8s ease-in-out infinite;
}
.startup-wordmark {
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: rgba(255, 255, 255, 0.88);
}
.startup-copy {
  display: grid;
  gap: 6px;
  max-width: 290px;
}
.startup-copy strong {
  font-size: clamp(17px, 5vw, 20px);
  line-height: 1.2;
  font-weight: 690;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.startup-copy span {
  min-height: 17px;
  color: var(--editor-muted, #9aa0af);
  font-size: 11px;
  font-weight: 560;
  line-height: 1.45;
}
.startup-progress {
  position: relative;
  width: 186px;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.075);
}
.startup-progress span {
  position: absolute;
  inset-block: 0;
  left: -40%;
  width: 40%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      rgba(118, 92, 246, 0),
      #8d79ff,
      #68b9ff,
      rgba(104, 185, 255, 0));
  animation: startupProgress 1.18s ease-in-out infinite;
}
.startup-screen.is-error .startup-orbit::before,
.startup-screen.is-error .startup-orbit::after,
.startup-screen.is-error .startup-mark {
  animation: none;
}
.startup-screen.is-error .startup-mark {
  background: rgba(201, 45, 98, 0.12);
  color: #e05a87;
}
.startup-screen.is-error .startup-progress {
  display: none;
}
.startup-screen.is-exiting {
  opacity: 0;
  pointer-events: none;
}
.startup-version {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  z-index: 1;
  color: rgba(176, 181, 197, 0.62);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.launch-shell {
  position: absolute;
  inset: 0;
  z-index: 180;
  display: grid;
  place-items: center;
  background:
    linear-gradient(
      180deg,
      rgba(31, 34, 53, 0.985),
      rgba(27, 30, 47, 0.985));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
.launch-shell-inner {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  transform: translateY(-4vh);
}
.launch-shell-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(118, 92, 246, 0.13);
  box-shadow: inset 0 0 0 1px rgba(118, 92, 246, 0.22);
  color: #9f8eff;
  font-size: 19px;
  animation: launchShellPulse 1.35s ease-in-out infinite;
}
.launch-shell-brand {
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: rgba(255, 255, 255, 0.82);
}
.launch-shell-status {
  font-size: 10px;
  font-weight: 560;
  color: rgba(176, 181, 197, 0.68);
}
html[data-returning-user=true]:not([data-editor-ready=true]):not([data-editor-fatal=true]) .launch-shell {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.12s ease;
}
html[data-editor-ready=true] .launch-shell {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, visibility 0s linear 0.18s;
}
@keyframes startupPulse {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.82;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}
@keyframes startupOrbit {
  to {
    transform: rotate(372deg);
  }
}
@keyframes startupProgress {
  0% {
    transform: translateX(0);
  }
  58% {
    transform: translateX(260%);
  }
  100% {
    transform: translateX(350%);
  }
}
@keyframes launchShellPulse {
  0%, 100% {
    transform: scale(0.96);
    opacity: 0.72;
  }
  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .startup-screen,
  .startup-orbit::before,
  .startup-orbit::after,
  .startup-mark,
  .startup-progress span,
  .launch-shell,
  .launch-shell-mark {
    transition: none;
    animation: none;
  }
  .startup-progress span {
    left: 31%;
    width: 38%;
  }
}

/* src/styles/canvas.css */
.editor-body {
  position: absolute;
  inset: var(--topbar-h) 0 var(--nav-h);
  overflow: hidden;
  contain: layout paint size;
}
.workspace {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #24273d;
  contain: layout paint size;
  touch-action: none;
}
.scene-frame {
  position: relative;
  flex: none;
  contain: layout paint size;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.scene {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1024px;
  height: 1984px;
  transform-origin: top left;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 28% 22%,
      #8f93a8 0%,
      #686d83 34%,
      #464b61 68%,
      #34384d 100%);
  backface-visibility: hidden;
  will-change: transform;
  isolation: isolate;
}
.background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.background-image.is-empty {
  display: none;
}
.surface-layer {
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
}
.emoji-fall-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  contain: layout paint;
}
.emoji-fall-layer[hidden] {
  display: none !important;
}
.emoji-fall-particle {
  position: absolute;
  top: -72px;
  display: block;
  width: 44px;
  height: 44px;
  margin-left: -22px;
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;
  font-size: 38px;
  line-height: 44px;
  text-align: center;
  opacity: 0;
  transform: translate3d(0, -72px, 0);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}
.text-layer {
  position: absolute;
  inset: 0;
  z-index: 17;
}
.text-item {
  position: absolute;
  display: flex;
  flex-direction: column;
  transform: translate(-50%, -50%);
  cursor: grab;
  user-select: none;
  touch-action: none;
  color: #6e573e;
}
.text-item.dragging {
  cursor: grabbing;
  opacity: 0.98;
}
.text-item.selected {
  outline: none;
}
.text-line {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}
.safe-area {
  position: absolute;
  inset: 74px;
  border: 1px dashed transparent;
  pointer-events: none;
}
.center-guide {
  position: absolute;
  display: none;
  pointer-events: none;
  background: rgba(107, 85, 226, 0.62);
  z-index: 5;
}
.center-guide.vertical {
  width: 1px;
  top: 0;
  bottom: 0;
  left: 50%;
}
.center-guide.horizontal {
  height: 1px;
  left: 0;
  right: 0;
  top: 50%;
}
.scene.guides .safe-area {
  border-color: rgba(107, 85, 226, 0.34);
}
.scene.guides .center-guide {
  display: block;
}
.card-effect-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  user-select: none;
}
.workspace,
.scene-frame,
.scene {
  direction: ltr;
}
.workspace.language-switch-stable {
  overflow: hidden !important;
}
.scene.scene-eyedropper-active {
  cursor: crosshair !important;
  touch-action: none;
}
.scene.scene-eyedropper-active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 99998;
  pointer-events: none;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.015);
}
html.eyedropper-mode,
html.eyedropper-mode body {
  cursor: crosshair !important;
  overscroll-behavior: none;
}
html.eyedropper-mode body {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
:where(html[data-layout=phone]) .editor-body {
  inset: env(safe-area-inset-top) 0 var(--nav-h);
}
:where(html[data-layout=phone]) .workspace {
  place-items: start center;
  padding: 0;
  overflow: hidden;
}
:where(html[data-layout=phone]) .scene-frame {
  margin: 0;
  flex: none;
}
.workspace,
.scene-frame,
.scene,
.text-layer,
.sticker-layer,
.text-item,
.sticker-item {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.text-item:active,
.sticker-item:active {
  filter: none !important;
  box-shadow: none !important;
}
.editor-body.text-edit-viewport-locked {
  height: var(--text-edit-locked-height) !important;
  width: var(--text-edit-locked-width) !important;
  bottom: auto !important;
  contain: layout paint size !important;
}
.workspace.input-viewport-locked {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  max-width: none !important;
  max-height: none !important;
  contain: strict !important;
}
html.input-viewport-transaction .scene-frame,
html.input-viewport-transaction .scene {
  animation: none !important;
  transition: none !important;
}
.text-item[data-id=qrPrompt] .qr-prompt-icon {
  display: grid;
  place-items: center;
  width: 220px;
  height: 220px;
  border: 3px solid currentColor;
  border-radius: 28px;
  opacity: 0.92;
  box-sizing: border-box;
}
.text-item[data-id=qrPrompt] .qr-prompt-icon .tabler-ui-icon {
  width: 88px;
  height: 88px;
  stroke-width: 1.8;
}
.text-item {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(-50%, -50%, 0);
}
.text-item.dragging,
.text-item.smart-arranging {
  will-change: transform;
  contain: paint;
}

/* src/styles/navigation.css */
.bottom-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--nav-h);
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(var(--root-tool-count, 4), 1fr);
  align-items: center;
  padding: 5px 8px calc(5px + env(safe-area-inset-bottom));
  background: rgba(40, 43, 66, 0.975);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition:
    opacity 0.16s ease,
    transform 0.18s cubic-bezier(0.2, 0.75, 0.25, 1),
    visibility 0s linear 0s;
}
.nav-tool {
  position: relative;
  height: var(--editor-nav-button-h);
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text-3);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 560;
  cursor: pointer;
  transition:
    color 0.14s ease,
    background 0.14s ease,
    transform 0.1s ease;
}
.nav-tool::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 38px;
  height: 30px;
  border-radius: 12px;
  transform: translateX(-50%);
  background: transparent;
  transition: background 0.14s ease;
}
.nav-tool:hover,
.nav-tool:focus-visible {
  color: var(--text-2);
  outline: none;
}
.nav-tool.active {
  color: var(--accent);
}
.nav-tool.is-add-action,
.nav-tool.is-add-action:hover,
.nav-tool.is-add-action:focus-visible {
  color: var(--idea-accent);
}
.nav-tool.active::before {
  background: transparent;
}
.nav-tool.active .nav-icon {
  color: var(--accent);
}
.nav-tool.active::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: var(--editor-nav-indicator-w);
  height: var(--editor-nav-indicator-h);
  border-radius: 99px;
  background: currentColor;
}
.nav-tool:active {
  transform: scale(0.96);
}
.nav-icon,
.nav-tool .dock-nav-icon {
  position: relative;
  z-index: 1;
  width: 28px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 19px;
  font-weight: 620;
  letter-spacing: -0.06em;
}
.nav-icon svg,
.nav-tool .dock-nav-icon svg,
.nav-icon .tabler-ui-icon,
.nav-tool .dock-nav-icon .tabler-ui-icon {
  display: block;
  width: var(--editor-nav-icon);
  height: var(--editor-nav-icon);
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-tool > span:last-child {
  position: relative;
  z-index: 1;
  min-height: 1.35em;
  padding-block: 0.06em 0.12em;
  line-height: 1.28;
  overflow: visible;
}
.bottom-bar.is-workspace {
  grid-template-columns: 54px repeat(var(--workspace-tool-count, 4), minmax(0, 1fr));
  padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.dock-workspace-tool {
  position: relative;
  min-width: 0;
  height: var(--editor-nav-button-h);
  padding: 0 3px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font: var(--ui-weight-medium) var(--ui-type-nav)/1.28 var(--font-ui);
  white-space: nowrap;
  overflow: visible;
  transition:
    color 0.12s ease,
    background 0.12s ease,
    transform 0.08s ease;
  touch-action: manipulation;
}
.dock-workspace-tool .dock-nav-icon {
  width: 22px;
  height: 20px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  color: currentColor;
}
.dock-workspace-tool .dock-nav-icon svg,
.dock-workspace-tool .dock-nav-icon .tabler-ui-icon {
  display: block;
  width: 19px;
  height: 19px;
  margin: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.dock-workspace-tool > span:last-child {
  display: block;
  max-width: 100%;
  min-height: 1.35em;
  padding-block: 0.06em 0.12em;
  overflow: visible;
  line-height: 1.28;
}
.dock-workspace-tool:hover,
.dock-workspace-tool:focus-visible {
  color: var(--text-2);
  outline: none;
}
.dock-workspace-tool:active {
  transform: scale(0.96);
}
.dock-workspace-tool.is-active {
  color: var(--accent);
}
.dock-workspace-tool.is-active::after {
  content: "";
  position: absolute;
  bottom: 1px;
  width: var(--editor-nav-indicator-w);
  height: var(--editor-nav-indicator-h);
  border-radius: 99px;
  background: currentColor;
}
.dock-workspace-tool.is-label-only {
  font-size: var(--ui-type-tab);
  font-weight: var(--ui-weight-medium);
}
.dock-workspace-back {
  width: 54px;
  min-width: 54px;
  height: 48px;
  justify-self: center;
  align-self: center;
  padding: 0 6px 0 0;
  margin: 0;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--editor-accent);
  box-shadow: none;
  overflow: visible;
}
.dock-workspace-back .dock-nav-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(107, 85, 226, 0.34);
  border-radius: 10px;
  background: rgba(107, 85, 226, 0.09);
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease;
}
.dock-workspace-back .dock-nav-icon svg,
.dock-workspace-back .dock-nav-icon .tabler-ui-icon {
  display: block;
  width: 18px;
  height: 18px;
  margin: auto;
  stroke-width: 1.8;
}
.dock-workspace-back > span:last-child {
  display: none;
}
.dock-workspace-back::before {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  top: 10px;
  bottom: 10px;
  width: 1px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.11);
}
.dock-workspace-back:hover,
.dock-workspace-back:focus-visible {
  color: var(--text);
  background: transparent;
}
.dock-workspace-back:hover .dock-nav-icon,
.dock-workspace-back:focus-visible .dock-nav-icon {
  background: rgba(107, 85, 226, 0.15);
  border-color: rgba(107, 85, 226, 0.52);
}
.dock-workspace-back:active .dock-nav-icon {
  transform: scale(0.94);
}
[dir=rtl] .dock-workspace-back .dock-nav-icon {
  transform: scaleX(-1);
}
[dir=rtl] .dock-workspace-back {
  padding: 0 0 0 6px;
}
.bottom-bar.is-workspace.is-scrollable-workspace {
  grid-template-columns: 54px minmax(0, 1fr);
  overflow: hidden;
}
.dock-workspace-rail {
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 2px;
  touch-action: pan-x;
}
.dock-workspace-rail::-webkit-scrollbar {
  display: none;
}
.dock-workspace-rail .dock-workspace-tool {
  flex: 0 0 calc(100% / var(--workspace-visible-count, 4));
  width: calc(100% / var(--workspace-visible-count, 4));
  scroll-snap-align: start;
}
[dir=rtl] .dock-workspace-rail {
  direction: rtl;
}
.nav-icon .tabler-ui-icon,
.nav-tool .dock-nav-icon .tabler-ui-icon {
  width: var(--editor-nav-icon);
  height: var(--editor-nav-icon);
  margin: auto;
}
.dock-workspace-tool .dock-nav-icon .tabler-ui-icon {
  width: 19px;
  height: 19px;
  margin: auto;
}
.dock-workspace-back .dock-nav-icon .tabler-ui-icon {
  width: 17px;
  height: 17px;
  margin: auto;
}
@media (hover: none) and (pointer: coarse) {
  .nav-tool:active,
  .dock-workspace-tool:active {
    transform: none;
  }
  .dock-workspace-back:active .dock-nav-icon {
    transform: none;
  }
  [dir=rtl] .dock-workspace-back:active .dock-nav-icon {
    transform: scaleX(-1);
  }
  .bottom-bar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(40, 43, 66, 0.99);
  }
}
:where(html[data-layout=phone]) .bottom-bar {
  height: var(--nav-h);
  padding: 2px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
}
:where(html[data-layout=phone]) .nav-tool {
  height: var(--editor-nav-button-h);
  font-size: clamp(9.5px, 2.4vw, 11.5px);
  gap: 2px;
}
:where(html[data-layout=phone]) .nav-tool::before {
  top: 1px;
  height: 26px;
}
:where(html[data-layout=phone]) .nav-tool.active::after {
  bottom: 0;
}
.card-sample-nav[hidden] {
  display: none;
}
.card-sample-nav {
  position: absolute;
  inset: 0;
  z-index: 66;
  pointer-events: none;
  direction: ltr;
  transition: opacity 0.16s ease, visibility 0s linear 0s;
}
:root[data-element-selected=true] .card-sample-nav {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}
:root[data-element-selected=true] .card-sample-nav__button {
  pointer-events: none;
}
.card-sample-nav__button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: auto;
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  touch-action: manipulation;
  transition: transform 0.14s ease, opacity 0.16s ease;
}
.card-sample-nav__button::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(40, 43, 66, 0.97);
  box-shadow: 0 8px 22px rgba(14, 16, 28, 0.24);
  transition: background 0.16s ease, transform 0.14s ease;
}
.card-sample-nav__button svg {
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
}
.card-sample-nav__button:hover,
.card-sample-nav__button:focus-visible {
  outline: 0;
  color: #fff;
}
.card-sample-nav__button:hover::before,
.card-sample-nav__button:focus-visible::before {
  background: rgba(52, 56, 84, 0.99);
}
.card-sample-nav__button:active {
  transform: translateY(-50%) scale(0.96);
}
.card-sample-nav__button:disabled {
  opacity: 0.42;
  pointer-events: none;
}
.card-sample-nav__button--previous {
  left: 12px;
}
.card-sample-nav__button--next {
  right: 12px;
}
:where(html[data-layout=phone]) .card-sample-nav__button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
}
:where(html[data-layout=phone]) .card-sample-nav__button--previous {
  left: 8px;
}
:where(html[data-layout=phone]) .card-sample-nav__button--next {
  right: 8px;
}
:where(html[data-layout=phone]) .card-sample-nav__button::before {
  inset: 4px;
}
:where(html[data-layout=phone]) .card-sample-nav__button svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 360px) {
  .card-sample-nav__button::before {
    inset: 5px;
  }
}
@media (hover: none) and (pointer: coarse) {
  .card-sample-nav__button::before {
    background: rgba(40, 43, 66, 0.995);
  }
}

/* src/styles/offline-progress-indicator.css */
.offline-progress-indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--nav-h);
  z-index: 41;
  height: 14px;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.offline-progress-indicator__track {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.offline-progress-indicator__fill {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.28s ease;
  transform: translateZ(0);
}
.offline-progress-indicator__label {
  position: absolute;
  inset-inline-end: max(6px, env(safe-area-inset-right));
  bottom: 8px;
  font: 600 9px/1 var(--font-ui);
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.68);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
  transition: opacity 0.2s ease;
}
.offline-progress-indicator.is-ready .offline-progress-indicator__fill {
  background: #4fcf8a;
}
.offline-progress-indicator.is-ready .offline-progress-indicator__label {
  color: #9fe8bd;
}
.offline-progress-indicator.is-settled .offline-progress-indicator__label {
  opacity: 0;
}
.offline-progress-indicator.is-settled {
  opacity: 0.48;
}
.phone-shell.is-card-preview-mode .offline-progress-indicator {
  opacity: 0;
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .offline-progress-indicator,
  .offline-progress-indicator__fill,
  .offline-progress-indicator__label {
    transition: none;
  }
}
.offline-progress-indicator.is-unavailable .offline-progress-indicator__track {
  opacity: 0.28;
}
.offline-progress-indicator.is-unavailable .offline-progress-indicator__label {
  color: #e8b98f;
  font-variant-numeric: normal;
  letter-spacing: 0;
}
.phone-shell:has(.tool-drawer[aria-hidden=false]) .offline-progress-indicator {
  opacity: 0;
  visibility: hidden;
}
.offline-progress-indicator.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* src/styles/drawer-shell.css */
.tool-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 38;
  height: var(--drawer-height, var(--ds-drawer-h));
  min-height: min(300px, calc(100% - 14px));
  max-height: calc(100% - 14px);
  display: grid;
  grid-template-rows: var(--popup-header-h) minmax(0, 1fr);
  background: var(--popup-surface);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.1s ease, visibility 0s linear 0.1s;
  overflow: hidden;
  padding-bottom: 0;
  contain: layout paint style;
}
.tool-drawer[aria-hidden=false] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.1s ease;
}
.tool-drawer.is-resizing {
  transition: none;
  user-select: none;
}
.drawer-grip {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 4;
  width: 90px;
  height: 27px;
  transform: translateX(-50%);
  display: grid;
  place-items: start center;
  padding-top: 10px;
  pointer-events: auto;
  cursor: ns-resize;
  touch-action: none;
}
.drawer-grip span {
  display: block;
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.14s ease, background 0.14s ease;
}
.drawer-grip:hover span,
.tool-drawer.is-resizing .drawer-grip span {
  width: 50px;
  background: rgba(255, 255, 255, 0.48);
}
.drawer-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--popup-header-h);
  padding: 22px 62px 8px;
}
.drawer-head strong {
  font-size: 16px;
  line-height: var(--ds-line-tight);
  letter-spacing: -0.015em;
  font-weight: 650;
  text-align: center;
}
.drawer-head .close-drawer {
  position: absolute;
  inset-inline-end: 10px;
  top: 10px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--text-2);
}
.drawer-head .close-drawer:hover,
.drawer-head .close-drawer:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.045);
}
.drawer-content {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  padding: 8px var(--ds-drawer-pad-x) var(--ds-drawer-pad-bottom);
  scroll-padding-bottom: var(--ds-drawer-pad-bottom);
}
.drawer-content::-webkit-scrollbar {
  display: none;
}
.tool-drawer[data-mode=format],
.tool-drawer[data-mode=effect],
.tool-drawer[data-mode=sticker],
.tool-drawer[data-mode=animation],
.tool-drawer[data-mode=layout],
.tool-drawer[data-mode=music],
.tool-drawer[data-mode=cardEffect] {
  height: var(--editor-stage-h);
  min-height: var(--editor-stage-h);
  max-height: var(--editor-stage-h);
  grid-template-rows: 1fr;
  background: var(--editor-bg);
  border-radius: 0;
  overflow: hidden;
  contain: layout paint style;
}
.tool-drawer[data-mode=format] .drawer-grip,
.tool-drawer[data-mode=format] .drawer-head,
.tool-drawer[data-mode=effect] .drawer-grip,
.tool-drawer[data-mode=effect] .drawer-head,
.tool-drawer[data-mode=sticker] .drawer-grip,
.tool-drawer[data-mode=sticker] .drawer-head,
.tool-drawer[data-mode=animation] .drawer-grip,
.tool-drawer[data-mode=animation] .drawer-head,
.tool-drawer[data-mode=layout] .drawer-grip,
.tool-drawer[data-mode=layout] .drawer-head,
.tool-drawer[data-mode=music] .drawer-grip,
.tool-drawer[data-mode=music] .drawer-head,
.tool-drawer[data-mode=cardEffect] .drawer-grip,
.tool-drawer[data-mode=cardEffect] .drawer-head {
  display: none;
}
.tool-drawer[data-mode=format] .drawer-content,
.tool-drawer[data-mode=effect] .drawer-content,
.tool-drawer[data-mode=sticker] .drawer-content,
.tool-drawer[data-mode=animation] .drawer-content,
.tool-drawer[data-mode=layout] .drawer-content,
.tool-drawer[data-mode=music] .drawer-content,
.tool-drawer[data-mode=cardEffect] .drawer-content {
  padding: 0;
  min-height: 0;
  overflow: hidden;
}
.tool-drawer[data-mode=layout] {
  --layout-bg: var(--editor-bg);
  --layout-surface: var(--editor-surface);
  --layout-line: var(--editor-line);
  --layout-text: var(--editor-text);
  --layout-muted: var(--editor-muted);
  --layout-accent: var(--editor-accent);
  border-radius: 0;
  background: var(--layout-bg);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
}
.tool-drawer[data-mode=music] {
  --music-bg: var(--editor-bg);
  --music-line: var(--editor-line);
  --music-text: var(--editor-text);
  --music-muted: var(--editor-muted);
  --music-accent: var(--editor-accent);
  border-radius: 0;
  background: var(--music-bg);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
}
.tool-drawer[data-mode=cardEffect] {
  --cfx-bg: var(--editor-bg);
  --cfx-surface: var(--editor-surface);
  --cfx-surface-2: var(--editor-surface-2);
  --cfx-line: var(--editor-line);
  --cfx-border: var(--editor-border);
  --cfx-text: var(--editor-text);
  --cfx-muted: var(--editor-muted);
  --cfx-accent: var(--editor-accent);
  border-radius: 0;
  background: var(--cfx-bg);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
}
.editor-segmented-stage {
  width: 100%;
  height: var(--editor-stage-h);
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 7px var(--editor-panel-pad-x);
  overflow: hidden;
  background: transparent;
}
.editor-segmented-panel {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: var(--editor-panel-tabs-h) var(--editor-panel-content-h);
  gap: var(--editor-panel-gap);
  align-content: center;
}
.editor-segmented-content {
  min-width: 0;
  width: 100%;
  height: var(--editor-panel-content-h);
  box-sizing: border-box;
}
.editor-segmented {
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 4px;
  box-sizing: border-box;
  min-height: var(--ui-segment-h);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  border: 1px solid var(--editor-border);
  border-radius: var(--ui-segment-radius);
  background: rgba(255, 255, 255, 0.018);
}
.editor-segmented::-webkit-scrollbar {
  display: none;
}
.editor-segmented.is-compact {
  min-height: var(--ui-segment-compact-h);
  height: var(--ui-segment-compact-h);
  padding: 4px;
}
.editor-segmented-option {
  flex: 1 0 62px;
  min-width: 0;
  height: auto;
  min-height: 0;
  align-self: stretch;
  margin: 0;
  padding: 0 10px;
  border: 0;
  border-radius: var(--ui-segment-option-radius);
  background: transparent;
  color: var(--editor-muted);
  display: grid;
  place-items: center;
  font: var(--ui-weight-medium) var(--ui-type-tab)/1.1 var(--font-ui);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s ease, color 0.12s ease;
}
.editor-segmented.is-compact .editor-segmented-option {
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  min-height: 0;
  padding: 0 6px;
}
.editor-segmented.is-static {
  overflow-x: hidden;
  overscroll-behavior-x: none;
}
.editor-segmented.is-static .editor-segmented-option {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 5px;
  font-size: clamp(9.5px, 2.65vw, var(--ui-type-tab));
  text-overflow: clip;
}
.editor-segmented-option.is-active {
  background: var(--editor-surface-2);
  color: var(--editor-text);
}
.editor-segmented-option:focus-visible {
  outline: 2px solid var(--editor-accent);
  outline-offset: 1px;
}
.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translate(-50%, 14px);
  opacity: 0;
  pointer-events: none;
  box-sizing: border-box;
  width: max-content;
  min-width: min(176px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  min-height: 38px;
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 13px;
  background: #171c23;
  color: #fff;
  box-shadow: 0 10px 26px rgba(8, 10, 18, 0.28);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 100;
  transition: 0.16s ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, 0);
}
:where(html[data-layout=phone]) .tool-drawer {
  left: 0;
  right: 0;
  border-left: 0;
  border-right: 0;
}

/* src/styles/direct-text-controls.css */
.direct-text-editor,
.unified-object-selection {
  --handle-zone: 36px;
  --toolbar-gap: 6px;
  --toolbar-h: 40px;
  --toolbar-offset: calc(var(--handle-zone) + var(--toolbar-gap) + var(--toolbar-h));
}
@media (pointer: coarse) {
  .direct-text-editor,
  .unified-object-selection {
    --toolbar-h: 44px;
  }
}
.direct-text-editor.object-locked,
.unified-object-selection.object-locked {
  --handle-zone: 0px;
  --toolbar-gap: 12px;
}
.direct-text-editor {
  --direct-accent: #6b55e2;
  --direct-rotation: 0deg;
  --direct-counter-rotation: 0deg;
  position: absolute;
  z-index: 35;
  pointer-events: none;
  transform-origin: center;
  overflow: visible;
  touch-action: none;
}
.direct-text-editor[hidden] {
  display: none;
}
.direct-text-box {
  position: absolute;
  left: calc(-1 * var(--direct-pad-x));
  right: calc(-1 * var(--direct-pad-x));
  top: calc(-1 * var(--direct-pad-y));
  bottom: calc(-1 * var(--direct-pad-y));
  border: 1.25px solid color-mix(in srgb, var(--direct-accent) 88%, transparent);
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 0 0 0.35px rgba(255, 255, 255, 0.16) inset;
}
.direct-text-toolbar {
  position: absolute;
  z-index: 20;
  left: 50%;
  top: auto;
  bottom: calc(-1 * var(--direct-pad-y) - var(--toolbar-offset) - var(--toolbar-extra-clearance, 0px));
  height: var(--toolbar-h, 40px);
  box-sizing: border-box;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  transform: translateX(-50%) rotate(var(--direct-counter-rotation));
  pointer-events: auto;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background: rgba(49, 52, 78, 0.97);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.direct-text-editor.toolbar-below .direct-text-toolbar {
  top: auto;
  bottom: calc(-1 * var(--direct-pad-y) - var(--toolbar-offset) - var(--toolbar-extra-clearance, 0px));
}
.direct-text-editor.toolbar-above .direct-text-toolbar {
  bottom: auto;
  top: calc(-1 * var(--direct-pad-y) - var(--toolbar-offset) - var(--toolbar-extra-clearance, 0px));
}
.direct-text-tool[hidden],
.sticker-context-tool[hidden] {
  display: none !important;
}
.direct-text-tool {
  width: var(--context-tool-width, 40px);
  min-width: var(--context-tool-width, 40px);
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #aeb8c5;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  cursor: pointer;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  touch-action: manipulation;
}
.direct-text-tool:hover,
.direct-text-tool:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f7fa;
}
.direct-text-tool:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 1px;
}
.direct-text-tool:active {
  transform: scale(0.97);
}
.direct-text-tool svg,
.direct-text-tool .tabler-ui-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.direct-text-tool[data-editor-action=edit] svg,
.direct-text-tool[data-editor-action=edit] .tabler-ui-icon {
  fill: none;
  stroke: currentColor;
}
.direct-text-reset {
  position: relative;
  color: var(--reset-accent);
}
.direct-text-reset::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.direct-text-reset:hover,
.direct-text-reset:focus-visible {
  color: #ffd166;
  background: rgba(250, 193, 69, 0.08);
}
.direct-side-handle {
  position: absolute;
  top: 50%;
  width: 64px;
  height: var(--direct-side-hit-h, 64px);
  margin-top: calc(var(--direct-side-hit-h, 64px) / -2);
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  cursor: ew-resize;
  z-index: 17;
  -webkit-tap-highlight-color: transparent;
}
.direct-side-handle.left {
  left: calc(-66px - var(--direct-pad-x));
}
.direct-side-handle.right {
  right: calc(-66px - var(--direct-pad-x));
}
.direct-side-handle > span {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--direct-accent);
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  transition:
    transform 0.08s ease,
    background 0.08s ease,
    border-color 0.08s ease;
  pointer-events: none;
}
.direct-side-handle.left > span {
  right: 8px;
}
.direct-side-handle.right > span {
  left: 8px;
}
.direct-side-handle.top,
.direct-side-handle.bottom {
  left: 50%;
  top: auto;
  width: 56px;
  height: var(--handle-zone, 36px);
  margin: 0 0 0 -28px;
  cursor: ns-resize;
}
.direct-side-handle.top {
  top: calc(-1 * var(--handle-zone, 36px) - var(--direct-pad-y));
}
.direct-side-handle.bottom {
  bottom: calc(-1 * var(--handle-zone, 36px) - var(--direct-pad-y));
}
.direct-side-handle.top > span,
.direct-side-handle.bottom > span {
  left: 50%;
  top: 50%;
  margin: -5px 0 0 -5px;
}
.direct-side-handle.left.is-inset {
  left: calc(-32px - var(--direct-pad-x));
}
.direct-side-handle.right.is-inset {
  right: calc(-32px - var(--direct-pad-x));
}
.direct-side-handle.left.is-inset > span {
  right: 27px;
}
.direct-side-handle.right.is-inset > span {
  left: 27px;
}
.direct-text-editor .direct-side-handle.is-covered,
.unified-object-selection .direct-side-handle.is-covered {
  display: none;
}
.direct-side-handle.top.is-inset {
  top: calc(var(--handle-zone, 36px) / -2 - var(--direct-pad-y));
}
.direct-side-handle.bottom.is-inset {
  bottom: calc(var(--handle-zone, 36px) / -2 - var(--direct-pad-y));
}
.direct-side-handle.active > span,
.direct-side-handle:active > span {
  transform: scale(1.14);
  background: var(--direct-accent);
  border-color: #fff;
}
.direct-side-handle:focus-visible > span {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
.direct-text-editor[data-interaction] .direct-text-box {
  border-color: #67c0ff;
}
.direct-text-path-guide {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
  opacity: 0.7;
}
.direct-text-path-guide[hidden] {
  display: none;
}
.direct-text-path-guide polyline {
  fill: none;
  stroke: rgba(184, 92, 255, 0.82);
  stroke-width: 1.2;
  stroke-dasharray: 5 5;
  vector-effect: non-scaling-stroke;
}
.text-line.path-line {
  position: relative;
  display: block;
  overflow: visible;
  white-space: nowrap;
  flex: none;
}
.path-char {
  position: absolute;
  display: block;
  transform-origin: 50% 50%;
  white-space: pre;
  line-height: 1;
}
.fatal-runtime-error {
  position: absolute;
  inset: 16px;
  z-index: 9999;
  display: grid;
  place-content: center;
  gap: var(--ds-space-2);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: #282b42;
  color: #f7f9fb;
  text-align: center;
  font: 500 14px/1.5 var(--font-ui, "Graphik Arabic", sans-serif);
}
.fatal-runtime-error strong {
  font-size: 17px;
}
.fatal-runtime-error span {
  color: #9ea9b7;
}
@media (prefers-reduced-motion: reduce) {
  .direct-side-handle > span,
  .direct-text-tool {
    transition: none !important;
  }
}
#app[data-layout-edit-mode=locked] .text-item {
  cursor: default;
}
#app[data-layout-edit-mode=on] .text-item {
  cursor: move;
}
.studio-color-swatch:focus-visible,
.studio-color-custom-picker:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.studio-color-picker {
  position: fixed;
  z-index: 1400;
  box-sizing: border-box;
  max-height: min(76svh, 610px);
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--window-border);
  border-radius: var(--window-radius);
  background: var(--window-surface);
  box-shadow: var(--window-shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  scrollbar-width: none;
}
.studio-color-picker::-webkit-scrollbar,
.studio-color-section-track::-webkit-scrollbar {
  display: none;
}
.studio-color-sv {
  --picker-hue: #f00;
  position: relative;
  width: 100%;
  aspect-ratio: 2.35;
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
  cursor: crosshair;
  background:
    linear-gradient(
      to top,
      #000,
      transparent),
    linear-gradient(
      to right,
      #fff,
      transparent),
    var(--picker-hue);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.studio-color-sv-thumb {
  position: absolute;
  width: 15px;
  height: 15px;
  border: 2px solid #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
  pointer-events: none;
}
.studio-color-controls {
  display: block;
  margin-top: 8px;
}
.studio-color-sliders {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.studio-color-slider-row {
  min-width: 0;
}
.studio-color-hue,
.studio-color-opacity {
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.studio-color-hue::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #f00,
      #ff0,
      #0f0,
      #0ff,
      #00f,
      #f0f,
      #f00);
}
.studio-color-hue::-webkit-slider-thumb,
.studio-color-opacity::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5.5px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.studio-color-hue::-moz-range-track {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      #f00,
      #ff0,
      #0f0,
      #0ff,
      #00f,
      #f0f,
      #f00);
}
.studio-color-hue::-moz-range-thumb,
.studio-color-opacity::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55);
}
.studio-color-opacity-head {
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-3);
  font: var(--ui-weight-medium) var(--ui-type-helper)/1 var(--font-ui);
}
.studio-color-opacity-head strong {
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}
.studio-color-opacity::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--opacity-color, #000)),
    repeating-conic-gradient(#8b9199 0 25%, #d8dbe0 0 50%) 50%/6px 6px;
}
.studio-color-opacity::-moz-range-track {
  height: 5px;
  border: 0;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--opacity-color, #000)),
    repeating-conic-gradient(#8b9199 0 25%, #d8dbe0 0 50%) 50%/6px 6px;
}
.studio-color-section {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.studio-color-section-title {
  display: block;
  margin-bottom: 6px;
  color: var(--text-3);
  font: var(--ui-weight-medium) var(--ui-type-control)/1 var(--font-ui);
}
.studio-color-section-track {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  padding: 3px 2px 5px;
  scrollbar-width: none;
}
.studio-color-swatch {
  flex: 0 0 var(--editor-theme-swatch-size);
  width: var(--editor-theme-swatch-size);
  height: var(--editor-theme-swatch-size);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: var(--swatch-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  scroll-snap-align: start;
}
.studio-color-swatch.is-gradient {
  background: var(--swatch-gradient);
}
.studio-color-custom-picker {
  flex: 0 0 var(--editor-theme-swatch-size);
  width: var(--editor-theme-swatch-size);
  height: var(--editor-theme-swatch-size);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.045);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  scroll-snap-align: end;
}
.studio-color-swatch:hover,
.studio-color-custom-picker:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.55);
}
.studio-color-custom-picker-icon {
  width: 18px;
  height: 18px;
  display: block;
  pointer-events: none;
}
@media (max-width: 480px) {
  .studio-color-picker {
    padding: 8px;
    border-radius: 14px;
    max-height: 72vh;
  }
  .studio-color-sv {
    aspect-ratio: 2.4;
  }
  .studio-color-swatch {
    flex-basis: var(--editor-theme-swatch-size);
    width: var(--editor-theme-swatch-size);
    height: var(--editor-theme-swatch-size);
  }
  .studio-color-custom-picker {
    flex-basis: var(--editor-theme-swatch-size);
    width: var(--editor-theme-swatch-size);
    height: var(--editor-theme-swatch-size);
  }
}
.studio-color-sv {
  aspect-ratio: 2.22;
}
.direct-rotate-handle {
  position: absolute;
  z-index: 18;
  width: var(--handle-zone, 36px);
  height: var(--handle-zone, 36px);
  top: calc(-1 * var(--handle-zone, 36px) - var(--direct-pad-y) + 2px);
  right: calc(-1 * var(--handle-zone, 36px) - var(--direct-pad-x) + 2px);
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.direct-rotate-handle > span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--direct-accent);
  border: 1.5px solid var(--direct-accent);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);
  pointer-events: none;
  transition: transform 0.08s ease;
}
.direct-rotate-handle svg {
  width: 14px;
  height: 14px;
}
.direct-rotate-handle.active,
.direct-rotate-handle:active {
  cursor: grabbing;
}
.direct-rotate-handle.active > span,
.direct-rotate-handle:active > span {
  transform: scale(1.12);
  background: var(--direct-accent);
  color: #fff;
}
.direct-rotate-handle:focus-visible > span {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.direct-rotate-handle[data-corner=top-left] {
  right: auto;
  left: calc(-1 * var(--handle-zone, 36px) - var(--direct-pad-x) + 2px);
}
.direct-rotate-handle[data-corner=bottom-right] {
  top: auto;
  bottom: calc(-1 * var(--handle-zone, 36px) - var(--direct-pad-y) + 2px);
}
.direct-rotate-handle[data-corner=bottom-left] {
  top: auto;
  right: auto;
  bottom: calc(-1 * var(--handle-zone, 36px) - var(--direct-pad-y) + 2px);
  left: calc(-1 * var(--handle-zone, 36px) - var(--direct-pad-x) + 2px);
}
.direct-text-editor.object-locked .direct-rotate-handle,
.direct-text-editor[data-interaction]:not([data-interaction=rotate]) .direct-rotate-handle {
  display: none;
}
.direct-text-editor[data-interaction=rotate] .direct-side-handle {
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .direct-rotate-handle > span {
    transition: none;
  }
}
.direct-text-path-pin {
  position: absolute;
  z-index: 4;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}
.direct-text-path-pin[hidden] {
  display: none;
}
.direct-text-path-pin::before {
  content: "";
  position: absolute;
  inset: -14px;
  border-radius: 50%;
}
.direct-text-path-pin span {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  border: 2.5px solid rgba(184, 92, 255, 0.95);
  box-shadow: 0 0 0 1.5px #fff, 0 1px 5px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease;
}
.direct-text-path-pin.active,
.direct-text-path-pin:active {
  cursor: grabbing;
}
.direct-text-path-pin.active span {
  transform: scale(1.3);
}
.direct-text-path-pin:focus-visible span {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* src/styles/text-edit-modal.css */
html.text-focus-mode,
body.text-focus-mode {
  overscroll-behavior: none;
  overflow: hidden;
}
.text-edit-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 12800;
  box-sizing: border-box;
  background: rgba(8, 10, 22, 0.58);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.2s ease;
  touch-action: none;
  overscroll-behavior: none;
}
.text-edit-modal-layer.is-open {
  opacity: 1;
}
.text-edit-modal-layer.is-open .text-edit-focus-stage {
  transform: translateY(0);
}
.text-edit-modal-layer.is-keyboard-dismissing {
  opacity: 1;
  pointer-events: none;
}
.text-edit-modal-layer.is-closing {
  opacity: 0;
  pointer-events: none;
}
.text-edit-modal-layer.is-closing .text-edit-focus-stage {
  transform: translateY(8px);
}
.text-edit-focus-stage {
  position: absolute;
  left: var(--flinzr-visual-offset-left, 0px);
  top: var(--flinzr-visual-offset-top, 0px);
  width: var(--flinzr-visual-width, 100vw);
  height: var(--flinzr-visual-height, 100dvh);
  display: flex;
  flex-direction: column;
  color: var(--editor-text, #f7f7fb);
  pointer-events: auto;
  overflow: hidden;
  transform: translateY(6px);
  transition: transform 0.2s cubic-bezier(0.22, 0.8, 0.24, 1), opacity 0.2s ease;
}
.text-edit-focus-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: max(12px, env(safe-area-inset-top)) 18px 4px;
  background: #191b2e;
}
.text-edit-focus-kicker {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: rgba(235, 237, 245, 0.62);
  font: 600 11px/1.2 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.text-edit-modal-done {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 0;
  padding: 5px;
  background: transparent;
  color: rgba(248, 249, 252, 0.94);
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.text-edit-modal-done:active {
  transform: scale(0.92);
  opacity: 0.78;
}
.text-edit-modal-done .text-edit-confirm-icon {
  width: 24px;
  height: 24px;
  display: block;
}
.text-edit-modal-done:focus-visible {
  outline: 2px solid #b9aaff;
  outline-offset: 2px;
}
.text-edit-focus-copy {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 6px 18px max(14px, env(safe-area-inset-bottom));
  background: #191b2e;
}
.text-edit-modal-input.text-edit-focus-input {
  display: block;
  width: 100%;
  min-height: 82px;
  max-height: min(30vh, 190px);
  resize: none;
  overflow-y: auto;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  padding: 8px 0 0;
  margin: 0;
  font: 400 17px/1.45 var(--font-ui);
  letter-spacing: 0;
  caret-color: var(--editor-accent, #7357ef);
  outline: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}
.text-edit-modal-input.text-edit-focus-input::selection {
  background: color-mix(in srgb, var(--editor-accent, #7357ef) 34%, transparent);
}
.text-edit-focus-status {
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: min(92%, 440px);
  margin: 8px auto 0;
  text-align: center;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.055);
  color: rgba(237, 240, 247, 0.68);
  font: 500 11px/1.25 var(--font-ui);
  transition: background 0.14s ease, color 0.14s ease;
}
.text-edit-focus-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #71d6a4;
  box-shadow: 0 0 0 3px rgba(113, 214, 164, 0.1);
}
.text-edit-focus-status[data-state=adjust] {
  color: #f0d07a;
  background: rgba(240, 208, 122, 0.08);
}
.text-edit-focus-status[data-state=adjust]::before {
  background: #f0c75e;
  box-shadow: 0 0 0 3px rgba(240, 199, 94, 0.1);
}
.text-edit-focus-status[data-state=edge],
.text-edit-focus-status[data-state=overlap],
.text-edit-focus-status[data-state=long] {
  color: #ffb1bb;
  background: rgba(255, 116, 133, 0.08);
}
.text-edit-focus-status[data-state=edge]::before,
.text-edit-focus-status[data-state=overlap]::before,
.text-edit-focus-status[data-state=long]::before {
  background: #ff7e91;
  box-shadow: 0 0 0 3px rgba(255, 126, 145, 0.1);
}
@media (max-width: 520px) {
  .text-edit-focus-header {
    padding-inline: 18px;
  }
  .text-edit-focus-copy {
    padding-inline: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .text-edit-modal-layer {
    transition: none;
  }
  .text-edit-focus-status {
    transition: none;
  }
}
.text-edit-focus-status[data-state=good] {
  display: none;
}
.text-edit-modal-layer.text-edit-focus-layer {
  background: #191b2e !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.text-edit-focus-stage,
.text-edit-focus-header,
.text-edit-focus-copy {
  background: #191b2e !important;
}
.qr-link-card {
  z-index: 1;
  background: #191b2e !important;
}
.qr-link-copy {
  gap: 0;
  justify-content: flex-start;
}
.qr-link-input.text-edit-modal-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  outline: 0;
  padding: 8px 0 0;
  margin: 0;
  font: 400 17px/1.45 var(--font-ui);
  box-shadow: none;
  touch-action: manipulation;
  caret-color: var(--editor-accent, #7357ef);
  -webkit-appearance: none;
  appearance: none;
}
.qr-link-input::placeholder {
  color: rgba(235, 237, 245, 0.32);
}
html.qr-focus-mode,
body.qr-focus-mode {
  overflow: hidden;
  overscroll-behavior: none;
}

/* src/styles/template-chooser.css */
.template-chooser-overlay {
  position: absolute;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: var(--window-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: template-overlay-in 0.16s ease both;
}
.template-chooser-dialog {
  width: min(100%, var(--window-max-width));
  max-height: min(78svh, 700px);
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid var(--window-border);
  border-radius: var(--window-radius);
  background: var(--window-surface);
  box-shadow: var(--window-shadow);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: template-dialog-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.template-chooser-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding-inline: 2px;
}
.template-chooser-head > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.template-chooser-head strong {
  font: 760 20px/1.2 var(--font-ui);
  color: var(--text);
  letter-spacing: -0.01em;
}
.template-chooser-eyebrow {
  font: 760 10px/1.2 var(--font-ui);
  letter-spacing: 0.12em;
  color: var(--text-2);
}
.template-chooser-close {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-2);
  display: grid;
  place-items: center;
  padding: 0;
}
.template-chooser-close:hover,
.template-chooser-close:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.075);
  color: var(--text);
}
.template-chooser-close svg {
  width: 19px;
  height: 19px;
}
.template-chooser-tabs {
  flex: 0 0 auto;
}
.template-choice-grid {
  overflow: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 2px 2px 4px;
  scrollbar-width: none;
}
.template-choice-grid::-webkit-scrollbar {
  display: none;
}
.template-choice-card {
  position: relative;
  min-width: 0;
  min-height: 126px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text-2);
  padding: 12px 10px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    transform 0.12s ease,
    color 0.14s ease;
}
.template-choice-card:hover,
.template-choice-card:focus-visible {
  outline: 0;
  background: rgba(107, 85, 226, 0.07);
  border-color: rgba(107, 85, 226, 0.24);
  color: var(--text);
}
.template-choice-card:active {
  transform: scale(0.985);
}
.template-choice-card.is-active {
  background: var(--editor-accent-soft);
  border-color: rgba(107, 85, 226, 0.48);
  color: var(--text);
}
.template-choice-preview {
  box-sizing: border-box;
  width: 86px;
  height: 74px;
  border-radius: 17px;
  background: rgba(107, 85, 226, 0.055);
  padding: 12px 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
}
.template-choice-card.is-active .template-choice-preview {
  background: rgba(107, 85, 226, 0.11);
}
.template-choice-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 700 12px/1.2 var(--font-ui);
  text-align: center;
}
.template-choice-check {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 12px rgba(73, 54, 176, 0.28);
}
.template-choice-check svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.3;
}
.template-chooser-overlay.is-closing {
  animation: template-overlay-out 0.16s ease both;
}
.template-chooser-overlay.is-closing .template-chooser-dialog {
  animation: template-dialog-out 0.16s ease both;
}
html[dir=rtl] .template-choice-check {
  right: auto;
  left: 9px;
}
@keyframes template-overlay-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes template-overlay-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes template-dialog-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes template-dialog-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
}
:where(html:not([data-layout=phone])) .template-choice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
:where(html:not([data-layout=phone])) .template-chooser-dialog {
  width: min(620px, calc(100% - 36px));
  max-width: 620px;
}
@media (max-width: 360px) {
  .template-chooser-overlay {
    padding: 10px;
  }
  .template-chooser-dialog {
    border-radius: 20px;
    padding: 14px;
    gap: 12px;
  }
  .template-choice-card {
    min-height: 116px;
    padding: 10px 8px;
  }
  .template-choice-preview {
    width: 76px;
    height: 66px;
  }
  .template-choice-label {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .template-chooser-overlay,
  .template-chooser-dialog,
  .template-chooser-overlay.is-closing,
  .template-chooser-overlay.is-closing .template-chooser-dialog {
    animation: none;
  }
  .template-choice-card {
    transition: none;
  }
}

/* src/styles/object-selection.css */
.direct-text-editor[data-interaction] .direct-text-toolbar {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.surface-layer .sticker-item {
  pointer-events: auto;
}
.sticker-layer {
  position: absolute;
  inset: 0;
  z-index: 18;
  pointer-events: none;
}
.sticker-item {
  --sticker-accent: #6b55e2;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  outline: none;
  cursor: move;
  overflow: visible;
  will-change: transform;
  backface-visibility: hidden;
}
.sticker-item[data-kind=image] {
  contain: layout paint style;
  isolation: isolate;
}
.sticker-item .sticker-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  backface-visibility: hidden;
  transform: translateZ(0);
  contain: paint;
}
.sticker-item.locked {
  cursor: default;
}
.sticker-context-toolbar {
  position: absolute;
  z-index: 48;
  left: 0;
  top: 0;
  transform: translate(-50%, 0);
  pointer-events: auto;
  width: max-content;
  max-width: var(--context-toolbar-max-width, calc(100% - 12px));
  overflow: visible;
  height: 40px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 14px;
  background: rgba(49, 52, 78, 0.97);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.sticker-context-toolbar[hidden] {
  display: none;
}
.sticker-context-toolbar .sticker-context-tool {
  width: 40px;
  min-width: 40px;
  height: 32px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #aeb8c5;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.sticker-context-toolbar .sticker-context-tool:hover,
.sticker-context-toolbar .sticker-context-tool:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #f5f7fa;
}
.sticker-context-tool.active {
  color: var(--accent);
  background: var(--accent-soft);
}
.sticker-context-toolbar .sticker-delete-tool {
  position: relative;
  color: #ff9e9e;
  background: transparent;
}
.sticker-context-toolbar .sticker-delete-tool::before {
  content: "";
  position: absolute;
  inset-inline-start: -2px;
  top: 7px;
  bottom: 7px;
  width: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.sticker-context-toolbar .sticker-delete-tool:hover,
.sticker-context-toolbar .sticker-delete-tool:focus-visible {
  color: #ffc0c0;
  background: rgba(255, 90, 90, 0.08);
}
.sticker-maker-progress {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(107, 85, 226, 0.16);
  border-radius: 14px;
  background: rgba(107, 85, 226, 0.045);
  contain: layout paint;
}
.sticker-maker-progress-copy {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 9px;
}
.sticker-maker-progress-copy strong {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticker-maker-progress-copy small {
  min-width: 30px;
  text-align: end;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
}
.sticker-maker-spinner {
  position: relative;
  width: 15px;
  height: 15px;
  display: block;
  flex: 0 0 auto;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      transparent 0 20%,
      rgba(107, 85, 226, 0.22) 38%,
      var(--accent) 78%,
      transparent 100%);
  animation: sticker-spin 0.72s linear infinite;
  will-change: transform;
  transform: translateZ(0);
}
.sticker-maker-spinner::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  border-radius: 50%;
  background: var(--surface-2, #171c22);
}
.sticker-maker-spinner i {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.sticker-maker-spinner i::after {
  content: "";
  position: absolute;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: var(--accent);
  top: 0.4px;
  left: 5.8px;
  box-shadow: 0 0 6px rgba(107, 85, 226, 0.42);
}
@keyframes sticker-spin {
  0% {
    transform: translateZ(0) rotate(0deg);
  }
  100% {
    transform: translateZ(0) rotate(360deg);
  }
}
.sticker-maker-progress-track {
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.07);
}
.sticker-maker-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      var(--accent),
      rgba(217, 53, 173, 0.96));
  transition: width 0.38s cubic-bezier(0.22, 0.72, 0.28, 1);
  will-change: width;
}
@media (prefers-reduced-motion: reduce) {
  .sticker-maker-spinner {
    animation-duration: 1.8s;
  }
  .sticker-maker-progress-track i {
    transition-duration: 0.01ms;
  }
}
.sticker-icon {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
.sticker-decor svg,
.sticker-decor .source-decor-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.sticker-icon .tabler-icon-inline,
.sticker-icon .tabler-icon-inline svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.tabler-icon-inline-fallback {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.unified-object-selection.object-locked {
  pointer-events: none;
}
.unified-object-selection.object-locked .direct-side-handle {
  display: none;
}
.unified-object-selection.object-locked .direct-text-box {
  border-color: rgba(154, 166, 181, 0.48);
  border-style: dashed;
  box-shadow: none;
}
#app[data-layout-edit-mode=locked] .sticker-item {
  cursor: default;
}
#app[data-layout-edit-mode=on] .sticker-item {
  cursor: move;
}
.compact-context-toolbar {
  max-width: var(--context-toolbar-max-width, min(310px, calc(100vw - 24px)));
  width: max-content;
}
.direct-text-editor.object-locked .direct-side-handle {
  display: none;
}
.direct-text-editor.object-locked .direct-text-box {
  border-color: rgba(154, 166, 181, 0.5);
  border-style: dashed;
  box-shadow: none;
}
.direct-text-tool:disabled {
  opacity: 0.32;
  pointer-events: none;
}
.context-lock-tool.is-locked,
.context-lock-tool.is-active {
  color: var(--accent);
  background: rgba(107, 85, 226, 0.12);
}
.context-background-tool.is-active {
  color: var(--accent);
  background: rgba(107, 85, 226, 0.1);
}
.context-delete-tool {
  color: #ff8f98;
}
.context-delete-tool:hover,
.context-delete-tool:focus-visible {
  color: #ffb2b8;
  background: rgba(255, 90, 90, 0.09);
}
.compact-context-toolbar .direct-text-tool {
  width: 36px;
  min-width: 36px;
}
.sticker-icon-background {
  position: absolute;
  inset: 3%;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}
.sticker-emoji {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
}
.sticker-emoji-background {
  inset: 3%;
}
.sticker-item[data-kind=icon] .sticker-icon {
  width: 72%;
  height: 72%;
}
#app[data-layout-edit-mode=on] .sticker-item.locked {
  cursor: default;
}
.text-item.locked {
  cursor: default;
}
.compact-context-toolbar .context-lock-tool {
  color: var(--accent);
}
.compact-context-toolbar .context-lock-tool:hover,
.compact-context-toolbar .context-lock-tool:focus-visible,
.compact-context-toolbar .context-lock-tool.is-active,
.compact-context-toolbar .context-lock-tool.is-locked {
  color: #6b55e2;
  background: rgba(107, 85, 226, 0.12);
}
.compact-context-toolbar .context-delete-tool,
.sticker-context-toolbar .sticker-delete-tool {
  color: #ff8f98;
}
.compact-context-toolbar .context-delete-tool:hover,
.compact-context-toolbar .context-delete-tool:focus-visible,
.sticker-context-toolbar .sticker-delete-tool:hover,
.sticker-context-toolbar .sticker-delete-tool:focus-visible {
  color: #ffb2b8;
  background: rgba(255, 90, 90, 0.1);
}
.direct-text-tool .tabler-ui-icon {
  width: 19px;
  height: 19px;
}
.direct-text-editor .direct-side-handle,
.unified-object-selection .direct-side-handle {
  display: block;
  pointer-events: auto;
}
.mobile-export-save-layer {
  position: fixed;
  inset: 0;
  z-index: 2200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 18px max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: var(--window-overlay);
  box-sizing: border-box;
}
.mobile-export-save-sheet {
  width: min(100%, 480px);
  box-sizing: border-box;
  padding: 10px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 22px;
  background: rgba(43, 46, 70, 0.985);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.42);
  color: #fff;
  text-align: center;
}
.mobile-export-save-handle {
  width: 38px;
  height: 4px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}
.mobile-export-save-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.3;
  font-weight: 700;
}
.mobile-export-save-copy {
  margin: 8px auto 16px;
  max-width: 390px;
  color: rgba(255, 255, 255, 0.68);
  font-size: 13px;
  line-height: 1.55;
}
.mobile-export-save-actions {
  display: grid;
  gap: 8px;
}
.mobile-export-save-actions button {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 0 16px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
  touch-action: manipulation;
}
.mobile-export-save-primary {
  background: #7857ff;
  color: #fff;
}
.mobile-export-save-actions button:focus-visible {
  outline: 2px solid #9b83ff;
  outline-offset: 2px;
}
@media (min-width: 720px) {
  .mobile-export-save-sheet {
    margin-bottom: 12px;
  }
}
.direct-text-toolbar .context-reset-tool,
.sticker-context-toolbar .context-reset-tool,
.direct-text-toolbar [data-editor-action=reset],
.sticker-context-toolbar [data-editor-action=reset] {
  color: var(--reset-accent);
}
.direct-text-toolbar .context-reset-tool:hover,
.direct-text-toolbar .context-reset-tool:focus-visible,
.sticker-context-toolbar .context-reset-tool:hover,
.sticker-context-toolbar .context-reset-tool:focus-visible,
.direct-text-toolbar [data-editor-action=reset]:hover,
.direct-text-toolbar [data-editor-action=reset]:focus-visible,
.sticker-context-toolbar [data-editor-action=reset]:hover,
.sticker-context-toolbar [data-editor-action=reset]:focus-visible {
  color: #ffd166;
  background: rgba(250, 193, 69, 0.08);
}
.scene-color-loupe {
  --loupe-color: #fff;
  position: fixed;
  z-index: 999999;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.08s ease, transform 0.1s cubic-bezier(0.2, 0.8, 0.2, 1);
  border: 3px solid rgba(255, 255, 255, 0.92);
  background: #f6f6fb;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(46, 49, 74, 0.34);
}
.scene-color-loupe.is-active {
  opacity: 1;
  transform: scale(1);
}
.scene-color-loupe-viewport {
  position: absolute;
  inset: 3px;
  overflow: hidden;
  border-radius: 50%;
  background: #f4f4f8;
}
.scene-color-loupe-viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(46, 49, 74, 0.075) 1px, transparent 1px),
    linear-gradient(
      90deg,
      rgba(46, 49, 74, 0.075) 1px,
      transparent 1px);
  background-size: 12px 12px;
  mix-blend-mode: multiply;
}
.scene-color-loupe-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  image-rendering: pixelated;
}
.scene-color-loupe-reticle {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.scene-color-loupe-reticle::before,
.scene-color-loupe-reticle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(32, 35, 52, 0.62);
}
.scene-color-loupe-reticle::before {
  width: 9px;
  height: 1px;
  transform: translate(-50%, -50%);
}
.scene-color-loupe-reticle::after {
  width: 1px;
  height: 9px;
  transform: translate(-50%, -50%);
}
.scene-color-loupe-swatch {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 6px;
  width: 30px;
  height: 9px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--loupe-color);
  border: 1px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(46, 49, 74, 0.12);
}
@media (max-width: 480px) {
  .scene-color-loupe {
    width: 112px;
    height: 112px;
  }
}
.scene-eyedropper-capture {
  position: fixed;
  z-index: 999997;
  touch-action: none;
  cursor: crosshair;
  background: transparent;
  -webkit-user-select: none;
  user-select: none;
}
@media (hover: none) and (pointer: coarse) {
  .direct-text-toolbar,
  .sticker-context-toolbar,
  .studio-color-picker {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(49, 52, 78, 0.995);
  }
}
.sticker-item .sticker-layout-photo {
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}
.photo-context-toolbar .photo-shape-glyph {
  display: block;
  width: 19px;
  height: 19px;
  background: currentColor;
  opacity: 0.95;
  mask: var(--photo-shape-mask) center/contain no-repeat;
  -webkit-mask: var(--photo-shape-mask) center/contain no-repeat;
}
.photo-context-toolbar [data-photo-shape=circle] .photo-shape-glyph {
  mask: none;
  -webkit-mask: none;
  border-radius: 50%;
  background: currentColor;
}
.sticker-item .sticker-photo-style-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.sticker-item .sticker-photo-border-layer {
  opacity: 1;
}
.sticker-item .sticker-layout-photo {
  position: relative;
  z-index: 1;
}
.sticker-icon-background.has-shape-mask {
  border-radius: 0;
  mask: var(--sticker-background-mask) center/contain no-repeat;
  -webkit-mask: var(--sticker-background-mask) center/contain no-repeat;
}
.sticker-context-toolbar .background-shape-glyph {
  display: block;
  width: 19px;
  height: 19px;
  background: currentColor;
  opacity: 0.95;
  mask: var(--sticker-background-mask) center/contain no-repeat;
  -webkit-mask: var(--sticker-background-mask) center/contain no-repeat;
}
.sticker-context-toolbar [data-background-shape=circle] .background-shape-glyph {
  mask: none;
  -webkit-mask: none;
  border-radius: 50%;
}
.sticker-context-toolbar [data-background-shape=none] {
  color: var(--muted, #9ca3b7);
  background: transparent;
}
.sticker-context-toolbar .background-none-glyph {
  width: 20px;
  height: 20px;
  opacity: 0.9;
}
.sticker-generic-border-layer {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
}
@media (pointer: coarse) {
  .direct-text-toolbar .direct-text-tool,
  .compact-context-toolbar .direct-text-tool {
    width: var(--context-tool-width, 40px);
    min-width: var(--context-tool-width, 40px);
    height: 36px;
  }
}
.sticker-item.is-framing > * {
  animation: sticker-framing 1.1s ease-in-out infinite alternate;
}
.sticker-item.is-reframed .sticker-layout-photo {
  animation: sticker-reframed 0.35s ease-out;
}
@keyframes sticker-framing {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.5;
  }
}
@keyframes sticker-reframed {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticker-item.is-framing > * {
    animation: none;
    opacity: 0.7;
  }
  .sticker-item.is-reframed .sticker-layout-photo {
    animation: none;
  }
}

/* src/styles/export-dialogs.css */
.export-intro-layer {
  position: fixed;
  inset: 0;
  z-index: 2190;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--window-overlay);
  box-sizing: border-box;
}
.export-intro-layer.is-scene-bound {
  position: absolute;
  inset: 0;
  padding: 10px;
  overflow: hidden;
  border-radius: inherit;
}
.export-intro-sheet {
  width: min(100%, 304px);
  max-height: calc(100% - 8px);
  overflow: auto;
  box-sizing: border-box;
  padding: 8px 12px 12px;
  border: 1px solid var(--window-border);
  border-radius: var(--window-radius);
  background: var(--window-surface);
  box-shadow: var(--window-shadow);
  color: var(--editor-text);
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.export-intro-sheet::-webkit-scrollbar {
  display: none;
}
.export-intro-handle {
  width: 34px;
  height: 4px;
  margin: 0 auto 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.26);
}
.export-intro-simple-head {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
}
.export-intro-title {
  grid-column: 2;
  margin: 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 750;
}
.export-intro-close {
  grid-column: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--editor-muted);
  font: inherit;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
.export-intro-close:hover,
.export-intro-close:focus-visible {
  background: var(--control-card-bg-hover);
  color: var(--editor-text);
}
.export-intro-teaser {
  max-width: 230px;
  margin: 2px auto 9px;
  text-align: center;
  color: var(--editor-muted);
  font-size: 9.5px;
  line-height: 1.35;
}
.export-intro-stage {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 7px;
}
.export-intro-preview-wrap {
  position: relative;
  justify-self: center;
  width: min(44vw, 142px);
  max-width: 100%;
  aspect-ratio: 4/7;
  border-radius: 14px;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--control-card-border);
}
.export-intro-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
  pointer-events: none;
}
.export-intro-none-preview {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 14px;
  text-align: center;
  color: var(--editor-muted);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      rgba(255, 255, 255, 0.01));
}
.export-intro-none-preview[hidden] {
  display: none;
}
.export-intro-none-preview svg {
  display: block;
  width: 30px;
  height: 30px;
}
.export-intro-none-preview span {
  font-size: 10px;
  font-weight: 700;
}
.export-intro-nav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--control-card-border);
  border-radius: 10px;
  background: transparent;
  color: var(--editor-muted);
  cursor: pointer;
  box-sizing: border-box;
}
.export-intro-nav-icon {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}
.export-intro-nav:hover,
.export-intro-nav:focus-visible {
  background: var(--control-card-bg-hover);
  border-color: var(--line-strong);
  color: var(--editor-text);
}
.export-intro-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 14px;
  margin: 6px 0;
}
.export-intro-selection-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.export-intro-dot {
  position: relative;
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 8px;
  background: transparent;
  opacity: 1;
}
.export-intro-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--editor-muted);
  opacity: 0.45;
  transition:
    width 0.16s ease,
    border-radius 0.16s ease,
    opacity 0.16s ease,
    background 0.16s ease;
}
.export-intro-dot.is-active::before {
  width: 14px;
  border-radius: 999px;
  background: var(--editor-accent);
  opacity: 1;
}
.export-intro-primary {
  width: 100%;
  min-height: 39px;
  border: 0;
  border-radius: 11px;
  padding: 0 14px;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
  background: var(--editor-accent);
  color: #fff;
}
.export-intro-primary:hover,
.export-intro-primary:focus-visible {
  filter: brightness(1.08);
}
.export-intro-primary:focus-visible,
.export-intro-close:focus-visible,
.export-intro-nav:focus-visible {
  outline: 2px solid #9b83ff;
  outline-offset: 2px;
}
@media (max-width: 380px) {
  .export-intro-layer {
    padding: 8px;
  }
  .export-intro-layer.is-scene-bound {
    padding: 7px;
  }
  .export-intro-sheet {
    width: min(100%, 286px);
    padding-inline: 10px;
  }
  .export-intro-preview-wrap {
    width: min(42vw, 132px);
  }
}
.reset-confirm-layer {
  position: absolute;
  inset: 0;
  z-index: 2200;
  display: grid;
  place-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--window-overlay);
  border-radius: inherit;
}
.reset-confirm-sheet {
  box-sizing: border-box;
  width: min(86%, 320px);
  padding: 10px 14px 14px;
  border: 1px solid var(--window-border);
  border-radius: var(--window-radius);
  background: var(--window-surface);
  box-shadow: var(--window-shadow);
  color: var(--editor-text);
  text-align: center;
}
.reset-confirm-handle {
  width: 34px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
}
.reset-confirm-sheet h2 {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.2;
  font-weight: 760;
}
.reset-confirm-sheet p {
  margin: 0 auto 14px;
  max-width: 260px;
  color: var(--editor-muted);
  font-size: 13px;
  line-height: 1.5;
}
.reset-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 8px;
}
.reset-confirm-actions button {
  min-height: 42px;
  border: 1px solid var(--control-card-border);
  border-radius: 11px;
  padding: 0 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 720;
  cursor: pointer;
}
.reset-confirm-actions [data-reset-cancel] {
  background: transparent;
  color: var(--editor-text);
}
.reset-confirm-actions [data-reset-confirm] {
  border-color: transparent;
  background: var(--reset-accent);
  color: #252437;
}
.reset-confirm-actions button:focus-visible {
  outline: 2px solid #9b83ff;
  outline-offset: 2px;
}

/* src/styles/export-progress-phases.css */
.export-busy-pop .export-busy-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: min(58vw, 280px);
}
.export-busy-pop .export-busy-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.export-busy-pop .export-busy-line strong {
  font-size: 0.72em;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}
.export-busy-pop .export-busy-track {
  display: block;
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.13);
}
.export-busy-pop .export-busy-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: currentColor;
  transition: width 0.22s ease;
}

/* src/styles/layout-hub.css */
.layout-dock {
  width: 100%;
  height: var(--editor-stage-h);
  display: grid;
  grid-template-rows: var(--editor-stage-h);
  color: var(--layout-text);
  font-family: var(--font-ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.layout-mini {
  display: block;
  height: 2px;
  border-radius: 999px;
  background: rgba(107, 85, 226, 0.56);
  margin-inline: auto;
}
.layout-mini.line {
  width: 72%;
  opacity: 0.72;
}
.layout-mini.names {
  width: 78%;
  height: 5px;
  background: var(--layout-accent);
}
.layout-mini.venue {
  width: 58%;
  opacity: 0.82;
}
.layout-mini.date-row {
  width: 92%;
  height: 5px;
  background:
    linear-gradient(
      90deg,
      rgba(107, 85, 226, 0.42) 0 27%,
      transparent 27% 36%,
      rgba(107, 85, 226, 0.92) 36% 64%,
      transparent 64% 73%,
      rgba(107, 85, 226, 0.42) 73%);
}
.layout-mini.stack {
  width: 44%;
  height: 3px;
  background: rgba(107, 85, 226, 0.68);
}
.layout-mini.custom-plus {
  position: relative;
  width: 25px;
  height: 25px;
  border: 1.5px dashed rgba(107, 85, 226, 0.72);
  border-radius: 8px;
  background: rgba(107, 85, 226, 0.06);
  margin-bottom: 2px;
}
.layout-mini.custom-plus::before,
.layout-mini.custom-plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 2px;
  border-radius: 999px;
  background: var(--layout-accent);
  transform: translate(-50%, -50%);
}
.layout-mini.custom-plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.layout-mini.photo {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(107, 85, 226, 0.1);
  border: 2px solid rgba(107, 85, 226, 0.78);
  margin-bottom: 1px;
}
.sticker-image.sticker-layout-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.sticker-item[data-semantic-role=photo] {
  border-radius: 0;
  overflow: visible;
  cursor: pointer;
}
.sticker-item[data-semantic-role=photo][data-kind=icon] {
  overflow: visible;
}
.layout-builder-stage {
  width: 100%;
  height: var(--editor-stage-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--layout-line);
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.012),
      rgba(255, 255, 255, 0));
}
.layout-builder-rail {
  box-sizing: border-box;
  width: 100%;
  height: 96px;
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 12px 8px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.layout-builder-rail::-webkit-scrollbar {
  display: none;
}
.layout-builder-card {
  scroll-snap-align: start;
  position: relative;
}
.layout-builder-card[data-custom-builder-kind=idea],
.layout-builder-card[data-custom-builder-kind=idea]:hover {
  color: var(--idea-accent);
  border-color: color-mix(in srgb, var(--idea-accent) 55%, transparent);
  background: color-mix(in srgb, var(--idea-accent) 10%, transparent);
}
.layout-builder-card[data-custom-builder-kind=clear],
.layout-builder-card[data-custom-builder-kind=clear]:hover {
  color: var(--reset-accent);
}
.layout-builder-card[data-custom-builder-kind=text] {
  color: var(--editor-muted);
}
.layout-dock-v3 {
  width: 100%;
  height: var(--editor-stage-h);
  display: block;
  overflow: hidden;
  background: var(--layout-bg);
}
.layout-dock-v3 > .layout-tab-content {
  width: 100%;
  height: var(--editor-stage-h);
  min-height: 0;
  overflow: hidden;
}
.layout-dock-v3 .layout-builder-rail {
  width: 100%;
  height: var(--editor-stage-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-padding-inline: 16px;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.layout-dock-v3 .layout-builder-rail::-webkit-scrollbar {
  display: none;
}
.layout-hub-extras {
  --hub-options-h: 48px;
}
.layout-hub-options {
  width: 100%;
  height: var(--editor-panel-content-h);
  min-height: var(--editor-panel-content-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--editor-chip-gap);
  margin: 0;
  padding: 4px var(--editor-panel-pad-x);
  scroll-padding-inline: var(--editor-panel-pad-x);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.layout-hub-options::-webkit-scrollbar {
  display: none;
}
.layout-hub-options::after {
  content: "";
  flex: 0 0 1px;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.layout-hub-option {
  box-sizing: border-box;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--editor-muted);
  outline: 0;
  box-shadow: none;
  cursor: pointer;
}
.layout-hub-emoji-options {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--editor-chip-wide-w);
  align-items: center;
  justify-content: start;
  gap: var(--editor-chip-gap);
  height: 56px;
  min-height: 56px;
  padding: 4px max(12px, env(safe-area-inset-right, 0px)) 4px max(12px, env(safe-area-inset-left, 0px));
  scroll-padding-left: max(12px, env(safe-area-inset-left, 0px));
  scroll-padding-right: max(12px, env(safe-area-inset-right, 0px));
  scroll-snap-type: x proximity;
}
.layout-hub-emoji-options::before,
.layout-hub-emoji-options::after {
  display: none;
}
.layout-hub-emoji-option {
  width: 100%;
  min-width: 0;
  max-width: none;
  height: var(--editor-chip-h);
  flex-basis: auto;
  border-radius: var(--editor-chip-radius);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.065);
  scroll-snap-align: start;
}
.layout-hub-emoji-option.is-active {
  background: var(--editor-accent-soft);
  border-color: rgba(107, 85, 226, 0.62);
  box-shadow: inset 0 0 0 1px rgba(107, 85, 226, 0.18);
}
.layout-hub-emoji-glyph {
  display: grid;
  grid-template-columns: repeat(3, minmax(16px, 18px));
  grid-auto-rows: 18px;
  align-content: center;
  justify-content: center;
  gap: 0 clamp(5px, 1.9vw, 9px);
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding-inline: 7px;
  box-sizing: border-box;
  overflow: hidden;
  font-family:
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Noto Color Emoji",
    sans-serif;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0;
  white-space: normal;
  text-align: center;
}
.layout-hub-emoji-glyph > span {
  display: block;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.14));
}
.layout-hub-emoji-option[data-emoji-preset=none] {
  background: rgba(255, 255, 255, 0.018);
}
.layout-hub-emoji-option[data-emoji-preset=none] .layout-hub-emoji-glyph,
.layout-hub-emoji-option.ui-none-card .layout-hub-emoji-glyph {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  place-items: center;
  font-family: inherit;
  color: currentColor;
}
.layout-hub-emoji-option.ui-none-card .ui-none-glyph {
  width: 24px;
  height: 24px;
  color: currentColor;
}
.layout-hub-theme-option {
  width: var(--editor-chip-square);
  height: var(--editor-chip-h);
  flex-basis: var(--editor-chip-square);
  border-radius: 50%;
}
.layout-hub-theme-triad {
  position: relative;
  box-sizing: border-box;
  width: var(--editor-theme-swatch-size);
  height: var(--editor-theme-swatch-size);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  overflow: hidden;
  border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.16);
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    transform 0.14s ease;
}
.layout-hub-theme-triad > i {
  display: block;
  min-width: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
}
.layout-hub-theme-triad > i:nth-child(1) {
  grid-column: 1 / 3;
  grid-row: 1;
}
.layout-hub-theme-triad > i:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
}
.layout-hub-theme-triad > i:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}
.layout-hub-theme-option.is-active .layout-hub-theme-triad {
  border-color: var(--layout-accent);
  box-shadow: 0 0 0 3px rgba(107, 85, 226, 0.18), 0 1px 5px rgba(0, 0, 0, 0.18);
  transform: scale(1.03);
}
.layout-hub-theme-triad em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-style: normal;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
[dir=rtl] .layout-hub-options {
  direction: rtl;
}
@media (max-width: 390px) {
  .layout-dock-v3 .layout-builder-rail {
    gap: 8px;
    padding-inline: 12px;
  }
}
.layout-hub-theme-triad.is-auto {
  border-style: solid;
}
@media (max-width: 360px) {
  .layout-hub-emoji-glyph {
    font-size: 15px;
    gap: 0 5px;
    padding-inline: 5px;
  }
}
.layout-dock-v3 .layout-builder-stage {
  display: block;
  width: 100%;
  height: var(--editor-stage-h);
  overflow: hidden;
}
.layout-dock-v3 .layout-builder-card .layout-builder-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
.layout-dock-v3 .layout-builder-card .layout-builder-icon .tabler-ui-icon {
  width: 24px;
  height: 24px;
}
.layout-dock-v3 .layout-builder-card:focus-visible {
  outline: 2px solid var(--layout-accent);
  outline-offset: 2px;
}

/* src/styles/smart-composition.css */
.smart-composition-ghost-layer {
  position: absolute;
  inset: 0;
  z-index: 99940;
  pointer-events: none;
  overflow: hidden;
}
.smart-composition-ghost {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 2px dashed rgba(118, 86, 255, 0.78);
  border-radius: 18px;
  background: rgba(118, 86, 255, 0.1);
  box-shadow: 0 0 0 5px rgba(118, 86, 255, 0.045), 0 12px 28px rgba(22, 18, 58, 0.14);
  opacity: 0;
  animation: smartGhostIn 0.52s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.smart-composition-ghost.is-new {
  border-style: solid;
  background: rgba(118, 86, 255, 0.16);
}
.smart-composition-ghost-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(37, 35, 69, 0.86);
  color: #fff;
  font: 600 24px/1.1 system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.18);
}
.text-item.smart-arranging,
.sticker-item.smart-arranging {
  transition:
    left 0.34s cubic-bezier(0.22, 0.8, 0.24, 1),
    top 0.34s cubic-bezier(0.22, 0.8, 0.24, 1),
    width 0.34s cubic-bezier(0.22, 0.8, 0.24, 1),
    transform 0.34s cubic-bezier(0.22, 0.8, 0.24, 1);
}
@keyframes smartGhostIn {
  0% {
    opacity: 0;
    filter: blur(1px);
  }
  22% {
    opacity: 0.94;
  }
  76% {
    opacity: 0.94;
  }
  100% {
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .smart-composition-ghost {
    animation: none;
    opacity: 0.72;
  }
  .text-item.smart-arranging,
  .sticker-item.smart-arranging {
    transition: none;
  }
}

/* src/styles/export-progress.css */
.export-busy-pop {
  position: fixed;
  z-index: 12000;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--editor-line, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  background: var(--editor-surface, #171a2e);
  color: var(--editor-text, #f6f5fb);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
  font: 600 12px/1 var(--font-ui, system-ui);
  white-space: nowrap;
  pointer-events: none;
  animation: export-busy-in 0.16s ease-out;
}
.export-busy-spinner {
  width: 15px;
  height: 15px;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--editor-accent, #7752ff);
  border-radius: 50%;
  animation: export-busy-spin 0.75s linear infinite;
}
@keyframes export-busy-spin {
  to {
    transform: rotate(360deg);
  }
}
@keyframes export-busy-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .export-busy-pop,
  .export-busy-spinner {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* src/styles/text-dock.css */
.text-dock {
  --tdx-bg: var(--editor-bg);
  --tdx-surface: var(--editor-surface);
  --tdx-surface-2: var(--editor-surface-2);
  --tdx-line: var(--editor-line);
  --tdx-border: var(--editor-border);
  --tdx-text: var(--editor-text);
  --tdx-muted: var(--editor-muted);
  --tdx-accent: var(--editor-accent);
  --tdx-accent-soft: var(--editor-accent-soft);
  --tdx-accent-border: var(--editor-accent-border);
  width: 100%;
  height: var(--editor-stage-h);
  display: grid;
  grid-template-rows: var(--editor-stage-h);
  color: var(--tdx-text);
  font-family: var(--font-ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.tdx-stage {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 7px var(--editor-panel-pad-x);
  border-bottom: 1px solid var(--tdx-line);
  overflow: hidden;
}
.tdx-scroll {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--editor-chip-gap);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding: 2px 3px;
  scroll-snap-type: x proximity;
}
.tdx-scroll::-webkit-scrollbar,
.tdx-categories::-webkit-scrollbar {
  display: none;
}
.tdx-font-panel,
.tdx-color-panel {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: var(--editor-panel-tabs-h) var(--editor-panel-content-h);
  gap: var(--editor-panel-gap);
  align-content: center;
}
.tdx-categories {
  width: 100%;
  justify-content: center;
}
.tdx-category {
  font-size: var(--ui-type-tab);
}
.tdx-font-row {
  height: var(--editor-panel-content-h);
  gap: var(--editor-chip-gap);
  padding: 6px var(--editor-panel-pad-x);
  scroll-padding-inline: var(--editor-panel-pad-x);
  align-items: center;
}
.tdx-font-empty {
  height: 50px;
  display: grid;
  place-items: center;
  padding: 0 12px;
  color: var(--tdx-muted);
  font-size: var(--ui-type-label);
  text-align: center;
}
.tdx-font-choice {
  flex: 0 0 var(--editor-chip-preview-w);
  width: var(--editor-chip-preview-w);
  max-width: var(--editor-chip-preview-w);
  height: var(--editor-chip-h);
  padding: 0 7px;
  border: 1px solid rgba(195, 195, 195, 0.16);
  border-radius: var(--editor-chip-radius);
  background: rgba(255, 255, 255, 0.012);
  color: var(--tdx-muted);
  display: grid;
  place-items: center;
  text-align: center;
  scroll-snap-align: start;
}
.tdx-font-choice strong {
  font-size: 14.5px;
  line-height: 1;
  color: var(--tdx-text);
  font-weight: 500;
  white-space: nowrap;
  transition: none;
}
.tdx-font-choice.is-active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(107, 85, 226, 0.34);
  color: var(--tdx-accent);
}
.tdx-font-choice.is-active strong {
  color: var(--tdx-text);
}
.tdx-color-row {
  height: var(--editor-panel-content-h);
  gap: var(--editor-chip-gap);
  padding: 2px var(--editor-panel-pad-x);
  scroll-padding-inline: var(--editor-panel-pad-x);
  align-items: center;
}
.tdx-color-dot,
.tdx-color-action {
  --swatch-size: var(--editor-theme-swatch-size);
  position: relative;
  flex: 0 0 var(--editor-chip-square);
  width: var(--editor-chip-square);
  height: var(--editor-chip-h);
  min-width: var(--editor-chip-square);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tdx-text);
  display: grid;
  place-items: center;
  scroll-snap-align: start;
  outline: 0;
  font: 500 15px/1 var(--font-ui);
  isolation: isolate;
}
.tdx-color-dot {
  --dot: #fff;
}
.tdx-color-dot::before,
.tdx-color-action::before {
  content: "";
  width: var(--swatch-size);
  height: var(--swatch-size);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-sizing: border-box;
  transition:
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.08s ease;
}
.tdx-color-dot::before {
  background: var(--dot);
}
.tdx-color-dot.is-gradient::before {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
  background-clip: padding-box;
}
.tdx-color-dot.is-active::before {
  border-color: rgba(107, 85, 226, 0.62);
  box-shadow: 0 0 0 2px var(--tdx-bg), 0 0 0 3px rgba(107, 85, 226, 0.62);
}
.tdx-color-dot.is-gradient.is-active::before {
  border: 0;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.16),
    0 0 0 2px var(--tdx-bg),
    0 0 0 3px rgba(107, 85, 226, 0.62);
}
.tdx-color-action::before {
  background: rgba(255, 255, 255, 0.045);
  border-color: var(--tdx-border);
}
.tdx-color-action svg,
.tdx-color-action .tabler-ui-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 1;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tdx-custom-color {
  cursor: pointer;
}
.tdx-format-panel.tdx-format-rail {
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 var(--editor-panel-pad-x);
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--editor-panel-pad-x);
}
.tdx-format-panel.tdx-format-rail::-webkit-scrollbar {
  display: none;
}
.tdx-format-cluster {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}
.tdx-format-btn {
  height: 42px;
  min-width: 42px;
  padding: 0 10px;
  border: 1px solid var(--tdx-border);
  border-radius: 12px;
  background: transparent;
  color: var(--tdx-muted);
  display: grid;
  place-items: center;
  font: 600 10px/1 var(--font-ui);
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease;
}
.tdx-format-btn svg,
.tdx-format-btn .tabler-ui-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tdx-format-btn.is-active {
  background: var(--tdx-surface-2);
  color: var(--tdx-text);
  border-color: transparent;
}
.tdx-weight-btn {
  min-width: 50px;
  padding-inline: 11px;
}
.tdx-italic-btn {
  width: 42px;
  min-width: 42px;
  padding: 0;
}
.tdx-italic-btn svg,
.tdx-italic-btn .tabler-ui-icon {
  width: 19px;
  height: 19px;
}
.tdx-format-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 26px;
  background: var(--tdx-line);
  border-radius: 1px;
}
.tdx-curve-row {
  height: 76px;
  align-items: center;
  justify-content: flex-start;
  gap: var(--editor-template-card-gap);
  padding-inline: var(--editor-panel-pad-x);
  scroll-padding-inline: var(--editor-panel-pad-x);
}
.tdx-curve-choice {
  --ui-option-card-size: var(--editor-template-card-size);
  --ui-option-card-radius: var(--editor-template-card-radius);
  --ui-option-icon-slot: 26px;
  --ui-option-label-slot: 14px;
  --ui-option-card-inner-gap: 4px;
  scroll-snap-align: start;
  --ui-option-label-max-width: 52px;
  --ui-option-label-size: 9px;
  --ui-option-icon-box-size: 26px;
  --ui-option-icon-svg-size: 23px;
}
.text-dock button,
.tdx-custom-color {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.text-dock button:focus-visible,
.tdx-custom-color:focus-within {
  outline: 2px solid var(--tdx-accent);
  outline-offset: 2px;
}
.tdx-font-choice:active,
.tdx-color-dot:active,
.tdx-color-action:active,
.tdx-format-btn:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .tdx-font-choice:hover:not(.is-active),
  .tdx-category:hover:not(.is-active),
  .tdx-color-action:hover,
  .tdx-format-btn:hover:not(.is-active) {
    background: var(--tdx-surface);
  }
}
[dir=rtl] .text-dock {
  direction: rtl;
}
@media (max-width: 390px) {
  .tdx-stage {
    padding-inline: 9px;
  }
  .tdx-categories {
    justify-content: flex-start;
  }
  .tdx-color-dot,
  .tdx-format-cluster {
    gap: 5px;
  }
  .tdx-format-btn {
    height: 40px;
    min-width: 40px;
    padding-inline: 8px;
  }
  .tdx-weight-btn {
    min-width: 46px;
    padding-inline: 9px;
  }
  .tdx-italic-btn {
    width: 40px;
    min-width: 40px;
  }
}
.tdx-color-action .tabler-ui-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  z-index: 1;
}
.tdx-format-btn .tabler-ui-icon,
.tdx-italic-btn .tabler-ui-icon {
  width: 19px;
  height: 19px;
}
.tdx-categories.editor-segmented .editor-segmented-option {
  flex: 1 1 0;
}
.tdx-font-choice:not(.is-preview-ready):not(.is-active) strong {
  opacity: 0.72;
}
@media (prefers-reduced-motion: reduce) {
}
.tdx-value-stepper {
  flex: 0 0 auto;
  height: 42px;
  display: grid;
  grid-template-columns: 30px minmax(48px, auto) 30px;
  align-items: center;
  border: 1px solid var(--tdx-border);
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  scroll-snap-align: start;
}
.tdx-stepper-btn {
  width: 30px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--tdx-muted);
  display: grid;
  place-items: center;
  padding: 0;
}
.tdx-stepper-btn svg,
.tdx-stepper-btn .tabler-ui-icon {
  width: 15px;
  height: 15px;
}
.tdx-stepper-btn:not(:disabled):active {
  background: var(--tdx-surface);
  color: var(--tdx-text);
}
.tdx-stepper-btn:disabled {
  opacity: 0.28;
  cursor: default;
}
.tdx-stepper-value {
  height: 40px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--tdx-text);
  font: 600 10px/1 var(--font-ui);
  border-inline: 1px solid var(--tdx-line);
  padding: 0 6px;
  box-sizing: border-box;
}
.tdx-stepper-icon {
  display: grid;
  place-items: center;
  color: var(--tdx-muted);
}
.tdx-stepper-icon svg,
.tdx-stepper-icon .tabler-ui-icon {
  width: 15px;
  height: 15px;
}
.tdx-value-stepper.is-disabled {
  opacity: 0.5;
}
@media (max-width: 390px) {
  .tdx-value-stepper {
    height: 40px;
    grid-template-columns: 28px minmax(44px, auto) 28px;
  }
  .tdx-stepper-btn,
  .tdx-stepper-value {
    height: 38px;
  }
  .tdx-stepper-btn {
    width: 28px;
  }
  .tdx-stepper-value {
    min-width: 44px;
    padding-inline: 5px;
  }
}
.tdx-curve-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.tdx-curve-notice {
  align-self: center;
  margin: 5px 12px 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(240, 199, 94, 0.09);
  color: #e7c76d;
  font: 500 10px/1.3 var(--font-ui);
  text-align: center;
}
.tdx-curve-shape {
  min-width: 46px;
  padding: 0 8px;
}
.tdx-format-btn svg.tdx-curve-glyph {
  width: 26px;
  height: 26px;
  stroke-width: 1.9;
}
.tdx-curve-hint {
  flex: 0 0 auto;
  max-width: 170px;
  color: var(--tdx-muted);
  font: 500 10px/1.3 var(--font-ui);
  white-space: normal;
}

/* src/styles/text-paint.css */
.text-item.has-text-gradient {
  color: transparent !important;
}
.text-item.has-text-gradient .text-line:not(.path-line),
.text-item.has-text-gradient .path-char {
  color: transparent !important;
  background-image: var(--flinzr-text-gradient) !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* src/styles/card-preview.css */
.phone-shell {
  --card-preview-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --card-preview-chrome-ms: 240ms;
  --card-preview-fade-ms: 170ms;
}
.phone-shell .editor-body {
  transition: none;
}
.phone-shell .topbar,
.phone-shell .bottom-bar,
.phone-shell .card-top-controls {
  transition:
    opacity var(--card-preview-fade-ms) ease,
    transform var(--card-preview-chrome-ms) var(--card-preview-ease),
    visibility 0s linear 0s;
}
.preview-mode-hint {
  position: absolute;
  z-index: 125;
  left: 50%;
  bottom: max(16px, calc(env(safe-area-inset-bottom) + 12px));
  max-width: min(86%, 420px);
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  background: rgba(32, 35, 55, 0.78);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(10, 12, 24, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px) scale(0.98);
}
.phone-shell.is-card-preview-mode .preview-mode-hint {
  visibility: visible;
  animation: card-preview-hint 2.8s var(--card-preview-ease) both;
}
@keyframes card-preview-hint {
  0% {
    opacity: 0;
    transform: translate(-50%, 9px) scale(0.98);
  }
  12%, 70% {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, 3px) scale(0.99);
    visibility: hidden;
  }
}
.phone-shell.is-card-preview-mode .topbar,
.phone-shell.is-card-preview-mode .bottom-bar,
.phone-shell.is-card-preview-mode .card-top-controls,
.phone-shell.is-card-preview-mode .card-sample-nav {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.phone-shell.is-card-preview-mode .topbar,
.phone-shell.is-card-preview-mode .card-top-controls {
  transform: translateY(-12px) scale(0.985);
}
.phone-shell.is-card-preview-mode .bottom-bar {
  transform: translateY(calc(100% + 8px));
}
.phone-shell.is-card-preview-mode .scene {
  pointer-events: none;
}
.phone-shell.is-card-preview-mode .text-item[data-id=qrPrompt] {
  display: none !important;
}
.phone-shell.is-card-preview-mode {
  cursor: pointer;
}
:where(html[data-layout=phone]) .phone-shell.is-card-preview-mode .editor-body {
  inset: 0;
}
:where(html[data-layout=phone]) .preview-mode-hint {
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 10px));
  font-size: 11px;
  padding: 8px 12px;
}
:where(html:not([data-layout=phone])) .phone-shell.is-card-preview-mode .editor-body {
  inset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .phone-shell .topbar,
  .phone-shell .bottom-bar,
  .phone-shell .card-top-controls {
    transition: none !important;
  }
  .phone-shell.is-card-preview-mode .preview-mode-hint {
    animation: card-preview-hint-reduced 2.4s ease both;
  }
}
@keyframes card-preview-hint-reduced {
  0%, 8% {
    opacity: 0;
  }
  12%, 72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

/* src/styles/card-effects.css */
.card-effects-dock {
  width: 100%;
  height: var(--editor-stage-h);
  display: grid;
  grid-template-rows: var(--editor-stage-h);
  color: var(--cfx-text);
  font-family: var(--font-ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.cfx-stage {
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--cfx-line);
  overflow: hidden;
  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.012),
      rgba(255, 255, 255, 0));
}
.cfx-rail {
  box-sizing: border-box;
  width: 100%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--editor-template-card-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 7px 12px;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: 12px;
  overscroll-behavior-x: contain;
}
.cfx-rail::-webkit-scrollbar {
  display: none;
}
.cfx-card {
  --ui-option-card-size: var(--editor-template-card-size);
  --ui-option-card-radius: var(--editor-template-card-radius);
  box-sizing: border-box;
  flex: 0 0 var(--editor-template-card-size);
  width: var(--editor-template-card-size);
  height: var(--editor-template-card-size);
  border: 1px solid transparent;
  border-radius: var(--editor-template-card-radius);
  background: transparent;
  color: var(--cfx-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px;
  scroll-snap-align: start;
  scroll-margin-inline: 12px;
  min-width: 0;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease,
    transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cfx-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--editor-template-thumb-size);
  height: var(--editor-template-thumb-size);
  aspect-ratio: 1/1;
  border-radius: var(--editor-template-thumb-radius);
  overflow: hidden;
  background: #31344e;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.cfx-thumb canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
}
.cfx-thumb.is-none {
  background: transparent;
  color: inherit;
  box-shadow: none;
}
.cfx-none-icon {
  stroke-width: 1.7;
}
.cfx-card.is-active {
  background: var(--cfx-surface);
  border-color: var(--editor-accent-border, rgba(107, 85, 226, 0.64));
  box-shadow: 0 0 0 1px rgba(107, 85, 226, 0.08);
}
.cfx-card.is-active .cfx-thumb {
  box-shadow: inset 0 0 0 1px rgba(107, 85, 226, 0.28), 0 2px 9px rgba(0, 0, 0, 0.16);
}
.cfx-card.is-active[data-effect-id=none] {
  box-shadow: none;
}
.cfx-card.is-active .cfx-thumb.is-none {
  color: var(--cfx-accent);
  box-shadow: none;
}
.cfx-card:active {
  transform: scale(0.97);
}
.cfx-card:focus-visible {
  outline: 2px solid var(--cfx-accent);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .cfx-card:hover:not(.is-active) {
    background: rgba(255, 255, 255, 0.035);
  }
}
[dir=rtl] .cfx-rail {
  direction: rtl;
}
@media (max-width: 390px) {
  .cfx-rail {
    padding-inline: 12px;
    scroll-padding-inline: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cfx-card {
    transition: none;
  }
}
.cfx-card.is-preview-unavailable .cfx-thumb {
  background:
    linear-gradient(
      135deg,
      #353850,
      #292c43);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}
.cfx-card.is-preview-unavailable .cfx-thumb::after {
  content: "!";
  position: absolute;
  inset: auto 5px 5px auto;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(214, 69, 124, 0.92);
  color: white;
  font: 700 10px/1 var(--font-ui);
}
.cfx-thumb.is-preview-pending .cfx-preview-canvas {
  opacity: 0;
}
.cfx-thumb.is-preview-ready .cfx-preview-canvas {
  opacity: 1;
  transition: opacity 0.14s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cfx-thumb.is-preview-ready .cfx-preview-canvas {
    transition: none;
  }
}

/* src/styles/elements-dock.css */
.elements-dock {
  --elx-bg: var(--editor-bg);
  --elx-surface: var(--editor-surface);
  --elx-surface-2: var(--editor-surface-2);
  --elx-line: var(--editor-line);
  --elx-border: var(--editor-border);
  --elx-text: var(--editor-text);
  --elx-muted: var(--editor-muted);
  --elx-accent: var(--editor-accent);
  width: 100%;
  height: var(--editor-stage-h);
  display: grid;
  grid-template-rows: var(--editor-stage-h);
  color: var(--elx-text);
  font-family: var(--font-ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.elements-stage {
  border-bottom: 1px solid var(--elx-line);
}
.elements-library-rail::-webkit-scrollbar,
.elements-library-rail::-webkit-scrollbar {
  display: none;
}
.elements-library-rail {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--editor-chip-gap);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
  height: var(--editor-panel-content-h);
  box-sizing: border-box;
  padding: 4px var(--editor-panel-pad-x);
  scroll-padding-inline: var(--editor-panel-pad-x);
}
.elements-library-item {
  flex: 0 0 var(--editor-chip-square);
  width: var(--editor-chip-square);
  height: var(--editor-chip-h);
  min-width: var(--editor-chip-square);
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--editor-chip-radius);
  background: transparent;
  color: var(--elx-muted);
  display: grid;
  place-items: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.elements-library-item.is-active {
  background: var(--elx-surface);
  border-color: rgba(107, 85, 226, 0.42);
  color: var(--elx-accent);
}
.elements-library-item:active {
  transform: scale(0.96);
}
.elements-library-icon-inline {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  color: currentColor;
}
.elements-library-icon-inline svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.elements-library-icon-local {
  display: block;
  width: 27px;
  height: 27px;
  background: currentColor;
  -webkit-mask: var(--elements-library-icon) center/contain no-repeat;
  mask: var(--elements-library-icon) center/contain no-repeat;
}
.elements-library-item.decor {
  flex: 0 0 var(--editor-chip-wide-w);
  width: var(--editor-chip-wide-w);
  min-width: var(--editor-chip-wide-w);
  height: var(--editor-chip-h);
  border-radius: var(--editor-chip-radius);
}
.elements-library-item.decor .elements-library-decor-inline {
  width: 90px;
  height: 30px;
}
.elements-library-decor-inline {
  width: 38px;
  height: 28px;
}
.elements-library-decor-inline svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.elements-library-decor-preview {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: currentColor;
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.elements-library-decor-preview svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.elements-library-decor-preview.is-image-fallback {
  display: block;
  object-fit: contain;
  filter: invert(74%) sepia(6%) saturate(430%) hue-rotate(196deg) brightness(90%) contrast(88%);
}
.elements-library-item.decor.is-active .elements-library-decor-preview {
  opacity: 1;
  color: var(--elx-accent);
}
.elements-library-item.decor.is-active .elements-library-decor-preview.is-image-fallback {
  filter: invert(43%) sepia(79%) saturate(2704%) hue-rotate(237deg) brightness(98%) contrast(99%);
}
.elements-library-item.decor.is-active .elements-library-decor-inline {
  color: var(--elx-accent);
}
.elements-create-entry {
  width: min(360px, 100%);
  margin: auto;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
}
.elements-create-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--elx-accent);
}
.elements-create-icon svg,
.elements-create-icon .tabler-ui-icon {
  width: 21px;
  height: 21px;
}
.elements-create-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.elements-create-tip {
  display: block;
  color: var(--elx-muted);
  font-size: 11px;
  line-height: 1.35;
  font-weight: 450;
  max-width: 205px;
}
[dir=rtl] .elements-create-tip {
  text-align: right;
}
.elements-create-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--ui-type-value);
  line-height: 1;
  font-weight: 650;
  color: var(--elx-text);
}
.elements-create-action {
  height: 38px;
  padding: 0 11px;
  border: 1px solid rgba(107, 85, 226, 0.24);
  border-radius: 11px;
  background: rgba(107, 85, 226, 0.08);
  color: var(--elx-accent);
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 9px/1 var(--font-ui);
  white-space: nowrap;
}
.elements-create-action svg,
.elements-create-action .tabler-ui-icon {
  width: 16px;
  height: 16px;
}
.elements-create-workspace {
  width: min(372px, 100%);
  margin: auto;
  display: grid;
  align-items: center;
  gap: 9px;
  padding: 0 2px;
}
.elements-create-workspace.is-processing {
  grid-template-columns: 48px minmax(0, 1fr);
}
.elements-create-workspace.is-ready {
  grid-template-columns: 44px minmax(0, 1fr) 82px;
}
.elements-create-preview {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #31344e;
  border: 1px solid var(--elx-border);
}
.elements-create-preview img {
  display: block;
  width: 88%;
  height: 88%;
  object-fit: contain;
}
.elements-create-main {
  min-width: 0;
  display: grid;
  gap: 6px;
}
.elements-create-processing-head {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.elements-create-processing-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--elx-text);
  font-size: var(--ui-type-control);
  line-height: 1;
  font-weight: 650;
}
.elements-create-processing-head span {
  flex: 0 0 auto;
  color: var(--elx-muted);
  font-size: var(--ui-type-helper);
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.elements-create-segmented {
  min-width: 0;
  width: 100%;
}
.elements-create-segment:disabled {
  opacity: 0.35;
}
.elements-create-actions {
  display: grid;
  grid-template-columns: 38px 38px;
  justify-content: end;
  align-items: center;
  gap: 5px;
}
.elements-create-replace,
.elements-create-confirm {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 11px;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}
.elements-create-replace {
  border: 1px solid var(--elx-border);
  background: transparent;
  color: var(--elx-muted);
}
.elements-create-confirm {
  border: 1px solid rgba(107, 85, 226, 0.32);
  background: rgba(107, 85, 226, 0.12);
  color: var(--elx-accent);
}
.elements-create-replace svg,
.elements-create-confirm svg,
.elements-create-replace .tabler-ui-icon,
.elements-create-confirm .tabler-ui-icon {
  width: 16px;
  height: 16px;
}
.elements-create-confirm:disabled,
.elements-create-replace:disabled {
  opacity: 0.35;
}
.elements-create-workspace.is-processing .sticker-maker-progress {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.elements-create-workspace.is-processing .sticker-maker-progress-copy {
  display: none;
}
.elements-create-workspace.is-processing .sticker-maker-progress-track {
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.elements-create-workspace.is-processing .sticker-maker-progress-track i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--elx-accent);
}
.elements-dock button:focus-visible {
  outline: 2px solid var(--elx-accent);
  outline-offset: 2px;
}
[dir=rtl] .elements-dock {
  direction: rtl;
}
@media (hover: hover) and (pointer: fine) {
  .elements-library-item:hover:not(.is-active),
  .elements-create-replace:hover {
    background: var(--elx-surface);
  }
}
@media (max-width: 390px) {
  .elements-library-decor-inline {
    width: 36px;
    height: 26px;
  }
  .elements-create-workspace.is-processing {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
  }
  .elements-create-workspace.is-ready {
    grid-template-columns: 42px minmax(0, 1fr) 78px;
    gap: 7px;
  }
  .elements-create-preview {
    width: 42px;
    height: 42px;
  }
}
.elements-create-icon .tabler-ui-icon {
  width: 21px;
  height: 21px;
}
.elements-create-action .tabler-ui-icon,
.elements-create-replace .tabler-ui-icon,
.elements-create-confirm .tabler-ui-icon {
  width: 16px;
  height: 16px;
}
.elements-create-workspace.is-ready:has(.sticker-candidate-rail) {
  grid-template-columns: minmax(0, 1fr) 82px;
  grid-template-rows: 38px 50px;
  row-gap: 7px;
  column-gap: 9px;
}
.elements-create-workspace.is-ready:has(.sticker-candidate-rail) .elements-create-main {
  grid-column: 1;
  grid-row: 1;
}
.elements-create-workspace.is-ready:has(.sticker-candidate-rail) .elements-create-actions {
  grid-column: 2;
  grid-row: 1;
  grid-template-columns: 38px 38px;
  gap: 6px;
}
.elements-create-workspace.is-ready:has(.sticker-candidate-rail) .elements-create-replace,
.elements-create-workspace.is-ready:has(.sticker-candidate-rail) .elements-create-confirm {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.sticker-candidate-rail {
  grid-column: 1 / -1;
  min-width: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 3px;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.sticker-candidate-rail::-webkit-scrollbar {
  display: none;
}
.sticker-candidate-card {
  position: relative;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  padding: 3px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  border: 1px solid var(--elx-border);
  background: #31344e;
  color: var(--elx-text);
  scroll-snap-align: start;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background 0.16s ease;
}
.sticker-candidate-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  border-radius: 9px;
  display: block;
  pointer-events: none;
}
.sticker-candidate-card.is-active {
  border-color: var(--elx-accent);
  box-shadow: 0 0 0 1px rgba(107, 85, 226, 0.18);
  background: rgba(107, 85, 226, 0.07);
}
.sticker-candidate-all-badge {
  position: absolute;
  inset-inline: 4px;
  bottom: 3px;
  padding: 2px 4px;
  border-radius: 999px;
  background: rgba(40, 43, 66, 0.84);
  color: #fff;
  font: 700 7px/1 var(--font-ui);
  letter-spacing: 0.01em;
  text-align: center;
  pointer-events: none;
}
[dir=rtl] .sticker-candidate-rail {
  direction: rtl;
}
@media (max-width: 390px) {
  .elements-create-workspace.is-ready:has(.sticker-candidate-rail) {
    grid-template-columns: minmax(0, 1fr) 78px;
    grid-template-rows: 36px 46px;
    row-gap: 6px;
  }
  .elements-create-workspace.is-ready:has(.sticker-candidate-rail) .elements-create-actions {
    grid-template-columns: 36px 36px;
    gap: 6px;
  }
  .elements-create-workspace.is-ready:has(.sticker-candidate-rail) .elements-create-replace,
  .elements-create-workspace.is-ready:has(.sticker-candidate-rail) .elements-create-confirm {
    width: 36px;
    height: 36px;
  }
  .elements-create-workspace.is-ready:has(.sticker-candidate-rail) .sticker-candidate-rail {
    height: 46px;
    gap: 8px;
  }
  .elements-create-workspace.is-ready:has(.sticker-candidate-rail) .sticker-candidate-card {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }
}
.elements-library-item.calligraphy {
  flex-basis: var(--editor-chip-w);
  width: var(--editor-chip-w);
  min-width: var(--editor-chip-w);
}
.elements-library-item.calligraphy .elements-library-decor-inline {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.elements-library-item.calligraphy .elements-library-decor-preview {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  filter: none;
}
.elements-library-item.calligraphy .elements-library-calligraphy-fixed {
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  object-fit: contain;
  object-position: center;
  filter: none !important;
}
.elements-library-calligraphy-inline {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: inherit;
  overflow: visible;
}
.elements-library-calligraphy-inline > svg {
  display: block;
  width: 48px;
  height: 48px;
  max-width: 48px;
  max-height: 48px;
  overflow: visible;
  color: inherit;
}
.elements-library-item.calligraphy.is-active .elements-library-decor-preview {
  opacity: 1;
  filter: none;
}
.elements-library-group-divider {
  flex: 0 0 1px;
  width: 1px;
  height: 34px;
  margin: 0 7px;
  background: var(--elx-line);
  border-radius: 999px;
  opacity: 0.9;
}
.elements-library-icon-local.is-inline {
  display: grid;
  place-items: center;
  background: none;
  -webkit-mask: none;
  mask: none;
  color: currentColor;
}
.elements-library-icon-local.is-inline svg {
  width: 100%;
  height: 100%;
  display: block;
}
.elements-library-item.calligraphy .elements-library-calligraphy-fixed.is-en3 {
  width: 34px;
  height: 34px;
  max-width: 34px;
  max-height: 34px;
}
.elements-library-calligraphy-inline.is-english > svg * {
  fill: currentColor !important;
  stroke: none !important;
}
.elements-library-set-switch {
  flex: 0 0 var(--editor-chip-square);
  width: var(--editor-chip-square);
  height: var(--editor-chip-h);
  min-width: var(--editor-chip-square);
  padding: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(107, 85, 226, 0.42);
  border-radius: var(--editor-chip-radius);
  background: var(--elx-surface);
  color: var(--elx-accent);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  cursor: pointer;
}
.elements-library-set-switch:active {
  transform: scale(0.96);
}
.elements-library-set-icon {
  width: 18px;
  height: 18px;
}
.elements-library-set-count {
  font-size: 11px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--elx-muted);
  font-variant-numeric: tabular-nums;
}
.elements-library-set-count b {
  color: var(--elx-text);
  font-weight: 700;
}
@media (hover: hover) {
  .elements-library-set-switch:hover {
    border-color: var(--elx-accent);
  }
}

/* src/styles/animation-dock.css */
.animation-dock {
  --anx-text: var(--editor-text);
  --anx-muted: var(--editor-muted);
  --anx-accent: var(--editor-accent);
  box-sizing: border-box;
  width: 100%;
  height: var(--editor-stage-h);
  padding: 7px var(--editor-panel-pad-x);
  color: var(--anx-text);
  font-family: var(--font-ui);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.animation-dock--smart {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: var(--editor-panel-tabs-h) var(--editor-panel-content-h);
  gap: var(--editor-panel-gap);
  align-content: center;
}
.animation-tabs {
  width: 100%;
  height: var(--editor-panel-tabs-h);
  min-height: var(--editor-panel-tabs-h);
  margin: 0;
  box-sizing: border-box;
  justify-content: center;
}
.animation-tab {
  font-size: var(--ui-type-tab);
  font-weight: 680;
}
.animation-stage {
  width: 100%;
  height: var(--editor-panel-content-h);
  min-height: var(--editor-panel-content-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
}
.animation-preset-rail {
  box-sizing: border-box;
  width: 100%;
  height: var(--editor-panel-content-h);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--editor-chip-gap);
  padding: 6px var(--editor-panel-pad-x);
  scroll-padding-inline: var(--editor-panel-pad-x);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  cursor: grab;
}
.animation-preset-rail:active {
  cursor: grabbing;
}
.animation-preset-rail::-webkit-scrollbar {
  display: none;
}
[dir=rtl] .animation-preset-rail {
  direction: rtl;
}
.animation-preset-card {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 var(--editor-chip-preview-w);
  width: var(--editor-chip-preview-w);
  max-width: var(--editor-chip-preview-w);
  height: var(--editor-chip-h);
  min-height: var(--editor-chip-h);
  padding: 0 7px;
  border: 1px solid rgba(195, 195, 195, 0.16);
  border-radius: var(--editor-chip-radius);
  background: rgba(255, 255, 255, 0.012);
  color: var(--anx-muted);
  display: grid;
  place-items: center;
  text-align: center;
  scroll-snap-align: start;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.animation-preset-card.is-active {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(107, 85, 226, 0.34);
  color: var(--anx-accent);
}
.animation-preview-field {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  overflow: visible;
  pointer-events: none;
  contain: paint;
}
.animation-preview-node {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
  background:
    linear-gradient(
      135deg,
      #6b55e2,
      #8b7af0);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 3px 8px rgba(0, 0, 0, 0.16);
}
.animation-preview-node::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.16);
}
.animation-preset-card[data-animation-group=loop] .animation-preview-node {
  background:
    linear-gradient(
      135deg,
      #6b55e2 0%,
      #d24675 100%);
}
.animation-preset-card.is-active .animation-preview-node {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 3px 10px rgba(0, 0, 0, 0.2);
}
.animation-preview-field.is-none {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
}
.animation-none-icon {
  width: 26px;
  height: 26px;
  display: block;
  color: currentColor;
  opacity: 0.92;
}
.animation-empty {
  height: 100%;
  display: grid;
  place-items: center;
  padding: 0 16px;
  text-align: center;
  color: var(--anx-muted);
  font-size: 11px;
}
.animation-dock.is-embedded {
  height: 100%;
}
.text-item > .flinzr-motion-visual {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: inherit;
  justify-content: inherit;
  row-gap: inherit;
  transform-box: border-box;
}
.sticker-item > .flinzr-motion-visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-box: border-box;
}
.sticker-item > .flinzr-motion-visual > .sticker-icon-background {
  position: absolute;
  inset: 2%;
}
.animation-preset-card:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .animation-preset-card:hover:not(.is-active) {
    background: var(--editor-surface);
  }
}
@media (prefers-reduced-motion: reduce) {
  .animation-preset-card,
  .animation-tab {
    transition: none;
  }
}
.animation-preset-card[data-preview-only=true] {
  font-size: 0;
  line-height: 0;
}
.animation-preset-card[data-preview-only=true] .ui-icon-label-text {
  display: none !important;
}
.animation-preset-card[data-preview-only=true] > .animation-preview-field {
  margin: 0;
  justify-self: center;
  align-self: center;
}
.animation-preset-card.ui-none-card {
  background: transparent;
  border-color: var(--editor-border);
  color: var(--editor-muted);
}
.animation-preset-card.ui-none-card:is(.is-active, [aria-pressed=true]) {
  background: var(--editor-surface-2);
  border-color: transparent;
  color: var(--editor-text);
}

/* src/styles/music-panel.css */
.music-dock {
  color: var(--music-text);
  font-family: var(--font-ui);
  user-select: none;
  -webkit-user-select: none;
}
.music-track-rail::-webkit-scrollbar,
.music-track-rail::-webkit-scrollbar {
  display: none;
}
.music-track-rail {
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--editor-panel-content-h);
  gap: var(--editor-chip-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px var(--editor-panel-pad-x);
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--editor-panel-pad-x);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
}
.music-track-card {
  box-sizing: border-box;
  flex: 0 0 var(--editor-chip-w);
  width: var(--editor-chip-w);
  height: var(--editor-chip-h);
  border: 1px solid var(--editor-border);
  border-radius: var(--editor-chip-radius);
  background: transparent;
  color: var(--editor-muted);
  display: grid;
  place-items: center;
  padding: 0;
  scroll-snap-align: start;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    color 0.12s ease,
    transform 0.08s ease;
}
.music-track-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
}
.music-track-preview {
  width: 44px;
  height: 34px;
  display: grid;
  grid-template-rows: 20px 10px;
  align-items: center;
  justify-items: center;
  gap: 1px;
  pointer-events: none;
}
.music-track-waveform {
  width: 42px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.music-track-waveform i {
  display: block;
  width: 2px;
  height: var(--wave-h, 4px);
  min-height: 2px;
  max-height: 10px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.9;
  transform-origin: center;
  transition: opacity 0.2s ease, background 0.2s ease;
}
.music-track-card.is-playing .music-track-waveform i {
  animation: music-eq var(--eq-d, 0.8s) ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.11s);
}
.music-track-card.is-active .music-track-waveform i {
  opacity: 0.45;
}
.music-track-card.is-active .music-track-waveform i.is-played {
  opacity: 1;
  background: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .music-track-card:not(.is-playing):hover .music-track-waveform i {
    animation: music-hover 0.5s ease-out both;
    animation-delay: calc(var(--i, 0) * 0.025s);
  }
}
.music-track-card:not(.is-playing):active .music-track-waveform i {
  animation: music-hover 0.4s ease-out both;
  animation-delay: calc(var(--i, 0) * 0.02s);
}
@keyframes music-eq {
  0% {
    transform: scaleY(0.4);
  }
  55% {
    transform: scaleY(1.3);
  }
  100% {
    transform: scaleY(0.75);
  }
}
@keyframes music-hover {
  0%, 100% {
    transform: scaleY(1);
  }
  45% {
    transform: scaleY(1.45);
  }
}
.music-track-number {
  font-size: 8px;
  line-height: 10px;
  font-weight: 700;
  letter-spacing: 0.45px;
  font-variant-numeric: tabular-nums;
  opacity: 0.78;
}
.music-track-icon svg,
.music-track-icon .tabler-ui-icon {
  width: 23px;
  height: 23px;
  display: block;
}
.music-track-card.is-active {
  background: var(--editor-surface-2);
  border-color: var(--editor-accent-border, rgba(107, 85, 226, 0.64));
  color: var(--editor-accent);
}
.music-track-card:active {
  transform: scale(0.96);
}
.music-track-card:focus-visible {
  outline: 2px solid var(--editor-accent);
  outline-offset: 2px;
}
[dir=rtl] .music-track-rail {
  direction: rtl;
}
@media (max-width: 390px) {
  .music-track-rail {
    padding-inline: var(--editor-panel-pad-x);
    scroll-padding-inline: var(--editor-panel-pad-x);
  }
}
@media (prefers-reduced-motion: reduce) {
  .music-track-card {
    transition: none;
  }
  .music-track-card .music-track-waveform i,
  .music-track-card.is-playing .music-track-waveform i {
    animation: none;
  }
}
.music-export-capability-note {
  margin: 8px 0 10px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--editor-surface-2);
  color: var(--editor-text-muted);
  font-size: 12px;
  line-height: 1.45;
}
.music-track-card[data-export-audio-unsupported=true]::after {
  content: "!";
  position: absolute;
  inset-inline-end: 6px;
  top: 6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: var(--editor-surface-2);
  color: var(--editor-text-muted);
}

/* src/styles/scroll-affordance.css */
.has-smart-scroll {
  scroll-behavior: smooth;
  transition: mask-image 0.16s ease, -webkit-mask-image 0.16s ease;
}
.has-smart-scroll[data-scroll-start="0"][data-scroll-end="1"] {
  -webkit-mask-image:
    linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 26px),
      transparent 100%);
  mask-image:
    linear-gradient(
      to right,
      #000 0,
      #000 calc(100% - 26px),
      transparent 100%);
}
.has-smart-scroll[data-scroll-start="1"][data-scroll-end="0"] {
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 26px,
      #000 100%);
  mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 26px,
      #000 100%);
}
.has-smart-scroll[data-scroll-start="1"][data-scroll-end="1"] {
  -webkit-mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 26px,
      #000 calc(100% - 26px),
      transparent 100%);
  mask-image:
    linear-gradient(
      to right,
      transparent 0,
      #000 26px,
      #000 calc(100% - 26px),
      transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  .has-smart-scroll {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}
[data-native-selection-scroll=true] {
  scroll-behavior: auto;
  scroll-snap-type: none;
}

/* src/styles/card-top-controls.css */
.card-top-controls {
  display: none;
}
:where(html[data-layout=phone]) .card-top-controls {
  position: absolute;
  z-index: 70;
  inset: 0;
  display: block;
  pointer-events: none;
  direction: ltr;
}
:where(html[data-layout=phone]) .card-top-primary-group,
:where(html[data-layout=phone]) .card-top-controls-panel {
  position: absolute;
  pointer-events: auto;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(40, 43, 66, 0.975);
  box-shadow: 0 8px 20px rgba(14, 16, 28, 0.24);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
:where(html[data-layout=phone]) .card-top-primary-group {
  top: 12px;
  left: calc(var(--scene-visible-inline-inset, 0px) + max(12px, env(safe-area-inset-left)));
  height: 50px;
  padding: 3px;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 14px;
}
:where(html[data-layout=phone]) .card-top-controls-panel {
  top: 12px;
  right: calc(var(--scene-visible-inline-inset, 0px) + max(12px, env(safe-area-inset-right)));
  width: 52px;
  padding: 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border-radius: 16px;
  overflow: hidden;
}
:where(html[data-layout=phone]) .card-top-controls button {
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  color: var(--text-2);
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 10px;
  display: grid;
  place-items: center;
  touch-action: manipulation;
}
:where(html[data-layout=phone]) .card-top-controls button:focus-visible,
:where(html[data-layout=phone]) .card-top-controls button:hover {
  outline: 0;
  background: rgba(255, 255, 255, 0.055);
  color: var(--text);
}
:where(html[data-layout=phone]) .card-top-controls button:active {
  transform: scale(0.94);
}
:where(html[data-layout=phone]) .card-top-controls button:disabled {
  opacity: 0.28;
}
:where(html[data-layout=phone]) .card-top-controls svg,
:where(html[data-layout=phone]) .card-top-controls .tabler-ui-icon {
  width: 19px;
  height: 19px;
}
:where(html[data-layout=phone]) .card-top-controls-separator {
  display: block;
  width: 30px;
  height: 1px;
  margin: 3px 0;
  background: rgba(255, 255, 255, 0.12);
  flex: 0 0 1px;
}
:where(html[data-layout=phone]) .card-top-controls .card-top-controls-template {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  opacity: 1 !important;
  filter: none !important;
}
:where(html[data-layout=phone]) .card-top-controls .card-preview-toggle {
  color: #63c7ff;
}
:where(html[data-layout=phone]) .card-size-stepper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44px;
  margin: 0;
  padding: 0;
}
:where(html[data-layout=phone]) .card-size-stepper button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 360px) {
  .card-top-primary-group {
    top: 9px;
    left: calc(var(--scene-visible-inline-inset, 0px) + max(9px, env(safe-area-inset-left)));
    height: 50px;
    padding: 3px 2px;
    border-radius: 13px;
  }
  .card-top-controls-panel {
    top: 9px;
    right: calc(var(--scene-visible-inline-inset, 0px) + max(9px, env(safe-area-inset-right)));
    width: 52px;
    padding: 4px 2px;
    border-radius: 15px;
  }
  .card-top-controls button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .card-size-stepper {
    width: 44px;
  }
  .card-size-stepper button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .card-top-controls-separator {
    width: 28px;
  }
}
@media (max-width: 300px) {
  .card-top-primary-group {
    left: calc(var(--scene-visible-inline-inset, 0px) + max(7px, env(safe-area-inset-left)));
  }
  .card-top-controls-panel {
    right: calc(var(--scene-visible-inline-inset, 0px) + max(7px, env(safe-area-inset-right)));
  }
}
.card-top-controls [data-card-top-action=download] {
  color: #b83f6b !important;
}
.card-top-controls [data-card-top-action=download]:hover,
.card-top-controls [data-card-top-action=download]:focus-visible,
.card-top-controls [data-card-top-action=download]:active {
  color: #c94a77 !important;
  background: rgba(184, 63, 107, 0.1) !important;
}
.card-top-controls [data-card-top-action=reset] {
  color: var(--reset-accent);
}
.card-top-controls [data-card-top-action=reset]:hover,
.card-top-controls [data-card-top-action=reset]:focus-visible {
  color: #ffd166;
  background: rgba(250, 193, 69, 0.08);
}
.card-top-controls [data-card-top-action=lock] {
  color: var(--accent);
}
.card-top-controls [data-card-top-action=lock][aria-pressed=true] {
  color: var(--accent);
  background: rgba(107, 85, 226, 0.1);
}
.card-top-controls [data-card-top-action=lock][aria-pressed=false] {
  color: var(--text-2);
  background: transparent;
}
.card-top-controls [data-card-top-action=lock]:hover,
.card-top-controls [data-card-top-action=lock]:focus-visible {
  color: var(--accent);
  background: rgba(107, 85, 226, 0.1);
}
@media (hover: none) and (pointer: coarse) {
  .card-top-primary-group,
  .card-top-controls-panel {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(40, 43, 66, 0.995);
  }
}
.card-top-controls .card-top-controls-template,
.card-top-controls .card-top-controls-template:hover,
.card-top-controls .card-top-controls-template:focus-visible,
.card-top-controls .card-top-controls-template:active {
  opacity: 1 !important;
  filter: none !important;
  color: var(--text) !important;
}
.card-top-controls .card-top-controls-template:active {
  transform: scale(0.94) !important;
  background: rgba(255, 255, 255, 0.055) !important;
}
.card-top-controls .card-preview-toggle:hover,
.card-top-controls .card-preview-toggle:focus-visible {
  color: #82d3ff;
  background: rgba(99, 199, 255, 0.1);
}
.card-preview-toggle.is-preview-active {
  color: #8cdaff;
  background: rgba(99, 199, 255, 0.12);
}
.card-top-primary-group,
.card-top-controls-panel {
  transition:
    opacity 0.18s ease,
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}
.card-top-primary-group,
.card-top-controls-panel {
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0s;
}
:root[data-card-chrome=hidden] .card-top-primary-group,
:root[data-card-chrome=hidden] .card-top-controls-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease,
    visibility 0s linear 0.18s;
}
:root[data-card-chrome=hidden] .card-top-primary-group {
  transform: translateY(-8px);
}
:root[data-card-chrome=hidden] .card-top-controls-panel {
  transform: translateX(8px);
}
@media (prefers-reduced-motion: reduce) {
  .card-top-primary-group,
  .card-top-controls-panel {
    transition: none;
  }
}

/* src/styles/option-cards.css */
.ui-icon-label-card {
  box-sizing: border-box;
  flex: 0 0 var(--ui-option-card-size, var(--editor-template-card-size));
  width: var(--ui-option-card-size, var(--editor-template-card-size));
  height: var(--ui-option-card-size, var(--editor-template-card-size));
  min-width: var(--ui-option-card-size, var(--editor-template-card-size));
  min-height: var(--ui-option-card-size, var(--editor-template-card-size));
  border: 1px solid rgba(195, 195, 195, 0.16);
  border-radius: var(--ui-option-card-radius, var(--editor-template-card-radius));
  background: rgba(255, 255, 255, 0.012);
  color: var(--editor-muted);
  display: grid;
  grid-template-rows: var(--ui-option-icon-slot, 26px) var(--ui-option-label-slot, 14px);
  place-content: center;
  place-items: center;
  gap: var(--ui-option-card-inner-gap, 4px);
  padding: var(--ui-option-card-padding, 8px 6px);
  font: var(--ui-weight-medium) var(--ui-option-label-size, var(--ui-type-label))/1 var(--font-ui);
  text-align: center;
  box-shadow: none;
  outline: 0;
  cursor: pointer;
  overflow: hidden;
  transition:
    color 0.12s ease,
    background 0.12s ease,
    border-color 0.12s ease,
    transform 0.1s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ui-icon-label-card .ui-icon-label-icon {
  width: var(--ui-option-icon-box-size, 30px);
  height: var(--ui-option-icon-box-size, 30px);
  display: grid;
  place-items: center;
  color: currentColor;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: inherit;
}
.ui-icon-label-card .ui-icon-label-icon svg,
.ui-icon-label-card .ui-icon-label-icon .tabler-ui-icon {
  width: var(--ui-option-icon-svg-size, 26px);
  height: var(--ui-option-icon-svg-size, 26px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ui-icon-label-card .ui-icon-label-text {
  display: block;
  max-width: var(--ui-option-label-max-width, 52px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: currentColor;
  font: var(--ui-weight-medium) var(--ui-option-label-size, var(--ui-type-label))/1 var(--font-ui);
  letter-spacing: 0;
}
.ui-icon-label-card.is-active,
.ui-icon-label-card[aria-pressed=true],
.ui-icon-label-card[aria-selected=true] {
  background: rgba(107, 85, 226, 0.035);
  border-color: rgba(107, 85, 226, 0.72);
  color: var(--editor-accent);
  box-shadow: none;
}
.ui-icon-label-card.is-active .ui-icon-label-icon,
.ui-icon-label-card.is-active .ui-icon-label-text,
.ui-icon-label-card[aria-pressed=true] .ui-icon-label-icon,
.ui-icon-label-card[aria-pressed=true] .ui-icon-label-text,
.ui-icon-label-card[aria-selected=true] .ui-icon-label-icon,
.ui-icon-label-card[aria-selected=true] .ui-icon-label-text {
  color: var(--editor-accent);
}
.ui-icon-label-card:active {
  transform: scale(0.97);
}
.ui-icon-label-card:focus-visible {
  outline: 2px solid var(--editor-accent);
  outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
  .ui-icon-label-card:hover:not(.is-active):not([aria-pressed=true]):not([aria-selected=true]) {
    background: rgba(255, 255, 255, 0.035);
    color: var(--editor-muted);
  }
}
.ui-none-card {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  place-content: center;
  place-items: center;
  gap: 0;
  padding: 0;
}
.ui-none-card .ui-icon-label-icon,
.ui-none-card .cfx-none-icon,
.ui-none-card .ui-none-glyph {
  grid-row: 1;
  grid-column: 1;
  justify-self: center;
  align-self: center;
  width: 28px;
  height: 28px;
  margin: 0;
  display: grid;
  place-items: center;
  color: currentColor;
}
.ui-none-card .ui-icon-label-icon svg,
.ui-none-card .cfx-none-icon svg,
.ui-none-card .ui-none-glyph {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.7;
}
.ui-none-card .ui-icon-label-text {
  display: none;
}
.cfx-card.ui-none-card .cfx-thumb.is-none {
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  place-content: center;
  place-items: center;
  gap: 0;
}
.animation-preset-card.ui-none-card .cfx-thumb.is-none {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
  place-content: center;
  place-items: center;
  gap: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.animation-preset-card.ui-none-card .cfx-none-icon {
  width: 26px;
  height: 26px;
  margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .ui-icon-label-card {
    transition: none;
  }
}
.ui-format-state-card {
  border-color: var(--editor-border);
  background: transparent;
  color: var(--editor-muted);
  box-shadow: none;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    border-color 0.12s ease,
    transform 0.08s ease;
}
@media (hover: hover) and (pointer: fine) {
  .ui-format-state-card:hover:not(.is-active):not([aria-pressed=true]):not([aria-selected=true]) {
    border-color: var(--editor-border);
    background: var(--editor-surface);
    color: var(--editor-muted);
    box-shadow: none;
  }
}
.ui-format-state-card:is(.is-active, [aria-pressed=true], [aria-selected=true]) {
  background: var(--editor-surface-2);
  border-color: transparent;
  color: var(--editor-text);
  box-shadow: none;
}
.ui-format-state-card:is(.is-active, [aria-pressed=true], [aria-selected=true]) .ui-icon-label-icon,
.ui-format-state-card:is(.is-active, [aria-pressed=true], [aria-selected=true]) .ui-icon-label-text,
.ui-format-state-card:is(.is-active, [aria-pressed=true], [aria-selected=true]) .music-track-preview,
.ui-format-state-card:is(.is-active, [aria-pressed=true], [aria-selected=true]) .music-track-number,
.ui-format-state-card:is(.is-active, [aria-pressed=true], [aria-selected=true]) .elements-library-icon-inline,
.ui-format-state-card:is(.is-active, [aria-pressed=true], [aria-selected=true]) .elements-library-icon-local,
.ui-format-state-card:is(.is-active, [aria-pressed=true], [aria-selected=true]) .elements-library-decor-inline {
  color: var(--editor-text);
}
.elements-library-item.ui-format-state-card.decor:is(.is-active, [aria-pressed=true], [aria-selected=true]) .elements-library-decor-preview {
  opacity: 1;
  color: var(--editor-text);
  filter: none;
}
.elements-library-item.ui-format-state-card.decor:is(.is-active, [aria-pressed=true], [aria-selected=true]) .elements-library-decor-preview.is-image-fallback {
  filter: invert(92%) sepia(4%) saturate(165%) hue-rotate(191deg) brightness(100%) contrast(94%);
}
.ui-format-state-card:focus-visible {
  outline: 2px solid var(--editor-accent);
  outline-offset: 2px;
}

/* src/styles/magnetic-layout-assist.css */
.magnetic-assist-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 56;
  overflow: visible;
}
.magnetic-guide {
  position: absolute;
  display: block;
  color: #7b65f0;
  opacity: 0.86;
  filter: drop-shadow(0 0 2px rgba(107, 85, 226, 0.24));
  transform: translateZ(0);
  will-change: opacity, transform;
}
.magnetic-guide.vertical {
  width: 1.5px;
  background: currentColor;
}
.magnetic-guide.horizontal {
  height: 1.5px;
  background: currentColor;
}
.magnetic-guide.preview {
  opacity: 0.72;
  background:
    repeating-linear-gradient(
      var(--magnetic-direction, to bottom),
      currentColor 0 8px,
      transparent 8px 13px);
}
.magnetic-guide.horizontal.preview {
  --magnetic-direction: to right;
}
.magnetic-guide.locked {
  opacity: 1;
  color: #6b55e2;
  box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 0 8px rgba(107, 85, 226, 0.22);
}
.magnetic-guide[data-relation=canvas-center].locked,
.magnetic-guide[data-relation=template-center].locked {
  color: #6b55e2;
  box-shadow: 0 0 10px rgba(107, 85, 226, 0.34);
}
.magnetic-guide[data-relation=equal-spacing].locked,
.magnetic-guide[data-relation=adjacent-gap].locked {
  color: #8b72f5;
}
.scene[data-magnetic-pulse] .magnetic-guide.locked {
  animation: magnetic-pulse 0.17s ease-out;
}
@keyframes magnetic-pulse {
  0% {
    opacity: 0.65;
    transform: scale(1);
  }
  45% {
    opacity: 1;
    transform: scale(1.012);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .scene[data-magnetic-pulse] .magnetic-guide.locked {
    animation: none !important;
  }
}

/* src/styles/guide-tour.css */
.guide-tour-root {
  position: fixed;
  touch-action: manipulation;
  inset: 0;
  z-index: 10050;
  pointer-events: none;
  font-family: var(--font-ui, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}
.guide-tour-shield {
  position: fixed;
  touch-action: manipulation;
  inset: 0;
  pointer-events: auto;
  background: transparent;
  z-index: 0;
}
.guide-tour-spotlight {
  position: fixed;
  z-index: 1;
  pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 0 0 9999px rgba(5, 7, 14, 0.54);
  will-change:
    left,
    top,
    width,
    height;
}
.guide-tour-card {
  position: fixed;
  touch-action: manipulation;
  z-index: 3;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(330px, calc(100vw - 32px));
  padding: 16px 16px 14px;
  border: 1px solid var(--window-border);
  border-radius: var(--window-radius);
  background: var(--window-surface);
  color: #f5f5fa;
  pointer-events: auto;
  box-shadow: var(--window-shadow);
}
.guide-tour-card[dir=rtl] {
  text-align: right;
}
.guide-tour-title {
  display: block;
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 720;
  letter-spacing: -0.01em;
}
.guide-tour-copy {
  margin: 0;
  color: rgba(235, 235, 245, 0.72);
  font-size: 12.5px;
  line-height: 1.5;
  font-weight: 450;
}
.guide-tour-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}
.guide-tour-progress {
  justify-self: center;
  color: rgba(235, 235, 245, 0.46);
  font-size: 10.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.guide-tour-btn {
  appearance: none;
  touch-action: manipulation;
  border: 0;
  background: transparent;
  color: rgba(235, 235, 245, 0.62);
  font: 650 11.5px/1 var(--font-ui, system-ui);
  padding: 9px 8px;
  border-radius: 9px;
  cursor: pointer;
}
.guide-tour-btn:focus-visible {
  outline: 2px solid rgba(123, 100, 255, 0.72);
  outline-offset: 1px;
  color: #fff;
}
.guide-tour-btn.is-primary {
  padding-inline: 13px;
  background: #6b55e2;
  color: #fff;
}
.guide-tour-back[hidden] {
  visibility: hidden;
  display: block;
}
@media (max-width: 520px) {
  .guide-tour-card {
    width: min(320px, calc(100vw - 28px));
    padding: 15px 14px 13px;
    border-radius: 15px;
  }
  .guide-tour-title {
    font-size: 14.5px;
  }
  .guide-tour-copy {
    font-size: 12px;
  }
}

/* src/app.css */