:root {
  color-scheme: light;
  --bg: #f7f8fb;
  --surface: #ffffff;
  --surface-2: #f1f5f9;
  --text: #1d2633;
  --muted: #5c6b7f;
  --line: #dde5ef;
  --blue: #2563eb;
  --teal: #3b6fd8;
  --amber: #b45309;
  --red: #b42318;
  --green: #3b82f6;
  --ink: #0f172a;
  --scrollbar-track: color-mix(in srgb, var(--blue) 7%, #f4f7fb);
  --scrollbar-thumb: color-mix(in srgb, var(--blue) 44%, #b8c8dc);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--pink, #e52e63) 62%, var(--blue));
  --shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
  --soft-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
  --auth-heading-blue: 0%;
}

@property --auth-heading-blue {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

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

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--scrollbar-thumb), color-mix(in srgb, var(--scrollbar-thumb) 78%, var(--scrollbar-thumb-hover))) padding-box;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(180deg, var(--scrollbar-thumb-hover), color-mix(in srgb, var(--scrollbar-thumb-hover) 76%, var(--blue))) padding-box;
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html {
  min-width: 320px;
}

body {
  --scrollbar-track: color-mix(in srgb, var(--blue) 7%, #f4f7fb);
  --scrollbar-thumb: color-mix(in srgb, var(--blue) 50%, #b8c8dc);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--blue) 74%, #22c55e);
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(180deg, #eaf4f8 0, rgba(247, 248, 251, 0.86) 310px, var(--bg) 680px),
    var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

body.is-designer-workspace {
  display: flex;
  height: 100dvh;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
}

body.theme-soft {
  --bg: #eef6ff;
  --surface: #ffffff;
  --surface-2: #e8f1ff;
  --line: #cfe0f6;
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 34%),
    linear-gradient(180deg, #f7fbff 0, #eef6ff 440px, #f8fbff 100%);
}

body.theme-dark {
  color-scheme: dark;
  --bg: #060914;
  --surface: #0d1324;
  --surface-2: #111a2e;
  --text: #e7eefc;
  --muted: #9aa8bd;
  --line: #243049;
  --ink: #f8fbff;
  --scrollbar-track: color-mix(in srgb, var(--blue) 14%, #08101f);
  --scrollbar-thumb: color-mix(in srgb, var(--blue) 52%, #334155);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--pink, #e52e63) 58%, #93c5fd);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --soft-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  background:
    radial-gradient(circle at 15% 5%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 30%),
    linear-gradient(180deg, #10182a 0, #0a1020 52%, #070b16 100%);
}

button,
input,
select,
textarea {
  font: inherit;
  letter-spacing: 0;
}

button {
  cursor: pointer;
}

.jobs-panel,
.custom-select-menu,
.format-menu,
.subtitle-style-choice-grid,
.subtitle-language-grid,
.media-preview.is-text-preview,
.output-scroll,
.language-menu,
.limits.account-panel-content,
.account-panel-content,
.tool-panel,
.editor-tool-panel,
.designer-inspector,
.designer-context {
  scrollbar-color: var(--scrollbar-thumb) color-mix(in srgb, var(--scrollbar-track) 74%, transparent);
}

.jobs-panel::-webkit-scrollbar-track,
.custom-select-menu::-webkit-scrollbar-track,
.format-menu::-webkit-scrollbar-track,
.subtitle-style-choice-grid::-webkit-scrollbar-track,
.subtitle-language-grid::-webkit-scrollbar-track,
.media-preview.is-text-preview::-webkit-scrollbar-track,
.output-scroll::-webkit-scrollbar-track,
.language-menu::-webkit-scrollbar-track,
.limits.account-panel-content::-webkit-scrollbar-track,
.account-panel-content::-webkit-scrollbar-track,
.tool-panel::-webkit-scrollbar-track,
.editor-tool-panel::-webkit-scrollbar-track,
.designer-inspector::-webkit-scrollbar-track,
.designer-context::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--scrollbar-track) 74%, transparent);
}

.jobs-panel::-webkit-scrollbar-thumb,
.custom-select-menu::-webkit-scrollbar-thumb,
.format-menu::-webkit-scrollbar-thumb,
.subtitle-style-choice-grid::-webkit-scrollbar-thumb,
.subtitle-language-grid::-webkit-scrollbar-thumb,
.media-preview.is-text-preview::-webkit-scrollbar-thumb,
.output-scroll::-webkit-scrollbar-thumb,
.language-menu::-webkit-scrollbar-thumb,
.limits.account-panel-content::-webkit-scrollbar-thumb,
.account-panel-content::-webkit-scrollbar-thumb,
.tool-panel::-webkit-scrollbar-thumb,
.editor-tool-panel::-webkit-scrollbar-thumb,
.designer-inspector::-webkit-scrollbar-thumb,
.designer-context::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--scrollbar-thumb), color-mix(in srgb, var(--scrollbar-thumb) 74%, var(--scrollbar-thumb-hover))) padding-box;
  background-clip: padding-box;
}

.language-switcher {
  position: relative;
  z-index: 30000;
}

.language-switcher.is-open {
  z-index: 60000;
}

.language-current,
.language-menu button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, #ffffff);
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
}

.theme-dark .language-current,
.theme-dark .language-menu button {
  background: rgba(13, 19, 36, 0.92);
  border-color: rgba(122, 162, 255, 0.28);
  color: #f8fbff;
}

.language-current {
  max-width: min(240px, calc(100vw - 28px));
  min-height: 38px;
  padding: 7px 11px;
  border-radius: 999px;
  box-shadow:
    0 14px 34px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, transform 180ms ease;
}

.language-current:hover,
.language-switcher.is-open .language-current {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 9%, #ffffff)),
    #ffffff;
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--blue) 18%, transparent),
    0 0 0 4px color-mix(in srgb, var(--blue) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

.language-current span,
.language-menu span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-current::after {
  content: "";
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.86));
  border-radius: 999px;
  background:
    url("https://api.iconify.design/lucide/chevron-down.svg?color=%232563eb") center / 14px 14px no-repeat,
    radial-gradient(circle at 35% 22%, rgba(255, 255, 255, 0.98), transparent 38%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #ffffff), rgba(255, 255, 255, 0.78));
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--blue) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  opacity: 0.9;
  transform: rotate(0deg);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.language-switcher.is-open .language-current::after {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--blue) 18%, transparent),
    0 0 0 4px color-mix(in srgb, var(--blue) 9%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  opacity: 1;
  transform: rotate(180deg);
}

.theme-dark .language-current:hover,
.theme-dark .language-switcher.is-open .language-current {
  border-color: color-mix(in srgb, var(--blue) 58%, rgba(126, 154, 203, 0.42));
  background:
    linear-gradient(180deg, rgba(30, 41, 67, 0.96), rgba(13, 19, 36, 0.94));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.theme-dark .language-current::after,
.theme-dark .language-switcher.is-open .language-current::after {
  border-color: rgba(126, 154, 203, 0.36);
  background:
    url("https://api.iconify.design/lucide/chevron-down.svg?color=%23f8fbff") center / 14px 14px no-repeat,
    linear-gradient(180deg, rgba(30, 41, 67, 0.96), rgba(8, 13, 26, 0.9));
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.is-language-portal-open .language-switcher.is-portal-open .language-menu {
  display: none !important;
}

.language-portal {
  position: fixed;
  inset: 0;
  z-index: 240000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.language-portal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.language-portal-backdrop {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at calc(100% - 82px) 40px, color-mix(in srgb, var(--blue) 16%, transparent), transparent 26%),
    rgba(15, 23, 42, 0.16);
}

.language-portal-panel {
  position: fixed;
  top: var(--language-portal-top, 58px);
  right: var(--language-portal-right, 14px);
  display: grid;
  width: var(--language-portal-width, 250px);
  max-height: var(--language-portal-max-height, 430px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 20px;
  padding: 10px;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.99), color-mix(in srgb, var(--surface) 96%, #ffffff)),
    var(--surface);
  box-shadow:
    0 34px 92px rgba(15, 23, 42, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
  scrollbar-width: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: transform 170ms ease;
}

.language-portal.is-open .language-portal-panel {
  transform: translateY(0) scale(1);
}

.language-portal-panel::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.theme-dark .language-portal-backdrop {
  background:
    radial-gradient(circle at calc(100% - 82px) 40px, color-mix(in srgb, var(--blue) 18%, transparent), transparent 26%),
    rgba(2, 6, 23, 0.52);
}

.theme-dark .language-portal-panel {
  border-color: rgba(126, 154, 203, 0.34);
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(17, 26, 46, 0.98), rgba(8, 13, 26, 0.98));
  box-shadow:
    0 34px 92px rgba(0, 0, 0, 0.44),
    0 0 0 1px rgba(255, 255, 255, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.language-portal-panel::before {
  content: "";
  position: sticky;
  top: -10px;
  z-index: 1;
  height: 3px;
  margin: -10px -10px 7px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #2563eb, #22c55e, #f59e0b, #2563eb);
  background-size: 220% 100%;
  animation: language-glow-slide 3.2s linear infinite;
}

.language-portal-panel button {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 72%, #ffffff);
  border-radius: 14px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  box-shadow: none;
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.language-portal-panel button:hover,
.language-portal-panel button.is-active {
  border-color: color-mix(in srgb, var(--blue) 56%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, #ffffff), rgba(255, 255, 255, 0.94)),
    #ffffff;
  color: var(--blue);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--blue) 13%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transform: translateX(2px);
}

.language-portal-panel button.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 24%, rgba(255, 255, 255, 0.58) 42%, transparent 62% 100%);
  transform: translateX(-120%);
  animation: language-active-sheen 2.6s ease-in-out infinite;
  pointer-events: none;
}

.language-portal-panel img {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.language-portal-panel span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.language-portal-scrollbar {
  position: fixed;
  top: calc(var(--language-portal-top, 58px) + 14px);
  right: calc(var(--language-portal-right, 14px) + 5px);
  z-index: 240001;
  width: 4px;
  height: calc(var(--language-portal-max-height, 430px) - 28px);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  pointer-events: none;
}

.language-portal-scrollbar[hidden] {
  display: none;
}

.language-portal-scrollbar span {
  display: block;
  width: 100%;
  min-height: 34px;
  border-radius: inherit;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, #ffffff), color-mix(in srgb, var(--blue) 68%, #22c55e));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px color-mix(in srgb, var(--blue) 18%, transparent);
  transition: height 120ms ease, transform 80ms linear;
}

.theme-dark .language-portal-panel {
  border-color: rgba(122, 162, 255, 0.28);
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(13, 19, 36, 0.98), rgba(17, 26, 46, 0.96));
}

.theme-dark .language-portal-panel button {
  border-color: rgba(122, 162, 255, 0.28);
  background: rgba(13, 19, 36, 0.92);
  color: #f8fbff;
}

.language-current img,
.language-menu img,
.language-button img {
  width: 22px;
  height: 16px;
  border-radius: 4px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.language-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 230px;
  max-width: calc(100vw - 28px);
  max-height: min(420px, calc(100dvh - 82px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--surface) 94%, #ffffff)),
    var(--surface);
  box-shadow:
    0 28px 70px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.56),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  visibility: hidden;
  z-index: 60001;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 72%, #94a3b8) color-mix(in srgb, var(--blue) 8%, #eef4ff);
}

.language-menu::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.language-menu::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 8%, #eef4ff);
}

.language-menu::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 72%, #94a3b8);
  background-clip: padding-box;
}

.language-menu::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--blue) 86%, #64748b);
  background-clip: padding-box;
}

.theme-dark .language-menu {
  scrollbar-color: color-mix(in srgb, var(--blue) 76%, #cbd5e1) color-mix(in srgb, var(--blue) 18%, #0b1220);
}

.theme-dark .language-menu::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--blue) 18%, #0b1220);
}

.theme-dark .language-menu::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue) 76%, #cbd5e1);
  background-clip: padding-box;
}

.language-menu::-webkit-scrollbar-button,
.language-menu::-webkit-scrollbar-corner {
  -webkit-appearance: none;
  display: none;
  width: 0;
  min-width: 0;
  height: 0;
  min-height: 0;
  background: transparent;
}

.language-menu::-webkit-scrollbar-button:single-button,
.language-menu::-webkit-scrollbar-button:double-button,
.language-menu::-webkit-scrollbar-button:vertical:start:decrement,
.language-menu::-webkit-scrollbar-button:vertical:end:increment {
  -webkit-appearance: none;
  display: none;
  width: 0;
  height: 0;
}

.language-scrollbar {
  display: none !important;
}

.language-scrollbar[hidden] {
  display: none;
}

.language-scrollbar span {
  position: absolute;
  top: var(--language-scrollbar-thumb-top, 0px);
  right: 0;
  width: 4px;
  height: var(--language-scrollbar-thumb-height, 36px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, #ffffff), color-mix(in srgb, var(--blue) 68%, #22c55e));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    0 8px 18px color-mix(in srgb, var(--blue) 18%, transparent);
}

.language-switcher.is-open .language-scrollbar {
  display: none !important;
}

.language-menu::before {
  content: "";
  position: sticky;
  top: -9px;
  z-index: 1;
  height: 3px;
  margin: -9px -9px 7px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, #2563eb, #22c55e, #f59e0b, #2563eb);
  background-size: 220% 100%;
  animation: language-glow-slide 3.2s linear infinite;
}

.language-switcher.is-open .language-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  visibility: visible;
  z-index: 60001;
}

.language-menu button {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 40px;
  justify-content: flex-start;
  padding: 8px 10px;
  border-radius: 13px;
  box-shadow: none;
  min-width: 0;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.language-menu button:hover,
.language-menu button.is-active {
  border-color: color-mix(in srgb, var(--blue) 56%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, #ffffff), rgba(255, 255, 255, 0.92)),
    #ffffff;
  color: var(--blue);
  box-shadow:
    0 12px 28px color-mix(in srgb, var(--blue) 13%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  transform: translateX(2px);
}

.language-menu button.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 0 24%, rgba(255, 255, 255, 0.58) 42%, transparent 62% 100%);
  transform: translateX(-120%);
  animation: language-active-sheen 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes language-glow-slide {
  to {
    background-position: 220% 0;
  }
}

@keyframes language-active-sheen {
  55%,
  100% {
    transform: translateX(120%);
  }
}

.language-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.language-button {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}

.language-button input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.language-button:has(input:checked) {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  box-shadow: 0 14px 34px rgba(37, 99, 235, 0.12);
}

.topbar {
  position: relative;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: visible;
  padding: 5px 52px 16px 20px;
}

.topbar:has(.language-switcher.is-open),
.landing-nav:has(.language-switcher.is-open),
.auth-brand-top:has(.language-switcher.is-open),
.checkout-topline:has(.language-switcher.is-open),
.designer-page-topbar:has(.language-switcher.is-open),
.account-panel:has(.language-switcher.is-open) {
  z-index: 70000;
}

.topbar h1,
.topbar p,
.section-title h2,
.jobs-heading h2 {
  margin: 0;
}

.topbar h1 {
  color: var(--ink);
  font-size: 30px;
  line-height: 1.06;
  font-weight: 780;
}

.topbar-note {
  max-width: 720px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.eyebrow {
  color: var(--teal);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.limits {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.account-bar {
  align-items: center;
  max-width: 560px;
}

.account-panel {
  position: absolute;
  top: 8px;
  right: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: calc(100vw - 24px);
  transform: translateX(calc(100% - 40px));
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.account-panel.is-open {
  transform: translateX(0);
}

.account-panel-toggle {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, rgba(255, 255, 255, 0.86));
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 18%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 9%, #ffffff));
  color: var(--blue);
  cursor: pointer;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 16%, rgba(15, 23, 42, 0.1));
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.account-panel-toggle::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  mask: var(--editor-icon) center / contain no-repeat;
  transition: transform 200ms ease;
}

.account-panel-toggle:hover {
  border-color: color-mix(in srgb, var(--blue) 48%, rgba(255, 255, 255, 0.86));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--blue) 20%, rgba(15, 23, 42, 0.1));
  transform: translateY(-1px);
}

.account-panel.is-open .account-panel-toggle::before {
  transform: rotate(180deg);
}

.limits.account-panel-content {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  width: auto;
  max-width: calc(100vw - 62px);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 58%, #94a3b8) transparent;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-right-color: color-mix(in srgb, var(--blue) 10%, rgba(255, 255, 255, 0.62));
  border-radius: 999px 0 0 999px;
  padding: 5px 7px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.11);
}

.limits.account-panel-content::-webkit-scrollbar {
  width: 0;
  height: 4px;
}

.limits.account-panel-content::-webkit-scrollbar-track {
  background: transparent;
}

.limits.account-panel-content::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 58%, #94a3b8);
}

.account-panel-content .language-switcher,
.account-panel-content .topbar-link,
.account-panel-content .topbar-form,
.account-panel-content .subscription-meter,
.account-panel-content > span,
.account-panel-content .account-avatar,
.account-panel-content .cherryx-balance-badge {
  flex: 0 0 auto;
  width: auto;
}

.account-panel-content .language-current,
.account-panel-content .topbar-link,
.account-panel-content .topbar-form button,
.account-panel-content > span {
  justify-content: center;
  min-height: 32px;
}

.account-panel-content .language-switcher {
  z-index: 60000;
}

.account-panel-content .language-current {
  gap: 7px;
  min-width: 114px;
  padding: 6px 10px;
  border-color: color-mix(in srgb, var(--blue) 14%, var(--line));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 5%, #ffffff));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.account-panel-content .language-current::after {
  width: 7px;
  height: 7px;
}

.account-panel-content .language-menu {
  top: calc(100% + 9px);
  right: 0;
  left: auto;
  z-index: 60001;
  width: 218px;
  border-color: color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.17);
}

.account-panel-content .language-switcher.is-open .language-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  left: auto;
  z-index: 60001;
}

.account-panel-content .account-avatar {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.account-avatar {
  width: 34px;
  height: 34px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  box-shadow: 0 16px 38px rgba(37, 99, 235, 0.18);
  object-fit: contain;
  padding: 2px;
}

.limits span,
.jobs-heading span {
  border: 1px solid rgba(221, 229, 239, 0.9);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.76);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(12px);
}

.topbar-form {
  margin: 0;
}

.topbar-form button {
  width: 36px;
  min-height: 36px;
  border: 1px solid rgba(220, 38, 38, 0.24);
  border-radius: 999px;
  padding: 0;
  background:
    url("https://api.iconify.design/lucide/log-out.svg?color=%23ffffff&width=18&height=18") center / 18px 18px no-repeat,
    linear-gradient(180deg, #ef4444, #dc2626);
  color: transparent;
  font-size: 0;
  font-weight: 760;
  box-shadow: 0 12px 26px rgba(220, 38, 38, 0.22);
}

.topbar-link {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(221, 229, 239, 0.96);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  text-decoration: none;
  font-weight: 780;
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(12px);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.topbar-link:hover,
.topbar-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.1);
}

.topbar-link.is-primary {
  border-color: var(--blue);
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, white), var(--blue));
  color: white;
}

.studio-topbar .topbar-link[href="/accounts/settings/"] {
  width: 36px;
  padding: 0;
  font-size: 0;
  background-image: url("https://api.iconify.design/lucide/settings.svg?color=%230f172a&width=18&height=18");
  background-position: center;
  background-repeat: no-repeat;
}

.theme-dark .studio-topbar .topbar-link[href="/accounts/settings/"] {
  background-image: url("https://api.iconify.design/lucide/settings.svg?color=%23ffffff&width=18&height=18");
}

.is-account .studio-topbar .topbar-link[href="/billing/pricing/"] {
  display: none;
}

.subscription-meter {
  display: grid;
  gap: 5px;
  min-width: 132px;
  padding: 7px 10px;
  cursor: pointer;
  text-align: left;
}

button.subscription-meter {
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: inherit;
}

button.subscription-meter:hover {
  border-color: var(--blue);
}

.limits .subscription-meter span {
  border: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.subscription-meter-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.subscription-meter-top b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
}

.subscription-meter-top small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
}

.limits .subscription-meter .subscription-track {
  display: block;
  height: 6px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, #cbd5e1) !important;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 14%, #ffffff) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.limits .subscription-meter .subscription-track > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 52%, #ffffff), var(--blue)) !important;
  box-shadow: 0 0 12px color-mix(in srgb, var(--blue) 42%, transparent);
}

.theme-dark .limits .subscription-meter .subscription-track {
  border-color: color-mix(in srgb, var(--blue) 58%, #1d2a43) !important;
  background: color-mix(in srgb, var(--blue) 20%, #0b1220) !important;
}

.theme-dark .limits .subscription-meter .subscription-track > span {
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 62%, #dbeafe), var(--blue)) !important;
}

.theme-dark .account-panel-toggle {
  border-color: rgba(126, 154, 203, 0.42);
  background:
    radial-gradient(circle at 35% 18%, rgba(255, 255, 255, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(17, 26, 46, 0.98), rgba(8, 13, 26, 0.96));
  color: #f8fbff;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.theme-dark .limits.account-panel-content {
  border-color: rgba(126, 154, 203, 0.32);
  border-right-color: rgba(126, 154, 203, 0.18);
  background:
    linear-gradient(180deg, rgba(17, 26, 46, 0.96), rgba(8, 13, 26, 0.94));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-dark .account-panel-content .language-current,
.theme-dark .account-panel-content .topbar-link,
.theme-dark .account-panel-content > span,
.theme-dark .account-panel-content .subscription-meter,
.theme-dark .cherryx-balance-badge {
  border-color: rgba(126, 154, 203, 0.34);
  background:
    linear-gradient(180deg, rgba(30, 41, 67, 0.94), rgba(13, 19, 36, 0.92));
  color: #f8fbff;
  box-shadow: none;
}

.theme-dark .account-panel-content > span {
  background: rgb(17 26 46 / 0%);
  max-width: clamp(150px, 17vw, 250px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: none;
}

.theme-dark .account-panel-content .language-current:hover,
.theme-dark .language-switcher.is-open .language-current,
.theme-dark .account-panel-content .topbar-link:hover,
.theme-dark button.subscription-meter:hover,
.theme-dark .cherryx-balance-badge:hover {
  border-color: color-mix(in srgb, var(--blue) 58%, #dbeafe);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 26%, #1e2943), rgba(17, 26, 46, 0.98));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 14%, transparent);
}

.theme-dark .account-avatar {
  border-color: rgba(226, 232, 240, 0.62);
  background: linear-gradient(180deg, rgba(30, 41, 67, 0.98), rgba(8, 13, 26, 0.92));
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.3);
}

.theme-dark .subscription-meter-top b,
.theme-dark .cherryx-balance-badge b,
.theme-dark .cherryx-balance-badge span {
  color: #f8fbff;
}

.theme-dark .subscription-meter-top small {
  color: #b7c4d8;
}

.theme-dark .studio-topbar .account-panel-content .account-settings-link,
.theme-dark .studio-topbar .account-panel-content .account-settings-link:hover,
.theme-dark .studio-topbar .account-panel-content .topbar-link[href="/accounts/settings/"],
.theme-dark .studio-topbar .account-panel-content .topbar-link[href="/accounts/settings/"]:hover {
  width: 36px;
  min-width: 36px;
  padding: 0;
  overflow: hidden;
  background:
    url("https://api.iconify.design/lucide/settings.svg?color=%23ffffff&width=18&height=18") center / 18px 18px no-repeat,
    linear-gradient(180deg, rgba(30, 41, 67, 0.94), rgba(13, 19, 36, 0.92));
  color: transparent;
  font-size: 0;
}

.theme-dark .cherryx-balance-badge::before {
  display: block;
  flex: 0 0 auto;
  background-color: #f8fbff;
  -webkit-mask: url("https://api.iconify.design/lucide/coins.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/coins.svg") center / contain no-repeat;
}

.subscription-drawer[hidden] {
  display: none !important;
}

.subscription-drawer {
  position: fixed;
  inset: 0;
  z-index: 98000;
}

.subscription-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(3px);
}

.subscription-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: grid;
  align-content: start;
  gap: 14px;
  width: min(520px, 100%);
  height: 100%;
  overflow: auto;
  padding: 18px;
  border-left: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  background: var(--surface);
  box-shadow: -28px 0 70px rgba(15, 23, 42, 0.24);
}

body.subscription-drawer-open .studio-topbar .account-bar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px) scale(0.98);
}

.subscription-drawer-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.subscription-drawer-panel > header span,
.subscription-current small,
.subscription-plan-list article span,
.subscription-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.subscription-current {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 14px;
  padding: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, var(--surface)), var(--surface));
}

.subscription-current h2 {
  margin: 0;
  color: var(--ink);
}

.subscription-current p {
  margin: 0;
  color: var(--muted);
}

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

.subscription-current-grid span {
  display: grid;
  gap: 3px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.subscription-current-grid b {
  color: var(--ink);
}

.subscription-storage {
  display: grid;
  gap: 7px;
}

.subscription-storage span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.subscription-storage em {
  color: var(--muted);
  font-style: normal;
  font-weight: 820;
}

.subscription-storage i {
  display: block;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-2));
}

.subscription-storage i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.subscription-plan-list {
  display: grid;
  gap: 12px;
}

.subscription-plan-list article {
  display: grid;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
}

.subscription-plan-list article.is-current {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.subscription-plan-list article strong {
  display: block;
  color: var(--ink);
  font-size: 18px;
}

.subscription-plan-list article p {
  margin: 0;
  color: var(--muted);
}

.subscription-plan-list ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
}

.subscription-proration {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
}

.subscription-proration span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.subscription-proration small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
  line-height: 1.1;
}

.subscription-proration b {
  color: var(--ink);
  font-size: 13px;
}

.subscription-proration .is-due {
  border-radius: 8px;
  padding: 5px 6px;
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.subscription-proration .is-due b {
  color: var(--blue);
}

.subscription-plan-list footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
}

.subscription-plan-list footer b {
  color: var(--ink);
  font-size: 18px;
}

.subscription-plan-list footer small {
  color: var(--muted);
  font-weight: 820;
}

.subscription-plan-list footer a {
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--blue);
  font-weight: 900;
  text-decoration: none;
}

.subscription-plan-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.subscription-plan-actions a,
.subscription-plan-actions button {
  min-height: 36px;
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  font-weight: 900;
}

.subscription-plan-actions button {
  border: 1px solid rgba(34, 197, 94, 0.34);
  background: color-mix(in srgb, #22c55e 10%, var(--surface));
  color: #16a34a;
  cursor: pointer;
}

.subscription-plan-actions button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.subscription-note {
  margin: 0;
}

@media (max-width: 760px) {
  .subscription-drawer {
    z-index: 96000;
  }

  .subscription-drawer-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: min(92svh, 780px);
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    padding: 14px 12px calc(18px + env(safe-area-inset-bottom));
    box-shadow: 0 -30px 80px rgba(15, 23, 42, 0.28);
    overscroll-behavior: contain;
  }

  .subscription-drawer-panel > header {
    position: sticky;
    top: -14px;
    z-index: 2;
    min-height: 42px;
    margin: -14px -12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
    padding: 10px 12px 8px;
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    backdrop-filter: blur(16px);
  }

  .subscription-current {
    gap: 9px;
    border-radius: 18px;
    padding: 12px;
  }

  .subscription-current h2 {
    font-size: 22px;
    line-height: 1.05;
  }

  .subscription-current p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .subscription-current-grid {
    display: grid;
    grid-auto-columns: minmax(112px, max-content);
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 7px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .subscription-current-grid::-webkit-scrollbar {
    display: none;
  }

  .subscription-current-grid span {
    min-width: 112px;
    padding: 8px 9px;
  }

  .subscription-storage {
    gap: 6px;
  }

  .subscription-plan-list {
    gap: 9px;
  }

  .subscription-plan-list article {
    gap: 8px;
    border-radius: 18px;
    padding: 11px;
  }

  .subscription-plan-list article > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 8px;
    align-items: start;
  }

  .subscription-plan-list article > div:first-child span {
    justify-self: start;
    border-radius: 999px;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--blue) 8%, var(--surface-2));
    font-size: 10px;
  }

  .subscription-plan-list article > div:first-child strong {
    grid-column: 1;
    font-size: 18px;
    line-height: 1.08;
  }

  .subscription-plan-list article > div:first-child small {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    max-width: 118px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    text-align: right;
  }

  .subscription-plan-list article p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .subscription-plan-list ul {
    grid-template-columns: 1fr;
    gap: 3px;
    max-height: 62px;
    overflow: hidden;
    padding-left: 16px;
    font-size: 12px;
  }

  .subscription-proration {
    grid-template-columns: repeat(3, minmax(116px, 1fr));
    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px;
    scrollbar-width: none;
  }

  .subscription-proration::-webkit-scrollbar {
    display: none;
  }

  .subscription-plan-list footer {
    grid-template-columns: 1fr;
    gap: 7px;
    border-top: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
    padding-top: 8px;
  }

  .subscription-plan-list footer > b {
    display: none;
  }

  .subscription-plan-list footer > small {
    font-size: 11px;
  }

  .subscription-plan-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(126px, 0.9fr);
    gap: 7px;
  }

  .subscription-plan-actions a,
  .subscription-plan-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px;
    font-size: 12px;
    text-align: center;
  }

  .subscription-plan-actions button::before {
    content: "";
    width: 15px;
    height: 15px;
    margin-right: 6px;
    background: currentColor;
    mask: url("https://api.iconify.design/lucide/send.svg") center / contain no-repeat;
    -webkit-mask: url("https://api.iconify.design/lucide/send.svg") center / contain no-repeat;
  }

  .subscription-note {
    border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
    border-radius: 14px;
    padding: 10px;
    background: color-mix(in srgb, var(--surface-2) 72%, transparent);
    font-size: 12px;
    line-height: 1.4;
  }
}

.value-strip {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  padding: 0 28px 18px;
}

.value-strip article,
.paywall-mini,
.paywall-hero,
.trust-band article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
}

.value-strip article {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
}

.value-strip strong {
  color: var(--ink);
}

.value-strip span {
  color: var(--muted);
}

.value-strip .native-status-card.is-on {
  border-color: color-mix(in srgb, #22c55e 36%, var(--line));
}

.value-strip .native-status-card.is-off {
  border-color: color-mix(in srgb, #f59e0b 38%, var(--line));
}

.layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) clamp(300px, 20vw, 340px);
  gap: 18px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0 26px 28px;
  overflow-x: hidden;
  overflow-x: clip;
}

body.is-designer-workspace .studio-topbar {
  flex: 0 0 auto;
  padding: 10px 18px;
}

body.is-designer-workspace .studio-topbar .topbar-note,
body.is-designer-workspace .studio-topbar .account-panel {
  display: none;
}

body.is-designer-workspace .studio-topbar h1 {
  font-size: 22px;
}

.layout.is-designer-mode {
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  overflow: hidden;
  padding: 0 16px 16px;
}

.layout.is-designer-mode .tabs,
.layout.is-designer-mode .dashboard-strip,
.layout.is-designer-mode .tool-panel,
.layout.is-designer-mode .jobs-panel {
  display: none;
}

.layout.is-designer-mode .designer-mode-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  margin-bottom: 0;
}

.layout.is-designer-mode .designer-studio {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
}

.layout.is-designer-mode .workspace {
  display: flex;
  min-height: 0;
  overflow: hidden;
}

.layout.is-designer-mode .workspace > .designer-mode-panel {
  flex: 1 1 auto;
  width: 100%;
}

.tabs,
.tool-panel,
.jobs-panel {
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(221, 229, 239, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.theme-dark .tabs,
.theme-dark .tool-panel,
.theme-dark .jobs-panel,
.theme-dark .dashboard-strip article,
.theme-dark .dashboard-card,
.theme-dark .auth-card,
.theme-dark .profile-preview,
.theme-dark .photo-upload-surface,
.theme-dark .settings-section {
  background: rgba(17, 26, 46, 0.88);
  border-color: rgba(84, 102, 137, 0.45);
}

.theme-dark .topbar-link,
.theme-dark .limits span,
.theme-dark .jobs-heading span,
.theme-dark .workspace-return,
.theme-dark .theme-option > span {
  background: rgba(17, 26, 46, 0.82);
  border-color: rgba(84, 102, 137, 0.45);
  color: var(--ink);
}

.theme-dark .theme-option input[value="soft"] + span {
  background: linear-gradient(135deg, #eef6ff, #cfe3ff);
  color: #0f172a;
}

.theme-dark .theme-option input[value="soft"] + span b {
  color: #0f172a;
}

.tabs {
  position: sticky;
  top: 16px;
  align-self: start;
  display: grid;
  gap: 5px;
  padding: 8px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  padding: 9px 11px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-weight: 620;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}

.tab::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 5px;
  background: currentColor;
  opacity: 0.72;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  transition: opacity 160ms ease, transform 160ms ease;
}

.tab:hover,
.tab.is-active {
  background: color-mix(in srgb, var(--blue) 12%, white);
  color: var(--blue);
  transform: translateX(1px);
}

.tab:hover::before,
.tab.is-active::before {
  opacity: 1;
  transform: scale(1.04);
}

.tab-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.mobile-jobs-tab {
  display: none;
}

.mobile-workspace-dock {
  display: none;
}

.theme-dark .tab:hover,
.theme-dark .tab.is-active {
  background: color-mix(in srgb, var(--blue) 24%, #0d1324);
  color: color-mix(in srgb, var(--blue) 52%, white);
}

.designer-switch-wrap {
  margin-top: 9px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.designer-switch {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 12px;
  padding: 7px 9px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--ink);
  text-align: left;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.designer-switch:hover,
.designer-switch.is-active {
  border-color: color-mix(in srgb, var(--blue) 58%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.designer-switch b,
.designer-switch small {
  display: block;
}

.designer-switch b {
  font-size: 13px;
  line-height: 1.1;
}

.designer-switch small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 720;
}

.designer-switch-track {
  position: relative;
  display: block;
  width: 40px;
  height: 24px;
  border-radius: 999px;
  background: #dbe6f4;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.designer-switch-track span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
  transition: transform 220ms cubic-bezier(.2, .8, .2, 1), background 180ms ease;
}

.designer-switch.is-active .designer-switch-track {
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 48%, #8fd7ff));
}

.designer-switch.is-active .designer-switch-track span {
  transform: translateX(16px);
}

.designer-switch.is-launching {
  pointer-events: none;
}

.designer-switch.is-launching .designer-switch-track {
  background-size: 220% 100%;
  animation: designerLaunchPulse 900ms ease-in-out infinite;
}

.designer-switch.is-switching-off .designer-switch-track {
  background: #dbe6f4;
}

.designer-switch.is-switching-off .designer-switch-track span {
  transform: translateX(0);
}

@keyframes designerLaunchPulse {
  0%,
  100% {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 0 0 0 color-mix(in srgb, var(--blue) 28%, transparent);
  }
  50% {
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08), 0 0 0 7px color-mix(in srgb, var(--blue) 14%, transparent);
  }
}

.theme-dark .designer-switch-wrap {
  border-color: rgba(84, 102, 137, 0.45);
}

.theme-dark .designer-switch {
  background: rgba(8, 13, 26, 0.72);
  border-color: rgba(84, 102, 137, 0.52);
}

.theme-dark .dashboard-card {
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(17, 26, 46, 0.92), rgba(10, 16, 32, 0.96));
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.22);
}

.theme-dark .dashboard-card::before {
  opacity: 0.14;
  background-color: color-mix(in srgb, var(--blue) 72%, #f8fbff);
}

.theme-dark .dashboard-open {
  border-color: color-mix(in srgb, var(--blue) 66%, #dbeafe);
  background: rgba(8, 13, 26, 0.46);
  color: #f8fbff;
}

.theme-dark .storage-card i {
  background: rgba(126, 154, 203, 0.18);
}

.workspace {
  min-width: 0;
}

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

.dashboard-strip article,
.dashboard-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(221, 229, 239, 0.92);
  border-radius: 14px;
  min-height: 86px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(16px);
  color: inherit;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dashboard-card::before {
  content: "";
  position: absolute;
  right: 14px;
  top: 12px;
  width: 42px;
  height: 42px;
  opacity: 0.1;
  background-color: var(--blue);
  pointer-events: none;
  -webkit-mask: var(--dash-icon) center / contain no-repeat;
  mask: var(--dash-icon) center / contain no-repeat;
}

.dashboard-card.is-total {
  --dash-icon: url("https://api.iconify.design/lucide/list-checks.svg");
}

.dashboard-card.is-active-count {
  --dash-icon: url("https://api.iconify.design/lucide/timer.svg");
}

.dashboard-card.is-completed-count {
  --dash-icon: url("https://api.iconify.design/lucide/circle-check.svg");
}

.dashboard-card.is-files-count {
  --dash-icon: url("https://api.iconify.design/lucide/folder-open.svg");
}

.dashboard-card.is-storage-count {
  --dash-icon: url("https://api.iconify.design/lucide/hard-drive.svg");
}

.dashboard-card:hover {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line));
  box-shadow: 0 16px 38px color-mix(in srgb, var(--blue) 16%, transparent);
  transform: translateY(-1px);
}

.dashboard-card span {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: end;
  gap: 8px;
  min-width: 0;
}

.dashboard-strip > article > span,
.dashboard-card small:first-child {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.dashboard-strip > article > strong,
.dashboard-card strong {
  display: block;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.dashboard-open {
  position: relative;
  z-index: 1;
  display: inline-flex;
  width: fit-content;
  min-height: 27px;
  align-items: center;
  justify-content: center;
  align-self: end;
  border: 1px solid var(--blue);
  border-radius: 8px;
  padding: 5px 11px;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-style: normal;
  font-weight: 820;
}

.dashboard-card:hover .dashboard-open {
  border-color: color-mix(in srgb, var(--blue) 82%, #0f172a);
  color: color-mix(in srgb, var(--blue) 82%, #0f172a);
}

.storage-card small {
  display: block;
  grid-column: 1 / -1;
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 740;
}

.storage-card small em {
  color: var(--ink);
  font-style: normal;
  font-weight: 820;
}

.storage-card i {
  display: block;
  grid-column: 1 / -1;
  height: 6px;
  margin-top: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 13%, #ffffff);
}

.storage-card i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 54%, #ffffff), var(--blue));
}

.tool-panel {
  display: none;
  overflow: hidden;
  padding: 20px;
}

.tool-panel.is-active {
  display: block;
}

.designer-mode-panel {
  display: none;
  margin-bottom: 18px;
  border: 1px solid rgba(221, 229, 239, 0.92);
  border-radius: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent), transparent 38%),
    rgba(255, 255, 255, 0.88);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transform-origin: top;
  animation: designerOpen 260ms cubic-bezier(.2, .8, .2, 1);
}

.designer-mode-panel.is-open {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}

@keyframes designerOpen {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.designer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.designer-head h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-size: 20px;
  line-height: 1.1;
}

.designer-project-kicker,
.designer-save-row small {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--muted);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 820;
}

.designer-project-kicker {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
}

.designer-project-title {
  cursor: text;
}

.designer-save-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.designer-save-row small.is-error {
  border-color: color-mix(in srgb, var(--red) 32%, var(--line));
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
  color: var(--red);
}

.designer-save-row button,
.designer-save-row b {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  padding: 5px 9px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--blue);
  font-size: 11px;
  font-weight: 850;
}

.designer-save-row button {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  color: var(--red);
}

.designer-project-title-input {
  width: min(360px, 62vw);
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-radius: 8px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  outline: 0;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--blue) 12%, transparent);
}

.designer-shared-badge,
.shared-project-badge {
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 999px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--blue) 7%, rgba(255, 255, 255, 0.82));
  color: var(--blue);
  font-size: 12px;
  font-weight: 880;
}

.designer-mode-panel.is-view-only .designer-plane,
.video-editor-app.is-view-only .editor-timeline,
.video-editor-app.is-view-only [data-preview-overlays] {
  pointer-events: none;
}

.designer-mode-panel.is-view-only .designer-studio,
.video-editor-app.is-view-only {
  --readonly-tint: color-mix(in srgb, var(--blue) 5%, transparent);
}

.workspace-share-modal[hidden] {
  display: none;
}

.workspace-share-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 18px;
}

.workspace-share-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
}

.workspace-share-dialog {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(520px, 100%);
  border: 1px solid color-mix(in srgb, var(--blue) 16%, rgba(255, 255, 255, 0.86));
  border-radius: 20px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), color-mix(in srgb, var(--blue) 4%, rgba(255, 255, 255, 0.92)));
  box-shadow: 0 32px 90px rgba(15, 23, 42, 0.22);
}

.workspace-share-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.workspace-share-dialog header span,
.workspace-share-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.workspace-share-status.is-error {
  color: var(--red);
}

.workspace-share-dialog header button {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  background: transparent;
}

.workspace-share-dialog header button::before {
  content: "Г—";
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.workspace-share-dialog h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
}

.workspace-share-preview {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 16px;
  padding: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent),
    rgba(255, 255, 255, 0.72);
}

.workspace-share-thumb {
  aspect-ratio: 1.22;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 12px;
  background:
    url("https://api.iconify.design/lucide/share-2.svg?color=%232563eb&width=25&height=25") center / 25px 25px no-repeat,
    color-mix(in srgb, var(--blue) 9%, #ffffff);
}

.workspace-share-thumb.has-image {
  background-position: center;
  background-size: cover;
}

.workspace-share-preview strong,
.workspace-share-toolbar strong {
  display: block;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-share-preview span,
.workspace-share-preview small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.3;
  text-overflow: ellipsis;
}

.workspace-share-preview small {
  margin-top: 4px;
}

.workspace-share-dialog form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 8px;
}

.workspace-share-dialog form button,
.workspace-share-list button {
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 11px;
  padding: 8px 11px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue);
  font-weight: 820;
}

.workspace-share-dialog form > button[type="submit"] {
  background: var(--blue);
  color: #ffffff;
}

.workspace-role-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 15px;
  padding: 5px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), color-mix(in srgb, var(--blue) 4%, rgba(255, 255, 255, 0.64)));
}

.workspace-role-picker button {
  display: grid;
  min-height: 54px;
  gap: 2px;
  align-content: center;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.workspace-role-picker button:hover,
.workspace-share-role-toggle button:hover {
  transform: translateY(-1px);
}

.workspace-role-picker button.is-active {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
}

.workspace-role-picker span {
  font-size: 13px;
  font-weight: 900;
}

.workspace-role-picker small {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-share-list {
  display: grid;
  gap: 8px;
}

.workspace-share-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 126px auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 14px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
}

.workspace-share-list article.is-accepted {
  border-color: color-mix(in srgb, #0f766e 24%, var(--line));
}

.workspace-share-list article.is-revoked,
.workspace-share-list article.is-revoking {
  opacity: .64;
}

.workspace-share-list article.is-revoking {
  pointer-events: none;
}

.workspace-share-list button.is-confirming {
  border-color: color-mix(in srgb, var(--red) 34%, var(--line));
  background: color-mix(in srgb, var(--red) 10%, var(--surface));
  color: var(--red);
}

.workspace-share-list strong,
.workspace-share-list span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-share-list span {
  color: var(--muted);
  font-size: 12px;
}

.workspace-share-role-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 12px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.62);
}

.workspace-share-role-toggle button {
  min-height: 32px;
  border-color: transparent;
  border-radius: 9px;
  padding: 6px 8px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
}

.workspace-share-role-toggle button.is-active {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 9%, rgba(255, 255, 255, 0.86));
  color: var(--blue);
  box-shadow: 0 9px 18px color-mix(in srgb, var(--blue) 9%, transparent);
}

.workspace-share-dialog header button::before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  margin: auto;
  background: var(--ink);
  mask: url("https://api.iconify.design/lucide/x.svg") center / contain no-repeat;
}

@media (max-width: 680px) {
  .workspace-share-dialog form,
  .workspace-share-list article {
    grid-template-columns: 1fr;
  }

  .workspace-share-dialog form button,
  .workspace-share-list button {
    width: 100%;
  }

  .workspace-share-dialog {
    max-height: calc(100vh - 28px);
    overflow: auto;
  }
}

.invite-page {
  min-height: 100vh;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, #f8fbff), #ffffff 48%, color-mix(in srgb, var(--blue) 8%, #eef7ff));
}

.invite-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 470px);
  gap: clamp(22px, 5vw, 58px);
  align-items: center;
  min-height: 100vh;
  width: min(1120px, calc(100% - 28px));
  margin: 0 auto;
  padding: 36px 0;
}

.invite-hero {
  display: grid;
  gap: 16px;
}

.invite-hero > span {
  width: max-content;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--blue);
  font-size: 12px;
  font-weight: 860;
}

.invite-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(38px, 7vw, 76px);
  line-height: 0.96;
}

.invite-hero p {
  max-width: 620px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.invite-card {
  display: grid;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, rgba(255, 255, 255, 0.82));
  border-radius: 22px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.13);
  backdrop-filter: blur(18px);
}

.invite-preview {
  display: grid;
  min-height: 270px;
  align-content: start;
  border-radius: 16px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, rgba(255, 255, 255, 0.92)), rgba(255, 255, 255, 0.22)),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--blue) 9%, transparent) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 8%, transparent) 0 1px, transparent 1px 30px),
    color-mix(in srgb, var(--blue) 4%, #ffffff);
  background-position: center;
  background-size: cover;
}

.invite-preview span {
  width: max-content;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.84);
  color: var(--blue);
  font-size: 12px;
  font-weight: 860;
}

.invite-card small,
.invite-card p {
  color: var(--muted);
}

.invite-card strong {
  display: block;
  color: var(--ink);
  font-size: 24px;
}

.designer-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.designer-ghost,
.designer-icon-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 84%, #ffffff);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.designer-ghost {
  padding: 8px 12px;
}

.designer-icon-button {
  width: 38px;
  padding: 0;
}

.designer-icon-button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--icon) center / contain no-repeat;
}

.designer-icon-button[data-icon="expand"] {
  --icon: url("https://api.iconify.design/lucide/maximize-2.svg");
}

.designer-icon-button[data-icon="workspace"] {
  --icon: url("https://api.iconify.design/lucide/layout-dashboard.svg");
}

.designer-icon-button[data-icon="x"] {
  --icon: url("https://api.iconify.design/lucide/x.svg");
}

.designer-studio {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 260px;
  min-height: 0;
  height: 100%;
}

.designer-toolbar {
  display: grid;
  align-content: start;
  gap: 8px;
  border-right: 1px solid var(--line);
  padding: 12px 8px;
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
}

.design-tool {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  overflow: hidden;
}

.design-tool::before {
  content: "";
  width: 19px;
  height: 19px;
  background: currentColor;
  mask: var(--tool-icon) center / contain no-repeat;
}

.design-tool:hover,
.design-tool.is-active {
  border-color: color-mix(in srgb, var(--blue) 36%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.design-tool[data-design-tool="select"] {
  --tool-icon: url("https://api.iconify.design/lucide/mouse-pointer-2.svg");
}

.design-tool[data-design-tool="pan"] {
  --tool-icon: url("https://api.iconify.design/lucide/hand.svg");
}

.design-tool[data-design-tool="frame"] {
  --tool-icon: url("https://api.iconify.design/lucide/frame.svg");
}

.design-tool[data-design-tool="shape-rect"] {
  --tool-icon: url("https://api.iconify.design/lucide/square.svg");
}

.design-tool[data-design-tool="shape-ellipse"] {
  --tool-icon: url("https://api.iconify.design/lucide/circle.svg");
}

.design-tool[data-design-tool="shape-line"] {
  --tool-icon: url("https://api.iconify.design/lucide/minus.svg");
}

.design-tool[data-design-tool="shape-arrow"] {
  --tool-icon: url("https://api.iconify.design/lucide/arrow-up-right.svg");
}

.design-tool[data-design-tool="text"] {
  --tool-icon: url("https://api.iconify.design/lucide/type.svg");
}

.design-tool[data-design-tool="draw"] {
  --tool-icon: url("https://api.iconify.design/lucide/pencil-line.svg");
}

.design-photo-tool {
  --tool-icon: url("https://api.iconify.design/lucide/image-plus.svg");
  cursor: pointer;
}

.design-photo-tool input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.designer-toolbar .design-tool[data-design-tool="frame"],
.designer-toolbar .design-tool[data-design-tool="text"],
.designer-toolbar .design-photo-tool {
  margin-top: 8px;
}

.designer-canvas-shell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 0;
  background:
    linear-gradient(rgba(110, 130, 160, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 130, 160, 0.07) 1px, transparent 1px),
    color-mix(in srgb, var(--surface-2) 78%, #ffffff);
  background-size: 8px 8px;
  cursor: default;
  touch-action: none;
}

.designer-canvas-shell.is-pinching,
.designer-canvas-shell.is-panning,
.designer-canvas-shell.is-pannable {
  cursor: grab;
}

.designer-canvas-shell.is-pinching,
.designer-canvas-shell.is-panning {
  cursor: grabbing;
}

.designer-canvas-shell.is-dropping {
  outline: 2px solid color-mix(in srgb, var(--blue) 54%, transparent);
  outline-offset: -2px;
}

.designer-floating-bar {
  position: sticky;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 12;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.designer-canvas-start[hidden] {
  display: none;
}

.designer-canvas-start {
  position: absolute;
  top: min(34vh, 310px);
  left: 50%;
  z-index: 16;
  display: grid;
  width: min(360px, calc(100% - 48px));
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.86));
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 22px 64px rgba(15, 23, 42, 0.13);
  backdrop-filter: blur(16px);
  transform: translateX(-50%);
}

.designer-canvas-start-presets,
.designer-canvas-start-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.designer-canvas-start button {
  min-width: 0;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 15%, var(--line));
  border-radius: 10px;
  padding: 0 8px;
  background: color-mix(in srgb, var(--surface) 88%, #ffffff);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.designer-canvas-start-tools button {
  background: color-mix(in srgb, var(--blue) 6%, #ffffff);
  color: var(--blue);
}

.designer-canvas-start button:hover {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
  box-shadow: 0 10px 22px color-mix(in srgb, var(--blue) 11%, transparent);
}

.designer-zoom-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 999px;
  padding: 6px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.14);
  pointer-events: auto;
  backdrop-filter: blur(18px);
}

.designer-zoom-controls button,
.designer-zoom-controls output {
  display: grid;
  min-width: 34px;
  min-height: 30px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 820;
}

.designer-zoom-controls output {
  min-width: 56px;
  color: var(--muted);
}

.designer-zoom-controls button:hover {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
}

.designer-context-menu {
  position: fixed;
  z-index: 9999;
  display: grid;
  width: 226px;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--line) 82%, #ffffff);
  border-radius: 14px;
  padding: 7px;
  background: color-mix(in srgb, var(--surface) 94%, #ffffff);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(20px);
}

.designer-context-menu[hidden] {
  display: none;
}

.designer-context-menu button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.designer-context-menu button:hover {
  border-color: color-mix(in srgb, var(--blue) 32%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  color: var(--blue);
}

.designer-context-menu button:disabled {
  cursor: default;
  opacity: 0.42;
}

.designer-context-menu button:disabled:hover {
  border-color: transparent;
  background: transparent;
  color: var(--ink);
}

.designer-context-menu b {
  font-size: 13px;
  line-height: 1.1;
}

.designer-context-menu span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.designer-context-menu hr {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 2px 0;
  background: var(--line);
}

.designer-context-menu small {
  min-height: 0;
  padding: 0 8px 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.designer-zoom-controls button[data-design-zoom="out"]::before,
.designer-zoom-controls button[data-design-zoom="in"]::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: var(--zoom-icon) center / contain no-repeat;
}

.designer-zoom-controls button[data-design-zoom="out"] {
  --zoom-icon: url("https://api.iconify.design/lucide/minus.svg");
}

.designer-zoom-controls button[data-design-zoom="in"] {
  --zoom-icon: url("https://api.iconify.design/lucide/plus.svg");
}

.designer-plane {
  position: relative;
  width: 9000px;
  height: 6400px;
  margin: 0;
  transform-origin: top left;
}

.designer-plane.is-placing {
  cursor: crosshair;
}

.designer-plane.is-placing .design-object,
.designer-plane.is-placing .designer-vector-layer {
  pointer-events: none;
}

.designer-plane.is-drawing .design-object {
  pointer-events: none;
}

.designer-plane.is-placing .design-resize-handle {
  display: none;
}

.designer-ruler {
  position: absolute;
  z-index: 1;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.designer-ruler-x {
  top: 0;
  left: 28px;
  right: 0;
  height: 24px;
  border-bottom: 1px solid var(--line);
}

.designer-ruler-y {
  top: 24px;
  bottom: 0;
  left: 0;
  width: 28px;
  border-right: 1px solid var(--line);
}

.designer-vector-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: visible;
}

.design-vector-stroke {
  fill: none;
  cursor: pointer;
  pointer-events: stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.design-vector-stroke.is-selected {
  filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--blue) 52%, transparent));
}

.design-vector-point {
  cursor: move;
  fill: #ffffff;
  pointer-events: all;
  stroke: var(--blue);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.design-vector-point.is-handle {
  fill: var(--blue);
  stroke: #ffffff;
  opacity: 0.82;
}

.design-vector-handle-line {
  stroke: color-mix(in srgb, var(--blue) 72%, #ffffff);
  stroke-dasharray: 5 5;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.design-marquee {
  position: absolute;
  z-index: 6;
  border: 1px solid var(--blue);
  background: color-mix(in srgb, var(--blue) 13%, transparent);
  pointer-events: none;
}

.design-guide {
  position: absolute;
  z-index: 7;
  background: #ff2aa1;
  pointer-events: none;
  box-shadow: 0 0 0 1px rgba(255, 42, 161, 0.18);
}

.design-guide.is-x {
  width: 1px;
  height: 100%;
}

.design-guide.is-y {
  width: 100%;
  height: 1px;
}

.design-object {
  position: absolute;
  z-index: 2;
  border: 2px solid var(--object-stroke, var(--blue));
  border-radius: 10px;
  background: var(--object-fill, rgba(255, 255, 255, 0.78));
  color: var(--object-stroke, var(--blue));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
  cursor: grab;
  transform-origin: 50% 50%;
  user-select: none;
}

.design-object.is-hidden {
  display: none;
}

.design-object.is-locked {
  cursor: default;
  opacity: 0.72;
}

.design-object::after {
  content: attr(data-size);
  position: absolute;
  left: 10px;
  top: 8px;
  color: color-mix(in srgb, var(--object-stroke, var(--blue)) 72%, #0f172a);
  font-size: 11px;
  font-weight: 820;
  opacity: 0;
  pointer-events: none;
}

.design-object.is-frame::after {
  opacity: 0.72;
}

.design-object.is-frame.is-drop-target {
  outline: 3px solid color-mix(in srgb, var(--blue) 46%, transparent);
  outline-offset: 5px;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--blue) 10%, transparent), 0 20px 48px rgba(37, 99, 235, 0.18);
}

.design-object.is-selected {
  outline: 3px solid color-mix(in srgb, var(--blue) 24%, transparent);
}

.design-resize-handle {
  position: absolute;
  z-index: 4;
  width: 11px;
  height: 11px;
  border: 2px solid var(--blue);
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.design-resize-handle.is-nw {
  top: -7px;
  left: -7px;
  cursor: nwse-resize;
}

.design-resize-handle.is-ne {
  top: -7px;
  right: -7px;
  cursor: nesw-resize;
}

.design-resize-handle.is-sw {
  bottom: -7px;
  left: -7px;
  cursor: nesw-resize;
}

.design-resize-handle.is-se {
  right: -7px;
  bottom: -7px;
  cursor: nwse-resize;
}

.design-rotate-handle {
  position: absolute;
  left: 50%;
  top: -34px;
  z-index: 5;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 10px 22px rgba(37, 99, 235, 0.28);
  cursor: grab;
  transform: translateX(-50%);
}

.design-rotate-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: 2px;
  height: 17px;
  background: color-mix(in srgb, var(--blue) 54%, transparent);
  transform: translateX(-50%);
}

.design-rotate-handle:active {
  cursor: grabbing;
}

.design-object:active {
  cursor: grabbing;
}

.design-object.is-text {
  min-width: 120px;
  min-height: 48px;
  border-style: dashed;
  padding: 12px;
  color: var(--object-stroke, #0f172a);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.15;
  cursor: text;
  outline-offset: 4px;
  user-select: text;
  white-space: pre-wrap;
}

.design-object.is-text:focus {
  outline: 3px solid color-mix(in srgb, var(--blue) 30%, transparent);
}

.design-object.is-shape {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.design-object.is-shape.is-selected {
  outline-offset: 3px;
}

.design-shape-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.design-object.is-image {
  border-color: color-mix(in srgb, var(--blue) 38%, white);
  background: #f8fafc;
  overflow: hidden;
}

.design-image-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: max(0px, calc(var(--object-radius, 10px) - 2px));
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.16) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.16) 75%),
    linear-gradient(45deg, rgba(148, 163, 184, 0.16) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.16) 75%) 8px 8px / 16px 16px,
    #ffffff;
}

.design-image-content {
  position: absolute;
  display: block;
  max-width: none;
  max-height: none;
  border-radius: 0;
  pointer-events: none;
  user-select: none;
}

.design-object.is-cropping {
  outline: 3px solid color-mix(in srgb, var(--blue) 42%, transparent);
  outline-offset: 8px;
  cursor: move;
}

.design-object.is-cropping .design-image-content {
  opacity: 0.92;
}

.design-object.is-cropping::before {
  content: "";
  position: absolute;
  inset: -9999px;
  z-index: -1;
  background: rgba(15, 23, 42, 0.10);
  pointer-events: none;
}

.design-crop-scale-handle {
  position: absolute;
  z-index: 5;
  right: -14px;
  bottom: -14px;
  width: 22px;
  height: 22px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.30);
  cursor: nwse-resize;
}

.design-object.is-frame.is-clipping {
  overflow: hidden;
}

.design-object.is-group {
  border-style: dashed;
  background: color-mix(in srgb, var(--blue) 4%, transparent);
}

.designer-inspector {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: start;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  overflow-x: hidden;
  border-left: 1px solid var(--line);
  padding: 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.designer-inspector.is-layers-open {
  grid-template-rows: auto minmax(0, 1fr);
}

.designer-inspector.is-layers-open .designer-context {
  display: none;
}

.designer-inspector.is-layers-open .designer-layers {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.designer-inspector-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 30px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.designer-inspector-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.designer-inspector-head span {
  max-width: 92px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 820;
}

.designer-context,
.designer-inspector-section {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}

.designer-context {
  min-height: 0;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
}

.designer-inspector-section.is-empty {
  border-style: dashed;
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
}

.designer-inspector-section.is-empty .designer-command-grid button {
  min-height: 36px;
}

.designer-context > span,
.designer-inspector-section > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 840;
}

.designer-context small,
.designer-inspector-section small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.designer-inspector-section.is-style-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.designer-inspector-section.is-style-grid > span {
  grid-column: 1 / -1;
}

.designer-inspector-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
}

.designer-field {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
}

.designer-field input,
.designer-field select {
  min-width: 0;
  width: 100%;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--surface-2) 76%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.designer-field input:focus,
.designer-field select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.designer-field input[type="number"] {
  text-align: right;
  font-weight: 820;
}

.designer-field input[type="range"] {
  min-height: 24px;
  padding: 0;
}

.designer-inspector-section.is-style-grid .designer-color-field {
  grid-column: 1 / -1;
}

.designer-color-field {
  gap: 7px;
}

.designer-color-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.designer-color-title button {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 999px;
  padding: 0;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  color: var(--muted);
}

.designer-color-title button::before {
  content: "";
  width: 11px;
  height: 11px;
  background: currentColor;
  mask: url("https://api.iconify.design/lucide/x.svg") center / contain no-repeat;
}

.designer-color-title button:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  color: var(--blue);
}

.designer-color-control {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 7px;
  align-items: center;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 12px;
  padding: 5px;
  background: color-mix(in srgb, var(--surface-2) 58%, transparent);
}

.designer-color-native {
  width: 32px !important;
  min-height: 32px !important;
  height: 32px;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 0 !important;
  background:
    linear-gradient(45deg, #dbe5f2 25%, transparent 25% 75%, #dbe5f2 75%),
    linear-gradient(45deg, #dbe5f2 25%, transparent 25% 75%, #dbe5f2 75%) 6px 6px / 12px 12px,
    #ffffff !important;
  cursor: pointer;
}

.designer-color-native::-webkit-color-swatch-wrapper {
  padding: 0;
}

.designer-color-native::-webkit-color-swatch {
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 9px;
}

.designer-color-code {
  min-width: 0;
  min-height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
  font-size: 12px !important;
  font-weight: 780;
  text-transform: lowercase;
}

.designer-color-palette {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
}

.designer-color-field.is-palette-closed .designer-color-palette {
  display: none;
}

.designer-color-palette button {
  position: relative;
  min-height: 24px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(45deg, rgba(148, 163, 184, 0.28) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.28) 75%),
    linear-gradient(45deg, rgba(148, 163, 184, 0.28) 25%, transparent 25% 75%, rgba(148, 163, 184, 0.28) 75%) 5px 5px / 10px 10px,
    var(--swatch);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.designer-color-palette button::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 5px;
  background: var(--swatch);
}

.designer-color-palette button[data-color-value="transparent"]::after {
  background:
    linear-gradient(135deg, transparent 44%, #ef4444 45% 55%, transparent 56%),
    transparent;
}

.designer-color-palette button:hover,
.designer-color-palette button.is-active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 13%, transparent);
}

.designer-check {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 34px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 10px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--blue) 4%, #ffffff);
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.1;
}

.designer-check input[type="checkbox"] {
  appearance: none;
  display: grid;
  flex: 0 0 18px;
  place-items: center;
  width: 18px !important;
  min-width: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  max-height: 18px !important;
  margin: 0;
  border: 1.5px solid color-mix(in srgb, var(--blue) 34%, #cbd5e1);
  border-radius: 5px;
  padding: 0 !important;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
  cursor: pointer;
}

.designer-check input[type="checkbox"]::after {
  content: "";
  width: 8px;
  height: 5px;
  border: solid #ffffff;
  border-width: 0 0 2px 2px;
  opacity: 0;
  transform: rotate(-45deg) translateY(-1px);
}

.designer-check input[type="checkbox"]:checked {
  border-color: var(--blue);
  background: var(--blue);
}

.designer-check input[type="checkbox"]:checked::after {
  opacity: 1;
}

.designer-check input[type="checkbox"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 22%, transparent);
  outline-offset: 2px;
}

.designer-mini-action {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 40%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.designer-layers {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  overflow: hidden;
}

.designer-layers summary {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
}

.designer-layers summary::-webkit-details-marker {
  display: none;
}

.designer-layers summary::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  mask: url("https://api.iconify.design/lucide/chevron-down.svg") center / contain no-repeat;
  transition: transform 0.18s ease;
}

.designer-layers[open] summary::after {
  transform: rotate(180deg);
}

.designer-layers summary span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.designer-layers summary b {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
  font-size: 11px;
}

.designer-layers [data-design-layers] {
  display: grid;
  gap: 5px;
  max-height: min(240px, 34vh);
  overflow: auto;
  padding: 0 8px 8px;
}

.designer-inspector.is-layers-open .designer-layers [data-design-layers] {
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  max-height: none;
  min-height: 0;
}

.designer-layer-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 0 0 6px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.designer-layer-toolbar button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.designer-layer-toolbar button:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  color: var(--blue);
}

.designer-layer-list {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 0;
}

.designer-inspector.is-layers-open .designer-layer-list {
  overflow: auto;
}

.designer-layer-row {
  display: flex;
  min-height: 30px;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 7px;
  background: transparent;
  margin-left: calc(var(--depth, 0) * 14px);
}

.designer-layer-row button {
  flex: 0 0 auto;
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 0 4px;
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
  color: var(--text);
  text-align: left;
  font-size: 12px;
  font-weight: 760;
}

.designer-layer-row button span {
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.designer-layer-row button[data-layer-toggle] {
  font-size: 0;
}

.designer-layer-row button[data-layer-toggle]::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  mask: var(--layer-icon) center / contain no-repeat;
}

.designer-layer-row button[data-layer-toggle="hidden"] {
  --layer-icon: url("https://api.iconify.design/lucide/eye.svg");
}

.designer-layer-row button[data-layer-toggle="hidden"][data-layer-active="1"] {
  --layer-icon: url("https://api.iconify.design/lucide/eye-off.svg");
}

.designer-layer-row button[data-layer-toggle="locked"] {
  --layer-icon: url("https://api.iconify.design/lucide/unlock.svg");
}

.designer-layer-row button[data-layer-toggle="locked"][data-layer-active="1"] {
  --layer-icon: url("https://api.iconify.design/lucide/lock.svg");
}

.designer-layer-row input {
  min-width: 0;
  height: 24px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

.designer-layer-row:hover,
.designer-layer-row.is-selected {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  color: var(--blue);
}

.designer-layer-row.is-hidden {
  opacity: 0.52;
}

.designer-layer-row.is-drop-target {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 36%, transparent);
}

.designer-empty-layer {
  margin: 0;
  border: 1px dashed color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
  color: var(--muted);
  padding: 12px;
  font-size: 12px;
  text-align: center;
}

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

.designer-command-grid.is-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.designer-selection-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.designer-selection-actions button,
.designer-segmented button {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.designer-selection-actions button:hover,
.designer-segmented button:hover,
.designer-segmented button.is-active {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.designer-segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.designer-icon-segment {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.designer-icon-segment button {
  display: grid;
  min-height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
}

.designer-icon-segment button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--align-icon) center / contain no-repeat;
}

.designer-icon-segment button[data-align-icon="left"] {
  --align-icon: url("https://api.iconify.design/lucide/align-left.svg");
}

.designer-icon-segment button[data-align-icon="center"] {
  --align-icon: url("https://api.iconify.design/lucide/align-center.svg");
}

.designer-icon-segment button[data-align-icon="right"] {
  --align-icon: url("https://api.iconify.design/lucide/align-right.svg");
}

.designer-icon-segment button:hover,
.designer-icon-segment button.is-active {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.designer-command-grid button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.designer-command-grid button:hover {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.designer-inspector label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.designer-preset-group,
.designer-pen-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.designer-preset-group span,
.designer-pen-mode span {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.designer-preset-group button,
.designer-pen-mode button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 820;
}

.designer-preset-group button:hover,
.designer-pen-mode button:hover,
.designer-pen-mode button.is-active {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.designer-inspector output {
  float: right;
  color: var(--ink);
}

.designer-inspector input[type="color"] {
  width: 100%;
  height: 38px;
  border-radius: 10px;
  padding: 2px;
}

.designer-resource-bin[hidden] {
  display: none;
}

.designer-page {
  display: flex;
  height: 100dvh;
  min-height: 100dvh;
  flex-direction: column;
  overflow: hidden;
}

.designer-page-topbar {
  position: relative;
  z-index: 30000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  flex: 0 0 auto;
  padding: 10px 18px;
}

.designer-page-topbar h1 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
}

.workspace-return-mini {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 13px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.designer-workspace-switch {
  width: auto;
  min-width: 154px;
}

.designer-page-main {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  padding: 0 16px 16px;
}

.designer-mode-panel.is-fullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  min-height: 0;
  overflow: hidden;
}

.designer-mode-panel.is-fullscreen .designer-studio {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
}

.designer-mode-panel.is-fullscreen .designer-head {
  flex: 0 0 auto;
  padding: 12px 16px;
}

.theme-dark .designer-mode-panel,
.theme-dark .designer-toolbar,
.theme-dark .designer-inspector,
.theme-dark .designer-ruler {
  background-color: rgba(17, 26, 46, 0.9);
  border-color: rgba(84, 102, 137, 0.45);
}

.theme-dark .designer-canvas-shell {
  background:
    linear-gradient(rgba(139, 160, 195, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 160, 195, 0.08) 1px, transparent 1px),
    #090f1d;
  background-size: 24px 24px;
}

.theme-dark .designer-context,
.theme-dark .designer-inspector-section,
.theme-dark .designer-layers {
  background: rgba(8, 13, 26, 0.62);
  border-color: rgba(84, 102, 137, 0.52);
}

.theme-dark .designer-context-menu {
  border-color: rgba(84, 102, 137, 0.58);
  background: rgba(10, 16, 31, 0.96);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

.theme-dark .designer-context-menu button {
  color: #f8fbff;
}

.theme-dark .designer-context-menu button:hover {
  background: color-mix(in srgb, var(--blue) 20%, #111a2e);
  color: #ffffff;
}

.theme-dark .designer-context-menu button:disabled:hover {
  color: #f8fbff;
}

.theme-dark .designer-field input,
.theme-dark .designer-field select,
.theme-dark .designer-command-grid button,
.theme-dark .designer-layer-row button,
.theme-dark .designer-selection-actions button,
.theme-dark .designer-icon-segment button,
.theme-dark .designer-segmented button {
  background: rgba(7, 12, 24, 0.78);
  border-color: rgba(84, 102, 137, 0.5);
  color: #f8fbff;
}

.theme-dark .designer-color-control {
  background: rgba(7, 12, 24, 0.72);
  border-color: rgba(84, 102, 137, 0.5);
}

.theme-dark .designer-color-palette button {
  border-color: rgba(84, 102, 137, 0.58);
}

.theme-dark .designer-ghost,
.theme-dark .designer-icon-button,
.theme-dark .workspace-return-mini {
  background: rgba(8, 13, 26, 0.82);
  border-color: rgba(84, 102, 137, 0.52);
  color: #f8fbff;
}

.section-title,
.jobs-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.section-title h2,
.jobs-heading h2 {
  color: var(--ink);
  font-size: 21px;
  line-height: 1.2;
}

.section-title span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.jobs-filter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: -4px 0 14px;
}

.jobs-filter button {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 8px;
  padding: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 58%, transparent));
  color: var(--muted);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease, transform 160ms ease;
}

.jobs-filter button::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  transition: transform 160ms ease, opacity 160ms ease;
}

.jobs-filter button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  max-width: 160px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 96%, #ffffff);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.14);
  color: var(--ink);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.1;
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, 5px) scale(0.98);
  transition: opacity 150ms ease, transform 150ms ease;
  white-space: nowrap;
}

.jobs-filter button:hover,
.jobs-filter button:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  color: color-mix(in srgb, var(--blue) 78%, var(--ink));
  transform: translateY(-1px);
}

.jobs-filter button:hover::before,
.jobs-filter button:focus-visible::before {
  transform: scale(1.08);
}

.jobs-filter button:hover::after,
.jobs-filter button:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.jobs-filter button.is-active {
  border-color: color-mix(in srgb, var(--blue) 56%, var(--line));
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 62%),
    color-mix(in srgb, var(--blue) 11%, var(--surface));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 14%, transparent);
  color: var(--blue);
}

.form-grid,
.resume-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.resume-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.resume-profile-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resume-wizard {
  display: grid;
  gap: 16px;
}

.resume-steps {
  display: flex;
  gap: 8px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 14px 4px;
  scroll-padding-inline: 18px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.resume-steps.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.resume-steps button {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  flex: 0 0 150px;
  min-width: 0;
  max-width: 150px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  font-weight: 760;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  scroll-snap-align: start;
  user-select: none;
}

.resume-steps button span {
  display: grid;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, white);
  color: var(--blue);
  font-size: 12px;
}

.resume-steps button b {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-steps::-webkit-scrollbar {
  display: none;
}

.resume-steps button.is-active {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, white);
  color: var(--ink);
}

.theme-dark .resume-steps button {
  background: rgba(8, 13, 26, 0.62);
  border-color: rgba(84, 102, 137, 0.45);
}

.theme-dark .resume-steps button.is-active {
  background: color-mix(in srgb, var(--blue) 24%, #111a2e);
}

.resume-step {
  display: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.58);
}

.resume-ai-strip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--blue) 12%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface) 94%, white);
}

.resume-ai-strip > span {
  display: grid;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 13%, white);
  color: var(--blue);
  font-size: 12px;
  font-weight: 950;
}

.resume-ai-strip > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.resume-ai-strip strong {
  color: var(--ink);
}

.resume-ai-strip p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.resume-ai-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resume-ai-actions button {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.resume-step.is-active {
  display: grid;
  gap: 14px;
}

.resume-step-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  gap: 16px;
  align-items: start;
}

.resume-wide-step .resume-step-layout {
  grid-template-columns: 1fr;
}

.resume-wide-step .resume-coach {
  position: static;
}

.resume-wide-step .resume-coach ul {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.resume-wide-step .resume-content-quality {
  max-width: 360px;
}

.resume-step-main {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.resume-target-grid {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.resume-target-grid .field-wide {
  grid-column: 1 / -1;
}

.resume-mode-picker,
.resume-inline-actions,
.resume-rewrite-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resume-mode-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resume-mode-picker button,
.resume-rewrite-toolbar button {
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  border-radius: 14px;
  padding: 6px 11px;
  background: color-mix(in srgb, var(--surface) 92%, white);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.resume-mode-picker button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon copy";
  gap: 2px 9px;
  min-height: 62px;
  text-align: left;
}

.resume-mode-picker button::before {
  content: "";
  grid-area: icon;
  align-self: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background-color: currentColor;
  background-image: none;
  -webkit-mask: var(--resume-mode-icon) center / 17px 17px no-repeat;
  mask: var(--resume-mode-icon) center / 17px 17px no-repeat;
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--blue) 10%, transparent);
}

.resume-mode-picker button[data-mode-icon="code-2"] { --resume-mode-icon: url("https://api.iconify.design/lucide/code-2.svg"); }
.resume-mode-picker button[data-mode-icon="pen-tool"] { --resume-mode-icon: url("https://api.iconify.design/lucide/pen-tool.svg"); }
.resume-mode-picker button[data-mode-icon="rocket"] { --resume-mode-icon: url("https://api.iconify.design/lucide/rocket.svg"); }
.resume-mode-picker button[data-mode-icon="clipboard-check"] { --resume-mode-icon: url("https://api.iconify.design/lucide/clipboard-check.svg"); }
.resume-mode-picker button[data-mode-icon="graduation-cap"] { --resume-mode-icon: url("https://api.iconify.design/lucide/graduation-cap.svg"); }
.resume-mode-picker button[data-mode-icon="landmark"] { --resume-mode-icon: url("https://api.iconify.design/lucide/landmark.svg"); }
.resume-mode-picker button[data-mode-icon="chart-no-axes-column"] { --resume-mode-icon: url("https://api.iconify.design/lucide/chart-no-axes-column.svg"); }
.resume-mode-picker button[data-mode-icon="hand-coins"] { --resume-mode-icon: url("https://api.iconify.design/lucide/hand-coins.svg"); }
.resume-mode-picker button[data-mode-icon="file-pen-line"] { --resume-mode-icon: url("https://api.iconify.design/lucide/file-pen-line.svg"); }

.resume-mode-picker button strong {
  grid-area: title;
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-mode-picker button small {
  grid-area: copy;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-mode-picker button.is-active,
.resume-rewrite-toolbar button:hover {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, white);
  color: var(--blue);
}

.resume-auto-field textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.35;
  overflow: hidden;
}

.resume-target-ideas {
  display: grid;
  gap: 8px;
  max-height: 172px;
  overflow: auto;
  border: 1px dashed color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 14px;
  padding: 12px;
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
}

.resume-target-ideas strong {
  color: var(--ink);
  font-size: 13px;
}

.resume-target-ideas div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resume-target-ideas button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--surface) 94%, white);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.resume-target-ideas button::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  background: currentColor;
  -webkit-mask: var(--idea-icon, url("https://api.iconify.design/lucide/sparkles.svg")) center / contain no-repeat;
  mask: var(--idea-icon, url("https://api.iconify.design/lucide/sparkles.svg")) center / contain no-repeat;
}

.resume-target-ideas button[data-target-field="target_role"] { --idea-icon: url("https://api.iconify.design/lucide/badge-user.svg"); }
.resume-target-ideas button[data-target-field="target_scope"] { --idea-icon: url("https://api.iconify.design/lucide/tags.svg"); }
.resume-target-ideas button[data-target-field="work_format"] { --idea-icon: url("https://api.iconify.design/lucide/map-pin.svg"); }
.resume-target-ideas button[data-target-field="value_offer"] { --idea-icon: url("https://api.iconify.design/lucide/sparkles.svg"); }

.resume-target-ideas button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

.resume-ats-panel,
.resume-live-preview {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, #16a34a 10%, transparent), transparent 45%),
    color-mix(in srgb, var(--surface) 94%, white);
}

.resume-ats-score {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-weight: 850;
}

.resume-ats-score strong {
  color: var(--ink);
  font-size: 24px;
}

.resume-keyword-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.resume-keyword-cloud span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.resume-keyword-cloud .is-hit {
  border-color: color-mix(in srgb, #16a34a 42%, var(--line));
  background: color-mix(in srgb, #16a34a 10%, var(--surface));
  color: #15803d;
}

.resume-keyword-cloud .is-missing {
  border-color: color-mix(in srgb, var(--pink) 38%, var(--line));
  background: color-mix(in srgb, var(--pink) 8%, var(--surface));
  color: var(--pink);
}

.resume-ats-panel ul,
.resume-photo-checklist {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.resume-ats-panel li,
.resume-photo-checklist li {
  border-radius: 10px;
  padding: 7px 9px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  background: color-mix(in srgb, var(--line) 32%, transparent);
}

.resume-ats-panel li.is-ok,
.resume-photo-checklist li.is-ok {
  color: #15803d;
  background: color-mix(in srgb, #16a34a 10%, var(--surface));
}

.resume-ats-panel li.is-warn,
.resume-photo-checklist li.is-warn {
  color: var(--pink);
  background: color-mix(in srgb, var(--pink) 8%, var(--surface));
}

.resume-live-preview {
  position: relative;
  overflow: hidden;
  min-height: 150px;
}

.resume-live-preview::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: linear-gradient(90deg, var(--blue), #16a34a, var(--pink));
}

.resume-live-preview div {
  display: grid;
  gap: 2px;
  padding-top: 8px;
}

.resume-live-preview strong {
  color: var(--ink);
  font-size: 22px;
}

.resume-live-preview span,
.resume-live-preview p,
.resume-live-preview small {
  color: var(--muted);
}

.resume-live-preview p {
  margin: 0;
  line-height: 1.45;
}

.theme-dark .resume-step {
  background: rgba(8, 13, 26, 0.42);
  border-color: rgba(84, 102, 137, 0.45);
}

.resume-step-head {
  display: grid;
  gap: 3px;
}

.resume-step-head strong {
  color: var(--ink);
  font-size: 17px;
}

.resume-step-head small,
.resume-finish span {
  color: var(--muted);
}

.resume-smart-field {
  position: relative;
  gap: 7px;
}

.resume-content-grid {
  align-items: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resume-content-grid .field-wide {
  grid-column: 1 / -1;
}

.resume-details-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.resume-content-field {
  position: relative;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--blue) 8%, transparent), transparent 46%),
    color-mix(in srgb, var(--surface) 96%, white);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.045);
}

.resume-content-field::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
}

.resume-content-field::after {
  content: "";
  position: absolute;
  top: 21px;
  right: 21px;
  width: 16px;
  height: 16px;
  background: color-mix(in srgb, var(--blue) 84%, var(--ink));
  -webkit-mask: var(--content-icon, url("https://api.iconify.design/lucide/sparkles.svg")) center / contain no-repeat;
  mask: var(--content-icon, url("https://api.iconify.design/lucide/sparkles.svg")) center / contain no-repeat;
}

.resume-content-field[data-content-icon="sparkles"] { --content-icon: url("https://api.iconify.design/lucide/sparkles.svg"); }
.resume-content-field[data-content-icon="briefcase-business"] { --content-icon: url("https://api.iconify.design/lucide/briefcase-business.svg"); }
.resume-content-field[data-content-icon="graduation-cap"] { --content-icon: url("https://api.iconify.design/lucide/graduation-cap.svg"); }
.resume-content-field[data-content-icon="badge-check"] { --content-icon: url("https://api.iconify.design/lucide/badge-check.svg"); }
.resume-content-field[data-content-icon="trophy"] { --content-icon: url("https://api.iconify.design/lucide/trophy.svg"); }
.resume-content-field[data-content-icon="languages"] { --content-icon: url("https://api.iconify.design/lucide/languages.svg"); }

.resume-content-field > span,
.resume-content-field > small {
  padding-right: 42px;
}

.resume-field-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding-right: 42px;
}

.resume-field-actions .resume-rewrite-toolbar {
  grid-column: 1 / -1;
}

.resume-field-actions .resume-content-suggestions:first-child {
  grid-column: 1 / -1;
}

.resume-content-field textarea {
  min-height: 104px;
  resize: vertical;
  overflow: hidden;
  line-height: 1.45;
}

.resume-content-field.field-wide textarea {
  min-height: 132px;
}

.resume-details-grid .resume-content-field {
  align-content: start;
}

.resume-details-grid .resume-content-field > span {
  order: 1;
}

.resume-details-grid .resume-content-field > small {
  order: 2;
}

.resume-details-grid .resume-content-field textarea {
  order: 3;
  min-height: 104px;
}

.resume-details-grid .resume-field-actions {
  order: 4;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px;
  margin-top: 2px;
  border: 1px solid color-mix(in srgb, var(--pink) 16%, var(--line));
  border-radius: 12px;
  padding: 9px;
  background: color-mix(in srgb, var(--pink) 4%, rgba(255, 255, 255, 0.72));
}

.resume-details-grid .resume-content-suggestions,
.resume-details-grid .resume-rewrite-toolbar {
  gap: 6px;
}

.resume-details-grid .resume-rewrite-toolbar {
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--pink) 14%, var(--line));
}

.resume-details-grid .resume-content-suggestions button,
.resume-details-grid .resume-rewrite-toolbar button,
.resume-details-grid .resume-example {
  min-height: 26px;
  padding: 4px 8px;
  font-size: 11.5px;
}

.resume-content-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.resume-content-suggestions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  color: color-mix(in srgb, var(--blue) 82%, var(--ink));
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 8px 18px rgba(37, 99, 235, 0.06);
}

.resume-content-suggestions button:hover {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
}

.resume-content-suggestions button::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  background: currentColor;
  -webkit-mask: url("https://api.iconify.design/lucide/wand-sparkles.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/wand-sparkles.svg") center / contain no-repeat;
}

.resume-content-quality {
  display: grid;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 12px;
  padding: 10px;
  background: color-mix(in srgb, var(--blue) 5%, var(--surface));
}

.resume-content-quality span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.resume-content-quality strong {
  color: var(--ink);
  font-size: 24px;
}

.resume-content-quality div {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 13%, var(--line));
}

.resume-content-quality i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pink), var(--blue), #16a34a);
}

.resume-smart-field small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.resume-example {
  justify-self: start;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--pink) 34%, var(--line));
  border-radius: 999px;
  padding: 5px 10px;
  background: color-mix(in srgb, var(--pink) 8%, var(--surface));
  color: color-mix(in srgb, var(--pink) 78%, var(--ink));
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.resume-example:hover {
  background: color-mix(in srgb, var(--pink) 13%, var(--surface));
}

.resume-coach {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 14px;
  padding: 14px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 52%),
    color-mix(in srgb, var(--surface) 92%, #ffffff);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.resume-coach-head {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.resume-coach-head p {
  margin-bottom: 0;
}

.resume-score-block {
  display: grid;
  gap: 7px;
}

.resume-coach strong {
  color: var(--ink);
}

.resume-coach p,
.resume-coach li,
.resume-coach small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.resume-coach ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
}

.resume-account-card,
.resume-account-avatar-option {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--pink) 24%, var(--line));
  border-radius: 14px;
  padding: 10px;
  background: color-mix(in srgb, var(--pink) 7%, var(--surface));
}

.resume-account-card {
  grid-template-columns: 42px minmax(0, 1fr);
}

.resume-account-card img,
.resume-account-avatar-option img {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
}

.resume-account-card div,
.resume-account-avatar-option div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.resume-account-card b,
.resume-account-avatar-option strong {
  overflow: hidden;
  color: var(--ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-account-card small,
.resume-account-avatar-option small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-account-avatar-option.is-selected {
  border-color: color-mix(in srgb, var(--green, #16a34a) 42%, var(--line));
  background: color-mix(in srgb, #16a34a 8%, var(--surface));
}

.resume-account-avatar-option .secondary-action.is-active,
.resume-account-card .secondary-action {
  min-height: 34px;
  padding: 7px 10px;
  white-space: nowrap;
}

.resume-account-card .secondary-action {
  grid-column: 1 / -1;
  justify-self: stretch;
}

.resume-score {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--line));
}

.resume-score span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #16a34a);
  transition: width 180ms ease;
}

.theme-dark .resume-coach {
  border-color: rgba(84, 102, 137, 0.45);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 54%),
    rgba(8, 13, 26, 0.72);
}

.theme-dark .resume-ai-strip,
.theme-dark .resume-account-card,
.theme-dark .resume-account-avatar-option,
.theme-dark .resume-ats-panel,
.theme-dark .resume-live-preview,
.theme-dark .resume-mode-picker button,
.theme-dark .resume-rewrite-toolbar button,
.theme-dark .resume-content-field,
.theme-dark .resume-content-quality {
  border-color: rgba(84, 102, 137, 0.48);
  background: rgba(8, 13, 26, 0.72);
}

.theme-dark .resume-content-field::before {
  background: rgba(45, 69, 117, 0.5);
}

.theme-dark .resume-content-suggestions button {
  border-color: rgba(244, 63, 94, 0.42);
  background: rgba(244, 63, 94, 0.1);
}

.resume-photo-editor {
  display: grid;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--pink) 28%, var(--line));
  border-radius: 16px;
  padding: 16px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--pink) 12%, transparent), transparent 45%),
    color-mix(in srgb, var(--surface) 94%, white);
}

.resume-photo-editor[hidden] {
  display: none;
}

.resume-photo-copy {
  display: grid;
  gap: 4px;
}

.resume-photo-copy strong {
  color: var(--ink);
  font-size: 16px;
}

.resume-photo-copy small,
.resume-photo-controls small {
  color: var(--muted);
  line-height: 1.45;
}

.resume-photo-workbench {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
}

.resume-photo-stage {
  position: relative;
  width: 180px;
  aspect-ratio: 1;
  overflow: hidden;
  border: 4px solid color-mix(in srgb, var(--pink) 28%, white);
  border-radius: 999px;
  background: #111827;
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.16);
  touch-action: none;
}

.resume-photo-stage canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}

.resume-photo-stage canvas:active {
  cursor: grabbing;
}

.resume-photo-crosshair {
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: inherit;
}

.resume-photo-controls {
  display: grid;
  gap: 10px;
}

.resume-photo-controls .field {
  gap: 8px;
}

.resume-photo-controls input[type="range"] {
  width: 100%;
  accent-color: var(--pink);
}

.theme-dark .resume-photo-editor {
  border-color: rgba(84, 102, 137, 0.48);
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--pink) 14%, transparent), transparent 45%),
    rgba(8, 13, 26, 0.72);
}

@media (max-width: 980px) {
  .resume-step-layout {
    grid-template-columns: 1fr;
  }

  .resume-coach {
    position: static;
  }

  .resume-steps {
    width: 100%;
    padding-bottom: 2px;
  }
}

@media (max-width: 760px) {
  .resume-profile-grid,
  .resume-grid {
    grid-template-columns: 1fr;
  }

  body.is-mobile-workspace .resume-wizard {
    padding-bottom: 76px;
  }

  .resume-photo-workbench {
    grid-template-columns: 1fr;
  }

  .resume-photo-stage {
    justify-self: center;
  }

  .resume-target-grid,
  .resume-mode-picker {
    grid-template-columns: 1fr;
  }

  .resume-wide-step .resume-coach ul {
    grid-template-columns: 1fr;
  }

  .resume-field-actions {
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .resume-target-ideas button span {
    white-space: normal;
  }

  .resume-account-card,
  .resume-account-avatar-option {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .resume-account-card button,
  .resume-account-avatar-option button {
    grid-column: 1 / -1;
  }
}

.resume-finish {
  display: grid;
  gap: 14px;
}

.resume-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.legacy-resume-panel {
  display: none !important;
}

.resume-template-native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.resume-step label:has([data-template-select]) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.resume-template-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 14px;
}

.resume-template-picker button {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 10px;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 18px;
  padding: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--blue) 2%, #ffffff));
  color: var(--text);
  text-align: left;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.resume-template-picker button .resume-template-number {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 999px;
  background:
    linear-gradient(180deg, color-mix(in srgb, #ffffff 86%, transparent), color-mix(in srgb, var(--blue) 10%, #ffffff));
  color: color-mix(in srgb, var(--blue) 78%, #16a34a);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
}

.resume-template-picker button strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-template-preview {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 0.72;
  min-height: 210px;
  max-height: none;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 4%, #ffffff), #ffffff);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.76),
    0 12px 24px rgba(15, 23, 42, 0.05);
}

.resume-template-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.resume-template-preview i {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: #cbd5e1;
}

.resume-preview-photo {
  width: 25%;
  aspect-ratio: 1;
  left: 9%;
  top: 8%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.86);
  background:
    radial-gradient(circle at 50% 35%, #f8d7bd 0 19%, transparent 20%),
    radial-gradient(circle at 50% 82%, #1d4ed8 0 34%, transparent 35%),
    linear-gradient(135deg, #dbeafe, #f8fafc);
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.resume-preview-name {
  left: 40%;
  right: 11%;
  top: 10%;
  height: 8%;
  background: #0f172a;
}

.resume-preview-role {
  left: 40%;
  right: 24%;
  top: 21%;
  height: 4%;
  background: color-mix(in srgb, var(--blue) 58%, #94a3b8);
}

.resume-preview-line {
  height: 3%;
  background: #cbd5e1;
}

.resume-preview-line-a {
  left: 9%;
  right: 12%;
  top: 36%;
}

.resume-preview-line-b {
  left: 9%;
  right: 24%;
  top: 43%;
}

.resume-preview-line-c {
  left: 9%;
  right: 17%;
  top: 50%;
}

.resume-preview-block {
  height: 4%;
  background: color-mix(in srgb, var(--blue) 20%, #e2e8f0);
}

.resume-preview-block-a {
  left: 9%;
  right: 45%;
  top: 63%;
}

.resume-preview-block-b {
  left: 9%;
  right: 18%;
  top: 71%;
}

.resume-preview-block-c {
  left: 9%;
  right: 34%;
  top: 79%;
}

.resume-preview-skill {
  height: 5%;
  background: color-mix(in srgb, var(--blue) 18%, #f1f5f9);
}

.resume-preview-skill-a {
  left: 9%;
  width: 22%;
  bottom: 8%;
}

.resume-preview-skill-b {
  left: 35%;
  width: 18%;
  bottom: 8%;
}

.resume-preview-skill-c {
  left: 57%;
  width: 26%;
  bottom: 8%;
}

.resume-template-card.is-2 .resume-template-preview {
  background: linear-gradient(90deg, #0f172a 0 30%, #ffffff 30%);
}

.resume-template-card.is-2 .resume-preview-photo {
  left: 7%;
  background:
    radial-gradient(circle at 50% 34%, #ffd7bd 0 18%, transparent 19%),
    radial-gradient(circle at 50% 82%, #64748b 0 35%, transparent 36%),
    linear-gradient(135deg, #e2e8f0, #ffffff);
}

.resume-template-card.is-2 .resume-preview-skill {
  background: #f8fafc;
}

.resume-template-card.is-2 .resume-preview-name {
  left: 37%;
  background: #111827;
}

.resume-template-card.is-3 .resume-template-preview {
  background:
    radial-gradient(circle at 15% 12%, #f97316 0 12%, transparent 13%),
    radial-gradient(circle at 88% 22%, #14b8a6 0 11%, transparent 12%),
    #ffffff;
}

.resume-template-card.is-3 .resume-preview-photo {
  width: 30%;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 35%, #f1c6a7 0 18%, transparent 19%),
    radial-gradient(circle at 52% 80%, #ef4444 0 34%, transparent 35%),
    linear-gradient(135deg, #fde68a, #ccfbf1);
}

.resume-template-card.is-4 .resume-template-preview {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 16%, #ffffff) 0 24%, #ffffff 24%);
}

.resume-template-card.is-4 .resume-preview-photo {
  left: 68%;
  top: 9%;
}

.resume-template-card.is-4 .resume-preview-name,
.resume-template-card.is-4 .resume-preview-role {
  left: 10%;
  right: 38%;
}

.resume-template-card.is-5 .resume-template-preview {
  background:
    linear-gradient(90deg, rgba(37, 99, 235, 0.08) 1px, transparent 1px),
    linear-gradient(180deg, rgba(37, 99, 235, 0.08) 1px, transparent 1px),
    #f8fbff;
  background-size: 12px 12px;
}

.resume-template-card.is-5 .resume-preview-photo {
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 35%, #d6b394 0 18%, transparent 19%),
    radial-gradient(circle at 50% 82%, #0f172a 0 35%, transparent 36%),
    linear-gradient(135deg, #bfdbfe, #ffffff);
}

.resume-template-card.is-6 .resume-template-preview {
  background: #ffffff;
}

.resume-template-card.is-6 .resume-preview-photo,
.resume-template-card.is-6 .resume-preview-skill {
  display: none;
}

.resume-template-card.is-6 .resume-preview-name,
.resume-template-card.is-6 .resume-preview-role,
.resume-template-card.is-6 .resume-preview-line,
.resume-template-card.is-6 .resume-preview-block {
  left: 15%;
}

.resume-template-card.is-7 .resume-template-preview {
  background: linear-gradient(90deg, #111827 0 36%, #fffaf0 36%);
}

.resume-template-card.is-7 .resume-preview-photo {
  left: 7%;
  background:
    radial-gradient(circle at 50% 35%, #e8b99b 0 18%, transparent 19%),
    radial-gradient(circle at 50% 82%, #b45309 0 35%, transparent 36%),
    linear-gradient(135deg, #fde68a, #fff7ed);
}

.resume-template-card.is-7 .resume-preview-name,
.resume-template-card.is-7 .resume-preview-role {
  background: #b45309;
}

.resume-template-card.is-8 .resume-template-preview {
  background: linear-gradient(180deg, #ffffff 0 18%, color-mix(in srgb, var(--blue) 7%, #ffffff) 18% 100%);
}

.resume-template-card.is-8 .resume-preview-photo {
  width: 18%;
  left: 72%;
}

.resume-template-card.is-8 .resume-preview-name,
.resume-template-card.is-8 .resume-preview-role {
  left: 10%;
  right: 34%;
}

.resume-template-card.is-9 .resume-template-preview {
  background: #f8fafc;
}

.resume-template-card.is-9 .resume-preview-photo,
.resume-template-card.is-9 .resume-preview-role,
.resume-template-card.is-9 .resume-preview-skill {
  background: #94a3b8;
}

.resume-template-card.is-10 .resume-template-preview {
  background: linear-gradient(90deg, #ffffff 0 68%, #f8fafc 68%);
}

.resume-template-card.is-10 .resume-preview-name,
.resume-template-card.is-10 .resume-preview-role {
  left: 9%;
}

.resume-template-card.is-10 .resume-preview-photo {
  display: none;
}

.resume-template-card.is-11 .resume-template-preview {
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 18%, #ffffff), #ffffff 46%);
}

.resume-template-card.is-11 .resume-preview-photo {
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 35%, #f2c7a5 0 18%, transparent 19%),
    radial-gradient(circle at 50% 82%, #7c3aed 0 35%, transparent 36%),
    linear-gradient(135deg, #ddd6fe, #ffffff);
}

.resume-template-card.is-11 .resume-preview-block {
  height: 6%;
  border-radius: 6px;
}

.resume-template-card.is-12 .resume-template-preview {
  background: linear-gradient(90deg, #ecfdf5 0 28%, #ffffff 28%);
}

.resume-template-card.is-12 .resume-preview-photo {
  left: 7%;
  background:
    radial-gradient(circle at 50% 35%, #e7b896 0 18%, transparent 19%),
    radial-gradient(circle at 50% 82%, #047857 0 35%, transparent 36%),
    linear-gradient(135deg, #bbf7d0, #ffffff);
}

.resume-template-card.is-12 .resume-preview-name,
.resume-template-card.is-12 .resume-preview-role,
.resume-template-card.is-12 .resume-preview-block {
  background: #047857;
}

.resume-template-card.is-13 .resume-template-preview {
  background: #fff;
}

.resume-template-card.is-13 .resume-preview-photo {
  display: none;
}

.resume-template-card.is-13 .resume-preview-name {
  left: 14%;
  right: 14%;
  top: 9%;
}

.resume-template-card.is-13 .resume-preview-role {
  left: 26%;
  right: 26%;
  top: 19%;
}

.resume-template-card.is-14 .resume-template-preview {
  background:
    repeating-linear-gradient(180deg, transparent 0 11px, rgba(148, 163, 184, 0.14) 11px 12px),
    #ffffff;
}

.resume-template-card.is-14 .resume-preview-photo {
  width: 17%;
}

.resume-template-card.is-14 .resume-preview-line,
.resume-template-card.is-14 .resume-preview-block,
.resume-template-card.is-14 .resume-preview-skill {
  height: 2.5%;
}

.resume-template-picker button:hover {
  border-color: color-mix(in srgb, var(--blue) 40%, var(--line));
  transform: translateY(-2px);
  box-shadow: 0 22px 48px color-mix(in srgb, var(--blue) 12%, transparent);
}

.resume-template-picker button.is-selected {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  background:
    radial-gradient(circle at 14% 0%, color-mix(in srgb, #22c55e 13%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, #ffffff), rgba(255, 255, 255, 0.95));
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--blue) 10%, transparent),
    0 22px 52px color-mix(in srgb, var(--blue) 12%, transparent);
}

.resume-template-picker button.is-selected .resume-template-preview {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
}

.resume-template-picker button.is-selected .resume-template-number {
  background: linear-gradient(180deg, #dcfce7, #bbf7d0);
  color: #059669;
}

.theme-dark .resume-template-picker button {
  background: rgba(8, 13, 26, 0.62);
  border-color: rgba(84, 102, 137, 0.45);
}

.theme-dark .resume-template-picker button:hover {
  border-color: color-mix(in srgb, var(--blue) 48%, white);
  background: rgba(17, 26, 46, 0.96);
}

.theme-dark .resume-template-picker button.is-selected {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 22%, transparent), transparent),
    rgba(17, 26, 46, 0.9);
}

.field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.ai-option {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid #d7e1ec;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.6);
}

.ai-option input {
  width: 18px;
  min-height: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

.ai-option span {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

.choice-row legend {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  margin-bottom: 5px;
}

.choice-row label {
  position: relative;
  min-width: 0;
}

.choice-row input {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.choice-row span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #d7e1ec;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.choice-row input:checked + span {
  border-color: color-mix(in srgb, var(--blue) 56%, #c7d2fe);
  background: color-mix(in srgb, var(--blue) 11%, #ffffff);
  color: color-mix(in srgb, var(--blue) 72%, var(--ink));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 10%, transparent);
}

.choice-row input:focus-visible + span {
  outline: 3px solid color-mix(in srgb, var(--blue) 18%, transparent);
  outline-offset: 2px;
}

.choice-row label:hover span {
  border-color: color-mix(in srgb, var(--blue) 36%, #d7e1ec);
}

.youtube-prepare-form {
  align-items: end;
  gap: 10px 14px;
}

.youtube-prepare-form .field {
  gap: 5px;
}

.youtube-prepare-form .field > span,
.youtube-prepare-form .choice-row legend {
  font-size: 12px;
  line-height: 1.2;
}

.youtube-prepare-form input {
  min-height: 36px;
  border-radius: 10px;
  padding: 8px 11px;
}

.youtube-prepare-form .youtube-speed-field {
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px !important;
}

.youtube-prepare-form .is-mode-hidden,
.youtube-prepare-form [hidden] {
  display: none !important;
}

.youtube-prepare-form .choice-row span {
  min-height: 34px;
  border-radius: 10px;
  padding: 7px 9px;
  font-size: 12px;
}

.youtube-speed-field label[data-speed-icon] span {
  gap: 6px;
}

.youtube-speed-field label[data-speed-icon] span::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: var(--speed-color, var(--blue));
  -webkit-mask: var(--speed-icon) center / contain no-repeat;
  mask: var(--speed-icon) center / contain no-repeat;
}

.youtube-speed-field label[data-speed-icon="auto"] {
  --speed-color: #2563eb;
  --speed-icon: url("https://api.iconify.design/lucide/gauge.svg");
}

.youtube-speed-field label[data-speed-icon="fast"] {
  --speed-color: #f97316;
  --speed-icon: url("https://api.iconify.design/lucide/bolt.svg");
}

.youtube-speed-field label[data-speed-icon="smart"] {
  --speed-color: #7c3aed;
  --speed-icon: url("https://api.iconify.design/lucide/sparkles.svg");
}

.youtube-speed-field label[data-speed-icon="pro"] {
  --speed-color: #db2777;
  --speed-icon: url("https://api.iconify.design/lucide/badge-check.svg");
}

.youtube-prepare-form .ai-option {
  min-height: 36px;
  border-radius: 10px;
  padding: 8px 10px;
}

.youtube-prepare-form .ai-option input {
  min-height: 16px;
  width: 16px;
  height: 16px;
  padding: 0;
}

.youtube-prepare-form .primary-action {
  min-height: 38px;
  align-self: end;
}

.theme-dark .choice-row span {
  border-color: rgba(148, 163, 184, 0.32);
  background: rgba(15, 23, 42, 0.58);
}

.theme-dark .choice-row input:checked + span {
  border-color: color-mix(in srgb, var(--blue) 62%, #64748b);
  background: color-mix(in srgb, var(--blue) 20%, rgba(15, 23, 42, 0.78));
  color: #f8fafc;
}

.theme-dark .youtube-speed-field label[data-speed-icon] span::before {
  background: color-mix(in srgb, var(--speed-color, var(--blue)) 82%, #ffffff);
}

.subtitle-language-picker {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 0;
  padding: 0;
}

.subtitle-language-picker legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.subtitle-language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 10px;
}

.subtitle-language-option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid #d7e1ec;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--text);
  font-size: 13px;
  font-weight: 780;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.subtitle-language-option:hover {
  border-color: color-mix(in srgb, var(--blue) 40%, #d7e1ec);
  transform: translateY(-1px);
}

.subtitle-language-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subtitle-language-option span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtitle-language-flag {
  flex: 0 0 auto;
  width: 28px;
  height: 20px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 5px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.subtitle-language-auto {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 20px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--blue) 12%, #ffffff);
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.subtitle-language-option:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--blue) 24%, transparent);
  outline-offset: 2px;
}

.subtitle-language-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--blue) 58%, #d7e1ec);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 13%, transparent), transparent),
    rgba(255, 255, 255, 0.92);
  color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent), 0 14px 34px rgba(37, 99, 235, 0.12);
}

.theme-dark .subtitle-language-option {
  border-color: rgba(84, 102, 137, 0.42);
  background: rgba(8, 13, 26, 0.72);
  color: var(--text);
}

.theme-dark .subtitle-language-option:hover {
  border-color: color-mix(in srgb, var(--blue) 48%, white);
  background: rgba(17, 26, 46, 0.96);
}

.theme-dark .subtitle-language-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--blue) 64%, white);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 22%, transparent), transparent),
    rgba(17, 26, 46, 0.94);
  color: #ffffff;
}

.theme-dark .subtitle-language-flag {
  border-color: rgba(226, 232, 240, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

.theme-dark .subtitle-language-auto {
  background: color-mix(in srgb, var(--blue) 28%, #111a2e);
  color: #dbeafe;
}

.subtitle-style-picker {
  display: grid;
  gap: 10px;
  margin: 0;
  border: 0;
  padding: 0;
}

.subtitle-style-picker legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.subtitle-style-current {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 88px;
  padding: 12px;
  border: 1px solid #d7e1ec;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.subtitle-style-current:hover,
.subtitle-style-picker.is-open .subtitle-style-current {
  border-color: color-mix(in srgb, var(--blue) 52%, #d7e1ec);
  box-shadow: 0 16px 34px rgba(37, 99, 235, 0.12);
  transform: translateY(-1px);
}

.subtitle-style-current.is-pulse {
  animation: subtitleStylePulse 0.34s ease;
}

.subtitle-style-current b,
.subtitle-style-copy b {
  display: block;
  font-size: 14px;
  font-weight: 850;
}

.subtitle-style-current small,
.subtitle-style-copy small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.subtitle-style-menu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 0.24s ease, opacity 0.2s ease, transform 0.2s ease;
}

.subtitle-style-picker.is-open .subtitle-style-menu {
  max-height: 1500px;
  opacity: 1;
  transform: translateY(0);
}

.subtitle-style-card {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7e1ec;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.74);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.subtitle-style-card:hover,
.subtitle-style-card.is-selected {
  border-color: color-mix(in srgb, var(--blue) 58%, #d7e1ec);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.1);
  transform: translateY(-1px);
}

.subtitle-style-card button {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border: 0;
  background: transparent;
  color: inherit;
  min-height: 102px;
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
}

.subtitle-style-card a {
  display: inline-grid;
  place-items: center;
  min-width: 0;
  min-height: 34px;
  padding: 8px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.24);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}

.subtitle-style-card a:hover {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
}

.subtitle-style-copy {
  min-width: 0;
}

.subtitle-style-copy b,
.subtitle-style-copy small,
.subtitle-style-current > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.subtitle-style-swatch {
  position: relative;
  display: grid;
  place-items: end center;
  min-width: 0;
  min-height: 62px;
  padding: 9px;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(circle at 22% 16%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.58)),
    linear-gradient(135deg, #334155, #0f172a);
  color: #ffffff;
}

.subtitle-style-swatch b {
  position: relative;
  max-width: 100%;
  overflow: hidden;
  color: #ffffff;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.74), 0 0 12px rgba(255, 255, 255, 0.16);
  white-space: nowrap;
}

.subtitle-style-swatch.is-pop { background: radial-gradient(circle at 70% 18%, #f97316, transparent 24%), linear-gradient(145deg, #1d4ed8, #0f172a 72%); }
.subtitle-style-swatch.is-neon { background: radial-gradient(circle at 70% 16%, #06b6d4, transparent 26%), linear-gradient(145deg, #4c1d95, #0b1024 74%); }
.subtitle-style-swatch.is-neon b { color: #fff; text-shadow: 0 0 8px #22d3ee, 0 0 18px #f0abfc, 0 2px 0 #020617; }
.subtitle-style-swatch.is-candy { background: radial-gradient(circle at 70% 18%, #fb7185, transparent 25%), radial-gradient(circle at 26% 24%, #facc15, transparent 22%), linear-gradient(145deg, #7c3aed, #111827 78%); }
.subtitle-style-swatch.is-candy b { color: #ffffff; text-shadow: 2px 2px 0 #672c92, -1px -1px 0 #672c92, 0 0 12px rgba(255, 118, 216, 0.52); }
.subtitle-style-swatch.is-kinetic { background: radial-gradient(circle at 72% 18%, #facc15, transparent 22%), linear-gradient(145deg, #dc2626, #111827 76%); }
.subtitle-style-swatch.is-kinetic b { transform: rotate(-2deg); }
.subtitle-style-swatch.is-bounce { background: radial-gradient(circle at 70% 18%, #f59e0b, transparent 24%), linear-gradient(145deg, #22c55e, #0f766e 74%); }
.subtitle-style-swatch.is-bounce b { animation: subtitleMiniBounce 1.2s ease infinite; }
.subtitle-style-swatch.is-comic { background: radial-gradient(circle at 70% 18%, #ef4444, transparent 24%), radial-gradient(circle at 28% 28%, #facc15, transparent 24%), linear-gradient(145deg, #1e3a8a, #111827 78%); }
.subtitle-style-swatch.is-comic b { letter-spacing: 0.02em; text-shadow: 2px 2px 0 #020617, -1px -1px 0 #020617; }
.subtitle-style-swatch.is-clean { background: linear-gradient(145deg, #475569, #1f2937 72%); }
.subtitle-style-swatch.is-minimal { background: linear-gradient(145deg, #f8fafc, #cbd5e1); }
.subtitle-style-swatch.is-minimal b { color: #0f172a; text-shadow: none; font-weight: 750; }
.subtitle-style-swatch.is-editorial { background: linear-gradient(145deg, #334155, #111827 74%); }
.subtitle-style-swatch.is-typewriter { background: linear-gradient(145deg, #f4f4f5, #a1a1aa); }
.subtitle-style-swatch.is-typewriter b { color: #18181b; font-family: "Courier New", monospace; text-shadow: none; }
.subtitle-style-swatch.is-headline { background: radial-gradient(circle at 70% 18%, #991b1b, transparent 24%), linear-gradient(145deg, #020617, #111827 72%); }
.subtitle-style-swatch.is-headline b { text-transform: uppercase; }
.subtitle-style-swatch.is-luxury { background: radial-gradient(circle at 72% 18%, #f5e8c7, transparent 24%), linear-gradient(145deg, #57534e, #18181b 72%); }
.subtitle-style-swatch.is-luxury b { font-family: Georgia, serif; }
.subtitle-style-swatch.is-mono { background: linear-gradient(145deg, #064e3b, #020617 72%); }
.subtitle-style-swatch.is-mono b { color: #86efac; font-family: "Courier New", monospace; text-shadow: 0 0 10px rgba(134, 239, 172, 0.42); }
.subtitle-style-swatch.is-soft { background: linear-gradient(145deg, #fed7aa, #ffe4e6 54%, #bae6fd); }
.subtitle-style-swatch.is-soft b { color: #7c2d12; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72); }

.theme-dark .subtitle-style-current,
.theme-dark .subtitle-style-card {
  border-color: rgba(84, 102, 137, 0.42);
  background: rgba(8, 13, 26, 0.72);
}

.theme-dark .subtitle-style-card:hover,
.theme-dark .subtitle-style-card.is-selected,
.theme-dark .subtitle-style-picker.is-open .subtitle-style-current {
  border-color: color-mix(in srgb, var(--blue) 58%, white);
  background: rgba(17, 26, 46, 0.94);
}

@keyframes subtitleStylePulse {
  0% { transform: scale(0.99); }
  55% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

@keyframes subtitleMiniBounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-3px); }
}

.subtitle-style-current {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  grid-template-columns: minmax(150px, 0.36fr) minmax(0, 1fr);
  min-height: 128px;
  border-color: color-mix(in srgb, var(--blue) 18%, #d7e1ec);
  border-radius: 14px;
  padding: 16px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74)),
    url("https://images.unsplash.com/photo-1495567720989-cebdbdd97913?auto=format&fit=crop&w=1200&q=70") center / cover;
  box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
  outline: none;
}

.subtitle-style-current:focus-visible,
.subtitle-style-card button:focus-visible,
.subtitle-style-card a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--blue) 22%, transparent);
  outline-offset: 2px;
}

.subtitle-style-current::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 16% 22%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 30%),
    linear-gradient(120deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.56));
  pointer-events: none;
}

.subtitle-style-current:hover,
.subtitle-style-picker.is-open .subtitle-style-current {
  border-color: color-mix(in srgb, var(--blue) 50%, #d7e1ec);
  box-shadow: 0 22px 52px color-mix(in srgb, var(--blue) 16%, transparent);
}

.subtitle-style-current .subtitle-style-swatch {
  min-height: 92px;
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.22);
}

.subtitle-style-current b {
  font-size: 18px;
}

.subtitle-style-current small {
  max-width: 520px;
  font-size: 13px;
}

.subtitle-style-menu {
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 10px;
}

.subtitle-style-picker.is-open .subtitle-style-menu {
  max-height: 1900px;
}

.subtitle-style-card {
  grid-template-rows: 1fr;
  border-color: color-mix(in srgb, var(--blue) 12%, #d7e1ec);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.88));
}

.subtitle-style-card:hover,
.subtitle-style-card.is-selected {
  border-color: color-mix(in srgb, var(--blue) 52%, #d7e1ec);
  background: #ffffff;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--blue) 13%, transparent);
}

.subtitle-style-card.is-selected::after {
  content: "";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    url("https://api.iconify.design/lucide/check.svg?color=white") center / 13px 13px no-repeat,
    var(--blue);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 28%, transparent);
}

.subtitle-style-card button {
  grid-template-columns: 1fr;
  gap: 10px;
  min-height: 154px;
  padding: 10px;
}

.subtitle-style-card .subtitle-style-swatch {
  width: 100%;
  min-height: 84px;
  border-radius: 10px;
}

.subtitle-style-card .subtitle-style-copy {
  padding: 0 2px 28px;
}

.subtitle-style-card a {
  position: absolute;
  left: 10px;
  bottom: 9px;
  min-height: 24px;
  border: 0;
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  font-size: 11px;
}

.subtitle-style-card a:hover {
  background: color-mix(in srgb, var(--blue) 15%, #ffffff);
}

.subtitle-style-swatch {
  place-items: center;
  box-shadow: inset 0 -42px 70px rgba(2, 6, 23, 0.42);
}

.theme-dark .subtitle-style-current {
  background:
    linear-gradient(90deg, rgba(8, 13, 26, 0.92), rgba(17, 26, 46, 0.76)),
    url("https://images.unsplash.com/photo-1495567720989-cebdbdd97913?auto=format&fit=crop&w=1200&q=70") center / cover;
}

.theme-dark .subtitle-style-card {
  background: rgba(17, 26, 46, 0.84);
}

.subtitle-style-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 8%, rgba(37, 99, 235, 0.1), transparent 26%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(226, 232, 240, 0.72)),
    #f8fafc;
}

.theme-dark.subtitle-style-page {
  background:
    linear-gradient(180deg, rgba(8, 13, 26, 0.98), rgba(15, 23, 42, 0.96)),
    #080d1a;
}

.subtitle-style-detail {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(300px, 0.8fr);
  align-items: center;
  gap: 34px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 64px;
}

.subtitle-style-hero {
  justify-self: center;
  width: min(430px, 100%);
  border-radius: 24px;
  padding: 12px;
  background:
    linear-gradient(180deg, #172033, #020617),
    #0f172a;
  box-shadow: 0 30px 86px rgba(15, 23, 42, 0.26);
}

.subtitle-style-video-frame {
  position: relative;
  display: grid;
  place-items: end center;
  aspect-ratio: 9 / 16;
  min-height: 0;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(15, 23, 42, 0.04), rgba(15, 23, 42, 0.7)),
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.62), transparent 12%),
    linear-gradient(145deg, #2563eb, #f97316 54%, #111827);
}

.subtitle-style-video-scene {
  position: absolute;
  inset: 0;
  opacity: 0.8;
}

.subtitle-style-video-scene span {
  position: absolute;
  display: block;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.subtitle-style-video-scene span:nth-child(1) {
  width: 46%;
  height: 20%;
  left: 12%;
  top: 16%;
}

.subtitle-style-video-scene span:nth-child(2) {
  width: 34%;
  height: 34%;
  right: 10%;
  top: 33%;
  background: rgba(2, 6, 23, 0.2);
}

.subtitle-style-video-scene span:nth-child(3) {
  width: 72%;
  height: 18%;
  left: 14%;
  bottom: 11%;
  background: rgba(2, 6, 23, 0.26);
}

.subtitle-style-video-bars {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  pointer-events: none;
}

.subtitle-style-demo-line {
  position: relative;
  display: inline-block;
  max-width: 86%;
  margin-bottom: 18%;
  color: #ffffff;
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 950;
  line-height: 1.04;
  text-align: center;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.72), 0 14px 38px rgba(0, 0, 0, 0.3);
}

.subtitle-style-demo-line span {
  display: inline;
}

.subtitle-style-demo-line.is-neon { text-shadow: 0 0 16px #22d3ee, 0 0 36px #f0abfc, 0 4px 0 #020617; }
.subtitle-style-demo-line.is-candy {
  color: #ffffff;
  text-shadow:
    3px 3px 0 #672c92,
    -2px -2px 0 #672c92,
    0 0 18px rgba(255, 118, 216, 0.55),
    0 12px 34px rgba(23, 10, 38, 0.55);
}
.subtitle-style-demo-line.is-candy span {
  background: linear-gradient(90deg, #ff76d8, #ffe700 46%, #a6ff5e);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px #ffffff;
}
.subtitle-style-demo-line.is-kinetic { transform: rotate(-2deg); }
.subtitle-style-demo-line.is-bounce { animation: subtitleMiniBounce 1.2s ease infinite; }
.subtitle-style-demo-line.is-comic { text-shadow: 4px 4px 0 #020617, -2px -2px 0 #020617; }
.subtitle-style-demo-line.is-minimal { color: #111827; font-size: clamp(22px, 3.8vw, 42px); font-weight: 760; text-shadow: none; }
.subtitle-style-demo-line.is-typewriter,
.subtitle-style-demo-line.is-mono { font-family: "Courier New", monospace; }
.subtitle-style-demo-line.is-luxury { font-family: Georgia, serif; font-weight: 780; }
.subtitle-style-demo-line.is-soft { color: #7c2d12; text-shadow: 0 3px 0 rgba(255,255,255,.72); }

.subtitle-style-detail-copy {
  align-self: center;
  display: grid;
  gap: 18px;
  max-width: 560px;
}

.subtitle-style-detail-copy > span {
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.subtitle-style-detail-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.04;
}

.subtitle-style-detail-copy p,
.subtitle-style-detail-copy dd {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.68;
}

.subtitle-style-detail-copy dl {
  display: grid;
  gap: 14px;
  margin: 6px 0;
}

.subtitle-style-detail-copy dl > div {
  padding: 16px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.58);
}

.subtitle-style-detail-copy dt {
  margin-bottom: 5px;
  color: var(--text);
  font-size: 13px;
  font-weight: 850;
  text-transform: uppercase;
}

.subtitle-style-return {
  justify-self: start;
  text-decoration: none;
}

.subtitle-style-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 860px) {
  .subtitle-style-detail {
    grid-template-columns: 1fr;
  }

  .subtitle-style-hero,
  .subtitle-style-video-frame {
    min-height: 0;
  }
}

@media (max-width: 560px) {
  .subtitle-style-current {
    grid-template-columns: 1fr;
  }

  .subtitle-style-card button {
    grid-template-columns: 86px minmax(0, 1fr);
  }

  .subtitle-style-detail {
    width: min(100% - 20px, 1180px);
    padding-top: 20px;
  }
}

.field span,
.segmented legend {
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.field.ai-option span {
  color: var(--text);
  font-weight: 760;
}

input,
select,
textarea {
  width: 100%;
  min-height: 42px;
  border: 1px solid #d7e1ec;
  border-radius: 11px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--text);
  outline: none;
}

.theme-dark input,
.theme-dark select,
.theme-dark textarea,
.theme-dark .ai-option,
.theme-dark .file-meta,
.theme-dark .empty-jobs,
.theme-dark .job-card,
.theme-dark .output-link,
.theme-dark .photo-upload-surface em {
  background: rgba(8, 13, 26, 0.72);
  border-color: rgba(84, 102, 137, 0.42);
  color: var(--text);
}

.theme-dark .primary-action,
.theme-dark .workspace-return strong,
.theme-dark .topbar-link.is-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 68%, white), color-mix(in srgb, var(--blue) 88%, #1e293b));
  color: #ffffff;
}

.theme-dark .section-title span,
.theme-dark .photo-upload-surface small,
.theme-dark .settings-section summary small {
  color: #a9b8d0;
}

.theme-dark input::placeholder,
.theme-dark textarea::placeholder {
  color: #6f7f96;
}

.file-field {
  cursor: pointer;
  position: relative;
}

.file-field > input[type="file"] {
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  position: absolute;
  pointer-events: none;
}

.file-dropzone {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 122px;
  border: 1.5px dashed #a7bad0;
  border-radius: 14px;
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent), rgba(96, 165, 250, 0.1)),
    rgba(248, 251, 255, 0.92);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.file-field:hover .file-dropzone,
.file-field.is-dragging .file-dropzone {
  border-color: var(--blue);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 14%, transparent), rgba(96, 165, 250, 0.14)),
    #ffffff;
  box-shadow: 0 18px 44px rgba(37, 99, 235, 0.13);
}

.theme-dark .file-dropzone {
  border-color: rgba(126, 154, 203, 0.58);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 18%, transparent), rgba(17, 26, 46, 0.52)),
    rgba(17, 26, 46, 0.92);
}

.theme-dark .file-field:hover .file-dropzone,
.theme-dark .file-field.is-dragging .file-dropzone,
.theme-dark .file-field.is-ready .file-dropzone {
  border-color: color-mix(in srgb, var(--blue) 62%, white);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 22%, transparent), rgba(17, 26, 46, 0.62)),
    rgba(18, 28, 50, 0.96);
}

.file-field.is-dragging .file-dropzone {
  transform: translateY(-1px);
}

.file-field.is-ready .file-dropzone {
  border-style: solid;
  border-color: rgba(59, 111, 216, 0.45);
  background:
    linear-gradient(135deg, rgba(96, 165, 250, 0.14), rgba(37, 99, 235, 0.08)),
    #ffffff;
}

.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(180deg, #003ec973, #aec7fd70);
  color: white;
  font-size: 21px !important;
  font-weight: 850;
}

.file-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.file-copy strong {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}

.file-copy small,
.file-meta small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.file-button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0, 27, 87, 0.12);
  border-radius: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, #ffffff, #eef4ff);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
  color: #123f93;
  font-weight: 760;
  white-space: nowrap;
}

.file-meta {
  display: grid;
  gap: 2px;
  min-height: 32px;
  border: 1px solid #d7e1ec;
  border-radius: 11px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted);
  overflow-wrap: anywhere;
}

.file-meta strong {
  color: var(--text);
}

.compact-upload .file-dropzone {
  min-height: 98px;
  grid-template-columns: 48px minmax(0, 1fr);
}

.compact-upload .file-button {
  grid-column: 1 / -1;
}

.convert-compose {
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(320px, 0.95fr);
  gap: 14px;
  align-items: stretch;
}

.convert-file-stack,
.convert-settings {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.convert-settings {
  align-content: start;
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 4%, transparent), transparent 58%),
    rgba(255, 255, 255, 0.54);
}

.convert-settings-grid {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(180px, 1fr);
  gap: 10px;
  align-items: end;
}

.convert-file-field {
  gap: 6px;
}

.convert-file-field .file-dropzone {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
  min-height: 84px;
  border-style: solid;
  border-radius: 13px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 7%, transparent), color-mix(in srgb, var(--blue) 7%, transparent)),
    rgba(248, 251, 255, 0.9);
}

.convert-file-field .file-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.7), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 72%, #8b5cf6), color-mix(in srgb, var(--pink) 64%, #60a5fa));
  font-size: 0 !important;
}

.convert-file-field .file-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #ffffff;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  mask: var(--editor-icon) center / contain no-repeat;
}

.convert-file-field .file-copy strong {
  font-size: 14px;
}

.convert-file-field .file-copy small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.convert-file-field .file-button {
  min-height: 32px;
  border-radius: 9px;
  padding: 7px 11px;
  box-shadow: none;
}

.convert-file-field .file-meta {
  min-height: 30px;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
}

.convert-preview {
  min-height: 168px;
  border-style: solid;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), color-mix(in srgb, var(--blue) 6%, #eef5ff)),
    #f8fbff;
}

.convert-preview > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.convert-preview > span::before {
  content: "";
  width: 17px;
  height: 17px;
  background: color-mix(in srgb, var(--blue) 70%, var(--muted));
  -webkit-mask: url("https://api.iconify.design/lucide/image-up.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/image-up.svg") center / contain no-repeat;
}

.convert-format-field .format-current {
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 11px;
}

.convert-format-field .format-current b {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.convert-format-field .format-current b::before {
  content: "";
  width: 16px;
  height: 16px;
  background: #16a34a;
  -webkit-mask: url("https://api.iconify.design/lucide/file-output.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/file-output.svg") center / contain no-repeat;
}

.convert-name-field input {
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 11px;
}

.convert-compression {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.convert-compression legend {
  grid-column: 1 / -1;
}

.convert-compression label {
  min-width: 0;
}

.convert-compression span {
  min-height: 38px;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.convert-compression label[data-compression-icon] span::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  background: var(--compression-color, var(--blue));
  -webkit-mask: var(--compression-icon) center / contain no-repeat;
  mask: var(--compression-icon) center / contain no-repeat;
}

.convert-compression label[data-compression-icon="light"] {
  --compression-color: #0d9488;
  --compression-icon: url("https://api.iconify.design/lucide/feather.svg");
}

.convert-compression label[data-compression-icon="balanced"] {
  --compression-color: #2563eb;
  --compression-icon: url("https://api.iconify.design/lucide/scale.svg");
}

.convert-compression label[data-compression-icon="quality"] {
  --compression-color: #db2777;
  --compression-icon: url("https://api.iconify.design/lucide/badge-check.svg");
}

.convert-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.convert-action-row .primary-action {
  min-height: 40px;
}

.cover-compose {
  display: grid;
  grid-template-columns: minmax(360px, 1.05fr) minmax(320px, 0.95fr);
  gap: 14px;
  align-items: start;
}

.cover-file-stack,
.cover-settings {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.cover-settings {
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--pink) 13%, var(--line));
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 5%, transparent), transparent 58%),
    rgba(255, 255, 255, 0.54);
}

.cover-settings-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, 0.42fr);
  gap: 10px;
  align-items: end;
}

.cover-file-field {
  gap: 6px;
}

.cover-file-field .file-dropzone {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
  min-height: 84px;
  border-style: solid;
  border-radius: 13px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 8%, transparent), color-mix(in srgb, var(--blue) 6%, transparent)),
    rgba(248, 251, 255, 0.9);
}

.cover-file-field .file-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.72), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--pink) 74%, #8b5cf6), color-mix(in srgb, var(--blue) 58%, #f472b6));
  font-size: 0 !important;
}

.cover-file-field .file-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #ffffff;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  mask: var(--editor-icon) center / contain no-repeat;
}

.cover-file-field .file-copy strong {
  font-size: 14px;
}

.cover-file-field .file-copy small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.cover-file-field .file-button {
  min-height: 32px;
  border-radius: 9px;
  padding: 7px 11px;
  box-shadow: none;
}

.cover-file-field .file-meta {
  min-height: 30px;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
}

.cover-preview {
  min-height: 168px;
  border-style: solid;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), color-mix(in srgb, var(--pink) 6%, #eef5ff)),
    #f8fbff;
}

.cover-preview > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.cover-preview > span::before {
  content: "";
  width: 17px;
  height: 17px;
  background: color-mix(in srgb, var(--pink) 70%, var(--muted));
  -webkit-mask: url("https://api.iconify.design/lucide/image-play.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/image-play.svg") center / contain no-repeat;
}

.cover-title-field input,
.cover-variants-field input {
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 11px;
}

.cover-title-field > span,
.cover-variants-field > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.cover-title-field > span::before,
.cover-variants-field > span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: color-mix(in srgb, var(--pink) 72%, var(--blue));
}

.cover-title-field > span::before {
  -webkit-mask: url("https://api.iconify.design/lucide/type.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/type.svg") center / contain no-repeat;
}

.cover-variants-field > span::before {
  -webkit-mask: url("https://api.iconify.design/lucide/layers-3.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/layers-3.svg") center / contain no-repeat;
}

.cover-ai-option {
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 40px;
}

.cover-ai-option span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.cover-ai-option span::after {
  content: "";
  order: -1;
  width: 15px;
  height: 15px;
  background: #7c3aed;
  -webkit-mask: url("https://api.iconify.design/lucide/sparkles.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/sparkles.svg") center / contain no-repeat;
}

.cover-action-row {
  display: grid;
}

.cover-action-row .primary-action {
  min-height: 40px;
}

.subtitles-compose {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
  gap: 14px;
  align-items: start;
}

.subtitles-file-stack,
.subtitles-settings {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.subtitles-settings {
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, transparent), transparent 58%),
    rgba(255, 255, 255, 0.54);
}

.subtitles-file-field {
  gap: 6px;
}

.subtitles-file-field .file-dropzone {
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 11px;
  min-height: 84px;
  border-style: solid;
  border-radius: 13px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), color-mix(in srgb, var(--pink) 5%, transparent)),
    rgba(248, 251, 255, 0.9);
}

.subtitles-file-field .file-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.72), transparent 44%),
    linear-gradient(145deg, color-mix(in srgb, var(--blue) 74%, #06b6d4), color-mix(in srgb, var(--pink) 52%, #60a5fa));
  font-size: 0 !important;
}

.subtitles-file-field .file-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #ffffff;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  mask: var(--editor-icon) center / contain no-repeat;
}

.subtitles-file-field .file-copy strong {
  font-size: 14px;
}

.subtitles-file-field .file-copy small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.subtitles-file-field .file-button {
  min-height: 32px;
  border-radius: 9px;
  padding: 7px 11px;
  box-shadow: none;
}

.subtitles-file-field .file-meta {
  min-height: 30px;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
}

.subtitles-preview {
  min-height: 168px;
  border-style: solid;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), color-mix(in srgb, var(--blue) 6%, #eef5ff)),
    #f8fbff;
}

.subtitles-preview > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.subtitles-preview > span::before {
  content: "";
  width: 17px;
  height: 17px;
  background: color-mix(in srgb, var(--blue) 70%, var(--muted));
  -webkit-mask: url("https://api.iconify.design/lucide/message-square-text.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/message-square-text.svg") center / contain no-repeat;
}

.subtitles-name-field input {
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 11px;
}

.subtitles-name-field > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.subtitles-name-field > span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: color-mix(in srgb, var(--blue) 72%, var(--pink));
  -webkit-mask: url("https://api.iconify.design/lucide/text-cursor-input.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/text-cursor-input.svg") center / contain no-repeat;
}

.subtitles-ai-option {
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 40px;
}

.subtitles-ai-option span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.subtitles-ai-option span::after {
  content: "";
  order: -1;
  width: 15px;
  height: 15px;
  background: #7c3aed;
  -webkit-mask: url("https://api.iconify.design/lucide/wand-2.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/wand-2.svg") center / contain no-repeat;
}

.subtitles-action-row {
  display: grid;
}

.subtitles-action-row .primary-action {
  min-height: 40px;
}

.package-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

.package-file-stack,
.package-settings {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.package-file-stack {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.52fr);
  align-items: stretch;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
}

.package-settings {
  align-self: start;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: start;
  gap: 12px;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.package-name-field,
.package-style-picker {
  grid-column: 1;
}

.package-language-picker {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.package-ai-grid,
.package-action-row {
  grid-column: 1 / -1;
}

.package-file-field {
  gap: 6px;
  min-width: 0;
}

.package-file-field .file-dropzone {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 10px;
  min-height: 72px;
  border-style: solid;
  border-radius: 13px;
  padding: 12px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #16a34a 8%, transparent), color-mix(in srgb, var(--blue) 6%, transparent)),
    rgba(248, 251, 255, 0.9);
}

.package-file-field .file-copy,
.package-file-field .file-button,
.package-name-field,
.package-style-picker,
.package-language-picker,
.package-ai-grid,
.package-action-row,
.package-preview {
  min-width: 0;
  max-width: 100%;
}

.package-file-field .file-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.72), transparent 44%),
    linear-gradient(145deg, #16a34a, color-mix(in srgb, var(--blue) 64%, #22c55e));
  font-size: 0 !important;
}

.package-file-field .file-icon::before {
  content: "";
  width: 20px;
  height: 20px;
  background: #ffffff;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  mask: var(--editor-icon) center / contain no-repeat;
}

.convert-file-field .file-icon,
.cover-file-field .file-icon,
.subtitles-file-field .file-icon,
.package-file-field .file-icon {
  color: #ffffff;
  box-shadow:
    0 10px 22px color-mix(in srgb, var(--blue) 18%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    inset 0 -18px 28px rgba(2, 6, 23, 0.2);
}

.convert-file-field .file-icon::before,
.cover-file-field .file-icon::before,
.subtitles-file-field .file-icon::before,
.package-file-field .file-icon::before {
  width: 22px;
  height: 22px;
  background: currentColor;
  filter: drop-shadow(0 2px 3px rgba(2, 6, 23, 0.34));
}

.package-file-field .file-copy strong {
  font-size: 14px;
}

.package-file-field .file-copy small {
  display: -webkit-box;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.package-file-field .file-button {
  min-height: 32px;
  border-radius: 9px;
  padding: 7px 11px;
  box-shadow: none;
}

.package-file-field .file-meta {
  min-height: 30px;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
}

.package-preview {
  min-height: 104px;
  border-style: solid;
  border-radius: 13px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), color-mix(in srgb, #16a34a 5%, #eef5ff)),
    #f8fbff;
}

.package-preview > span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 760;
}

.package-preview > span::before {
  content: "";
  width: 17px;
  height: 17px;
  background: color-mix(in srgb, #16a34a 70%, var(--muted));
  -webkit-mask: url("https://api.iconify.design/lucide/archive.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/archive.svg") center / contain no-repeat;
}

.package-name-field input {
  min-height: 40px;
  border-radius: 10px;
  padding: 8px 11px;
}

.package-name-field > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.package-name-field > span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: color-mix(in srgb, #16a34a 70%, var(--blue));
  -webkit-mask: url("https://api.iconify.design/lucide/package-check.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/package-check.svg") center / contain no-repeat;
}

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

.package-ai-option {
  grid-template-columns: 18px minmax(0, 1fr);
  min-height: 38px;
  border-radius: 10px;
  padding: 8px 9px;
}

.package-ai-option span {
  display: inline-flex;
  gap: 7px;
  align-items: center;
}

.package-ai-option span::after {
  content: "";
  order: -1;
  width: 15px;
  height: 15px;
  background: var(--package-ai-color, #7c3aed);
  -webkit-mask: var(--package-ai-icon) center / contain no-repeat;
  mask: var(--package-ai-icon) center / contain no-repeat;
}

.package-ai-option[data-package-ai="transcription"] {
  --package-ai-color: #7c3aed;
  --package-ai-icon: url("https://api.iconify.design/lucide/wand-2.svg");
}

.package-ai-option[data-package-ai="cover"] {
  --package-ai-color: #db2777;
  --package-ai-icon: url("https://api.iconify.design/lucide/image-plus.svg");
}

.package-action-row {
  display: grid;
  max-width: min(100%, 420px);
}

.package-action-row .primary-action {
  min-height: 40px;
}

.theme-dark .convert-settings {
  border-color: rgba(84, 102, 137, 0.42);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent 58%),
    rgba(8, 13, 26, 0.62);
}

.theme-dark .convert-file-field .file-dropzone,
.theme-dark .convert-preview {
  border-color: rgba(126, 154, 203, 0.46);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 10%, transparent), color-mix(in srgb, var(--blue) 13%, transparent)),
    rgba(17, 26, 46, 0.9);
}

.theme-dark .convert-compression label[data-compression-icon] span::before,
.theme-dark .convert-preview > span::before,
.theme-dark .convert-format-field .format-current b::before {
  background: color-mix(in srgb, var(--compression-color, var(--blue)) 82%, #ffffff);
}

.theme-dark .cover-settings {
  border-color: rgba(84, 102, 137, 0.42);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 12%, transparent), transparent 58%),
    rgba(8, 13, 26, 0.62);
}

.theme-dark .cover-file-field .file-dropzone,
.theme-dark .cover-preview {
  border-color: rgba(126, 154, 203, 0.46);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pink) 13%, transparent), color-mix(in srgb, var(--blue) 11%, transparent)),
    rgba(17, 26, 46, 0.9);
}

.theme-dark .cover-preview > span::before,
.theme-dark .cover-title-field > span::before,
.theme-dark .cover-variants-field > span::before,
.theme-dark .cover-ai-option span::after {
  background: color-mix(in srgb, var(--pink) 76%, #ffffff);
}

.theme-dark .subtitles-settings {
  border-color: rgba(84, 102, 137, 0.42);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, transparent), transparent 58%),
    rgba(8, 13, 26, 0.62);
}

.theme-dark .subtitles-file-field .file-dropzone,
.theme-dark .subtitles-preview {
  border-color: rgba(126, 154, 203, 0.46);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 13%, transparent), color-mix(in srgb, var(--pink) 9%, transparent)),
    rgba(17, 26, 46, 0.9);
}

.theme-dark .subtitles-preview > span::before,
.theme-dark .subtitles-name-field > span::before,
.theme-dark .subtitles-ai-option span::after {
  background: color-mix(in srgb, var(--blue) 76%, #ffffff);
}

.theme-dark .package-settings {
  background: transparent;
}

.theme-dark .package-file-field .file-dropzone,
.theme-dark .package-preview {
  border-color: rgba(126, 154, 203, 0.46);
  background:
    linear-gradient(135deg, color-mix(in srgb, #16a34a 12%, transparent), color-mix(in srgb, var(--blue) 10%, transparent)),
    rgba(17, 26, 46, 0.9);
}

.theme-dark .package-preview > span::before,
.theme-dark .package-name-field > span::before,
.theme-dark .package-ai-option span::after {
  background: color-mix(in srgb, var(--package-ai-color, #16a34a) 76%, #ffffff);
}

@media (max-width: 1400px) {
  .package-file-stack,
  .package-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .package-name-field,
  .package-style-picker,
  .package-ai-grid,
  .package-action-row,
  .package-language-picker {
    grid-column: 1;
  }

  .package-language-picker {
    grid-row: auto;
  }

  .package-language-picker .subtitle-language-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    max-height: 180px;
  }
}

@media (max-width: 1180px) {
  .convert-compose,
  .cover-compose,
  .subtitles-compose,
  .package-compose {
    grid-template-columns: 1fr;
  }

  .convert-preview,
  .cover-preview,
  .subtitles-preview,
  .package-preview {
    min-height: 140px;
  }

  .package-file-stack,
  .package-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .package-name-field,
  .package-style-picker,
  .package-ai-grid,
  .package-action-row,
  .package-language-picker {
    grid-column: 1;
  }

  .package-language-picker {
    grid-row: auto;
  }

  .package-language-picker .subtitle-language-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    max-height: 180px;
  }
}

@media (max-width: 760px) {
  .convert-compose,
  .cover-compose,
  .subtitles-compose,
  .package-compose {
    gap: 10px;
  }

  .convert-settings,
  .cover-settings,
  .subtitles-settings,
  .package-settings {
    border-radius: 13px;
    padding: 10px;
  }

  .convert-settings-grid,
  .cover-settings-grid,
  .convert-compression {
    grid-template-columns: 1fr;
  }

  .convert-file-field .file-dropzone,
  .cover-file-field .file-dropzone,
  .subtitles-file-field .file-dropzone,
  .package-file-field .file-dropzone {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    min-height: 66px;
    padding: 9px;
  }

  .convert-file-field .file-icon,
  .cover-file-field .file-icon,
  .subtitles-file-field .file-icon,
  .package-file-field .file-icon {
    width: 42px;
    height: 42px;
  }

  .convert-preview,
  .cover-preview,
  .subtitles-preview,
  .package-preview {
    min-height: 112px;
  }

  .package-ai-grid {
    grid-template-columns: 1fr;
  }

  .package-style-picker .subtitle-style-current {
    grid-template-columns: 70px minmax(0, 1fr) 16px;
  }

  .package-style-picker .subtitle-style-menu {
    grid-template-columns: 1fr;
  }

  .package-language-picker .subtitle-language-grid {
    grid-template-columns: 1fr;
    max-height: 220px;
  }
}

textarea {
  min-height: 98px;
  resize: vertical;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.format-field {
  position: relative;
}

.format-current {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #d7e1ec;
  border-radius: 11px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  text-align: left;
}

.format-current b {
  color: var(--ink);
}

.format-current small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.format-current::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.55;
}

.format-menu {
  position: fixed;
  z-index: 1200;
  display: grid;
  gap: 10px;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 24px));
  max-height: min(360px, calc(100vh - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: color-mix(in srgb, var(--surface) 94%, #ffffff);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.format-field.is-open .format-menu,
.format-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.format-menu section {
  display: grid;
  gap: 8px;
}

.format-menu section > strong {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.format-menu section > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.format-menu button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  font-weight: 800;
}

.format-menu button:hover,
.format-menu button.is-selected {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.theme-dark .format-current,
.theme-dark .format-menu,
.theme-dark .format-menu button {
  border-color: rgba(84, 102, 137, 0.45);
  background: rgba(8, 13, 26, 0.92);
  color: #e7eefc;
}

.theme-dark .format-current b {
  color: #ffffff;
}

.theme-dark .format-menu button:hover,
.theme-dark .format-menu button.is-selected {
  border-color: color-mix(in srgb, var(--blue) 58%, white);
  background: color-mix(in srgb, var(--blue) 24%, #111a2e);
  color: #ffffff;
}

.custom-select-field {
  position: relative;
}

.custom-select-current {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #d7e1ec;
  border-radius: 11px;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--text);
  text-align: left;
}

.custom-select-current b,
.custom-select-menu b {
  color: var(--ink);
}

.custom-select-current small,
.custom-select-menu small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.custom-select-current::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.9;
  transition: transform 0.16s ease;
}

.custom-select-field.is-open .custom-select-current::after {
  transform: rotate(225deg) translate(-2px, -1px);
}

.custom-select-menu {
  position: fixed;
  z-index: 1300;
  display: grid;
  gap: 7px;
  min-width: 260px;
  max-width: min(420px, calc(100vw - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface) 94%, #ffffff);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.custom-select-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.custom-select-menu button {
  display: grid;
  gap: 3px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 9px 10px;
  background: transparent;
  color: var(--text);
  text-align: left;
}

.custom-select-menu button:hover,
.custom-select-menu button.is-selected {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.custom-select-menu button.is-selected b,
.custom-select-menu button:hover b {
  color: var(--blue);
}

.youtube-mode-select .custom-select-current {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 12px;
  align-items: center;
  min-height: 54px;
  border-radius: 10px;
  padding: 8px 10px;
  gap: 8px;
}

.youtube-mode-select .custom-select-current::before,
.youtube-mode-select .custom-select-menu button::before,
.youtube-mode-menu button::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  grid-row: 1 / span 2;
  align-self: center;
  justify-self: center;
  background: var(--mode-color, var(--blue));
  filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--mode-color, var(--blue)) 30%, transparent));
}

.youtube-mode-select .custom-select-current::before {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.youtube-mode-select .custom-select-current b,
.youtube-mode-select .custom-select-current small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.youtube-mode-select .custom-select-current b {
  font-size: 13px;
  line-height: 1.2;
}

.youtube-mode-select .custom-select-current small {
  font-size: 11px;
  line-height: 1.2;
}

.youtube-mode-select .custom-select-current::after {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.youtube-mode-select .custom-select-current::before,
.youtube-mode-select .custom-select-menu button::before,
.youtube-mode-menu button::before {
  -webkit-mask: var(--mode-icon) center / contain no-repeat;
  mask: var(--mode-icon) center / contain no-repeat;
}

.youtube-mode-select .custom-select-menu button,
.youtube-mode-menu button {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-color: color-mix(in srgb, var(--mode-color, var(--blue)) 18%, transparent);
  background: color-mix(in srgb, var(--mode-color, var(--blue)) 5%, transparent);
  min-height: 50px;
  border-radius: 9px;
  padding: 7px 9px;
}

.youtube-mode-select .custom-select-menu button:hover,
.youtube-mode-select .custom-select-menu button.is-selected,
.youtube-mode-menu button:hover,
.youtube-mode-menu button.is-selected {
  border-color: color-mix(in srgb, var(--mode-color, var(--blue)) 58%, var(--line));
  background: color-mix(in srgb, var(--mode-color, var(--blue)) 13%, var(--surface));
}

.youtube-mode-select .custom-select-menu button b,
.youtube-mode-select .custom-select-menu button small,
.youtube-mode-menu button b,
.youtube-mode-menu button small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.youtube-mode-select .custom-select-menu button b,
.youtube-mode-menu button b {
  font-size: 13px;
  line-height: 1.2;
}

.youtube-mode-select .custom-select-menu button small,
.youtube-mode-menu button small {
  font-size: 11px;
  line-height: 1.2;
}

.youtube-mode-select [data-mode-icon="classic"],
.youtube-mode-menu [data-mode-icon="classic"] {
  --mode-color: #e11d48;
  --mode-icon: url("https://api.iconify.design/lucide/scissors-line-dashed.svg");
}

.youtube-mode-select [data-mode-icon="dynamic"],
.youtube-mode-menu [data-mode-icon="dynamic"] {
  --mode-color: #f97316;
  --mode-icon: url("https://api.iconify.design/lucide/zap.svg");
}

.youtube-mode-select [data-mode-icon="podcast"],
.youtube-mode-menu [data-mode-icon="podcast"] {
  --mode-color: #7c3aed;
  --mode-icon: url("https://api.iconify.design/lucide/mic-2.svg");
}

.youtube-mode-select [data-mode-icon="calm"],
.youtube-mode-menu [data-mode-icon="calm"] {
  --mode-color: #0891b2;
  --mode-icon: url("https://api.iconify.design/lucide/waves.svg");
}

.youtube-mode-select [data-mode-icon="backstage"],
.youtube-mode-menu [data-mode-icon="backstage"] {
  --mode-color: #2563eb;
  --mode-icon: url("https://api.iconify.design/lucide/presentation.svg");
}

.youtube-mode-select [data-mode-icon="download"],
.youtube-mode-menu [data-mode-icon="download"] {
  --mode-color: #16a34a;
  --mode-icon: url("https://api.iconify.design/lucide/download.svg");
}

.youtube-mode-select [data-mode-icon="cover"],
.youtube-mode-menu [data-mode-icon="cover"] {
  --mode-color: #db2777;
  --mode-icon: url("https://api.iconify.design/lucide/image.svg");
}

.theme-dark .custom-select-current,
.theme-dark .custom-select-menu {
  border-color: rgba(84, 102, 137, 0.45);
  background: rgba(8, 13, 26, 0.92);
  color: #e7eefc;
}

.theme-dark .custom-select-current b,
.theme-dark .custom-select-menu b {
  color: #ffffff;
}

.theme-dark .custom-select-menu button:hover,
.theme-dark .custom-select-menu button.is-selected {
  border-color: color-mix(in srgb, var(--blue) 58%, white);
  background: color-mix(in srgb, var(--blue) 24%, #111a2e);
}

.theme-dark .youtube-mode-select .custom-select-current::before,
.theme-dark .youtube-mode-select .custom-select-menu button::before,
.theme-dark .youtube-mode-menu button::before {
  background: color-mix(in srgb, var(--mode-color, var(--blue)) 84%, #ffffff);
  filter: drop-shadow(0 7px 12px color-mix(in srgb, var(--mode-color, var(--blue)) 42%, transparent));
}

.theme-dark .youtube-mode-select .custom-select-menu button:hover,
.theme-dark .youtube-mode-select .custom-select-menu button.is-selected,
.theme-dark .youtube-mode-menu button:hover,
.theme-dark .youtube-mode-menu button.is-selected {
  border-color: color-mix(in srgb, var(--mode-color, var(--blue)) 64%, #ffffff);
  background: color-mix(in srgb, var(--mode-color, var(--blue)) 20%, #111a2e);
}

.segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
}

.segmented legend {
  width: 100%;
  margin-bottom: 2px;
}

.segmented label {
  position: relative;
}

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

.segmented span {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  background: #fbfdff;
  color: var(--muted);
}

.segmented input:checked + span {
  border-color: var(--teal);
  background: #eaf1ff;
  color: var(--teal);
}

.theme-dark .segmented span {
  border-color: rgba(126, 154, 203, 0.45);
  background: rgba(15, 23, 42, 0.86);
  color: #c7d3e8;
}

.theme-dark .segmented span:hover {
  border-color: color-mix(in srgb, var(--blue) 48%, white);
  background: rgba(22, 34, 58, 0.96);
  color: #ffffff;
}

.theme-dark .segmented input:checked + span {
  border-color: color-mix(in srgb, var(--blue) 62%, white);
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 62%, #18233b), color-mix(in srgb, var(--blue) 42%, #0f172a));
  color: #ffffff;
  box-shadow: 0 10px 26px color-mix(in srgb, var(--blue) 24%, transparent);
}

.convert-compression span {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  min-height: 38px;
  gap: 7px;
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.15;
  text-align: center;
}

.convert-compression input:checked + span {
  border-color: color-mix(in srgb, var(--compression-color, var(--blue)) 54%, var(--line));
  background: color-mix(in srgb, var(--compression-color, var(--blue)) 11%, #ffffff);
  color: color-mix(in srgb, var(--compression-color, var(--blue)) 76%, var(--ink));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--compression-color, var(--blue)) 12%, transparent);
}

.theme-dark .convert-compression span {
  background: rgba(15, 23, 42, 0.58);
}

.theme-dark .convert-compression input:checked + span {
  border-color: color-mix(in srgb, var(--compression-color, var(--blue)) 64%, #ffffff);
  background: color-mix(in srgb, var(--compression-color, var(--blue)) 20%, rgba(15, 23, 42, 0.78));
  color: #ffffff;
}

.subtitles-style-picker,
.subtitles-language-picker,
.package-style-picker,
.package-language-picker {
  gap: 7px;
}

.package-style-picker {
  position: relative;
  overflow: visible;
}

.subtitles-style-picker legend,
.subtitles-language-picker legend,
.package-style-picker legend,
.package-language-picker legend {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}

.subtitles-style-picker legend::before,
.subtitles-language-picker legend::before,
.package-style-picker legend::before,
.package-language-picker legend::before {
  content: "";
  width: 14px;
  height: 14px;
  background: color-mix(in srgb, var(--blue) 72%, var(--pink));
}

.subtitles-style-picker legend::before,
.package-style-picker legend::before {
  -webkit-mask: url("https://api.iconify.design/lucide/palette.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/palette.svg") center / contain no-repeat;
}

.subtitles-language-picker legend::before,
.package-language-picker legend::before {
  -webkit-mask: url("https://api.iconify.design/lucide/languages.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/languages.svg") center / contain no-repeat;
}

.subtitles-style-picker .subtitle-style-current,
.package-style-picker .subtitle-style-current {
  grid-template-columns: 92px minmax(0, 1fr) 18px;
  min-height: 84px;
  border-radius: 12px;
  padding: 10px;
}

.subtitles-style-picker .subtitle-style-current .subtitle-style-swatch,
.package-style-picker .subtitle-style-current .subtitle-style-swatch {
  width: 92px;
  min-height: 58px;
  border-radius: 10px;
}

.subtitles-style-picker .subtitle-style-current > span:last-child,
.package-style-picker .subtitle-style-current > span:last-child {
  min-width: 0;
}

.subtitles-style-picker .subtitle-style-current b,
.subtitles-style-picker .subtitle-style-current small,
.package-style-picker .subtitle-style-current b,
.package-style-picker .subtitle-style-current small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subtitles-style-picker .subtitle-style-menu,
.package-style-picker .subtitle-style-menu {
  max-height: min(430px, calc(100vh - 130px));
  gap: 7px;
  padding: 8px;
}

.subtitles-style-picker .subtitle-style-card,
.package-style-picker .subtitle-style-card {
  border-radius: 11px;
}

.subtitles-style-picker .subtitle-style-card button,
.package-style-picker .subtitle-style-card button {
  grid-template-columns: 82px minmax(0, 1fr);
  min-height: 64px;
  padding: 8px;
}

.subtitles-style-picker .subtitle-style-card .subtitle-style-swatch,
.package-style-picker .subtitle-style-card .subtitle-style-swatch {
  width: 82px;
  min-height: 50px;
  border-radius: 9px;
}

.subtitles-style-picker .subtitle-style-card a,
.package-style-picker .subtitle-style-card a {
  min-height: 28px;
  padding: 6px 10px;
  font-size: 11px;
}

.subtitles-language-picker .subtitle-language-grid,
.package-language-picker .subtitle-language-grid {
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
  gap: 7px;
  max-height: 184px;
  overflow: auto;
  padding-right: 2px;
  overscroll-behavior: contain;
}

.subtitles-language-picker .subtitle-language-option,
.package-language-picker .subtitle-language-option {
  min-height: 40px;
  gap: 7px;
  border-radius: 10px;
  padding: 8px 9px;
  font-size: 12px;
}

.subtitles-language-picker .subtitle-language-flag,
.subtitles-language-picker .subtitle-language-auto,
.package-language-picker .subtitle-language-flag,
.package-language-picker .subtitle-language-auto {
  width: 24px;
  height: 17px;
  border-radius: 4px;
}

.subtitles-language-picker .subtitle-language-auto,
.package-language-picker .subtitle-language-auto {
  font-size: 11px;
}

.package-style-picker .subtitle-style-current {
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  min-height: 46px;
  border-radius: 10px;
  padding: 6px 9px;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.78);
}

.package-style-picker .subtitle-style-current .subtitle-style-swatch {
  width: 38px;
  min-height: 30px;
  border-radius: 8px;
}

.package-style-picker .subtitle-style-current .subtitle-style-swatch b {
  max-width: 30px;
  font-size: 0;
}

.package-style-picker .subtitle-style-current b {
  font-size: 13px;
  line-height: 1.15;
}

.package-style-picker .subtitle-style-current small {
  font-size: 10.5px;
  line-height: 1.15;
}

.package-language-picker .subtitle-language-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 154px;
  overflow-x: hidden;
}

.package-language-picker .subtitle-language-option {
  justify-content: flex-start;
  min-width: 0;
  min-height: 34px;
  padding: 7px 8px;
}

.package-language-picker .subtitle-language-option span:last-child {
  min-width: 0;
}

.package-style-picker .subtitle-style-menu {
  position: absolute;
  z-index: 1300;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  max-height: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0 6px;
  background: color-mix(in srgb, var(--surface) 96%, #ffffff);
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.14);
}

.package-style-picker .subtitle-style-card {
  min-width: 0;
  min-height: 0;
  border-radius: 9px;
}

.package-style-picker .subtitle-style-card button {
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 8px;
  min-height: 44px;
  padding: 6px 8px;
}

.package-style-picker .subtitle-style-card .subtitle-style-swatch {
  width: 34px;
  min-height: 28px;
  border-radius: 8px;
}

.package-style-picker .subtitle-style-card .subtitle-style-copy {
  min-width: 0;
  padding: 0;
}

.package-style-picker .subtitle-style-card .subtitle-style-copy b,
.package-style-picker .subtitle-style-card .subtitle-style-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.package-style-picker .subtitle-style-card .subtitle-style-copy b {
  white-space: nowrap;
}

.package-style-picker .subtitle-style-card .subtitle-style-copy small {
  display: -webkit-box;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.package-style-picker .subtitle-style-card a {
  display: none;
}

.package-style-picker.is-open .subtitle-style-menu {
  max-height: 260px;
  padding-block: 6px;
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 1180px) {
  .package-file-stack,
  .package-settings {
    grid-template-columns: minmax(0, 1fr);
  }

  .package-name-field,
  .package-style-picker,
  .package-ai-grid,
  .package-action-row,
  .package-language-picker {
    grid-column: 1;
  }

  .package-language-picker {
    grid-row: auto;
  }

  .package-language-picker .subtitle-language-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    max-height: 180px;
  }
}

@media (max-width: 760px) {
  .package-style-picker .subtitle-style-menu {
    grid-template-columns: 1fr;
  }

  .package-language-picker .subtitle-language-grid {
    grid-template-columns: 1fr;
    max-height: 220px;
  }
}

.theme-dark .subtitles-style-picker legend::before,
.theme-dark .subtitles-language-picker legend::before,
.theme-dark .package-style-picker legend::before,
.theme-dark .package-language-picker legend::before {
  background: color-mix(in srgb, var(--blue) 78%, #ffffff);
}

.media-preview {
  display: grid;
  min-height: 170px;
  place-items: center;
  overflow: hidden;
  border: 1px dashed #b9c6d4;
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(180, 83, 9, 0.04), rgba(96, 165, 250, 0.08)),
    var(--surface-2);
  color: var(--muted);
}

.media-preview img,
.media-preview video {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  background: #111827;
}

.media-preview.is-document-preview {
  align-items: stretch;
  justify-content: stretch;
  overflow: hidden;
  padding: 0;
  background: #f8fbff;
}

.media-preview.is-pdf-preview iframe {
  width: 100%;
  min-height: 100%;
  border: 0;
  background: #ffffff;
}

.media-preview.is-text-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  text-align: left;
  scrollbar-gutter: stable both-edges;
}

.media-preview.is-text-preview pre {
  margin: 0;
  padding: 12px;
  color: var(--text);
  font: 12px/1.5 Consolas, "Courier New", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.document-text-preview-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  padding: 8px 10px;
  background: color-mix(in srgb, var(--surface) 94%, #ffffff);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.document-text-preview-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.document-text-preview-head span {
  color: var(--blue);
  font-size: 11px;
  font-weight: 820;
}

.document-preview-type {
  display: grid;
  place-items: center;
  min-width: 40px;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--blue) 12%, #ffffff);
  white-space: nowrap;
}

.document-extracted-page {
  display: grid;
  align-content: start;
  gap: 10px;
  width: min(100% - 18px, 760px);
  margin: 9px auto 16px;
  border-radius: 6px;
  padding: 18px 20px;
}

.document-extracted-page h4,
.document-extracted-page p {
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

.document-extracted-page h4 {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.document-extracted-page p {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.62;
}

.media-preview.is-text-preview::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

.media-preview.is-text-preview::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--surface-2) 78%, #ffffff);
}

.media-preview.is-text-preview::-webkit-scrollbar-thumb {
  border: 2px solid color-mix(in srgb, var(--surface-2) 78%, #ffffff);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 42%, #94a3b8);
}

.media-preview.is-text-preview small {
  display: block;
  margin-top: 10px;
  color: var(--muted);
  font-weight: 760;
}

.document-preview-card {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  width: 100%;
  min-height: 100%;
  padding: 18px;
  text-align: center;
}

.document-preview-card b {
  display: grid;
  place-items: center;
  min-width: 54px;
  height: 54px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 88%, #071329);
  color: #ffffff;
  font-size: 15px;
}

.document-preview-card strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  color: var(--text);
}

.document-preview-card span,
.document-preview-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.primary-action {
  min-height: 44px;
  align-self: end;
  border: 0;
  border-radius: 11px;
  padding: 10px 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, white), var(--blue));
  color: white;
  font-weight: 750;
  box-shadow: 0 16px 38px rgba(37, 99, 235, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.primary-action:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 78%, white), color-mix(in srgb, var(--blue) 92%, black));
  transform: translateY(-1px);
  box-shadow: 0 20px 44px rgba(37, 99, 235, 0.28);
}

.primary-action:disabled {
  cursor: wait;
  background: #91a7d8;
}

.originality-panel {
  overflow: visible;
}

.originality-form {
  display: grid;
  gap: 14px;
}

.originality-source-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 16px;
  padding: 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), color-mix(in srgb, var(--blue) 5%, #ffffff)),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.originality-source-switch button {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 2px;
  min-height: 64px;
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 10px 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.originality-source-switch button::before {
  content: "";
  grid-row: 1 / span 2;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background:
    var(--originality-source-icon) center / 18px 18px no-repeat,
    color-mix(in srgb, var(--blue) 9%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent);
}

.originality-source-switch [data-originality-source="text"] {
  --originality-source-icon: url("https://api.iconify.design/lucide/text-cursor-input.svg?color=%232563eb");
}

.originality-source-switch [data-originality-source="file"] {
  --originality-source-icon: url("https://api.iconify.design/lucide/file-up.svg?color=%232563eb");
}

.originality-source-switch button:hover,
.originality-source-switch button.is-active {
  border-color: color-mix(in srgb, var(--blue) 34%, #c7d8ee);
  background:
    linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--blue) 8%, #ffffff));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 11%, transparent);
}

.originality-source-switch button:hover {
  transform: translateY(-1px);
}

.originality-source-switch button.is-active::after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    url("https://api.iconify.design/lucide/check.svg?color=white") center / 11px 11px no-repeat,
    var(--blue);
}

.originality-source-switch strong,
.originality-source-switch small {
  min-width: 0;
  padding-right: 20px;
}

.originality-source-switch strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.1;
}

.originality-source-switch small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.theme-dark .originality-source-switch {
  border-color: rgba(126, 154, 203, 0.34);
  background:
    linear-gradient(180deg, rgba(17, 26, 46, 0.92), rgba(8, 13, 26, 0.92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.theme-dark .originality-source-switch button {
  color: #dce7f7;
}

.theme-dark .originality-source-switch button::before {
  background:
    var(--originality-source-icon) center / 18px 18px no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 22%, #1e2943), rgba(8, 13, 26, 0.9));
  box-shadow: inset 0 0 0 1px rgba(126, 154, 203, 0.28);
}

.theme-dark .originality-source-switch button:hover,
.theme-dark .originality-source-switch button.is-active {
  border-color: color-mix(in srgb, var(--blue) 58%, #dbeafe);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 22%, rgba(30, 41, 67, 0.96)), rgba(17, 26, 46, 0.94));
  box-shadow: 0 14px 30px color-mix(in srgb, var(--blue) 14%, transparent);
}

.theme-dark .originality-source-switch strong {
  color: #f8fbff;
}

.theme-dark .originality-source-switch small {
  color: #9fb0c8;
}

.originality-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.originality-mode-grid label {
  cursor: pointer;
}

.originality-mode-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.originality-mode-grid span {
  display: grid;
  gap: 4px;
  min-height: 64px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 9px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.originality-mode-grid b {
  color: var(--text);
}

.originality-mode-grid small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.originality-mode-grid input:checked + span {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, #ffffff);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 12%, transparent);
}

.originality-compose {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(230px, 0.66fr);
  gap: 14px;
  align-items: stretch;
}

.originality-input-panel[hidden] {
  display: none;
}

.originality-compose > .field-wide {
  grid-column: 1 / -1;
}

.originality-file-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.48fr);
  gap: 14px;
  grid-column: 1 / -1;
  align-items: stretch;
}

.originality-compose textarea {
  min-height: 318px;
  resize: vertical;
  border-color: color-mix(in srgb, var(--blue) 12%, #d7e1ec);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--surface-2) 48%, #ffffff)),
    #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
  font-size: 14px;
  line-height: 1.55;
}

.originality-upload .file-dropzone {
  min-height: 188px;
  grid-template-columns: 48px minmax(0, 1fr);
}

.originality-upload .file-button {
  grid-column: 1 / -1;
  justify-self: start;
}

.originality-preview {
  min-height: 188px;
  border-style: solid;
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #16a34a 8%, transparent), color-mix(in srgb, var(--blue) 8%, transparent)),
    color-mix(in srgb, var(--surface-2) 78%, #ffffff);
  font-size: 13px;
}

.originality-preview.is-document-preview {
  max-height: 260px;
}

.originality-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 190px;
  justify-self: center;
  grid-column: 1 / -1;
}

.originality-submit::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.originality-result {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.originality-result[hidden] {
  display: none;
}

.originality-overview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 15px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 10px;
  background:
    radial-gradient(circle at 4% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb, #ffffff 94%, transparent), color-mix(in srgb, var(--surface-2) 58%, #ffffff));
}

.originality-score,
.originality-detail-score {
  --score-size: 86px;
  --score-ring: 8px;
  --score-deg: 0deg;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1px;
  width: var(--score-size);
  height: var(--score-size);
  border: 0;
  border-radius: 50%;
  background:
    conic-gradient(from -90deg, currentColor 0 var(--score-deg), color-mix(in srgb, currentColor 11%, #e8eef8) var(--score-deg) 360deg);
  color: var(--blue);
  box-shadow:
    0 18px 38px color-mix(in srgb, currentColor 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
  transform: translateZ(0);
  animation: score-breathe 3.8s ease-in-out infinite;
}

.originality-score::before,
.originality-detail-score::before {
  content: "";
  position: absolute;
  inset: calc(var(--score-ring) + 1px);
  z-index: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 32% 22%, rgba(255, 255, 255, 0.98), transparent 34%),
    linear-gradient(180deg, #ffffff, color-mix(in srgb, currentColor 8%, #f7fbff));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 -12px 26px color-mix(in srgb, currentColor 7%, transparent),
    0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
}

.originality-score::after,
.originality-detail-score::after {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 1;
  border-radius: inherit;
  background: conic-gradient(from 0deg, transparent 0 68%, color-mix(in srgb, currentColor 24%, transparent) 74%, transparent 82%);
  mask: radial-gradient(circle, transparent calc(50% - var(--score-ring) - 4px), #000 calc(50% - var(--score-ring) - 3px), #000 calc(50% + 3px), transparent calc(50% + 5px));
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--score-ring) - 4px), #000 calc(50% - var(--score-ring) - 3px), #000 calc(50% + 3px), transparent calc(50% + 5px));
  opacity: 0.48;
  animation: score-orbit 5.8s linear infinite;
  pointer-events: none;
}

.originality-score strong,
.originality-detail-score strong {
  position: relative;
  z-index: 2;
  color: currentColor;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  line-height: 0.88;
  text-shadow: 0 8px 18px color-mix(in srgb, currentColor 18%, transparent);
}

.originality-score strong {
  font-size: 28px;
}

.originality-score span,
.originality-detail-score span {
  position: relative;
  z-index: 2;
  color: color-mix(in srgb, var(--ink) 72%, var(--muted));
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
}

.originality-score.is-good,
.originality-detail-score.is-good {
  color: #0ea66b;
}

.originality-score.is-warn,
.originality-detail-score.is-warn {
  color: #d08a12;
}

.originality-score.is-bad,
.originality-detail-score.is-bad {
  color: #dc2626;
}

.originality-overview small {
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.originality-overview h3 {
  overflow-wrap: anywhere;
  margin: 5px 0 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.25;
}

.originality-report-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin-top: 11px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  padding: 8px 11px;
  background: color-mix(in srgb, var(--blue) 8%, #ffffff);
  color: var(--blue);
  font-size: 13px;
  font-weight: 850;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.originality-report-link::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.originality-report-link:hover,
.originality-report-link:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--blue) 12%, transparent);
  transform: translateY(-1px);
}

.originality-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.originality-check-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.originality-check-meta span {
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  color: var(--blue);
  font-size: 12px;
  font-weight: 820;
}

.originality-metric {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.72);
}

.originality-metric strong {
  color: var(--ink);
  font-size: 13px;
}

.originality-metric small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.originality-metric > b {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.originality-metric i {
  grid-column: 1 / -1;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 9%, #e8edf6);
}

.originality-metric i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.originality-metric.is-good i span,
.originality-highlight.is-good b {
  background: #10b981;
}

.originality-metric.is-warn i span,
.originality-highlight.is-warn b {
  background: #f59e0b;
}

.originality-metric.is-bad i span,
.originality-highlight.is-bad b {
  background: #ef4444;
}

.originality-analysis-grid {
  display: grid;
  grid-template-columns: minmax(210px, 0.34fr) minmax(0, 1fr);
  gap: 14px;
}

.originality-highlight-list,
.originality-text-map {
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.7);
}

.originality-highlight-list h3,
.originality-text-map h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
}

.originality-highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.originality-highlight:first-of-type {
  border-top: 0;
}

.originality-highlight span {
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.originality-highlight b {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 26px;
  border-radius: 999px;
  color: #ffffff;
  font-size: 12px;
}

.originality-text-map > div {
  max-height: 430px;
  overflow: auto;
  padding-right: 4px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 42%, #9db7ff) transparent;
}

.originality-map-empty {
  display: grid;
  gap: 6px;
  min-height: 132px;
  place-content: center;
  border: 1px dashed color-mix(in srgb, #10b981 34%, var(--line));
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, #10b981 10%, transparent), transparent 56%),
    rgba(255, 255, 255, 0.72);
  text-align: center;
}

.originality-map-empty strong {
  color: #047857;
  font-size: 14px;
  font-weight: 900;
}

.originality-map-empty span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.originality-text-map mark {
  display: inline;
  margin: 0 1px;
  border-radius: 6px;
  padding: 2px 3px;
  color: inherit;
}

.originality-text-map mark.is-medium {
  background: color-mix(in srgb, #f59e0b 22%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, #f59e0b 44%, transparent);
}

.originality-text-map mark.is-high {
  background: color-mix(in srgb, #ef4444 19%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, #ef4444 46%, transparent);
}

.originality-text-map mark small {
  display: inline-flex;
  margin: 0 3px;
  padding: 2px 5px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #ffffff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.2;
  vertical-align: 1px;
}

.originality-loading,
.originality-error {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 820;
}

.originality-loading span {
  width: 18px;
  height: 18px;
  border: 3px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.originality-error {
  border-color: color-mix(in srgb, #ef4444 32%, var(--line));
  color: #b91c1c;
}

.theme-dark .originality-compose textarea,
.theme-dark .originality-preview,
.theme-dark .originality-overview,
.theme-dark .originality-metric,
.theme-dark .originality-highlight-list,
.theme-dark .originality-text-map,
.theme-dark .originality-loading,
.theme-dark .originality-error {
  border-color: rgba(84, 102, 137, 0.46);
  background: rgba(8, 13, 26, 0.76);
}

.theme-dark .originality-score::before,
.theme-dark .originality-detail-score::before {
  background:
    radial-gradient(circle at 32% 22%, rgba(96, 165, 250, 0.12), transparent 34%),
    linear-gradient(180deg, rgba(17, 26, 46, 0.98), rgba(8, 13, 26, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -12px 26px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}

.theme-dark .originality-report-link {
  background: color-mix(in srgb, var(--blue) 16%, rgba(8, 13, 26, 0.86));
}

.theme-dark .originality-compose textarea,
.theme-dark .originality-preview {
  background:
    linear-gradient(180deg, rgba(8, 13, 26, 0.94), rgba(5, 9, 18, 0.96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.theme-dark .originality-mode-grid span,
.theme-dark .originality-check-meta span {
  border-color: rgba(126, 154, 203, 0.34);
  background: rgba(8, 13, 26, 0.64);
}

.theme-dark .originality-mode-grid input:checked + span {
  border-color: color-mix(in srgb, var(--blue) 58%, #dbeafe);
  background: color-mix(in srgb, var(--blue) 20%, rgba(17, 26, 46, 0.96));
}

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

@keyframes score-breathe {
  0%,
  100% {
    filter: saturate(1);
  }
  50% {
    filter: saturate(1.08) brightness(1.02);
  }
}

@keyframes score-orbit {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .originality-score,
  .originality-score::after,
  .originality-detail-score,
  .originality-detail-score::after {
    animation: none;
  }
}

@media (max-width: 760px) {
  .originality-source-switch {
    gap: 7px;
    border-radius: 18px;
    padding: 7px;
  }

  .originality-source-switch button {
    min-height: 66px;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 7px;
    border-radius: 14px;
    padding: 9px 8px;
  }

  .originality-source-switch button::before {
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background-size: 16px 16px, auto;
  }

  .originality-source-switch button.is-active::after {
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    background-size: 10px 10px, auto;
  }

  .originality-source-switch strong {
    font-size: 12px;
  }

  .originality-source-switch small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .originality-compose,
  .originality-analysis-grid,
  .originality-metrics {
    grid-template-columns: 1fr;
  }

  .originality-compose > .field-wide {
    grid-row: auto;
  }

  .originality-file-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .originality-compose textarea {
    min-height: 230px;
  }

  .originality-upload .file-dropzone,
  .originality-preview {
    min-height: 156px;
  }

  .originality-submit {
    width: 100%;
    justify-self: stretch;
  }

  .originality-overview {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .originality-score {
    --score-size: 78px;
    --score-ring: 7px;
  }

  .originality-job-hero,
  .originality-guidance,
  .originality-email-form {
    grid-template-columns: 1fr;
  }

  .originality-detail-score {
    --score-size: 92px;
    --score-ring: 8px;
  }

  .originality-guidance article,
  .originality-guidance article:nth-child(2n),
  .originality-guidance article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  }

  .originality-guidance article:last-child {
    border-bottom: 0;
  }
}

.jobs-panel {
  position: sticky;
  top: 16px;
  align-self: start;
  max-height: calc(81vh - 5px);
  overflow: auto;
  padding: 16px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 72%, #94a3b8) color-mix(in srgb, var(--blue) 8%, #eef4ff);
}

.jobs-panel::-webkit-scrollbar {
  width: 10px;
}

.jobs-panel::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 8%, #eef4ff);
}

.jobs-panel::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 72%, #94a3b8);
  background-clip: padding-box;
}

.jobs-panel::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--blue) 86%, #64748b);
  background-clip: padding-box;
}

.theme-dark .jobs-panel {
  scrollbar-color: color-mix(in srgb, var(--blue) 76%, #cbd5e1) color-mix(in srgb, var(--blue) 18%, #0b1220);
}

.theme-dark .jobs-panel::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--blue) 18%, #0b1220);
}

.theme-dark .jobs-panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--blue) 76%, #cbd5e1);
  background-clip: padding-box;
}

.theme-dark .job-card {
  border-color: rgba(84, 102, 137, 0.42);
  background:
    linear-gradient(180deg, rgba(10, 16, 32, 0.94), rgba(6, 10, 21, 0.98));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
}

.theme-dark .job-card.is-failed {
  border-color: color-mix(in srgb, #ef4444 48%, rgba(84, 102, 137, 0.42));
}

.theme-dark .job-status {
  border-color: color-mix(in srgb, #22c55e 42%, rgba(126, 154, 203, 0.32));
  background: rgba(34, 197, 94, 0.12);
  color: #bbf7d0;
}

.theme-dark .job-card.is-failed .job-status {
  border-color: color-mix(in srgb, #ef4444 48%, rgba(126, 154, 203, 0.28));
  background: rgba(239, 68, 68, 0.13);
  color: #fecaca;
}

.theme-dark .progress {
  background: rgba(126, 154, 203, 0.18);
}

.empty-jobs {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.jobs-list {
  display: grid;
  gap: 10px;
  overflow: visible;
}

.jobs-all-link {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 46%, var(--line));
  border-radius: 8px;
  background: transparent;
  color: var(--blue);
  text-decoration: none;
  font-weight: 820;
}

.jobs-all-link:hover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.job-card {
  position: relative;
  min-width: 0;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 14px;
  padding: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 3%, #ffffff));
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.045);
}

.job-card.is-failed {
  border-color: rgba(180, 35, 24, 0.35);
}

.job-topline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  overflow: visible;
}

.job-title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.job-top-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
}

.job-status {
  border: 1px solid color-mix(in srgb, #16a34a 22%, var(--line));
  border-radius: 999px;
  padding: 4px 9px;
  background: color-mix(in srgb, #16a34a 8%, #ffffff);
  color: #0f7a3b;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.job-card.is-failed .job-status {
  background: #fdecec;
  color: var(--red);
}

.job-message {
  margin: 8px 0 10px;
  color: var(--muted);
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 13px;
  line-height: 1.35;
}

.job-message > span,
.job-message [data-job-message] {
  min-width: 0;
  overflow-wrap: anywhere;
}

.job-eta {
  display: inline-flex;
  margin-left: 8px;
  border: 1px solid color-mix(in srgb, var(--teal) 22%, var(--line));
  border-radius: 999px;
  padding: 2px 7px;
  background: color-mix(in srgb, var(--teal) 8%, #ffffff);
  color: var(--teal);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.theme-dark .job-eta {
  border-color: color-mix(in srgb, var(--blue) 42%, #1d2a43);
  background: color-mix(in srgb, var(--blue) 18%, #111a2e);
  color: #dbeafe;
}

.progress {
  width: 100%;
  max-width: 100%;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 9%, #e5ebf2);
}

.progress span {
  display: block;
  width: 0;
  max-width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #16a34a, color-mix(in srgb, var(--blue) 42%, #16a34a));
  transition: width 180ms ease;
}

.job-card-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 10px;
}

.job-primary-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 8px 13px;
  background: linear-gradient(180deg, color-mix(in srgb, #16a34a 88%, #34d399), #16a34a);
  color: #ffffff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 12px 26px color-mix(in srgb, #16a34a 18%, transparent);
}

.job-action-menu {
  position: relative;
  z-index: 6;
}

.job-action-toggle {
  position: relative;
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 20%, rgba(255, 255, 255, 0.98), transparent 36%),
    linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--blue) 7%, #ffffff));
  color: var(--blue);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.job-action-toggle span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.job-action-toggle::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.job-action-toggle:hover,
.job-action-menu.is-open .job-action-toggle {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line));
  box-shadow: 0 14px 32px color-mix(in srgb, var(--blue) 18%, rgba(15, 23, 42, 0.12));
  transform: translateY(-1px);
}

.job-action-menu.is-open .job-action-toggle::before {
  transform: rotate(88deg);
}

.job-action-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  width: 190px;
  max-width: calc(100vw - 34px);
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 16px;
  padding: 7px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 22px 58px rgba(15, 23, 42, 0.2);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top right;
  transition: opacity 160ms ease, transform 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
  backdrop-filter: blur(18px);
}

.job-action-menu.is-open .job-action-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.job-action-item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  justify-content: start;
  gap: 7px;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 11px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 820;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  text-align: left;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.job-action-item::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.job-action-item:hover {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, #ffffff);
  color: var(--blue);
  transform: translateY(-1px);
}

.job-action-item.is-danger {
  color: var(--red);
}

.job-action-item.is-danger:hover {
  border-color: color-mix(in srgb, var(--red) 30%, var(--line));
  background: color-mix(in srgb, var(--red) 9%, #ffffff);
  color: var(--red);
}

.job-action-item:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.output-scroll {
  max-height: min(220px, 34vh);
  margin-top: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, #ffffff 88%, var(--blue));
}

.output-scroll::-webkit-scrollbar {
  width: 10px;
}

.output-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.output-scroll::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 34%, #cbd5e1);
  background-clip: padding-box;
}

.theme-dark .output-scroll {
  border-color: rgba(126, 154, 203, 0.28);
  background: rgba(11, 18, 32, 0.48);
}

.output-list {
  display: grid;
  gap: 7px;
  padding: 8px;
}

.output-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  border: 1px solid #cfe0f6;
  border-radius: 8px;
  padding: 7px 9px;
  background: #edf4ff;
  color: var(--blue);
  text-decoration: none;
  font-weight: 700;
}

.output-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.output-link-wrap {
  display: grid;
  gap: 8px;
}

button.output-link {
  cursor: pointer;
}

.output-link small {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.job-actions,
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.job-open,
.secondary-action,
.danger-action {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px 10px;
  background: #fbfdff;
  color: var(--text);
  text-decoration: none;
  font-weight: 720;
}

.theme-dark .job-open,
.theme-dark .secondary-action,
.theme-dark .job-action-toggle {
  border-color: rgba(126, 154, 203, 0.58);
  background: rgba(17, 26, 46, 0.96);
  color: #e7eefc;
}

.theme-dark .job-open:hover,
.theme-dark .secondary-action:hover,
.theme-dark .job-action-menu.is-open .job-action-toggle {
  border-color: color-mix(in srgb, var(--blue) 58%, white);
  background: color-mix(in srgb, var(--blue) 20%, #111a2e);
  color: #ffffff;
}

.theme-dark .job-action-popover {
  border-color: rgba(126, 154, 203, 0.38);
  background: rgba(17, 26, 46, 0.96);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
}

.theme-dark .job-action-item {
  background: rgba(11, 18, 32, 0.86);
  color: #e7eefc;
}

.theme-dark .job-action-item:hover {
  background: color-mix(in srgb, var(--blue) 20%, #111a2e);
  color: #ffffff;
}

.theme-dark .job-action-item.is-danger {
  color: #fca5a5;
}

.theme-dark .job-delete-dialog {
  border-color: color-mix(in srgb, var(--red) 34%, #243049);
  background:
    linear-gradient(180deg, rgba(17, 26, 46, 0.98), color-mix(in srgb, var(--red) 8%, #111a2e)),
    #111a2e;
}

.theme-dark .job-delete-target {
  background: rgba(11, 18, 32, 0.66);
}

.theme-dark .job-delete-dialog button {
  color: #e7eefc;
}

.theme-dark .job-delete-dialog button.is-danger {
  background: color-mix(in srgb, var(--red) 16%, #111a2e);
  color: #fecaca;
}

.detail-workspace-link {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, #ffffff);
  color: var(--blue);
}

.theme-dark .detail-workspace-link {
  border-color: color-mix(in srgb, var(--blue) 54%, white);
  background: color-mix(in srgb, var(--blue) 22%, #111a2e);
  color: #ffffff;
}

.job-open:hover,
.secondary-action:hover {
  border-color: var(--blue);
  color: var(--blue);
}

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

.danger-action:hover {
  border-color: rgba(180, 35, 24, 0.45);
  background: #fdecec;
}

.job-delete-modal[hidden] {
  display: none;
}

.job-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 260;
  display: grid;
  place-items: center;
  padding: 18px;
}

.job-delete-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.38);
  backdrop-filter: blur(12px);
}

.job-delete-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(430px, 100%);
  border: 1px solid color-mix(in srgb, var(--red) 18%, var(--line));
  border-radius: 16px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--red) 3%, #ffffff)),
    #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
  animation: job-delete-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes job-delete-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.job-delete-dialog > span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--red) 8%, #ffffff);
  color: var(--red);
  font-size: 12px;
  font-weight: 840;
}

.job-delete-dialog h2,
.job-delete-dialog p {
  margin: 0;
}

.job-delete-dialog h2 {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.08;
}

.job-delete-dialog p {
  color: var(--muted);
}

.job-delete-target {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--red) 12%, var(--line));
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.72);
}

.job-delete-target small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.job-delete-target b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.job-delete-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.job-delete-dialog button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  padding: 8px 13px;
  background: transparent;
  color: var(--ink);
  font-weight: 840;
}

.job-delete-dialog button.is-danger {
  border-color: color-mix(in srgb, var(--red) 32%, var(--line));
  background: color-mix(in srgb, var(--red) 9%, #ffffff);
  color: var(--red);
}

.job-delete-dialog button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.job-delete-dialog button.is-danger:hover {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, #ffffff);
  color: var(--red);
}

.stats-card small em {
  color: inherit;
  font-style: normal;
}

body.stats-delete-open {
  overflow: hidden;
}

.stats-delete-modal[hidden] {
  display: none;
}

.stats-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: grid;
  place-items: center;
  padding: 18px;
}

.stats-delete-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(14px);
}

.stats-delete-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  width: min(440px, 100%);
  border: 1px solid color-mix(in srgb, var(--red) 18%, var(--line));
  border-radius: 16px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--red) 3%, #ffffff)),
    #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.24);
  animation: job-delete-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.stats-delete-dialog > span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--red) 8%, #ffffff);
  color: var(--red);
  font-size: 12px;
  font-weight: 840;
}

.stats-delete-dialog h2,
.stats-delete-dialog p {
  margin: 0;
}

.stats-delete-dialog h2 {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.08;
}

.stats-delete-dialog p {
  color: var(--muted);
}

.stats-delete-target {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--red) 12%, var(--line));
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.72);
}

.stats-delete-target small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
}

.stats-delete-target b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.stats-delete-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.stats-delete-dialog button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  padding: 8px 13px;
  background: transparent;
  color: var(--ink);
  font-weight: 840;
}

.stats-delete-dialog button.is-danger {
  border-color: color-mix(in srgb, var(--red) 32%, var(--line));
  background: color-mix(in srgb, var(--red) 9%, #ffffff);
  color: var(--red);
}

.stats-delete-dialog button:hover {
  border-color: var(--blue);
  color: var(--blue);
}

.stats-delete-dialog button.is-danger:hover {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 14%, #ffffff);
  color: var(--red);
}

.stats-job-row.is-deleting {
  opacity: 0.58;
  pointer-events: none;
}

.theme-dark .stats-delete-dialog {
  border-color: color-mix(in srgb, var(--red) 34%, #243049);
  background:
    linear-gradient(180deg, rgba(17, 26, 46, 0.98), color-mix(in srgb, var(--red) 8%, #111a2e)),
    #111a2e;
}

.theme-dark .stats-delete-target {
  background: rgba(11, 18, 32, 0.66);
}

.theme-dark .stats-delete-dialog button {
  color: #e7eefc;
}

.theme-dark .stats-delete-dialog button.is-danger {
  background: color-mix(in srgb, var(--red) 16%, #111a2e);
  color: #fecaca;
}

@media (max-width: 640px) {
  .stats-delete-modal {
    align-items: end;
    justify-items: stretch;
    padding: 12px;
  }

  .stats-delete-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px);
    overflow: auto;
    border-radius: 18px;
    padding: 16px;
    animation: stats-delete-sheet-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .stats-delete-dialog h2 {
    font-size: 20px;
  }

  .stats-delete-dialog p {
    font-size: 13px;
    line-height: 1.35;
  }

  .stats-delete-dialog footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .stats-delete-dialog button {
    min-height: 44px;
    padding: 10px 12px;
  }
}

@keyframes stats-delete-sheet-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  padding: 0 28px 28px;
}

.stats-detail {
  display: grid;
  gap: 16px;
  padding: 0 28px 28px;
}

.stats-page .topbar {
  border-bottom: 0;
}

.stats-hero {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
}

.stats-card {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 14px;
  padding: 16px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, var(--blue)), var(--surface)),
    var(--surface);
  box-shadow: var(--shadow);
}

.stats-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 22%, transparent));
}

.stats-card::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 14px;
  width: 74px;
  height: 74px;
  opacity: 0.08;
  background: var(--blue);
  -webkit-mask: var(--stats-icon) center / contain no-repeat;
  mask: var(--stats-icon) center / contain no-repeat;
}

.stats-card.is-storage {
  --stats-icon: url("https://api.iconify.design/lucide/hard-drive.svg");
}

.stats-card.is-jobs {
  --stats-icon: url("https://api.iconify.design/lucide/list-checks.svg");
}

.stats-card.is-files {
  --stats-icon: url("https://api.iconify.design/lucide/folder-open.svg");
}

.stats-hero span,
.stats-hero small {
  position: relative;
  z-index: 1;
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.stats-hero strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.05;
}

.stats-hero i {
  position: relative;
  z-index: 1;
  display: block;
  height: 8px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-2));
}

.stats-hero i b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 54%, #ffffff), var(--blue));
}

.stats-list {
  display: grid;
  gap: 8px;
}

.stats-files-panel {
  position: relative;
}

.stats-files-top {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.2fr);
  gap: 16px;
  align-items: end;
}

.stats-filter-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 0.72fr) auto;
  gap: 10px;
  align-items: end;
  width: 100%;
}

.stats-search-field,
.stats-native-type {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.stats-search-field span,
.stats-native-type span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.stats-filter-form input[type="search"],
.stats-type-current {
  width: 100%;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
  color: var(--ink);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  outline: none;
}

.stats-filter-form input[type="search"] {
  min-width: 0;
  padding: 12px 14px;
}

.stats-filter-form input[type="search"]:focus,
.stats-type-picker.is-open .stats-type-current {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent);
}

.stats-filter-submit {
  min-height: 46px;
  white-space: nowrap;
  border: none;
  border-radius: 12px;
  padding: 12px 18px;
  background: var(--blue);
  color: #fff;
  cursor: pointer;
  font-weight: 850;
}

.stats-native-type {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.stats-type-picker {
  position: relative;
  min-width: 0;
}

.stats-type-current {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  padding: 10px 12px;
  text-align: left;
}

.stats-type-current b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stats-type-current::after {
  content: "";
  position: absolute;
  right: 13px;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  opacity: 0.58;
  transform: rotate(45deg) translateY(-2px);
}

[data-stats-type-current-icon],
.stats-type-menu button::before {
  display: block;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--stats-type-icon) center / contain no-repeat;
  mask: var(--stats-type-icon) center / contain no-repeat;
}

.stats-type-menu button::before {
  content: "";
}

[data-icon="folder"],
[data-type-icon="folder"] {
  --stats-type-icon: url("https://api.iconify.design/lucide/folder-open.svg");
}

[data-icon="image"],
[data-type-icon="image"] {
  --stats-type-icon: url("https://api.iconify.design/lucide/image.svg");
}

[data-icon="video"],
[data-type-icon="video"] {
  --stats-type-icon: url("https://api.iconify.design/lucide/video.svg");
}

[data-icon="file-text"],
[data-type-icon="file-text"] {
  --stats-type-icon: url("https://api.iconify.design/lucide/file-text.svg");
}

[data-icon="file"],
[data-type-icon="file"] {
  --stats-type-icon: url("https://api.iconify.design/lucide/file.svg");
}

[data-icon="music"],
[data-type-icon="music"] {
  --stats-type-icon: url("https://api.iconify.design/lucide/music.svg");
}

[data-icon="archive"],
[data-type-icon="archive"] {
  --stats-type-icon: url("https://api.iconify.design/lucide/archive.svg");
}

.stats-type-menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 5px;
  width: min(280px, calc(100vw - 32px));
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 14px;
  padding: 7px;
  background: color-mix(in srgb, var(--surface) 96%, #ffffff);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.17);
}

.stats-type-menu[hidden] {
  display: none;
}

.stats-type-menu button {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 9px;
  align-items: center;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-weight: 780;
}

.stats-type-menu button.is-active,
.stats-type-menu button:hover {
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
  color: var(--blue);
}

.stats-files-table-head {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) 120px minmax(304px, max-content);
  gap: 14px;
  margin: 14px 0 8px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 860;
  text-transform: uppercase;
}

.stats-files-table-head span:first-child {
  grid-column: 2;
}

.stats-files-table-head span:nth-child(2) {
  grid-column: 3;
}

.stats-files-table-head span:nth-child(3) {
  grid-column: 4;
}

.stats-share-btn {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
  border-radius: 8px;
  padding: 6px 9px;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 820;
  cursor: pointer;
  transition: all 160ms ease;
}

.stats-share-btn:hover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.share-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  backdrop-filter: blur(4px);
}

.share-modal[hidden] {
  display: none;
}

.share-modal-content {
  background: var(--surface);
  border-radius: 14px;
  padding: 24px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.share-modal-content h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--ink);
}

.share-link-input {
  display: block;
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13px;
  font-family: monospace;
}

.share-channels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.share-channel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  transition: all 160ms ease;
  font-size: 14px;
  font-weight: 500;
}

.share-channel:hover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.share-modal-close {
  display: block;
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  transition: all 160ms ease;
}

.share-modal-close:hover {
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-2));
}

.stats-files-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 10px;
}

.stats-files-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.pagination-button,
.stats-files-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  gap: 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  background: var(--surface-2);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 14px;
  text-decoration: none;
}

.pagination-button.is-active,
.stats-files-pagination a.is-active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}

.pagination-previous::before {
  content: "<";
}

.pagination-next::before {
  content: ">";
}

.page-ellipsis {
  color: var(--muted);
  font-size: 16px;
}

.detail-panel.is-loading .stats-list {
  opacity: 0.45;
  transition: opacity 120ms ease;
}

.stats-files-meta {
  color: var(--muted);
  font-size: 14px;
}

.stats-row {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) auto minmax(260px, max-content);
  align-items: center;
  gap: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 10px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--surface) 94%, var(--blue));
  color: var(--ink);
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.stats-job-row {
  grid-template-columns: 4px 58px minmax(0, 1fr) auto minmax(260px, max-content);
}

.stats-row.stats-file-row {
  grid-template-columns: 4px minmax(0, 1fr) 120px minmax(304px, max-content);
}

.stats-task-thumb {
  position: relative;
  display: grid;
  width: 58px;
  height: 46px;
  place-items: center;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 12px;
  background:
    radial-gradient(circle at 80% 16%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 34%),
    color-mix(in srgb, var(--blue) 7%, var(--surface));
  color: var(--blue);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.stats-task-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stats-task-thumb span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  color: currentColor;
  font-size: 9px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}

.stats-task-thumb:not(.is-image)::before {
  content: "";
  width: 21px;
  height: 21px;
  background: currentColor;
  -webkit-mask: var(--task-thumb-icon) center / contain no-repeat;
  mask: var(--task-thumb-icon) center / contain no-repeat;
}

.stats-task-thumb:not(.is-image) span {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: auto;
  height: auto;
  border-radius: 999px;
  padding: 3px 4px;
  background: rgba(255, 255, 255, 0.82);
  color: #1e3a8a;
  font-size: 7px;
}

.stats-task-thumb.is-video {
  --task-thumb-icon: url("https://api.iconify.design/lucide/play.svg");
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(37, 99, 235, 0.72)),
    #0f172a;
  color: #ffffff;
}

.stats-task-thumb.is-audio {
  --task-thumb-icon: url("https://api.iconify.design/lucide/audio-lines.svg");
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.24) 0 3px, transparent 3px 8px),
    linear-gradient(135deg, #4c1d95, #2563eb);
  color: #ffffff;
}

.stats-task-thumb.is-pdf,
.stats-task-thumb.is-text {
  --task-thumb-icon: url("https://api.iconify.design/lucide/file-text.svg");
}

.stats-task-thumb.is-archive {
  --task-thumb-icon: url("https://api.iconify.design/lucide/archive.svg");
}

.stats-task-thumb.is-file {
  --task-thumb-icon: url("https://api.iconify.design/lucide/file.svg");
}

.stats-row.stats-file-row > strong,
.stats-files-table-head span:nth-child(2) {
  justify-self: center;
  text-align: center;
}

.stats-job-row > strong {
  display: grid;
  gap: 4px;
  justify-items: center;
  min-width: 92px;
  grid-auto-flow: column;
  align-items: center;
}

.stats-job-row > strong small {
  font-size: 12px;
}

.stats-job-row .job-status {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, #ffffff);
  color: var(--blue);
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 820;
}

.stats-job-row.is-running .job-status {
  border-color: color-mix(in srgb, #0f766e 24%, var(--line));
  background: color-mix(in srgb, #0f766e 9%, #ffffff);
  color: #0f766e;
}

.stats-job-row.is-failed .job-status {
  border-color: color-mix(in srgb, #b42318 28%, var(--line));
  background: color-mix(in srgb, #b42318 8%, #ffffff);
  color: #b42318;
}

.stats-job-row.is-cancelled .job-status {
  border-color: color-mix(in srgb, #64748b 28%, var(--line));
  background: color-mix(in srgb, #64748b 9%, #ffffff);
  color: #475569;
}

@media (max-width: 900px) {
  .stats-files-top,
  .stats-filter-form {
    grid-template-columns: 1fr;
  }

  .stats-files-table-head {
    display: none;
  }

  .stats-row.stats-file-row {
    grid-template-columns: 4px minmax(0, 1fr) auto;
  }

  .stats-job-row {
    grid-template-columns: 4px 54px minmax(0, 1fr) auto;
  }

  .stats-job-row .stats-actions {
    grid-column: 3 / -1;
    justify-content: flex-start;
  }

  .stats-file-row .stats-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  .stats-files-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

.stats-row::before {
  content: "";
  width: 4px;
  height: 100%;
  align-self: stretch;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 66%, transparent);
}

.stats-row:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
  transform: translateY(-1px);
}

.stats-row > span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.stats-row b,
.stats-row small {
  overflow-wrap: anywhere;
}

.stats-row small {
  color: var(--muted);
}

.video-editor-app {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 300px;
  gap: 14px;
  height: calc(100vh - 118px);
  min-height: 620px;
  padding: 0 20px 20px;
}

.editor-rail,
.editor-preview-panel,
.editor-timeline-panel,
.editor-properties {
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--blue));
  box-shadow: var(--shadow);
}

.editor-rail {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.editor-rail button,
.editor-aspect button,
.editor-playbar button,
.editor-tool-panel button {
  border: 1px solid color-mix(in srgb, var(--blue) 32%, var(--line));
  border-radius: 8px;
  background: transparent;
  color: var(--blue);
  font-weight: 820;
}

.editor-rail button {
  min-height: 54px;
  padding: 8px 6px;
  font-size: 12px;
}

.editor-icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
}

.editor-icon-button::before,
.editor-track-icon,
.editor-clip-kind {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.editor-icon-button[data-icon="play"],
[data-icon="play"] { --editor-icon: url("https://api.iconify.design/lucide/play.svg"); }
.editor-icon-button[data-icon="pause"],
[data-icon="pause"] { --editor-icon: url("https://api.iconify.design/lucide/pause.svg"); }
.editor-icon-button[data-icon="scissors"],
[data-icon="scissors"] { --editor-icon: url("https://api.iconify.design/lucide/scissors.svg"); }
.editor-icon-button[data-icon="trash-2"],
[data-icon="trash-2"] { --editor-icon: url("https://api.iconify.design/lucide/trash-2.svg"); }
.editor-icon-button[data-icon="type"],
[data-icon="type"] { --editor-icon: url("https://api.iconify.design/lucide/type.svg"); }
.editor-icon-button[data-icon="image-plus"],
[data-icon="image-plus"] { --editor-icon: url("https://api.iconify.design/lucide/image-plus.svg"); }
.editor-icon-button[data-icon="image"],
[data-icon="image"] { --editor-icon: url("https://api.iconify.design/lucide/image.svg"); }
[data-icon="file-text"] { --editor-icon: url("https://api.iconify.design/lucide/file-text.svg"); }
[data-icon="scan-text"] { --editor-icon: url("https://api.iconify.design/lucide/scan-text.svg"); }
.editor-icon-button[data-icon="music"],
[data-icon="music"] { --editor-icon: url("https://api.iconify.design/lucide/music.svg"); }
.editor-icon-button[data-icon="mic"],
[data-icon="mic"] { --editor-icon: url("https://api.iconify.design/lucide/mic.svg"); }
.editor-icon-button[data-icon="plus"],
[data-icon="plus"] { --editor-icon: url("https://api.iconify.design/lucide/plus.svg"); }
.editor-icon-button[data-icon="minus"],
[data-icon="minus"] { --editor-icon: url("https://api.iconify.design/lucide/minus.svg"); }
.editor-icon-button[data-icon="maximize"],
[data-icon="maximize"] { --editor-icon: url("https://api.iconify.design/lucide/maximize.svg"); }
.editor-icon-button[data-icon="maximize-2"],
[data-icon="maximize-2"] { --editor-icon: url("https://api.iconify.design/lucide/maximize-2.svg"); }
.editor-icon-button[data-icon="download"],
[data-icon="download"] { --editor-icon: url("https://api.iconify.design/lucide/download.svg"); }
[data-icon="external-link"] { --editor-icon: url("https://api.iconify.design/lucide/external-link.svg"); }
[data-icon="settings"] { --editor-icon: url("https://api.iconify.design/lucide/settings.svg"); }
[data-icon="graduation-cap"] { --editor-icon: url("https://api.iconify.design/lucide/graduation-cap.svg"); }
[data-icon="clipboard-check"] { --editor-icon: url("https://api.iconify.design/lucide/clipboard-check.svg"); }
[data-icon="mail"] { --editor-icon: url("https://api.iconify.design/lucide/mail.svg"); }
[data-icon="user-check"] { --editor-icon: url("https://api.iconify.design/lucide/user-check.svg"); }
.editor-icon-button[data-icon="panel-top"],
[data-icon="panel-top"] { --editor-icon: url("https://api.iconify.design/lucide/panel-top.svg"); }
.editor-icon-button[data-icon="panel-top-open"],
[data-icon="panel-top-open"] { --editor-icon: url("https://api.iconify.design/lucide/panel-top-open.svg"); }
.editor-icon-button[data-icon="panel-bottom-open"],
[data-icon="panel-bottom-open"] { --editor-icon: url("https://api.iconify.design/lucide/panel-bottom-open.svg"); }
[data-icon="panel-left-open"] { --editor-icon: url("https://api.iconify.design/lucide/panel-left-open.svg"); }
.editor-icon-button[data-icon="list-music"],
[data-icon="list-music"] { --editor-icon: url("https://api.iconify.design/lucide/list-music.svg"); }
.editor-icon-button[data-icon="sliders-horizontal"],
[data-icon="sliders-horizontal"] { --editor-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg"); }
.editor-icon-button[data-icon="film"],
[data-icon="film"] { --editor-icon: url("https://api.iconify.design/lucide/film.svg"); }
.editor-icon-button[data-icon="circle"],
[data-icon="circle"] { --editor-icon: url("https://api.iconify.design/lucide/circle.svg"); }
.editor-icon-button[data-icon="volume-2"],
[data-icon="volume-2"] { --editor-icon: url("https://api.iconify.design/lucide/volume-2.svg"); }
.editor-icon-button[data-icon="volume-x"],
[data-icon="volume-x"] { --editor-icon: url("https://api.iconify.design/lucide/volume-x.svg"); }
.editor-icon-button[data-icon="square"],
[data-icon="square"] { --editor-icon: url("https://api.iconify.design/lucide/square.svg"); }
.editor-icon-button[data-icon="video"],
[data-icon="video"] { --editor-icon: url("https://api.iconify.design/lucide/video.svg"); }
.editor-icon-button[data-icon="undo-2"],
[data-icon="undo-2"] { --editor-icon: url("https://api.iconify.design/lucide/undo-2.svg"); }
.editor-icon-button[data-icon="redo-2"],
[data-icon="redo-2"] { --editor-icon: url("https://api.iconify.design/lucide/redo-2.svg"); }
.editor-icon-button[data-icon="copy-plus"],
[data-icon="copy-plus"] { --editor-icon: url("https://api.iconify.design/lucide/copy-plus.svg"); }
[data-icon="rotate-ccw"] { --editor-icon: url("https://api.iconify.design/lucide/rotate-ccw.svg"); }
.editor-icon-button[data-icon="magnet"],
[data-icon="magnet"] { --editor-icon: url("https://api.iconify.design/lucide/magnet.svg"); }
.editor-icon-button[data-icon="rows-3"],
[data-icon="rows-3"] { --editor-icon: url("https://api.iconify.design/lucide/rows-3.svg"); }
[data-icon="eye"] { --editor-icon: url("https://api.iconify.design/lucide/eye.svg"); }
[data-icon="eye-off"] { --editor-icon: url("https://api.iconify.design/lucide/eye-off.svg"); }
[data-icon="box"] { --editor-icon: url("https://api.iconify.design/lucide/box.svg"); }
[data-icon="palette"] { --editor-icon: url("https://api.iconify.design/lucide/palette.svg"); }
[data-icon="pen-tool"] { --editor-icon: url("https://api.iconify.design/lucide/pen-tool.svg"); }
[data-icon="code-2"] { --editor-icon: url("https://api.iconify.design/lucide/code-2.svg"); }
[data-icon="rocket"] { --editor-icon: url("https://api.iconify.design/lucide/rocket.svg"); }
[data-icon="x"] { --editor-icon: url("https://api.iconify.design/lucide/x.svg"); }
[data-icon="upload"] { --editor-icon: url("https://api.iconify.design/lucide/upload.svg"); }
[data-icon="wand-2"] { --editor-icon: url("https://api.iconify.design/lucide/wand-2.svg"); }
[data-icon="layers"] { --editor-icon: url("https://api.iconify.design/lucide/layers.svg"); }
[data-icon="captions"] { --editor-icon: url("https://api.iconify.design/lucide/captions.svg"); }
[data-icon="bold"] { --editor-icon: url("https://api.iconify.design/lucide/bold.svg"); }
[data-icon="case-upper"] { --editor-icon: url("https://api.iconify.design/lucide/case-upper.svg"); }
[data-icon="align-left"] { --editor-icon: url("https://api.iconify.design/lucide/align-left.svg"); }
[data-icon="align-center"] { --editor-icon: url("https://api.iconify.design/lucide/align-center.svg"); }
[data-icon="align-right"] { --editor-icon: url("https://api.iconify.design/lucide/align-right.svg"); }
[data-icon="bring-to-front"] { --editor-icon: url("https://api.iconify.design/lucide/bring-to-front.svg"); }
[data-icon="send-to-back"] { --editor-icon: url("https://api.iconify.design/lucide/send-to-back.svg"); }
[data-icon="chevron-left"] { --editor-icon: url("https://api.iconify.design/lucide/chevron-left.svg"); }
[data-icon="chevron-right"] { --editor-icon: url("https://api.iconify.design/lucide/chevron-right.svg"); }
[data-icon="refresh-cw"] { --editor-icon: url("https://api.iconify.design/lucide/refresh-cw.svg"); }
[data-icon="youtube"] { --editor-icon: url("https://api.iconify.design/lucide/youtube.svg"); }
[data-icon="package"] { --editor-icon: url("https://api.iconify.design/lucide/package.svg"); }
[data-icon="file-user"] { --editor-icon: url("https://api.iconify.design/lucide/file-user.svg"); }
[data-icon="music-2"] { --editor-icon: url("https://api.iconify.design/lucide/music-2.svg"); }
[data-icon="circle-plus"] { --editor-icon: url("https://api.iconify.design/lucide/circle-plus.svg"); }
[data-icon="list-filter"] { --editor-icon: url("https://api.iconify.design/lucide/list-filter.svg"); }
[data-icon="activity"] { --editor-icon: url("https://api.iconify.design/lucide/activity.svg"); }
[data-icon="check-check"] { --editor-icon: url("https://api.iconify.design/lucide/check-check.svg"); }
[data-icon="triangle-alert"] { --editor-icon: url("https://api.iconify.design/lucide/triangle-alert.svg"); }
[data-icon="shield-check"] { --editor-icon: url("https://api.iconify.design/lucide/shield-check.svg"); }
[data-icon="zap"] { --editor-icon: url("https://api.iconify.design/lucide/zap.svg"); }
[data-icon="clapperboard"] { --editor-icon: url("https://api.iconify.design/lucide/clapperboard.svg"); }
[data-icon="video"] { --editor-icon: url("https://api.iconify.design/lucide/video.svg"); }
[data-icon="sparkles"] { --editor-icon: url("https://api.iconify.design/lucide/sparkles.svg"); }
[data-icon="play-circle"] { --editor-icon: url("https://api.iconify.design/lucide/play-circle.svg"); }
[data-icon="log-in"] { --editor-icon: url("https://api.iconify.design/lucide/log-in.svg"); }
[data-icon="credit-card"] { --editor-icon: url("https://api.iconify.design/lucide/credit-card.svg"); }
[data-icon="wallet-cards"] { --editor-icon: url("https://api.iconify.design/lucide/wallet-cards.svg"); }
[data-icon="coins"] { --editor-icon: url("https://api.iconify.design/lucide/coins.svg"); }
[data-icon="send"] { --editor-icon: url("https://api.iconify.design/lucide/send.svg"); }
[data-icon="badge-dollar-sign"] { --editor-icon: url("https://api.iconify.design/lucide/badge-dollar-sign.svg"); }
[data-icon="receipt-text"] { --editor-icon: url("https://api.iconify.design/lucide/receipt-text.svg"); }
[data-icon="landmark"] { --editor-icon: url("https://api.iconify.design/lucide/landmark.svg"); }
[data-icon="lock-keyhole"] { --editor-icon: url("https://api.iconify.design/lucide/lock-keyhole.svg"); }
[data-icon="history"] { --editor-icon: url("https://api.iconify.design/lucide/history.svg"); }
[data-icon="wand-2"] { --editor-icon: url("https://api.iconify.design/lucide/wand-2.svg"); }
[data-icon="palette"] { --editor-icon: url("https://api.iconify.design/lucide/palette.svg"); }
[data-icon="captions"] { --editor-icon: url("https://api.iconify.design/lucide/captions.svg"); }
[data-icon="loader-circle"] { --editor-icon: url("https://api.iconify.design/lucide/loader-circle.svg"); }
[data-icon="layers"] { --editor-icon: url("https://api.iconify.design/lucide/layers.svg"); }
[data-icon="smartphone"] { --editor-icon: url("https://api.iconify.design/lucide/smartphone.svg"); }
[data-icon="layout-dashboard"] { --editor-icon: url("https://api.iconify.design/lucide/layout-dashboard.svg"); }
[data-icon="badge-info"] { --editor-icon: url("https://api.iconify.design/lucide/badge-info.svg"); }
[data-icon="arrow-left"] { --editor-icon: url("https://api.iconify.design/lucide/arrow-left.svg"); }
[data-icon="book-open"] { --editor-icon: url("https://api.iconify.design/lucide/book-open.svg"); }
[data-icon="panels-top-left"] { --editor-icon: url("https://api.iconify.design/lucide/panels-top-left.svg"); }
[data-icon="upload-cloud"] { --editor-icon: url("https://api.iconify.design/lucide/upload-cloud.svg"); }
[data-icon="scan-search"] { --editor-icon: url("https://api.iconify.design/lucide/scan-search.svg"); }
[data-icon="archive"] { --editor-icon: url("https://api.iconify.design/lucide/archive.svg"); }
[data-icon="store"] { --editor-icon: url("https://api.iconify.design/lucide/store.svg"); }
[data-icon="wallet"] { --editor-icon: url("https://api.iconify.design/lucide/wallet.svg"); }
[data-icon="shopping-bag"] { --editor-icon: url("https://api.iconify.design/lucide/shopping-bag.svg"); }
[data-icon="bar-chart-3"] { --editor-icon: url("https://api.iconify.design/lucide/bar-chart-3.svg"); }
[data-icon="receipt"] { --editor-icon: url("https://api.iconify.design/lucide/receipt.svg"); }
[data-icon="audio-waveform"] { --editor-icon: url("https://api.iconify.design/lucide/audio-waveform.svg"); }

.editor-rail button.is-active,
.editor-aspect button.is-active,
.editor-tool-panel button.is-selected {
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
  border-color: var(--blue);
}

.editor-workbench {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  min-width: 0;
  min-height: 0;
}

.editor-preview-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  min-height: 0;
}

.editor-preview-head,
.editor-playbar,
.editor-timeline-head,
.editor-properties-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.editor-preview-head span,
.editor-properties-head span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.editor-preview-head strong,
.editor-properties-head strong {
  color: var(--ink);
}

.editor-aspect {
  position: relative;
  display: grid;
  justify-items: end;
  min-width: 150px;
}

.editor-save-status {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.editor-save-wrap {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.editor-save-status.is-error {
  color: var(--red);
}

.editor-save-wrap button {
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--red) 38%, var(--line));
  border-radius: 999px;
  padding: 5px 10px;
  background: transparent;
  color: var(--red);
  font-weight: 820;
}

.editor-title-inline {
  cursor: text;
}

.editor-title-input {
  width: min(320px, 52vw);
  border: 1px solid color-mix(in srgb, var(--blue) 36%, var(--line));
  border-radius: 9px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  font: inherit;
  font-weight: 820;
  outline: 0;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 12%, transparent);
}

.editor-aspect button {
  min-height: 32px;
  padding: 5px 9px;
}

.editor-aspect-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  align-items: center;
  min-width: 146px;
  border-color: color-mix(in srgb, var(--blue) 26%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, rgba(255, 255, 255, 0.94)), rgba(255, 255, 255, 0.76));
  color: var(--blue);
  text-align: left;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 9%, transparent);
}

.editor-aspect-toggle::before {
  content: "";
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  mask: var(--editor-icon) center / contain no-repeat;
}

.editor-aspect-toggle::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-68%) rotate(45deg);
  opacity: 0.72;
  transition: transform 160ms ease;
}

.editor-aspect.is-open .editor-aspect-toggle::after {
  transform: translateY(-28%) rotate(225deg);
}

.editor-aspect-toggle b,
.editor-aspect-toggle small {
  display: block;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-aspect-toggle b {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.1;
}

.editor-aspect-toggle small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 760;
  line-height: 1.15;
}

.editor-aspect-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 80;
  display: grid;
  gap: 6px;
  width: min(330px, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.88));
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 4%, rgba(255, 255, 255, 0.91)));
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.15);
  backdrop-filter: blur(18px);
}

.editor-aspect-menu[hidden] {
  display: none;
}

.editor-aspect-menu button {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 44px;
  width: 100%;
  border-radius: 12px;
  padding: 8px 10px;
  text-align: left;
}

.editor-aspect-menu button b {
  color: var(--ink);
  font-size: 13px;
}

.editor-aspect-menu button small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.2;
}

.editor-aspect-menu button.is-active {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  background: color-mix(in srgb, var(--blue) 11%, rgba(255, 255, 255, 0.9));
}

.editor-preview-frame {
  position: relative;
  display: grid;
  width: auto;
  height: min(100%, 540px);
  max-width: min(100%, 620px);
  aspect-ratio: var(--editor-aspect);
  place-self: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: 18px;
  background: #020617;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
}

.editor-preview-frame > * {
  grid-area: 1 / 1;
}

.editor-preview-frame.is-wide {
  max-width: min(100%, 780px);
}

.editor-import {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  padding: 22px;
  color: #dbeafe;
  text-align: center;
  cursor: pointer;
}

.editor-import i {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid color-mix(in srgb, var(--blue) 48%, rgba(255, 255, 255, 0.22));
  border-radius: 16px;
  background: color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.08));
  color: #bfdbfe;
}

.editor-import i::before,
.editor-file-picker strong i::before {
  content: "";
  width: 28px;
  height: 28px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.editor-import[hidden],
.editor-preview-frame video[hidden] {
  display: none !important;
}

.editor-import input {
  display: none;
}

.editor-import b {
  font-size: 22px;
}

.editor-import span {
  max-width: 260px;
  color: #9fb0cc;
}

.editor-import.is-dragging {
  background: color-mix(in srgb, var(--blue) 20%, transparent);
}

.editor-preview-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020617;
  transform-origin: 50% 50%;
  transition: object-position 120ms ease, transform 120ms ease;
  will-change: object-position, transform;
}

[data-preview-overlays] {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: auto;
}

.editor-video-reframe {
  position: absolute;
  inset: 0;
  display: none;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.editor-video-reframe.is-active {
  display: block;
  background:
    linear-gradient(90deg, transparent 33.1%, rgba(255, 255, 255, 0.34) 33.2%, rgba(255, 255, 255, 0.34) 33.6%, transparent 33.7%, transparent 66.1%, rgba(255, 255, 255, 0.34) 66.2%, rgba(255, 255, 255, 0.34) 66.6%, transparent 66.7%),
    linear-gradient(0deg, transparent 33.1%, rgba(255, 255, 255, 0.34) 33.2%, rgba(255, 255, 255, 0.34) 33.6%, transparent 33.7%, transparent 66.1%, rgba(255, 255, 255, 0.34) 66.2%, rgba(255, 255, 255, 0.34) 66.6%, transparent 66.7%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--blue) 76%, #ffffff), inset 0 0 0 999px rgba(0, 0, 0, 0.02);
}

.editor-video-reframe.is-dragging {
  cursor: grabbing;
}

.editor-video-reframe span {
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.24);
}

.editor-video-reframe i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 18px;
  height: 18px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 80%, transparent);
  transform: translate(-50%, -50%);
}

.editor-overlay-text {
  position: absolute;
  left: 50%;
  top: 78%;
  max-width: min(88%, 420px);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.48);
  color: #ffffff;
  text-align: center;
  font-size: 22px;
  font-weight: 860;
  cursor: move;
  outline: 0;
  transform: translate(-50%, -50%);
  user-select: text;
  touch-action: none;
  overflow-wrap: anywhere;
}

.editor-image-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
  cursor: move;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
  transform: translate(-50%, -50%);
  touch-action: none;
  z-index: 2;
}

.editor-image-overlay[hidden] {
  display: none !important;
}

.editor-overlay-item {
  position: absolute;
  max-width: min(88%, 420px);
  min-width: 52px;
  box-sizing: border-box;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: move;
  pointer-events: auto;
  touch-action: none;
  z-index: 2;
}

.editor-overlay-item.is-text {
  color: #fff;
  text-align: center;
  font-weight: 860;
  outline: 0;
  overflow-wrap: anywhere;
  padding: 0;
}

.editor-overlay-item.is-caption {
  color: #fff;
  text-align: center;
  font-weight: 900;
  line-height: 1.08;
  white-space: pre-line;
  overflow-wrap: anywhere;
  outline: 0;
  transform-origin: center;
  will-change: transform, filter, opacity;
  padding: 0;
}

.editor-overlay-text-content {
  display: block;
  width: 100%;
  min-height: 1.1em;
  box-sizing: border-box;
  border-radius: inherit;
  padding: 8px 12px 9px;
  outline: 0;
  user-select: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-wrap: balance;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: font-family 120ms ease, letter-spacing 120ms ease;
}

.editor-overlay-item[data-editing="true"] .editor-overlay-text-content {
  cursor: text;
  user-select: text;
  caret-color: #ffffff;
}

.editor-overlay-item.is-caption[data-subtitle-animation="kinetic"],
.editor-overlay-item.is-caption[data-subtitle-animation="pop"],
.editor-overlay-item.is-caption[data-subtitle-animation="headline"] {
  animation: editorCaptionKinetic 1.18s cubic-bezier(.2, .8, .2, 1) infinite;
}

.editor-overlay-item.is-caption[data-subtitle-animation="bounce"] {
  animation: editorCaptionBounce 1.15s ease-in-out infinite;
}

.editor-overlay-item.is-caption[data-subtitle-animation="neon"],
.editor-overlay-item.is-caption[data-subtitle-animation="candy"] {
  animation: editorCaptionGlow 1.6s ease-in-out infinite alternate;
}

.editor-overlay-item.is-caption[data-subtitle-animation="soft"] {
  animation: editorCaptionSoft 2.2s ease-in-out infinite alternate;
}

.editor-overlay-item.is-caption[data-subtitle-animation="typewriter"] {
  letter-spacing: 0.01em;
}

.editor-overlay-item.is-image {
  max-height: 92%;
  padding: 0;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.35));
}

.editor-overlay-item.is-image img {
  display: block;
  width: 100%;
  max-height: 92vh;
  object-fit: contain;
  border-radius: 8px;
  pointer-events: none;
}

.editor-file-overlay {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  min-width: 190px;
  max-width: min(320px, 72vw);
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 12px;
  padding: 12px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(12px);
}

.editor-file-overlay i {
  grid-row: span 2;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
}

.editor-file-overlay i::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.editor-file-overlay b,
.editor-file-overlay small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-file-overlay small {
  opacity: 0.72;
}

.editor-overlay-item.is-selected {
  box-shadow: 0 0 0 1px rgba(255,255,255,.92), 0 0 0 3px color-mix(in srgb, var(--blue) 76%, transparent), 0 18px 38px rgba(2, 6, 23, 0.24);
}

.editor-overlay-item[data-editing="true"] {
  cursor: text;
  box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px color-mix(in srgb, var(--blue) 76%, #22c55e), 0 20px 46px rgba(2, 6, 23, 0.28);
  user-select: text;
}

.editor-overlay-item.is-text.is-selected::before,
.editor-overlay-item.is-caption.is-selected::before {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px dashed rgba(255,255,255,.72);
  border-radius: 10px;
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.42) 49.8%, rgba(255,255,255,.42) 50.2%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(255,255,255,.22) 49.8%, rgba(255,255,255,.22) 50.2%, transparent 50.3%);
  pointer-events: none;
}

.editor-overlay-text-guide {
  position: absolute;
  right: -9px;
  bottom: -28px;
  display: none;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 6px;
  padding: 2px 6px;
  background: rgba(15,23,42,.78);
  color: #ffffff;
  font-size: 10px;
  font-weight: 760;
  line-height: 1.2;
  letter-spacing: 0;
  box-shadow: 0 10px 24px rgba(2,6,23,.22);
  pointer-events: none;
}

.editor-overlay-item.is-selected .editor-overlay-text-guide {
  display: block;
}

.editor-overlay-handle {
  position: absolute;
  display: none;
  width: 14px;
  height: 14px;
  border: 2px solid #ffffff;
  border-radius: 4px;
  background: color-mix(in srgb, var(--blue) 88%, #111827);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.26);
  z-index: 5;
}

.editor-overlay-item.is-selected .editor-overlay-handle {
  display: block;
}

.editor-overlay-delete {
  position: absolute;
  display: none;
  right: -12px;
  top: -12px;
  width: 26px;
  height: 26px;
  border: 1px solid color-mix(in srgb, var(--red) 48%, #ffffff);
  border-radius: 8px;
  background: var(--surface);
  color: var(--red);
  cursor: pointer;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
  z-index: 6;
}

.editor-overlay-delete::before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: auto;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.editor-overlay-item.is-selected .editor-overlay-delete {
  display: grid;
  place-items: center;
}

.editor-overlay-handle.is-resize {
  right: -9px;
  bottom: -9px;
  cursor: nwse-resize;
}

.editor-overlay-item.is-text .editor-overlay-handle.is-resize,
.editor-overlay-item.is-caption .editor-overlay-handle.is-resize {
  top: 50%;
  bottom: auto;
  width: 10px;
  height: 30px;
  border-radius: 999px;
  cursor: ew-resize;
  transform: translateY(-50%);
}

.editor-overlay-handle.is-resize.is-left {
  left: -15px;
  right: auto;
}

.editor-overlay-handle.is-resize.is-right {
  right: -15px;
}

.editor-overlay-handle.is-rotate {
  left: 50%;
  top: -34px;
  cursor: grab;
  transform: translateX(-50%);
}

@keyframes editorCaptionKinetic {
  0%, 100% {
    scale: 1;
  }
  12% {
    scale: 1.055;
  }
  28% {
    scale: 1;
  }
}

@keyframes editorCaptionBounce {
  0%, 100% {
    translate: 0 0;
  }
  42% {
    translate: 0 -5px;
  }
}

@keyframes editorCaptionGlow {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.16);
  }
}

@keyframes editorCaptionSoft {
  from {
    opacity: 0.92;
  }
  to {
    opacity: 1;
  }
}

.editor-overlay-handle.is-rotate::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 14px;
  width: 2px;
  height: 18px;
  background: #ffffff;
  transform: translateX(-50%);
}

.editor-overlay-text:focus {
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--blue);
}

.editor-overlay-text-toolbar {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 18px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 30px;
  align-items: center;
  gap: 3px;
  max-width: min(268px, 82vw);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  padding: 4px;
  background: rgba(15, 23, 42, .88);
  box-shadow: 0 16px 36px rgba(2, 6, 23, .34);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  cursor: default;
  z-index: 8;
}

.editor-overlay-text-toolbar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  background: rgba(15, 23, 42, .88);
  border-right: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  transform: translate(-50%, -5px) rotate(45deg);
}

.editor-overlay-text-toolbar button {
  position: relative;
  z-index: 1;
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 30px;
  place-items: center;
  border: 0;
  border-radius: 6px;
  padding: 0;
  background: transparent;
  color: rgba(255,255,255,.86);
  font-size: 0;
  cursor: pointer;
}

.editor-overlay-text-toolbar button::before {
  content: "";
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  mask: var(--editor-icon) center / contain no-repeat;
}

.editor-overlay-text-toolbar button:hover,
.editor-overlay-text-toolbar button:focus-visible,
.editor-overlay-text-toolbar button.is-active {
  background: rgba(255,255,255,.14);
  color: #ffffff;
  outline: 0;
}

.editor-overlay-text-toolbar button.is-active {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 62%, #ffffff);
}

.editor-playbar {
  border-top: 1px solid var(--line);
}

.editor-playbar input {
  --seek: 0%;
  flex: 1;
  height: 7px;
  appearance: none;
  border-radius: 999px;
  background:
    linear-gradient(90deg, var(--blue) 0 var(--seek), color-mix(in srgb, var(--blue) 13%, var(--surface-2)) var(--seek) 100%);
  outline: 0;
}

.editor-playbar input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  appearance: none;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--blue) 30%, transparent);
}

.editor-playbar input::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--blue) 30%, transparent);
}

.editor-timeline-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 190px;
  min-height: 150px;
  max-height: 48vh;
  overflow: hidden;
  resize: vertical;
}

.video-editor-page input,
.video-editor-page select,
.video-editor-page textarea {
  min-height: 0;
}

.editor-timeline-scroll {
  min-height: 0;
  overflow: auto;
  padding-right: 12px;
  padding-bottom: 12px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.editor-timeline-scroll::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.editor-custom-scrollbar {
  position: absolute;
  z-index: 18;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, rgba(148, 163, 184, 0.3));
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 8%, rgba(255, 255, 255, 0.78)), rgba(255, 255, 255, 0.42)),
    color-mix(in srgb, var(--blue) 5%, #f5f9ff);
  box-shadow:
    inset 0 1px 2px rgba(15, 23, 42, 0.06),
    0 10px 24px rgba(15, 23, 42, 0.04);
  user-select: none;
  touch-action: none;
}

.editor-custom-scrollbar[hidden] {
  display: none;
}

.editor-custom-scrollbar.is-horizontal {
  right: 18px;
  bottom: 2px;
  left: 2px;
  height: 8px;
}

.editor-custom-scrollbar.is-vertical {
  top: 52px;
  right: 2px;
  bottom: 18px;
  width: 8px;
}

.editor-custom-scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border: 0;
  border-radius: 999px;
  padding: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.62), transparent 34%, rgba(255, 255, 255, 0.36) 70%, transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 82%, white), var(--blue));
  box-shadow:
    0 7px 18px color-mix(in srgb, var(--blue) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: grab;
  transition: filter 160ms ease, box-shadow 160ms ease;
}

.editor-custom-scrollbar.is-horizontal .editor-custom-scrollbar-thumb {
  height: 100%;
  min-width: 48px;
}

.editor-custom-scrollbar.is-vertical .editor-custom-scrollbar-thumb {
  width: 100%;
  min-height: 42px;
}

.editor-custom-scrollbar-thumb:hover,
.editor-custom-scrollbar-thumb.is-dragging {
  filter: saturate(1.12) brightness(1.03);
  box-shadow:
    0 10px 24px color-mix(in srgb, var(--blue) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.62);
}

.editor-custom-scrollbar-thumb.is-dragging {
  cursor: grabbing;
}

.editor-timeline-scroll::-webkit-scrollbar-button {
  -webkit-appearance: none;
  display: none;
  width: 0;
  height: 0;
}

.editor-timeline-scroll::-webkit-scrollbar-button:single-button,
.editor-timeline-scroll::-webkit-scrollbar-button:double-button,
.editor-timeline-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
.editor-timeline-scroll::-webkit-scrollbar-button:horizontal:end:increment,
.editor-timeline-scroll::-webkit-scrollbar-button:vertical:start:decrement,
.editor-timeline-scroll::-webkit-scrollbar-button:vertical:end:increment {
  -webkit-appearance: none;
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

.editor-timeline-scroll::-webkit-scrollbar-track-piece:start,
.editor-timeline-scroll::-webkit-scrollbar-track-piece:end {
  background: transparent;
}

.editor-timeline-scroll::-webkit-scrollbar-track {
  border: 1px solid color-mix(in srgb, var(--blue) 9%, rgba(148, 163, 184, 0.28));
  border-radius: 999px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 7%, rgba(255, 255, 255, 0.82)), rgba(255, 255, 255, 0.34)),
    color-mix(in srgb, var(--blue) 5%, #f6f9ff);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.05);
}

.editor-timeline-scroll::-webkit-scrollbar-thumb {
  min-width: 46px;
  min-height: 46px;
  border: 3px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.5), transparent 34%, rgba(255, 255, 255, 0.34) 68%, transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 86%, white), var(--blue));
  background-clip: padding-box;
  box-shadow:
    0 7px 18px color-mix(in srgb, var(--blue) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.48);
}

.editor-timeline-scroll::-webkit-scrollbar-thumb:hover {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.62), transparent 34%, rgba(255, 255, 255, 0.42) 68%, transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 72%, white), color-mix(in srgb, var(--blue) 92%, #111827));
  background-clip: padding-box;
}

.editor-timeline-scroll::-webkit-scrollbar-thumb:active {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 96%, white), color-mix(in srgb, var(--blue) 78%, #0f172a));
  background-clip: padding-box;
}

.editor-timeline-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

.editor-timeline-scroll::-webkit-resizer {
  display: none;
  background: transparent;
}

.theme-dark .editor-timeline-scroll {
  scrollbar-color: color-mix(in srgb, var(--blue) 76%, #dbeafe) color-mix(in srgb, var(--blue) 18%, #0b1220);
}

.theme-dark .editor-custom-scrollbar {
  border-color: color-mix(in srgb, var(--blue) 26%, rgba(148, 163, 184, 0.2));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 16%, rgba(15, 23, 42, 0.94)), rgba(15, 23, 42, 0.56)),
    rgba(11, 18, 32, 0.86);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.24),
    0 10px 24px rgba(0, 0, 0, 0.12);
}

.theme-dark .editor-custom-scrollbar-thumb {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34), transparent 34%, rgba(255, 255, 255, 0.18) 68%, transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 78%, #e0f2fe), color-mix(in srgb, var(--blue) 88%, #1e293b));
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--blue) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.theme-dark .editor-timeline-scroll::-webkit-scrollbar-track {
  border-color: color-mix(in srgb, var(--blue) 24%, rgba(148, 163, 184, 0.18));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 14%, rgba(15, 23, 42, 0.9)), rgba(15, 23, 42, 0.54)),
    rgba(11, 18, 32, 0.82);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.24);
}

.theme-dark .editor-timeline-scroll::-webkit-scrollbar-thumb {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34), transparent 34%, rgba(255, 255, 255, 0.18) 68%, transparent),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 78%, #e0f2fe), color-mix(in srgb, var(--blue) 88%, #1e293b));
  background-clip: padding-box;
  box-shadow:
    0 8px 20px color-mix(in srgb, var(--blue) 20%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.editor-timeline {
  --timeline-width: 760px;
  position: relative;
  display: grid;
  gap: 8px;
  grid-template-rows: 30px auto;
  padding: 0 14px 14px;
  width: max(100%, calc(var(--timeline-width) + 92px));
  min-height: 100%;
  overflow: visible;
}

.editor-time-ruler {
  position: relative;
  width: var(--timeline-width);
  margin-left: 74px;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
}

.editor-ruler-tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  height: 8px;
  background: color-mix(in srgb, var(--muted) 50%, transparent);
  color: var(--muted);
  font-size: 10px;
  font-weight: 820;
}

.editor-ruler-tick.is-major {
  height: 15px;
}

.editor-ruler-tick.is-major::after {
  content: attr(data-label);
}

.editor-ruler-tick {
  padding-left: 4px;
}

.editor-playhead {
  position: absolute;
  top: 30px;
  bottom: 14px;
  left: 0;
  margin-left: 80px;
  width: 16px;
  background: transparent;
  cursor: col-resize;
  touch-action: none;
  z-index: 14;
}

.editor-snap-line {
  position: absolute;
  top: 30px;
  bottom: 14px;
  margin-left: 88px;
  width: 2px;
  background: #22c55e;
  box-shadow: 0 0 0 2px color-mix(in srgb, #22c55e 24%, transparent);
  pointer-events: none;
  z-index: 5;
}

.editor-playhead::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 50%, #ffffff 0 2px, transparent 3px),
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 84%, #22c55e), var(--blue));
  transform: translateX(-50%);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--blue) 24%, transparent);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.editor-playhead::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 0;
  left: 50%;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, #ffffff), var(--blue));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.86),
    0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent);
  transform: translateX(-50%);
}

.editor-playhead span {
  position: absolute;
  top: -28px;
  left: 50%;
  min-width: 56px;
  max-width: 72px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, rgba(255, 255, 255, 0.9));
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.97);
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--blue) 14%, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(3px);
  transition: opacity 150ms ease, transform 150ms ease;
}

.editor-playhead:hover::before,
.editor-playhead.is-dragging::before {
  transform: translateX(-50%) scale(1.12);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--blue) 32%, transparent);
}

.editor-playhead:hover span,
.editor-playhead.is-dragging span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.editor-track {
  display: grid;
  grid-template-columns: 64px var(--timeline-width);
  align-items: center;
  gap: 10px;
}

.editor-track-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 900;
}

.editor-track-label button {
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 6px;
  background: transparent;
  color: var(--blue);
  opacity: 0;
}

.editor-track:hover .editor-track-label button {
  opacity: 1;
}

.editor-track-lane {
  position: relative;
  width: var(--timeline-width);
  min-height: 42px;
  overflow: hidden;
  border: 1px dashed color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
}

.editor-track-lane.is-drop-target {
  outline: 2px solid color-mix(in srgb, var(--blue) 48%, transparent);
  outline-offset: -3px;
  background: color-mix(in srgb, var(--blue) 10%, rgba(255, 255, 255, 0.78));
}

.editor-track-empty {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  padding-left: 12px;
  color: color-mix(in srgb, var(--muted) 72%, transparent);
  font-size: 12px;
  font-weight: 820;
  pointer-events: none;
}

.is-compact-timeline .editor-track-lane {
  min-height: 30px;
}

.is-compact-timeline .editor-layer-clip {
  min-height: 24px;
  padding-block: 3px;
}

[data-extra-layers] {
  display: grid;
  gap: 8px;
}

.editor-track > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.editor-clip,
.editor-wave {
  min-height: 38px;
  border-radius: 8px;
  padding: 7px 10px;
  color: var(--ink);
}

.editor-wave {
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--surface-2) 82%, transparent) 0 var(--trim-start, 0%),
      color-mix(in srgb, var(--blue) 50%, var(--surface)) var(--trim-start, 0%) var(--trim-end, 100%),
      color-mix(in srgb, var(--surface-2) 82%, transparent) var(--trim-end, 100%) 100%);
}

.editor-clip {
  display: grid;
  align-content: center;
  position: relative;
  overflow: hidden;
  min-height: 48px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, transparent);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--surface-2) 82%, transparent) 0 var(--trim-start, 0%),
      color-mix(in srgb, var(--blue) 50%, var(--surface)) var(--trim-start, 0%) var(--trim-end, 100%),
      color-mix(in srgb, var(--surface-2) 82%, transparent) var(--trim-end, 100%) 100%);
}

.editor-clip::before,
.editor-clip::after {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  width: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 70%, #ffffff);
  opacity: 0.85;
  z-index: 3;
}

.editor-clip::before {
  left: 7px;
}

.editor-clip::after {
  right: 7px;
}

.editor-filmstrip {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(58px, 1fr);
  gap: 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.editor-filmstrip.has-frames,
.editor-filmstrip.is-loading {
  opacity: 1;
}

.editor-filmstrip img,
.editor-filmstrip span {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 28%, var(--surface-2)), color-mix(in srgb, var(--surface) 80%, #020617));
}

.editor-clip-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--surface-2) 78%, transparent) 0 var(--trim-start, 0%),
      rgba(0, 0, 0, 0.23) var(--trim-start, 0%) var(--trim-end, 100%),
      color-mix(in srgb, var(--surface-2) 78%, transparent) var(--trim-end, 100%) 100%);
}

.editor-clip-copy {
  position: relative;
  z-index: 2;
  display: grid;
  align-content: center;
  min-height: 48px;
  padding: 7px 14px;
  color: #ffffff;
  text-shadow: 0 1px 7px rgba(0, 0, 0, 0.55);
}

.editor-clip-copy b,
.editor-clip-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-clip-copy small {
  color: rgba(255, 255, 255, 0.82);
}

.editor-clip.ghost {
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.editor-clip.ghost::before,
.editor-clip.ghost::after {
  display: none;
}

.editor-text-lane {
  position: relative;
  min-height: 38px;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.editor-audio-lane {
  position: relative;
  min-height: 38px;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-2) 74%, transparent);
}

.editor-layer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.editor-layer-actions button {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-radius: 8px;
  padding: 5px 8px;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 820;
}

.editor-add-text,
.editor-add-audio,
.editor-text-clip {
  min-height: 38px;
  border-radius: 8px;
}

.editor-add-text,
.editor-add-audio {
  display: block;
  width: 100%;
  border: 1px dashed color-mix(in srgb, var(--blue) 34%, var(--line));
  background: transparent;
  color: var(--muted);
  font-weight: 780;
  text-align: left;
  padding: 7px 10px;
  cursor: pointer;
}

.editor-add-audio input {
  display: none;
}

.editor-text-clip {
  position: absolute;
  top: 0;
  left: var(--text-start, 0%);
  width: max(72px, calc(var(--text-width, 22%) - 4px));
  display: grid;
  align-content: center;
  padding: 7px 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, var(--surface)), color-mix(in srgb, #ec4899 20%, var(--surface)));
  color: var(--ink);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--blue) 14%, transparent);
}

.editor-text-clip[hidden] {
  display: none !important;
}

.editor-text-clip b,
.editor-text-clip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-text-clip small {
  color: var(--muted);
}

.editor-audio-clip {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(90px, 0.35fr) minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, transparent);
  border-radius: 8px;
  padding: 6px 10px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 44%, var(--surface)), color-mix(in srgb, #22c55e 18%, var(--surface)));
  color: var(--ink);
}

.editor-audio-clip[hidden] {
  display: none !important;
}

.editor-audio-clip b,
.editor-audio-clip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-audio-clip small {
  color: var(--muted);
}

.editor-layer-clip {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 4px;
  position: absolute;
  top: 3px;
  bottom: 3px;
  min-height: 36px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 8px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.editor-layer-clip.is-dragging {
  z-index: 8;
  cursor: grabbing;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--blue) 24%, transparent);
}

.editor-layer-clip.is-selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blue) 18%, transparent);
}

.editor-layer-clip.is-primary-selected {
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--blue) 24%, transparent),
    0 10px 22px color-mix(in srgb, var(--blue) 16%, transparent);
}

.editor-marquee {
  position: absolute;
  z-index: 12;
  border: 1px solid color-mix(in srgb, var(--blue) 72%, #22c55e);
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.44);
  pointer-events: none;
}

.editor-layer-clip[data-transition]::before {
  content: attr(data-transition);
  position: absolute;
  left: 5px;
  top: -16px;
  border-radius: 999px;
  padding: 1px 6px;
  background: var(--blue);
  color: #ffffff;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.editor-layer-clip.is-video {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 58%, transparent), color-mix(in srgb, var(--blue) 14%, var(--surface))),
    var(--clip-thumb) center / auto 100%;
}

.editor-layer-clip.is-text {
  background: linear-gradient(90deg, color-mix(in srgb, #ec4899 28%, var(--surface)), color-mix(in srgb, var(--blue) 14%, var(--surface)));
}

.editor-layer-clip.is-image {
  background:
    linear-gradient(90deg, color-mix(in srgb, #22c55e 42%, transparent), color-mix(in srgb, var(--blue) 14%, var(--surface))),
    var(--clip-thumb) center / cover;
}

.editor-layer-clip.is-document {
  background:
    linear-gradient(90deg, color-mix(in srgb, #64748b 52%, transparent), color-mix(in srgb, var(--blue) 12%, var(--surface)));
}

.editor-layer-clip.is-audio {
  background:
    repeating-linear-gradient(90deg,
      transparent 0 6px,
      color-mix(in srgb, var(--blue) 28%, transparent) 6px 9px,
      transparent 9px 14px),
    linear-gradient(90deg, color-mix(in srgb, #f59e0b 24%, var(--surface)), color-mix(in srgb, var(--blue) 14%, var(--surface)));
  background-size: 100% 14px, 100% 100%;
  background-position: left calc(100% - 5px), left top;
  background-repeat: repeat-x, no-repeat;
}

.editor-clip-waveform {
  position: absolute;
  right: 8px;
  bottom: 4px;
  left: 26px;
  display: flex;
  align-items: end;
  gap: 2px;
  height: 20px;
  opacity: 0.72;
  pointer-events: none;
}

.editor-clip-waveform i {
  flex: 1;
  min-width: 1px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 58%, #ffffff);
}

.editor-crop-box {
  position: absolute;
  z-index: 6;
  border: 1px solid #ffffff;
  box-shadow: 0 0 0 1px var(--blue), 0 10px 24px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

.editor-crop-box i {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--blue);
  pointer-events: auto;
}

.editor-crop-box i[data-crop-handle="nw"] { left: -6px; top: -6px; cursor: nwse-resize; }
.editor-crop-box i[data-crop-handle="ne"] { right: -6px; top: -6px; cursor: nesw-resize; }
.editor-crop-box i[data-crop-handle="sw"] { left: -6px; bottom: -6px; cursor: nesw-resize; }
.editor-crop-box i[data-crop-handle="se"] { right: -6px; bottom: -6px; cursor: nwse-resize; }

.editor-layer-clip small {
  grid-column: 2;
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-layer-clip b {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-clip-kind {
  grid-row: 1 / span 2;
  grid-column: 1;
  color: color-mix(in srgb, var(--ink) 72%, var(--blue));
}

.editor-trim-handle {
  position: absolute;
  top: 5px;
  bottom: 5px;
  width: 8px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 0 0 2px var(--blue);
  cursor: ew-resize;
  opacity: 0;
  z-index: 3;
}

.editor-layer-clip:hover .editor-trim-handle,
.editor-layer-clip.is-selected .editor-trim-handle {
  opacity: 1;
}

.editor-trim-handle.is-left {
  left: -4px;
}

.editor-trim-handle.is-right {
  right: -4px;
}


.editor-wave {
  display: flex;
  align-items: center;
  gap: 5px;
}

.editor-wave i {
  width: 100%;
  height: 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 50%, #ffffff);
}

.editor-wave i:nth-child(2n) {
  height: 24px;
}

.editor-properties {
  display: grid;
  align-content: start;
  overflow-y: auto;
  overflow-x: hidden;
}

.editor-property-tab-strip {
  position: sticky;
  top: 0;
  z-index: 8;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 4px;
  padding: 8px 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
}

.editor-property-tabs {
  min-width: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding: 0 2px;
  scroll-behavior: smooth;
}

.editor-property-tabs::-webkit-scrollbar {
  display: none;
}

.editor-property-tab-nav {
  display: grid;
  width: 28px;
  height: 30px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 7px;
  padding: 0;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--blue);
}

.editor-property-tab-nav::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  mask: var(--editor-icon) center / contain no-repeat;
}

.editor-property-tab-nav:disabled {
  opacity: .34;
  cursor: default;
}

.editor-property-tabs button {
  flex: 0 0 auto;
  min-width: max-content;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 6px;
  padding: 5px 9px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 860;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-property-tabs button.is-active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  color: var(--blue);
}

.editor-tool-panel {
  display: none;
  gap: 12px;
  padding: 14px;
}

.editor-tool-panel.is-active {
  display: grid;
}

.editor-export-presets,
.editor-media-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(52px, 1fr));
  gap: 5px;
}

.editor-export-presets button,
.editor-media-filters button {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  padding: 5px 4px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 860;
}

.editor-export-presets button b,
.editor-export-presets button small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-export-presets button b {
  font-size: 11px;
}

.editor-export-presets button small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 760;
}

.editor-export-presets button.is-active,
.editor-media-filters button.is-active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 11%, var(--surface));
  color: var(--blue);
}

.editor-export-queue {
  display: grid;
  gap: 8px;
}

.editor-export-job {
  display: grid;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--blue) 6%, var(--surface));
}

.editor-export-job small {
  color: var(--muted);
}

.editor-export-job i {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface-2));
}

.editor-export-job i span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue);
}

.editor-export-job div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.editor-export-job a,
.editor-export-job button {
  border: 1px solid color-mix(in srgb, var(--blue) 25%, var(--line));
  border-radius: 7px;
  padding: 5px 8px;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 820;
  text-decoration: none;
}

.editor-asset-rename {
  min-height: 28px;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 12px;
  font-weight: 820;
}

.editor-asset-preview {
  position: fixed;
  z-index: 230;
  display: grid;
  gap: 8px;
  width: 220px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 10px;
  padding: 9px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
  pointer-events: none;
}

.editor-asset-preview[hidden] {
  display: none;
}

.editor-asset-preview div {
  height: 112px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface-2)) center / cover no-repeat;
}

.editor-asset-preview i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.editor-asset-preview i::before {
  content: "";
  width: 24px;
  height: 24px;
  background: var(--blue);
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.editor-asset-preview b,
.editor-asset-preview small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-asset-preview small {
  color: var(--muted);
}

.editor-tool-panel label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.editor-tool-panel label.editor-reset-field {
  grid-template-columns: minmax(0, 1fr) 30px;
  align-items: end;
}

.editor-tool-panel label.editor-reset-field > span,
.editor-tool-panel label.editor-reset-field > .editor-choice {
  grid-column: 1 / -1;
}

.editor-reset-button {
  display: grid;
  width: 30px;
  min-width: 30px;
  height: 36px;
  min-height: 0;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 7%, var(--surface));
  color: var(--blue);
}

.editor-reset-button::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.editor-tool-panel input {
  width: 100%;
}

.editor-tool-panel select {
  width: 100%;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  padding: 7px 9px;
  background: var(--surface);
  color: var(--ink);
}

.editor-choice {
  position: relative;
}

.editor-choice > button {
  width: 100%;
  min-height: 38px;
  text-align: left;
}

.editor-choice > button::after {
  content: "";
  float: right;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background: currentColor;
  mask: url("https://api.iconify.design/lucide/chevron-down.svg") center / contain no-repeat;
  -webkit-mask: url("https://api.iconify.design/lucide/chevron-down.svg") center / contain no-repeat;
}

.editor-choice > div {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: none;
  gap: 5px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  padding: 6px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.editor-choice.is-open > div {
  display: grid;
}

.editor-choice [data-choice-value] {
  justify-content: flex-start;
  min-height: 32px;
  border-color: transparent;
  text-align: left;
}

.editor-choice [data-choice-value].is-selected {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
}

.editor-audio-picker input {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  padding: 7px;
  background: var(--surface);
  color: var(--ink);
}

.editor-file-picker {
  cursor: pointer;
}

.editor-file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.editor-file-picker strong {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  border-radius: 8px;
  padding: 6px 10px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  color: var(--ink);
}

.editor-file-picker strong i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
  color: var(--blue);
}

.editor-file-picker strong em {
  overflow: hidden;
  color: var(--muted);
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-audio-picker.editor-file-picker strong {
  border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 8%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface) 94%, #ffffff);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.editor-audio-picker.editor-file-picker:hover strong {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--blue) 12%, transparent);
  transform: translateY(-1px);
}

.editor-audio-picker.editor-file-picker strong i {
  color: color-mix(in srgb, var(--blue) 78%, #16a34a);
}

.editor-color-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

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

.editor-clip-grid label:nth-child(3) {
  grid-column: span 2;
}

.editor-color-row input[type="color"] {
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  padding: 3px;
  background: var(--surface);
}

.editor-tool-panel button {
  min-height: 36px;
  padding: 7px 10px;
}

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

.editor-filter-grid button {
  min-height: 38px;
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--surface-2) 82%, transparent),
      color-mix(in srgb, var(--blue) 8%, var(--surface)));
}

.editor-filter-grid button.is-selected {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 14%, var(--surface));
}

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

.editor-export-card {
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 10px;
  padding: 12px;
  background: color-mix(in srgb, var(--blue) 8%, var(--surface));
}

.editor-render-card {
  display: grid;
  gap: 12px;
}

.editor-export-card span {
  display: block;
  color: var(--muted);
}

.editor-export-button {
  border-color: var(--blue) !important;
}

.editor-auto-subtitle-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  font-weight: 850;
}

.editor-auto-subtitle-button::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.editor-auto-subtitle-button.is-working::before {
  animation: editor-spin 900ms linear infinite;
}

.editor-auto-subtitle-language {
  margin-top: -2px;
}

.editor-language-choice {
  position: relative;
  min-width: 0;
}

.editor-language-choice > button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 8px;
  padding: 8px 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent), transparent 58%),
    var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
}

.editor-language-choice > button::before,
.editor-language-choice > button::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  opacity: .72;
}

.editor-language-choice > button::before {
  -webkit-mask: url("https://api.iconify.design/lucide/languages.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/languages.svg") center / contain no-repeat;
}

.editor-language-choice > button::after {
  justify-self: end;
  -webkit-mask: url("https://api.iconify.design/lucide/chevron-down.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/chevron-down.svg") center / contain no-repeat;
  transition: transform 160ms ease;
}

.editor-language-choice.is-open > button::after {
  transform: rotate(180deg);
}

.editor-language-choice > button b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-language-choice > button:hover,
.editor-language-choice > button:focus-visible,
.editor-language-choice.is-open > button {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.62);
  outline: 0;
}

.editor-language-choice [data-language-options] {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 80;
  display: none;
  max-height: min(270px, 52vh);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 10px;
  padding: 6px;
  background: color-mix(in srgb, var(--surface) 96%, #ffffff);
  box-shadow: 0 20px 44px rgba(2, 6, 23, .18);
}

.editor-language-choice.is-open [data-language-options] {
  display: grid;
  gap: 3px;
}

.editor-language-choice [data-language-value] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  min-height: 32px;
  border: 0;
  border-radius: 7px;
  padding: 7px 8px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 680;
  letter-spacing: 0;
  text-align: left;
}

.editor-language-choice [data-language-value]::after {
  content: "";
  display: none;
  width: 15px;
  height: 15px;
  justify-self: end;
  background: currentColor;
  -webkit-mask: url("https://api.iconify.design/lucide/check.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/check.svg") center / contain no-repeat;
}

.editor-language-choice [data-language-value]:hover,
.editor-language-choice [data-language-value]:focus-visible {
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
  color: var(--ink);
  outline: 0;
}

.editor-language-choice [data-language-value].is-selected {
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
  color: color-mix(in srgb, var(--blue) 78%, var(--ink));
  font-weight: 820;
}

.editor-language-choice [data-language-value].is-selected::after {
  display: block;
}

.editor-font-choice {
  position: relative;
  min-width: 0;
}

.editor-font-choice > button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 8px;
  padding: 8px 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 6%, transparent), transparent 58%),
    var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
}

.editor-font-choice > button::before,
.editor-font-choice > button::after {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  opacity: .72;
}

.editor-font-choice > button::before {
  -webkit-mask: url("https://api.iconify.design/lucide/type.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/type.svg") center / contain no-repeat;
}

.editor-font-choice > button::after {
  justify-self: end;
  -webkit-mask: url("https://api.iconify.design/lucide/chevron-down.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/chevron-down.svg") center / contain no-repeat;
  transition: transform 160ms ease;
}

.editor-font-choice.is-open > button::after {
  transform: rotate(180deg);
}

.editor-font-choice > button b {
  overflow: hidden;
  font-size: 13px;
  font-weight: 780;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-font-choice > button:hover,
.editor-font-choice > button:focus-visible,
.editor-font-choice.is-open > button {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.62);
  outline: 0;
}

.editor-font-choice [data-font-menu] {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  z-index: 90;
  display: none;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 10px;
  padding: 7px;
  background: color-mix(in srgb, var(--surface) 96%, #ffffff);
  box-shadow: 0 20px 44px rgba(2, 6, 23, .18);
}

.editor-font-choice.is-open [data-font-menu] {
  display: grid;
}

.editor-font-choice [data-font-search] {
  width: 100%;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  padding: 7px 9px 7px 30px;
  background:
    url("https://api.iconify.design/lucide/search.svg") 9px center / 15px 15px no-repeat,
    var(--surface);
  color: var(--ink);
  font-size: 13px;
  outline: 0;
}

.editor-font-choice [data-font-search]:focus {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 12%, transparent);
}

.editor-font-choice [data-font-options] {
  display: grid;
  gap: 3px;
  max-height: min(270px, 52vh);
  overflow: auto;
  overscroll-behavior: contain;
}

.editor-font-choice [data-font-value] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  padding: 7px 8px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
  text-align: left;
}

.editor-font-choice [data-font-value]::after {
  content: "";
  display: none;
  width: 15px;
  height: 15px;
  justify-self: end;
  background: currentColor;
  -webkit-mask: url("https://api.iconify.design/lucide/check.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/check.svg") center / contain no-repeat;
}

.editor-font-choice [data-font-value]:hover,
.editor-font-choice [data-font-value]:focus-visible,
.editor-font-choice [data-font-value].is-previewing {
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
  color: var(--ink);
  outline: 0;
}

.editor-font-choice [data-font-value].is-previewing {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--blue) 72%, #ffffff);
}

.editor-font-choice [data-font-value].is-selected {
  background: color-mix(in srgb, var(--blue) 13%, var(--surface));
  color: color-mix(in srgb, var(--blue) 78%, var(--ink));
}

.editor-font-choice [data-font-value].is-selected::after {
  display: block;
}

.editor-auto-caption-status {
  display: block;
  min-height: 17px;
  margin-top: -3px;
  overflow-wrap: anywhere;
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.35;
}

.editor-auto-caption-status[data-state="ok"] {
  color: color-mix(in srgb, #16a34a 82%, var(--ink));
}

.editor-auto-caption-status[data-state="busy"] {
  color: var(--blue);
}

.editor-auto-caption-status[data-state="error"] {
  color: color-mix(in srgb, #ef4444 82%, var(--ink));
}

@keyframes editor-spin {
  to {
    transform: rotate(360deg);
  }
}

.editor-export-quality {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.editor-export-quality button.is-active {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, transparent);
  color: var(--blue);
}

.editor-export-progress {
  display: grid;
  gap: 7px;
}

.editor-export-progress[hidden],
.editor-export-download[hidden] {
  display: none;
}

.editor-export-progress i {
  display: block;
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, var(--line));
}

.editor-export-progress b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 58%, #22c55e));
  transition: width 220ms ease;
}

.editor-export-download {
  display: inline-flex;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, #16a34a 48%, var(--line));
  border-radius: 8px;
  padding: 8px 12px;
  color: #15803d;
  text-decoration: none;
  font-weight: 840;
}

.editor-media-bin {
  display: grid;
  gap: 10px;
}

.editor-media-empty {
  border: 1px dashed color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 8px;
  padding: 14px;
  color: var(--muted);
  text-align: center;
  font-weight: 800;
}

.editor-media-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  padding: 8px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}

.editor-media-preview {
  grid-row: span 2;
  min-height: 52px !important;
  border-radius: 8px !important;
  background-color: color-mix(in srgb, var(--blue) 12%, var(--surface)) !important;
  background-position: center !important;
  background-size: cover !important;
}

.editor-media-preview::before {
  content: "";
  width: 20px;
  height: 20px;
  display: inline-block;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.editor-media-item b,
.editor-media-item small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-media-item small {
  color: var(--muted);
}

.editor-media-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.editor-media-actions button {
  min-height: 28px;
  padding: 4px 6px;
  font-size: 11px;
}

.editor-context-menu {
  position: fixed;
  z-index: 200;
  display: grid;
  gap: 4px;
  width: 190px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 10px;
  padding: 7px;
  background: color-mix(in srgb, var(--surface) 96%, #ffffff);
  box-shadow: 0 22px 52px rgba(2, 6, 23, .2);
  backdrop-filter: blur(14px);
  transform-origin: 50% 100%;
  animation: editor-context-rise 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.editor-context-menu[hidden] {
  display: none !important;
}

.editor-context-menu button {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  padding: 7px 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: 0;
}

.editor-context-menu button::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  opacity: .76;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
  mask: var(--editor-icon) center / contain no-repeat;
}

.editor-context-menu button:hover {
  background: color-mix(in srgb, var(--blue) 10%, var(--surface));
}

.editor-context-menu button[data-menu-action="delete"] {
  color: color-mix(in srgb, #ef4444 82%, var(--ink));
}

.editor-context-menu > span {
  display: block;
  height: 1px;
  margin: 3px 2px;
  background: color-mix(in srgb, var(--blue) 16%, var(--line));
}

@keyframes editor-context-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.editor-confirm-modal[hidden] {
  display: none;
}

.editor-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: grid;
  place-items: center;
  padding: 18px;
}

.editor-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(10px);
}

.editor-confirm-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
  width: min(420px, 100%);
  border: 1px solid color-mix(in srgb, var(--red) 16%, var(--line));
  border-radius: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.22);
}

.editor-confirm-dialog > span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--red) 8%, #ffffff);
  color: var(--red);
  font-size: 12px;
  font-weight: 840;
}

.editor-confirm-dialog h2,
.editor-confirm-dialog p {
  margin: 0;
}

.editor-confirm-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.editor-confirm-dialog button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  padding: 8px 13px;
  background: transparent;
  color: var(--ink);
  font-weight: 840;
}

.editor-confirm-dialog button.is-danger {
  border-color: color-mix(in srgb, var(--red) 46%, var(--line));
  color: var(--red);
}

.video-projects-shell {
  display: grid;
  gap: 18px;
  padding: 0 20px 24px;
}

.video-projects-head,
.video-project-bulk,
.video-project-card,
.video-project-empty {
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 92%, var(--blue));
  box-shadow: var(--shadow);
}

.video-projects-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
  padding: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 15%, var(--surface)), var(--surface)),
    var(--surface);
}

.video-projects-head span,
.video-project-card span,
.video-project-empty span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.video-projects-head strong {
  display: block;
  color: var(--ink);
  font-size: 30px;
  line-height: 1.1;
}

.video-projects-head small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 760;
}

.video-project-bulk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, var(--surface)), rgba(255, 255, 255, 0.82)),
    var(--surface);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--blue) 10%, transparent);
}

.video-project-bulk[hidden] {
  display: none;
}

.video-project-bulk div {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.video-project-bulk div:first-child {
  display: grid;
  gap: 2px;
}

.video-project-bulk span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--blue) 10%, #ffffff);
  color: var(--blue);
  font-size: 12px;
  font-weight: 840;
}

.video-project-bulk strong {
  color: var(--ink);
  font-size: 14px;
}

.video-projects-head button,
.video-project-bulk button,
.video-project-empty button,
.video-project-actions a,
.video-project-actions button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
  border-radius: 8px;
  padding: 8px 12px;
  background: transparent;
  color: var(--blue);
  text-decoration: none;
  font-weight: 840;
}

.video-project-bulk button.is-danger,
.project-delete-dialog button.is-danger {
  border-color: color-mix(in srgb, var(--red) 46%, var(--line));
  color: var(--red);
}

.video-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(544px, 1fr));
  gap: 18px;
  align-items: stretch;
}

.video-project-card {
  position: relative;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 14px;
  min-height: 232px;
  overflow: hidden;
  padding: 12px;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 4%, #ffffff));
  transition: opacity 0.18s ease, transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.video-project-card:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  box-shadow: 0 24px 58px color-mix(in srgb, var(--blue) 12%, transparent);
  transform: translateY(-2px);
}

.video-project-card.is-selected {
  border-color: color-mix(in srgb, var(--blue) 56%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, var(--surface)), var(--surface)),
    var(--surface);
  box-shadow: 0 22px 56px color-mix(in srgb, var(--blue) 14%, transparent);
}

.video-project-card.is-removing {
  opacity: 0;
  transform: scale(0.98);
}

.video-project-select {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 3;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 34px rgba(2, 6, 23, 0.22);
  backdrop-filter: blur(14px);
  cursor: pointer;
}

.video-project-select input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.video-project-select span {
  width: 18px;
  height: 18px;
  border: 2px solid color-mix(in srgb, var(--blue) 46%, #ffffff);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.72);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.video-project-select span::after {
  content: "";
  display: block;
  width: 8px;
  height: 3px;
  margin: 4px auto 0;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  opacity: 0;
  transform: rotate(-45deg);
}

.video-project-select input:checked + span {
  border-color: var(--blue);
  background: var(--blue);
  transform: scale(1.04);
}

.video-project-select input:checked + span::after {
  opacity: 1;
}

.video-project-thumb {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-row: 1 / 3;
  min-height: 0;
  height: 100%;
  align-content: space-between;
  overflow: hidden;
  border-radius: 12px;
  background:
    radial-gradient(circle at 32% 18%, color-mix(in srgb, var(--blue) 28%, transparent), transparent 30%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 34%, #031128), #020617),
    #020617;
  background-position: center;
  background-size: cover;
  color: #ffffff;
  padding: 10px;
  text-decoration: none;
  box-shadow: inset 0 -52px 80px rgba(2, 6, 23, 0.72);
}

.video-project-hover-preview {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.02);
  transition: opacity 180ms ease, transform 500ms ease;
  pointer-events: none;
}

.video-project-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.06), rgba(2, 6, 23, 0.78));
  pointer-events: none;
}

.video-project-thumb.is-previewing .video-project-hover-preview,
.video-project-thumb.has-preview-still .video-project-hover-preview,
.video-project-thumb:hover .video-project-hover-preview {
  opacity: 1;
  transform: scale(1.06);
}

.video-project-thumb.has-preview-still:not(.is-previewing) .video-project-hover-preview {
  transform: scale(1.02);
}

.design-project-thumb {
  --preview-x: 50%;
  --preview-y: 50%;
  --preview-scale: 1.18;
  --preview-hover-scale: 1.34;
  background:
    radial-gradient(circle at var(--preview-x) var(--preview-y), color-mix(in srgb, var(--blue) 20%, transparent), transparent 28%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, rgba(255, 255, 255, 0.92)), rgba(255, 255, 255, 0.2)),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--blue) 9%, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 8%, transparent) 0 1px, transparent 1px 26px),
    color-mix(in srgb, var(--blue) 4%, #ffffff);
  color: var(--ink);
}

.design-project-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle at var(--preview-x) var(--preview-y), rgba(255, 255, 255, 0.24), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(2, 6, 23, 0.68));
  opacity: 0.92;
}

.design-project-preview-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
  padding: 0;
  background: transparent;
}

.design-project-preview-image {
  position: absolute;
  inset: -8%;
  display: block;
  border: 0;
  border-radius: 0;
  padding: 0;
  background-position: var(--preview-x) var(--preview-y);
  background-size: cover;
  transform: scale(var(--preview-scale));
  transform-origin: var(--preview-x) var(--preview-y);
  transition: transform 0.7s cubic-bezier(.2, .8, .2, 1), filter 0.7s ease;
  filter: saturate(1.04) contrast(1.02);
}

.design-project-card:hover .design-project-preview-image,
.design-project-thumb:focus-visible .design-project-preview-image {
  transform: scale(var(--preview-hover-scale));
  filter: saturate(1.12) contrast(1.08);
}

.design-project-preview-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  padding: 0;
  background:
    radial-gradient(circle at 24% 22%, rgba(37, 99, 235, 0.22), transparent 24%),
    radial-gradient(circle at 70% 34%, rgba(20, 184, 166, 0.2), transparent 20%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 11%, #ffffff), #ffffff 58%, color-mix(in srgb, var(--blue) 8%, #eaf2ff));
}

.design-project-preview-empty::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, transparent);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.56), transparent 44%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--blue) 10%, transparent) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--blue) 9%, transparent) 0 1px, transparent 1px 18px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.design-project-preview-empty::after {
  content: "";
  position: absolute;
  left: 21%;
  top: 28%;
  width: 46%;
  height: 34%;
  border: 1px solid color-mix(in srgb, var(--blue) 25%, rgba(255, 255, 255, 0.75));
  border-radius: 11px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 22%, transparent) 0 28%, transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--blue) 7%, #ffffff));
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
  transform: rotate(-3deg);
}

.design-project-preview-empty i {
  position: absolute;
  z-index: 1;
  display: block;
  border-radius: 7px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 30%, #ffffff), rgba(255, 255, 255, 0.84));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--blue) 15%, transparent);
}

.design-project-preview-empty i:nth-child(1) {
  width: 78px;
  height: 48px;
  transform: translate(-42px, -18px) rotate(-8deg);
}

.design-project-preview-empty i:nth-child(2) {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 70% 24%, #22c55e, transparent 24%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 22%, #111827), #111827);
  transform: translate(44px, 14px) rotate(7deg);
}

.design-project-preview-empty i:nth-child(3) {
  width: 104px;
  height: 13px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.62);
  transform: translate(-4px, 53px);
}

.design-project-thumb .design-project-thumb-badge,
.design-project-thumb b {
  position: relative;
  z-index: 2;
  color: #ffffff;
}

.video-project-thumb span,
.video-project-aspect {
  position: relative;
  z-index: 2;
  justify-self: start;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  padding: 6px 10px;
  color: #ffffff;
  background: rgba(2, 6, 23, 0.35);
}

.video-project-thumb b,
.video-project-count {
  position: relative;
  z-index: 2;
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  border-radius: 9px;
  padding: 6px 9px;
  background: rgba(2, 6, 23, 0.68);
  color: #ffffff;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-project-thumb .design-project-preview-frame,
.design-project-thumb .design-project-preview-image,
.design-project-thumb .design-project-preview-empty {
  justify-self: auto;
  border: 0;
  border-radius: inherit;
  padding: 0;
  color: inherit;
  background-color: transparent;
  box-shadow: none;
}

.design-project-thumb .design-project-preview-image {
  border-radius: 0;
}

.design-project-thumb .design-project-preview-empty {
  border-radius: 0;
  background:
    radial-gradient(circle at 32% 34%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 22%),
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, #ffffff), #ffffff);
}

.video-project-body {
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 4px 42px 0 0;
}

.video-project-body strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.video-project-title {
  width: fit-content;
  max-width: 100%;
  border-radius: 8px;
  padding: 2px 4px;
  margin: -2px -4px;
  cursor: text;
  transition: background 0.16s ease, color 0.16s ease;
}

.video-project-title:hover {
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  color: color-mix(in srgb, var(--blue) 68%, var(--ink));
}

.video-project-title-input {
  width: 100%;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 34%, var(--line));
  border-radius: 8px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 820;
  outline: 0;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 12%, transparent);
}

.video-project-card.is-renaming .video-project-body {
  opacity: 0.72;
}

.video-project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.video-project-meta em {
  display: inline-flex;
  max-width: 100%;
  min-height: 28px;
  align-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 999px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, 0.66);
  color: #475569;
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-project-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, auto);
  gap: 8px;
  align-self: end;
}

.video-project-actions a,
.video-project-actions button {
  min-height: 42px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.62);
}

.video-project-actions button {
  color: var(--red);
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
}

.design-project-card .video-project-actions a,
.design-project-card .video-project-actions button {
  flex-basis: auto;
}

.design-project-card .video-project-actions {
  grid-template-columns: minmax(120px, 1fr) minmax(104px, 0.72fr) 44px 44px;
}

.design-project-card .video-project-actions a,
.design-project-card .video-project-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.design-project-card .video-project-actions a:first-child {
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #60a5fa), var(--blue));
  color: #ffffff;
}

.design-project-card .video-project-actions a:nth-of-type(2) {
  border-color: rgba(34, 197, 94, 0.28);
  background: color-mix(in srgb, #22c55e 10%, #ffffff);
  color: #16a34a;
  font-weight: 900;
}

.design-project-card .video-project-actions a:nth-of-type(2)::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("https://api.iconify.design/lucide/send.svg") center / contain no-repeat;
  -webkit-mask: url("https://api.iconify.design/lucide/send.svg") center / contain no-repeat;
}

.design-project-card .video-project-actions button[data-duplicate-project] {
  font-size: 0;
  color: var(--blue);
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
}

.design-project-card .video-project-actions button[data-delete-project] {
  font-size: 0;
}

.design-project-card .video-project-actions button[data-duplicate-project]::before,
.design-project-card .video-project-actions button[data-delete-project]::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--project-action-icon) center / contain no-repeat;
  -webkit-mask: var(--project-action-icon) center / contain no-repeat;
}

.design-project-card .video-project-actions button[data-duplicate-project] {
  --project-action-icon: url("https://api.iconify.design/lucide/copy-plus.svg");
}

.design-project-card .video-project-actions button[data-delete-project] {
  --project-action-icon: url("https://api.iconify.design/lucide/trash-2.svg");
}

.video-project-empty {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 20px;
}

.video-project-empty[hidden] {
  display: none;
}

.project-delete-modal[hidden] {
  display: none;
}

.project-delete-modal {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 18px;
}

.project-delete-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.34);
  backdrop-filter: blur(10px);
}

.project-delete-dialog {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 11px;
  width: min(440px, 100%);
  border: 1px solid color-mix(in srgb, var(--red) 16%, var(--line));
  border-radius: 16px;
  padding: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--red) 3%, #ffffff)),
    #ffffff;
  box-shadow: 0 30px 90px rgba(15, 23, 42, 0.22);
}

.project-delete-dialog > span {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--red) 8%, #ffffff);
  color: var(--red);
  font-size: 12px;
  font-weight: 840;
}

.project-delete-dialog h2,
.project-delete-dialog p {
  margin: 0;
}

.project-delete-dialog h2 {
  color: var(--ink);
  font-size: 24px;
  line-height: 1.08;
}

.project-delete-dialog p {
  color: var(--muted);
  line-height: 1.45;
}

.project-delete-list {
  display: grid;
  gap: 6px;
  max-height: 170px;
  overflow: auto;
}

.project-delete-list span,
.project-delete-list small {
  border: 1px solid color-mix(in srgb, var(--red) 10%, var(--line));
  border-radius: 9px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-size: 13px;
  font-weight: 760;
}

.project-delete-list small {
  color: var(--muted);
}

.project-delete-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.project-filter-bar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 220px) auto auto;
  align-items: end;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, #ffffff 92%, transparent);
  padding: 12px;
}

.project-filter-bar label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.project-filter-bar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.project-filter-bar input,
.project-filter-bar select {
  width: 100%;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 8px 10px;
  font: inherit;
}

.project-sort-dropdown {
  display: none;
}

body.video-projects-page .project-filter-sort.has-custom-sort-dropdown {
  position: relative;
}

body.video-projects-page .project-filter-sort.has-custom-sort-dropdown select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

body.video-projects-page .project-sort-dropdown {
  position: relative;
  display: block;
  min-width: 0;
}

body.video-projects-page .project-sort-trigger {
  position: relative;
  width: 100%;
  min-height: 40px;
  justify-content: flex-start;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--blue) 7%, transparent), transparent 44%),
    #ffffff;
  color: var(--ink);
  padding: 8px 34px 8px 36px;
  font: inherit;
  font-weight: 780;
  text-align: left;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

body.video-projects-page .project-sort-trigger::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 15px;
  height: 15px;
  background: color-mix(in srgb, var(--blue) 78%, #22c55e);
  mask: url("https://api.iconify.design/lucide/arrow-down-up.svg") center / contain no-repeat;
  -webkit-mask: url("https://api.iconify.design/lucide/arrow-down-up.svg") center / contain no-repeat;
  transform: translateY(-50%);
}

body.video-projects-page .project-sort-trigger::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 2px solid #64748b;
  border-bottom: 2px solid #64748b;
  transform: translateY(-62%) rotate(45deg);
  transition: transform 160ms ease;
}

body.video-projects-page .project-sort-dropdown.is-open .project-sort-trigger {
  border-color: color-mix(in srgb, var(--blue) 44%, #22c55e);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--blue) 14%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

body.video-projects-page .project-sort-dropdown.is-open .project-sort-trigger::after {
  transform: translateY(-22%) rotate(225deg);
}

body.video-projects-page .project-sort-menu {
  position: fixed;
  left: 0;
  right: auto;
  top: calc(100% + 8px);
  z-index: 70080;
  display: grid;
  gap: 6px;
  min-width: 180px;
  max-height: 236px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, #dbeafe);
  border-radius: 18px;
  padding: 7px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.97));
  box-shadow:
    0 30px 72px rgba(15, 23, 42, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
  scrollbar-width: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-5px) scale(0.98);
  transform-origin: 50% 0%;
  transition: opacity 160ms ease, transform 160ms ease;
}

body.video-projects-page .project-sort-menu::-webkit-scrollbar {
  display: none;
}

body.video-projects-page .project-sort-dropdown.is-open .project-sort-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

body.video-projects-page .project-sort-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

body.video-projects-page .project-sort-menu.is-above {
  transform: translateY(8px) scale(0.98);
  transform-origin: 50% 100%;
}

body.video-projects-page .project-sort-menu.is-open.is-above {
  transform: translateY(0) scale(1);
}

body.video-projects-page .project-sort-option {
  position: relative;
  min-height: 38px;
  justify-content: flex-start;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #334155;
  padding: 10px 12px 10px 34px;
  font-size: 13px;
  font-weight: 820;
  text-align: left;
  box-shadow: none;
}

body.video-projects-page .project-sort-option::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  width: 9px;
  height: 9px;
  border: 2px solid color-mix(in srgb, var(--blue) 28%, #cbd5e1);
  border-radius: 999px;
  transform: translateY(-50%);
}

body.video-projects-page .project-sort-option:hover,
body.video-projects-page .project-sort-option:focus-visible {
  background: color-mix(in srgb, var(--blue) 7%, #f8fafc);
}

body.video-projects-page .project-sort-option[aria-selected="true"] {
  background: color-mix(in srgb, var(--blue) 9%, #ecfdf5);
  color: color-mix(in srgb, var(--blue) 72%, #047857);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, transparent);
}

body.video-projects-page .project-sort-option[aria-selected="true"]::before {
  border-color: color-mix(in srgb, var(--blue) 66%, #22c55e);
  background: radial-gradient(circle, color-mix(in srgb, var(--blue) 82%, #22c55e) 0 42%, transparent 46%);
}

.project-filter-bar button,
.project-filter-bar a,
.project-pagination a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 8%, #ffffff);
  color: var(--blue);
  padding: 8px 12px;
  font-weight: 820;
  text-decoration: none;
}

.video-projects-shell.is-loading-projects [data-project-grid],
.video-projects-shell.is-loading-projects [data-project-pagination] {
  opacity: .58;
  pointer-events: none;
}

.project-filter-bar button:disabled,
.project-filter-bar input:disabled,
.project-filter-bar select:disabled {
  cursor: progress;
  opacity: .68;
}

.project-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.project-pagination span {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  min-height: 40px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 820;
}

.ai-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  max-width: 100%;
  min-width: 0;
}

.ai-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: min(100%, 640px);
  min-width: 0;
  min-height: 30px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  color: var(--ink);
  padding: 5px 9px;
  font-size: 12px;
}

.ai-meta-chip b,
.ai-meta-chip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-meta-chip b {
  flex: 0 0 auto;
}

.ai-meta-chip small {
  flex: 1 1 auto;
  min-width: 0;
  max-width: min(460px, 64vw);
  color: var(--muted);
}

.ai-meta-chip small + small {
  display: none;
}

.ai-meta-chip.is-used {
  border-color: color-mix(in srgb, #0f766e 26%, var(--line));
  background: color-mix(in srgb, #0f766e 8%, #ffffff);
}

.ai-meta-chip.is-fallback {
  border-color: color-mix(in srgb, #c1840f 30%, var(--line));
  background: color-mix(in srgb, #c1840f 8%, #ffffff);
}

.ai-meta-row.is-compact,
.stats-job-row .ai-meta-row {
  gap: 6px;
  margin-top: 6px;
}

.stats-job-row .ai-meta-chip {
  min-height: 26px;
  padding: 4px 7px;
  font-size: 11px;
}

.project-delete-dialog button {
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 8px;
  padding: 8px 13px;
  background: transparent;
  color: var(--ink);
  font-weight: 840;
}

.project-delete-dialog button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.stats-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
  min-width: 0;
}

.stats-actions form {
  margin: 0;
}

.stats-actions a,
.stats-actions button {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--blue) 42%, var(--line));
  border-radius: 8px;
  padding: 6px 9px;
  background: transparent;
  color: var(--blue);
  text-decoration: none;
  font-size: 12px;
  font-weight: 820;
}

.stats-actions a:hover,
.stats-actions button:hover {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 9%, var(--surface));
}

.stats-actions .is-danger {
  border-color: color-mix(in srgb, var(--red) 42%, var(--line));
  color: var(--red);
}

.stats-actions .is-danger:hover {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 8%, var(--surface));
}

.theme-dark .stats-card {
  border-color: color-mix(in srgb, var(--blue) 24%, #243049);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 78%, var(--blue)), var(--surface)),
    var(--surface);
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.28);
}

.theme-dark .stats-card::after {
  opacity: 0.13;
}

.theme-dark .stats-row {
  border-color: color-mix(in srgb, var(--blue) 18%, #243049);
  background: color-mix(in srgb, var(--surface-2) 74%, #050816);
  color: var(--ink);
}

.theme-dark .stats-row:hover {
  border-color: color-mix(in srgb, var(--blue) 52%, #4b5f84);
  background: color-mix(in srgb, var(--blue) 14%, var(--surface-2));
}

.theme-dark .stats-task-thumb {
  border-color: rgba(126, 154, 203, 0.28);
  background:
    radial-gradient(circle at 80% 16%, color-mix(in srgb, var(--blue) 24%, transparent), transparent 34%),
    rgba(15, 23, 42, 0.72);
  box-shadow: none;
}

.theme-dark .stats-task-thumb:not(.is-image) span {
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
}

@media (max-width: 760px) {
  .studio-topbar {
    position: sticky;
    top: 0;
    z-index: 70000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 5px;
  }

  .studio-topbar .topbar-copy {
    min-width: 0;
  }

  .studio-topbar .topbar-note {
    display: none;
  }

  .studio-topbar .account-panel {
    position: static;
    z-index: 91000;
    display: grid;
    justify-self: end;
    max-width: none;
    transform: none;
  }

  .studio-topbar .account-panel-toggle {
    --editor-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg?color=%232563eb");
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.98), transparent 42%),
      var(--editor-icon) center / 20px 20px no-repeat,
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 7%, #ffffff));
    box-shadow:
      0 14px 34px color-mix(in srgb, var(--blue) 13%, transparent),
      0 0 0 5px rgba(255, 255, 255, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .studio-topbar .account-panel-toggle::before {
    display: none;
  }

  .studio-topbar .limits.account-panel-content {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 30px));
    z-index: 94001;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
    max-height: min(58svh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 14px;
    background:
      radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 30%) padding-box,
      linear-gradient(145deg, #ffffff, #f8fbff) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 48%, #ffffff), rgba(20, 184, 166, 0.42), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow:
      0 30px 82px rgba(15, 23, 42, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
    opacity: 0;
    pointer-events: none;
    transform: translateY(22px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  .studio-topbar .limits.account-panel-content::before {
    content: "";
    grid-column: 1 / -1;
    justify-self: center;
    width: 44px;
    height: 4px;
    margin: -3px 0 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 24%, #dbe7fb);
  }

  .studio-topbar .account-panel.is-open .limits.account-panel-content {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .studio-topbar .account-panel-content .language-switcher,
  .studio-topbar .account-panel-content .subscription-meter,
  .studio-topbar .account-panel-content > span,
  .studio-topbar .account-panel-content .cherryx-balance-badge {
    grid-column: 1 / -1;
    width: 100%;
  }

  .studio-topbar .account-panel-content .language-current,
  .studio-topbar .account-panel-content .topbar-link,
  .studio-topbar .account-panel-content .topbar-form button,
  .studio-topbar .account-panel-content .subscription-meter,
  .studio-topbar .account-panel-content > span,
  .studio-topbar .account-panel-content .cherryx-balance-badge {
    min-height: 40px;
    border-radius: 13px;
  }

  .studio-topbar .account-panel-content .topbar-link,
  .studio-topbar .account-panel-content .topbar-form button {
    width: 100%;
    padding: 10px 12px;
    font-size: 12px;
  }

  .studio-topbar .account-panel-content > span {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-mobile-account-open::before,
  body:has(.studio-topbar .account-panel.is-open)::before {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-language-portal-open .studio-topbar .account-panel-content .language-switcher.is-open .language-menu,
  .studio-topbar .account-panel-content .language-switcher.is-open .language-menu {
    position: fixed !important;
    top: auto !important;
    left: 14px !important;
    right: 14px !important;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 28px)) !important;
    z-index: 98000 !important;
    display: grid !important;
    width: auto !important;
    max-height: min(52svh, 390px);
    overflow-x: hidden;
    overflow-y: auto;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
    border-radius: 22px;
    padding: 14px 12px 16px;
    background:
      radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 32%) padding-box,
      linear-gradient(180deg, #ffffff, #f8fbff) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #ffffff), rgba(20, 184, 166, 0.34), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow:
      0 30px 82px rgba(15, 23, 42, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  body.is-language-portal-open .studio-topbar .account-panel-content .language-switcher.is-open .language-current,
  .studio-topbar .account-panel-content .language-switcher.is-open .language-current {
    display: flex;
  }

  .theme-dark .studio-topbar .account-panel-toggle {
    --editor-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg?color=%23f8fbff");
    border-color: rgba(126, 154, 203, 0.42);
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.12), transparent 42%),
      var(--editor-icon) center / 20px 20px no-repeat,
      linear-gradient(145deg, rgba(30, 41, 67, 0.98), rgba(8, 13, 26, 0.96));
    box-shadow:
      0 16px 34px rgba(0, 0, 0, 0.28),
      0 0 0 5px rgba(15, 23, 42, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }

  .theme-dark .studio-topbar .limits.account-panel-content,
  .theme-dark.is-mobile-workspace .limits.account-panel-content {
    background:
      radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 30%) padding-box,
      linear-gradient(180deg, rgba(17, 26, 46, 0.98), rgba(8, 13, 26, 0.98)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #1e293b), rgba(20, 184, 166, 0.28), rgba(84, 102, 137, 0.38)) border-box;
  }

  body.theme-dark.is-language-portal-open .studio-topbar .account-panel-content .language-switcher.is-open .language-menu,
  .theme-dark .studio-topbar .account-panel-content .language-switcher.is-open .language-menu {
    border-color: rgba(126, 154, 203, 0.34);
    background:
      radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 32%) padding-box,
      linear-gradient(180deg, rgba(17, 26, 46, 0.98), rgba(8, 13, 26, 0.98)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #1e293b), rgba(20, 184, 166, 0.28), rgba(84, 102, 137, 0.38)) border-box;
    box-shadow:
      0 30px 82px rgba(0, 0, 0, 0.44),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .theme-dark.is-mobile-workspace .mobile-language-panel {
    background:
      radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 32%) padding-box,
      linear-gradient(180deg, rgba(17, 26, 46, 0.98), rgba(8, 13, 26, 0.98)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #1e293b), rgba(20, 184, 166, 0.28), rgba(84, 102, 137, 0.38)) border-box;
    box-shadow:
      0 30px 82px rgba(0, 0, 0, 0.44),
      inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }

  .theme-dark.is-mobile-workspace .mobile-language-panel button {
    border-color: rgba(126, 154, 203, 0.3);
    background: rgba(13, 19, 36, 0.9);
    color: #f8fbff;
  }

  body.stats-page {
    min-height: 100svh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 86% 4%, color-mix(in srgb, var(--blue) 15%, transparent), transparent 32%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, #f8fbff) 0, #f6fafc 46%, #eef5f4 100%);
  }

  body.stats-page .detail-topbar {
    position: sticky;
    top: 0;
    z-index: 65000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.07);
    backdrop-filter: blur(18px);
  }

  body.stats-page .detail-topbar .topbar-copy {
    min-width: 0;
  }

  body.stats-page .detail-topbar .eyebrow {
    margin: 0;
    font-size: 10px;
    line-height: 1;
  }

  body.stats-page .detail-topbar .back-link {
    display: inline-block;
    max-width: min(52vw, 220px);
    overflow: hidden;
    color: var(--blue);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.stats-page .detail-topbar h1 {
    max-width: 54vw;
    margin: 3px 0 0;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.stats-page .detail-topbar .account-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
    max-width: none;
  }

  body.stats-page .detail-topbar .language-switcher {
    display: none;
  }

  body.stats-page .detail-topbar .account-avatar {
    display: none;
  }

  body.stats-page .detail-topbar .topbar-link {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    overflow: hidden;
    border-radius: 14px;
    padding: 0;
    font-size: 0;
    box-shadow:
      0 12px 26px color-mix(in srgb, var(--blue) 12%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  body.stats-page .detail-topbar .detail-workspace-link {
    background:
      url("https://api.iconify.design/lucide/layout-dashboard.svg?color=%232563eb") center / 19px 19px no-repeat,
      color-mix(in srgb, var(--blue) 9%, #ffffff);
  }

  body.stats-page .detail-topbar .topbar-link[href*="settings"] {
    background:
      url("https://api.iconify.design/lucide/settings.svg?color=%232563eb") center / 19px 19px no-repeat,
      color-mix(in srgb, var(--blue) 9%, #ffffff);
  }

  body.stats-page .stats-detail {
    display: grid;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
  }

  body.stats-page .stats-hero {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -10px;
    padding: 1px 10px 4px;
    scroll-padding: 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.stats-page .stats-hero::-webkit-scrollbar {
    display: none;
  }

  body.stats-page .stats-card {
    display: grid;
    flex: 0 0 112px;
    min-width: 112px;
    min-height: 64px;
    align-content: center;
    border: 1px solid color-mix(in srgb, var(--blue) 16%, rgba(148, 163, 184, 0.28));
    border-radius: 15px;
    padding: 9px 10px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 3%, #ffffff)) padding-box,
      var(--surface);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--blue) 7%, transparent);
    scroll-snap-align: start;
  }

  body.stats-page .stats-card.is-storage {
    flex-basis: 176px;
    min-width: 176px;
  }

  body.stats-page .stats-card::before {
    inset: auto 10px 8px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 10%, #ffffff);
  }

  body.stats-page .stats-card::after {
    right: 9px;
    top: 9px;
    bottom: auto;
    width: 24px;
    height: 24px;
    opacity: 0.05;
  }

  body.stats-page .stats-hero span,
  body.stats-page .stats-hero small {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.stats-page .stats-hero strong {
    margin-top: 3px;
    overflow: hidden;
    font-size: clamp(18px, 6vw, 22px);
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.stats-page .stats-hero i {
    height: 4px;
    margin-top: 7px;
  }

  body.stats-page .detail-panel,
  body.stats-page .stats-files-panel {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, rgba(148, 163, 184, 0.26));
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 46px color-mix(in srgb, var(--blue) 10%, transparent);
  }

  body.stats-page .detail-panel > .section-title,
  body.stats-page .stats-files-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    padding: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--blue) 10%, rgba(148, 163, 184, 0.2));
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 6%, #ffffff), rgba(255, 255, 255, 0.84));
  }

  body.stats-page .section-title h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.12;
  }

  body.stats-page .section-title span {
    display: inline-flex;
    width: fit-content;
    min-height: 26px;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
    border-radius: 999px;
    padding: 4px 8px;
    background: color-mix(in srgb, var(--blue) 8%, #ffffff);
    color: var(--blue);
    font-size: 11px;
    font-weight: 850;
  }

  body.stats-page .stats-filter-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(112px, .5fr);
    gap: 8px;
    align-items: end;
  }

  body.stats-page .stats-search-field span,
  body.stats-page .stats-native-type span {
    display: none;
  }

  body.stats-page .stats-search-field {
    grid-column: 1 / -1;
  }

  body.stats-page .stats-filter-form input[type="search"],
  body.stats-page .stats-type-current,
  body.stats-page .stats-filter-submit {
    min-height: 42px;
    border-radius: 12px;
    font-size: 14px;
  }

  body.stats-page .stats-filter-form input[type="search"] {
    padding: 10px 12px 10px 38px;
    background:
      url("https://api.iconify.design/lucide/search.svg?color=%2364758b") 12px center / 17px 17px no-repeat,
      rgba(255, 255, 255, 0.92);
  }

  body.stats-page .stats-type-current {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 7px;
    padding: 9px 29px 9px 10px;
    background: rgba(255, 255, 255, 0.92);
  }

  body.stats-page .stats-filter-submit {
    padding: 9px 12px;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 18%, transparent);
  }

  body.stats-page .stats-type-menu {
    right: 0;
    left: auto;
    width: min(280px, calc(100vw - 28px));
    border-radius: 15px;
    z-index: 65020;
  }

  body.stats-page .stats-files-table-head {
    display: none;
  }

  body.stats-page .stats-list {
    gap: 0;
  }

  body.stats-page .stats-row,
  body.stats-page .stats-row.stats-file-row,
  body.stats-page .stats-job-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 9px 10px;
    align-items: start;
    border-width: 0 0 1px;
    border-color: color-mix(in srgb, var(--blue) 9%, rgba(148, 163, 184, 0.22));
    border-radius: 0;
    padding: 12px;
    background: transparent;
    box-shadow: none;
  }

  body.stats-page .stats-row:last-child {
    border-bottom: 0;
  }

  body.stats-page .stats-row::before {
    display: none;
  }

  body.stats-page .stats-row:hover {
    transform: none;
  }

  body.stats-page .stats-row > span {
    min-width: 0;
    gap: 5px;
  }

  body.stats-page .stats-row > span > b {
    display: block;
    overflow: hidden;
    max-width: 100%;
    font-size: 15px;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.stats-page .stats-row small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.28;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.stats-page .stats-job-row > strong,
  body.stats-page .stats-row.stats-file-row > strong {
    display: grid;
    gap: 5px;
    justify-items: end;
    min-width: 62px;
    font-size: 12px;
    text-align: right;
  }

  body.stats-page .stats-job-row .job-status {
    min-height: 24px;
    border-radius: 999px;
    padding: 4px 8px;
    background: color-mix(in srgb, #16a34a 8%, #ffffff);
    color: #0f7a3b;
    font-size: 10px;
    line-height: 1;
  }

  body.stats-page .stats-job-row > strong small {
    font-size: 10px;
  }

  body.stats-page .ai-meta-row.is-compact {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  body.stats-page .ai-meta-row.is-compact::-webkit-scrollbar {
    display: none;
  }

  body.stats-page .ai-meta-chip {
    flex: 0 0 auto;
    max-width: 130px;
    border-radius: 8px;
    padding: 5px 7px;
  }

  body.stats-page .stats-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 7px;
    min-width: 0;
    overflow: visible;
    padding: 2px 0 0;
    scrollbar-width: none;
  }

  body.stats-page .stats-actions::-webkit-scrollbar {
    display: none;
  }

  body.stats-page .stats-actions form {
    display: contents;
  }

  body.stats-page .stats-actions a,
  body.stats-page .stats-actions button,
  body.stats-page .stats-share-btn {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    border-radius: 10px;
    padding: 7px 8px;
    background: color-mix(in srgb, var(--blue) 7%, #ffffff);
    font-size: 11px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
  }

  body.stats-page .stats-actions a:first-child {
    border-color: transparent;
    background: linear-gradient(180deg, color-mix(in srgb, #16a34a 88%, #34d399), #16a34a);
    color: #ffffff;
    box-shadow: 0 12px 26px color-mix(in srgb, #16a34a 18%, transparent);
  }

  body.stats-page .stats-actions .is-danger {
    background: color-mix(in srgb, var(--red) 7%, #ffffff);
  }

  body.stats-page .stats-job-row > span::before,
  body.stats-page .stats-file-row > span::before {
    content: "";
    display: block;
    width: 28px;
    height: 28px;
    grid-row: 1 / span 2;
    border: 1px solid color-mix(in srgb, var(--blue) 16%, rgba(148, 163, 184, 0.28));
    border-radius: 10px;
    background:
      url("https://api.iconify.design/lucide/file-check-2.svg?color=%232563eb") center / 15px 15px no-repeat,
      color-mix(in srgb, var(--blue) 7%, #ffffff);
  }

  body.stats-page .stats-job-row > span::before {
    display: none;
  }

  body.stats-page .stats-job-row > span,
  body.stats-page .stats-file-row > span {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    column-gap: 9px;
    align-items: start;
  }

  body.stats-page .stats-job-row > span {
    grid-template-columns: minmax(0, 1fr);
    grid-column: 2;
  }

  body.stats-page .stats-job-row .stats-task-thumb {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 54px;
    height: 44px;
  }

  body.stats-page .stats-job-row > strong {
    grid-column: 3;
  }

  body.stats-page .stats-job-row .stats-actions {
    grid-column: 1 / -1;
  }

  body.stats-page .stats-job-row > span > b,
  body.stats-page .stats-file-row > span > b,
  body.stats-page .stats-job-row > span > small,
  body.stats-page .stats-file-row > span > small,
  body.stats-page .stats-job-row .ai-meta-row {
    grid-column: 2;
  }

  body.stats-page .stats-job-row > span > b,
  body.stats-page .stats-job-row > span > small,
  body.stats-page .stats-job-row .ai-meta-row {
    grid-column: 1;
  }

  body.stats-page .stats-job-row > span > small,
  body.stats-page .stats-file-row > span > small {
    -webkit-line-clamp: 1;
  }

  body.stats-page .stats-job-row > strong::after {
    content: "";
    display: block;
    width: 54px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background:
      linear-gradient(90deg, #16a34a var(--stats-row-progress, 100%), color-mix(in srgb, var(--blue) 10%, #e5edf6) 0);
  }

  body.stats-page .stats-files-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid color-mix(in srgb, var(--blue) 9%, rgba(148, 163, 184, 0.22));
  }

  body.stats-page .stats-files-meta {
    font-size: 12px;
  }

  body.stats-page .stats-files-pagination {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.stats-page .stats-files-pagination::-webkit-scrollbar {
    display: none;
  }

  body.stats-page .pagination-button,
  body.stats-page .stats-files-pagination a {
    min-width: 36px;
    min-height: 36px;
    padding: 7px 10px;
  }

  body.stats-page .empty-jobs,
  body.stats-page .stats-files-empty {
    margin: 0;
    border: 0;
    border-radius: 0;
    padding: 22px 14px;
    background: transparent;
  }

  body.stats-page .share-modal {
    align-items: end;
    padding: 12px;
  }

  body.stats-page .share-modal-content {
    width: 100%;
    max-width: none;
    border-radius: 18px;
    padding: 16px;
  }

  body.stats-page .share-channels {
    grid-template-columns: 1fr 1fr;
  }

  .theme-dark.stats-page .detail-topbar,
  .theme-dark.stats-page .detail-panel,
  .theme-dark.stats-page .stats-files-panel,
  .theme-dark.stats-page .stats-card {
    background:
      linear-gradient(rgba(17, 26, 46, 0.94), rgba(17, 26, 46, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 36%, #1e293b), rgba(20, 184, 166, 0.22), rgba(84, 102, 137, 0.34)) border-box;
  }
}

.detail-page .detail-topbar {
  align-items: flex-start;
}

.detail-page .topbar-copy h1 {
  max-width: 900px;
}

.detail-main,
.detail-side {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.detail-side {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 44px);
  overflow: auto;
}

.detail-panel,
.preview-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
}

.theme-dark .detail-panel,
.theme-dark .preview-card {
  border-color: rgba(84, 102, 137, 0.45);
  background: rgba(17, 26, 46, 0.88);
}

.detail-panel {
  padding: 16px;
}

.originality-job-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at 6% 0%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--surface-2) 56%, #ffffff));
}

.originality-detail-score {
  --score-size: 116px;
  --score-ring: 10px;
}

.originality-detail-score strong {
  font-size: 40px;
}

.originality-detail-score span {
  font-size: 13px;
}

.originality-detail-copy h2,
.originality-detail-copy p {
  margin: 0;
}

.originality-detail-copy h2 {
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.02;
}

.originality-detail-copy > p:last-of-type {
  margin-top: 8px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.originality-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.originality-detail-actions .primary-link,
.originality-detail-actions .secondary-action {
  min-height: 40px;
}

.originality-guidance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}

.originality-guidance article {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  padding: 16px;
  border-right: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
}

.originality-guidance article:nth-child(2n) {
  border-right: 0;
}

.originality-guidance article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.originality-guidance article > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  color: var(--blue);
}

.originality-guidance article > span::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.originality-guidance h3,
.originality-guidance p {
  margin: 0;
}

.originality-guidance h3 {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.originality-guidance p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.42;
}

.originality-email-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.originality-email-form input {
  min-height: 38px;
}

.originality-email-status {
  min-height: 18px;
  margin-top: 8px !important;
  font-weight: 820;
}

.originality-email-status.is-success {
  color: #10935c;
}

.originality-email-status.is-error {
  color: #dc2626;
}

.theme-dark .originality-job-hero,
.theme-dark .originality-guidance article > span {
  background: rgba(8, 13, 26, 0.72);
}

.detail-label {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.detail-status {
  margin: 0;
  color: var(--ink);
  font-size: 20px;
  font-weight: 780;
}

.detail-progress {
  margin-top: 10px;
  contain: inline-size;
}

.back-link {
  color: inherit;
  text-decoration: none;
}

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

.preview-card {
  overflow: hidden;
}

.theme-dark .preview-head {
  border-bottom-color: rgba(84, 102, 137, 0.45);
}

.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  min-width: 0;
}

.preview-head > div:first-child {
  min-width: 0;
}

.preview-head h3,
.preview-head p {
  margin: 0;
}

.preview-head h3 {
  font-size: 16px;
}

.preview-head p {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.output-link.compact {
  flex: 0 0 auto;
  min-height: 32px;
  margin-top: 0;
}

.output-mobile-actions {
  display: none;
}

.job-state-summary {
  display: none;
}

.result-preview {
  display: block;
  width: 100%;
  max-height: 520px;
  border-top: 1px solid var(--line);
  background: #111827;
  object-fit: contain;
}

.cx-player {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: #050816;
}

.cx-player .result-preview {
  border-top: 0;
}

.cx-player:fullscreen,
.cx-player:-webkit-full-screen {
  display: grid;
  width: 100vw;
  height: 100vh;
  place-items: center;
  background: #02040a;
  position: relative;
}

.cx-player:fullscreen .result-preview,
.cx-player:-webkit-full-screen .result-preview {
  position: absolute;
  inset: 0;
  width: 100vw !important;
  height: 100vh !important;
  max-height: none !important;
  object-fit: contain;
}

.cx-player:fullscreen .cx-player-controls,
.cx-player:-webkit-full-screen .cx-player-controls {
  left: 0;
  right: 0;
  bottom: 0;
  padding: 42px 18px 18px;
  z-index: 2;
}

.cx-player-video {
  cursor: pointer;
}

.cx-player-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: 38px 38px auto minmax(96px, 1fr) 38px 38px 74px 38px;
  gap: 8px;
  align-items: center;
  padding: 26px 12px 10px;
  color: #ffffff;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82));
  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: auto;
}

.cx-player:not(:hover):not(:focus-within) .cx-player-controls {
  opacity: 0.88;
}

.cx-player-btn {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.cx-player-btn:hover {
  background: color-mix(in srgb, var(--blue) 72%, rgba(255, 255, 255, 0.18));
}

.cx-player-time {
  min-width: 86px;
  font-size: 12px;
  font-weight: 760;
  white-space: nowrap;
}

.cx-player-seek,
.cx-player-volume {
  --seek: 0%;
  width: 100%;
  height: 22px;
  appearance: none;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  touch-action: none;
}

.cx-player-volume {
  --seek: 100%;
}

.cx-player-seek::-webkit-slider-runnable-track,
.cx-player-volume::-webkit-slider-runnable-track {
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue) var(--seek), rgba(255, 255, 255, 0.34) var(--seek));
}

.cx-player-volume::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--blue) calc(var(--value, 1) * 100%), rgba(255, 255, 255, 0.34) 0);
}

.cx-player-seek::-moz-range-track,
.cx-player-volume::-moz-range-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
}

.cx-player-seek::-moz-range-progress,
.cx-player-volume::-moz-range-progress {
  height: 7px;
  border-radius: 999px;
  background: var(--blue);
}

.cx-player-seek::-webkit-slider-thumb,
.cx-player-volume::-webkit-slider-thumb {
  width: 15px;
  height: 15px;
  margin-top: -4px;
  appearance: none;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.cx-player-seek::-moz-range-thumb,
.cx-player-volume::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--blue);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
}

.embed-preview {
  height: 520px;
  background: white;
}

.preview-missing {
  min-height: 140px;
  display: grid;
  place-items: center;
  border-top: 1px solid var(--line);
  padding: 16px;
  background: var(--surface-2);
  color: var(--muted);
  text-align: center;
}

.timeline {
  position: relative;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--teal);
  box-shadow: 0 0 0 4px #eaf1ff;
}

.theme-dark .timeline-dot {
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.16);
}

.timeline p {
  margin: 0;
  overflow-wrap: anywhere;
}

.timeline-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

body.job-detail-page .detail-side .timeline {
  max-height: clamp(320px, calc(100vh - 220px), 620px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--blue) 48%, #8fb4ff) color-mix(in srgb, var(--blue) 7%, transparent);
}

body.job-detail-page .detail-side .timeline::-webkit-scrollbar {
  width: 10px;
}

body.job-detail-page .detail-side .timeline::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 7%, transparent);
}

body.job-detail-page .detail-side .timeline::-webkit-scrollbar-thumb {
  min-height: 54px;
  border: 2px solid color-mix(in srgb, var(--surface) 84%, transparent);
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 64%, #8fb4ff), color-mix(in srgb, var(--teal) 48%, var(--blue)));
}

body.job-detail-page .detail-side .timeline::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 78%, #8fb4ff), color-mix(in srgb, var(--teal) 58%, var(--blue)));
}

.theme-dark.job-detail-page .detail-side .timeline {
  scrollbar-color: color-mix(in srgb, var(--blue) 58%, #9db7ff) rgba(15, 23, 42, 0.38);
}

.theme-dark.job-detail-page .detail-side .timeline::-webkit-scrollbar-track {
  background: rgba(15, 23, 42, 0.38);
}

.theme-dark.job-detail-page .detail-side .timeline::-webkit-scrollbar-thumb {
  border-color: rgba(17, 26, 46, 0.9);
}

body.job-detail-page .detail-topbar {
  align-items: flex-start;
  min-height: 86px;
  overflow: hidden;
}

body.job-detail-page .detail-topbar .topbar-copy {
  min-width: 0;
  padding-right: 56px;
}

body.job-detail-page .detail-topbar .language-switcher {
  display: block;
}

.job-detail-note {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px !important;
  max-width: min(820px, calc(100vw - 160px));
}

.job-detail-note span {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--muted);
  font-size: 12px;
  font-weight: 780;
}

.job-detail-note [data-job-progress-text] {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  color: var(--blue);
  font-weight: 900;
}

@media (max-width: 760px) {
  body.job-detail-page {
    min-height: 100svh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 10% 3%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 32%),
      radial-gradient(circle at 94% 24%, rgba(20, 184, 166, 0.14), transparent 28%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #f8fbff) 0, #eef8f7 52%, #f8fbff 100%);
  }

  body.job-detail-page .detail-topbar {
    position: sticky;
    top: 0;
    z-index: 65000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 0;
    padding: 8px 12px 7px;
    border: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.68));
    box-shadow: none;
    backdrop-filter: blur(18px);
  }

  body.job-detail-page .detail-topbar .topbar-copy {
    padding-right: 0;
  }

  body.job-detail-page .detail-topbar .topbar-copy,
  body.job-detail-page .detail-topbar .account-bar,
  body.job-detail-page .detail-main,
  body.job-detail-page .detail-side,
  body.job-detail-page .preview-card,
  body.job-detail-page .preview-head > div:first-child {
    min-width: 0;
  }

  body.job-detail-page .detail-topbar .eyebrow {
    margin: 0;
    font-size: 10px;
    line-height: 1;
  }

  body.job-detail-page .detail-topbar .back-link {
    display: inline-block;
    max-width: 154px;
    overflow: hidden;
    color: var(--blue);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.job-detail-page .detail-topbar h1 {
    max-width: min(68vw, 420px);
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--ink);
    font-size: clamp(16px, 4.8vw, 20px);
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.job-detail-page .job-detail-note {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    max-width: min(72vw, 430px);
    margin-top: 5px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.job-detail-page .job-detail-note::-webkit-scrollbar {
    display: none;
  }

  body.job-detail-page .job-detail-note span {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 3px 8px;
    font-size: 11px;
  }

  body.job-detail-page .detail-topbar .account-panel {
    position: static;
    z-index: 91000;
    display: grid;
    justify-self: end;
    max-width: none;
    transform: none;
  }

  body.job-detail-page .detail-topbar .account-panel-toggle {
    --editor-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg?color=%232563eb");
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.98), transparent 42%),
      var(--editor-icon) center / 20px 20px no-repeat,
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 7%, #ffffff));
    box-shadow:
      0 14px 34px color-mix(in srgb, var(--blue) 13%, transparent),
      0 0 0 5px rgba(255, 255, 255, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  body.job-detail-page .detail-topbar .account-panel-toggle::before {
    display: none;
  }

  body.job-detail-page .detail-topbar .account-panel-content {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 30px));
    z-index: 94001;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
    max-height: min(58svh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 14px;
    background:
      radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 30%) padding-box,
      linear-gradient(145deg, #ffffff, #f8fbff) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 48%, #ffffff), rgba(20, 184, 166, 0.42), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow:
      0 30px 82px rgba(15, 23, 42, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
    opacity: 0;
    pointer-events: none;
    transform: translateY(22px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body.job-detail-page .detail-topbar .account-panel.is-open .account-panel-content {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  body.job-detail-page .detail-topbar .account-bar > span:not([data-job-progress-text]),
  body.job-detail-page .detail-topbar .topbar-link:not(.detail-workspace-link):not(.is-primary) {
    display: none;
  }

  body.job-detail-page .detail-topbar .account-avatar {
    width: 34px;
    height: 34px;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 14px;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--blue) 16%, transparent);
  }

  body.job-detail-page .detail-topbar [data-job-progress-text] {
    display: inline-flex;
    min-width: 44px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--blue) 26%, rgba(255, 255, 255, 0.8));
    border-radius: 999px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.74);
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
  }

  body.job-detail-page .detail-topbar .detail-workspace-link,
  body.job-detail-page .detail-topbar .topbar-link.is-primary {
    min-width: 38px;
    min-height: 38px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 28%, rgba(255, 255, 255, 0.82));
    border-radius: 15px;
    padding: 0;
    font-size: 0;
    box-shadow:
      0 12px 28px color-mix(in srgb, var(--blue) 14%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  body.job-detail-page .detail-topbar .detail-workspace-link {
    background:
      url("https://api.iconify.design/lucide/layout-dashboard.svg?color=%232563eb") center / 18px 18px no-repeat,
      radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95), transparent 36%),
      color-mix(in srgb, var(--blue) 10%, #ffffff);
  }

  body.job-detail-page .detail-topbar .topbar-link.is-primary {
    background:
      url("https://api.iconify.design/lucide/credit-card.svg?color=white") center / 18px 18px no-repeat,
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #60a5fa), var(--blue));
  }

  body.job-detail-page .detail-topbar .account-panel-content .language-switcher,
  body.job-detail-page .detail-topbar .account-panel-content > span {
    display: flex;
    grid-column: 1 / -1;
    width: 100%;
  }

  body.job-detail-page .detail-topbar .account-panel-content .topbar-link {
    display: inline-flex;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    overflow: visible;
    border-radius: 13px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.78);
    font-size: 12px;
    line-height: 1.1;
    white-space: normal;
    box-shadow: none;
  }

  body.job-detail-page .detail-topbar .account-panel-content .topbar-link.is-primary {
    color: #fff;
    background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #60a5fa), var(--blue));
  }

  body.job-detail-page .detail-layout {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 10px 12px calc(22px + env(safe-area-inset-bottom));
  }

  body.job-detail-page .detail-main,
  body.job-detail-page .detail-side {
    display: contents;
  }

  body.job-detail-page .detail-panel,
  body.job-detail-page .preview-card,
  body.job-detail-page .paywall-hero {
    border: 1px solid transparent;
    border-radius: 24px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 4%, #ffffff)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 36%, #ffffff), rgba(20, 184, 166, 0.25), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow: 0 22px 58px color-mix(in srgb, var(--blue) 12%, transparent);
  }

  body.job-detail-page .detail-panel {
    padding: 14px;
  }

  body.job-detail-page [data-detail-job] {
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 10px;
    padding: 14px;
    background:
      radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 29%) padding-box,
      radial-gradient(circle at 0% 82%, rgba(20, 184, 166, 0.11), transparent 34%) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--blue) 5%, #ffffff)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 78%, #ffffff), rgba(20, 184, 166, 0.46), rgba(255, 255, 255, 0.82)) border-box;
    box-shadow:
      0 22px 58px color-mix(in srgb, var(--blue) 12%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  body.job-detail-page [data-detail-job]::before {
    display: none;
  }

  body.job-detail-page .job-topline {
    display: contents;
  }

  body.job-detail-page .job-topline > div:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
    order: 1;
    padding: 0;
  }

  body.job-detail-page .detail-label {
    grid-column: 1;
    width: fit-content;
    margin: 0;
    border-radius: 999px;
    padding: 5px 9px;
    background: color-mix(in srgb, var(--blue) 10%, #ffffff);
    color: var(--blue);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
  }

  body.job-detail-page .detail-status {
    grid-column: 1;
    margin-top: -2px;
    font-size: clamp(31px, 8.4vw, 38px);
    line-height: 0.98;
    letter-spacing: 0;
  }

  body.job-detail-page .job-topline > div:first-child::after {
    content: attr(data-progress);
    display: none;
  }

  body.job-detail-page .detail-actions,
  body.job-detail-page .originality-detail-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: 100%;
    overflow: visible;
    padding: 0;
    scrollbar-width: none;
  }

  body.job-detail-page .detail-actions {
    order: 4;
  }

  body.job-detail-page .output-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    padding: 1px 1px 5px;
    scrollbar-width: none;
  }

  body.job-detail-page .detail-actions::-webkit-scrollbar,
  body.job-detail-page .output-actions::-webkit-scrollbar,
  body.job-detail-page .originality-detail-actions::-webkit-scrollbar {
    display: none;
  }

  body.job-detail-page .job-state-summary {
    order: 3;
    display: grid;
    grid-template-columns: .8fr 1.3fr .7fr;
    gap: 7px;
    min-width: 0;
  }

  body.job-detail-page .job-state-summary span {
    display: grid;
    align-content: center;
    gap: 3px;
    min-width: 0;
    min-height: 52px;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, #dbeafe);
    border-radius: 15px;
    padding: 9px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.84), color-mix(in srgb, var(--blue) 4%, #ffffff));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  }

  body.job-detail-page .job-state-summary b,
  body.job-detail-page .job-state-summary small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.job-detail-page .job-state-summary b {
    color: var(--ink);
    font-size: 13px;
    font-weight: 950;
    line-height: 1.05;
  }

  body.job-detail-page .job-state-summary small {
    color: var(--muted);
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  body.job-detail-page .detail-actions form,
  body.job-detail-page .detail-actions a,
  body.job-detail-page .originality-detail-actions a,
  body.job-detail-page .originality-detail-actions button {
    width: 100%;
    min-width: 0;
  }

  body.job-detail-page .detail-actions form {
    display: grid;
  }

  body.job-detail-page .detail-actions form:has(.danger-action) {
    grid-column: 1 / -1;
  }

  body.job-detail-page .output-actions a,
  body.job-detail-page .output-actions button {
    flex: 0 0 auto;
  }

  body.job-detail-page .detail-actions .danger-action {
    min-height: 38px;
    border-color: color-mix(in srgb, #ef4444 18%, #fecaca);
    border-radius: 14px;
    color: #b91c1c;
    background:
      url("https://api.iconify.design/lucide/trash-2.svg?color=%23b91c1c") calc(50% - 70px) center / 15px 15px no-repeat,
      color-mix(in srgb, #ef4444 8%, #ffffff);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.86);
  }

  body.job-detail-page .secondary-action,
  body.job-detail-page .danger-action,
  body.job-detail-page .output-link.compact,
  body.job-detail-page .primary-link {
    min-height: 42px;
    border-radius: 15px;
    padding: 9px 12px;
    font-size: 12px;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  body.job-detail-page .detail-actions .secondary-action {
    min-height: 44px;
    border-color: color-mix(in srgb, var(--blue) 18%, var(--line));
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 5%, #ffffff));
    color: var(--ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }

  body.job-detail-page .detail-actions .secondary-action[href*="/download/"] {
    border-color: color-mix(in srgb, var(--blue) 28%, transparent);
    background:
      url("https://api.iconify.design/lucide/download.svg?color=white") calc(50% - 48px) center / 16px 16px no-repeat,
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #34d399), var(--blue));
    color: #ffffff;
    box-shadow: 0 15px 32px color-mix(in srgb, var(--blue) 20%, transparent);
  }

  body.job-detail-page .job-message {
    order: 2;
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    align-items: center;
    gap: 8px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, #dbeafe);
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(255,255,255,.66);
    color: var(--muted);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.2;
  }

  body.job-detail-page .job-message::before {
    content: "";
    width: 9px;
    height: 9px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: #16a34a;
    box-shadow: 0 0 0 4px color-mix(in srgb, #16a34a 12%, transparent);
  }

  body.job-detail-page .job-eta {
    width: fit-content;
    border-radius: 999px;
    padding: 6px 9px;
    background: color-mix(in srgb, var(--blue) 9%, #ffffff);
    color: var(--blue);
  }

  body.job-detail-page .detail-progress {
    order: 5;
    height: 9px;
    margin-top: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 10%, #e8eef9);
  }

  body.job-detail-page .preview-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 0;
    overflow: visible;
    padding: 0;
    scroll-snap-type: none;
  }

  body.job-detail-page .preview-grid::-webkit-scrollbar {
    display: none;
  }

  body.job-detail-page .preview-card {
    display: grid;
    gap: 0;
    scroll-snap-align: none;
  }

  body.job-detail-page .preview-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 13px 13px 11px;
  }

  body.job-detail-page .preview-head .output-actions {
    display: none;
  }

  body.job-detail-page .preview-head h3 {
    display: -webkit-box;
    font-size: 16px;
    line-height: 1.1;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.job-detail-page .preview-head p {
    display: -webkit-box;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.job-detail-page .output-mobile-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px 13px;
    border-top: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
    background:
      radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 42%),
      rgba(255, 255, 255, 0.64);
  }

  body.job-detail-page .output-mobile-actions .output-link.compact {
    width: 100%;
    min-height: 46px;
    border-color: color-mix(in srgb, var(--blue) 28%, #bfdbfe);
    border-radius: 16px;
    background:
      url("https://api.iconify.design/lucide/download.svg?color=white") calc(50% - 48px) center / 17px 17px no-repeat,
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #34d399), var(--blue));
    color: #ffffff;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--blue) 22%, transparent);
    font-size: 13px;
    font-weight: 950;
  }

  body.job-detail-page .output-mobile-actions .output-link.compact:not([download]) {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 5%, #ffffff));
    color: var(--blue);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  body.job-detail-page .result-preview,
  body.job-detail-page .embed-preview {
    width: 100%;
    max-height: min(58svh, 460px);
    border-top-color: color-mix(in srgb, var(--blue) 12%, var(--line));
    background:
      radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--blue) 8%, #ffffff), transparent 42%),
      #ffffff;
  }

  body.job-detail-page .embed-preview {
    height: min(54svh, 430px);
  }

  body.job-detail-page .cx-player-controls {
    grid-template-columns: 38px minmax(90px, 1fr) 38px 38px;
    gap: 7px;
  }

  body.job-detail-page .cx-player-controls [data-player-back],
  body.job-detail-page .cx-player-controls [data-player-forward],
  body.job-detail-page .cx-player-controls [data-player-mute],
  body.job-detail-page .cx-player-controls [data-player-volume] {
    display: none;
  }

  body.job-detail-page .section-title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }

  body.job-detail-page .section-title h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1;
  }

  body.job-detail-page .section-title span {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 6px 9px;
    background: color-mix(in srgb, var(--blue) 8%, #ffffff);
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
  }

  body.job-detail-page .detail-side .detail-panel,
  body.job-detail-page .detail-layout > aside.detail-side + * {
    position: static;
  }

  body.job-detail-page .timeline {
    gap: 9px;
    max-height: 330px;
    overflow: auto;
    padding-right: 3px;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--blue) 40%, #9db7ff) transparent;
  }

  body.job-detail-page .timeline li {
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
    border-radius: 16px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.66);
  }

  body.job-detail-page .timeline-dot {
    display: grid;
    width: 26px;
    height: 26px;
    margin-top: 0;
    place-items: center;
    background: color-mix(in srgb, var(--blue) 10%, #ffffff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 26%, transparent);
  }

  body.job-detail-page .timeline-dot::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: inherit;
    background: var(--blue);
  }

  body.job-detail-page .timeline p:not(.timeline-meta) {
    color: var(--ink);
    font-size: 13px;
    line-height: 1.42;
  }

  body.job-detail-page .timeline-meta {
    margin-bottom: 4px;
    font-size: 11px;
  }

  body.job-detail-page .paywall-hero {
    display: grid;
    gap: 13px;
    padding: 16px;
  }

  body.job-detail-page .paywall-hero h2 {
    font-size: 24px;
    line-height: 1;
  }

  body.job-detail-page .originality-job-hero {
    grid-template-columns: 84px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
  }

  body.job-detail-page .originality-detail-score {
    --score-size: 76px;
    --score-ring: 7px;
  }

  body.job-detail-page .originality-detail-score strong {
    font-size: 27px;
  }

  body.job-detail-page .originality-detail-copy h2 {
    font-size: 22px;
  }

  body.job-detail-page .originality-guidance,
  body.job-detail-page .originality-web-plan,
  body.job-detail-page .originality-report-list {
    grid-template-columns: 1fr;
  }

  body.job-detail-page .originality-guidance article {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 13px;
  }

  body.job-detail-page .originality-email-form {
    grid-template-columns: 1fr;
  }

  body.job-detail-page .originality-email-form input {
    min-height: 46px;
    font-size: 16px;
  }

  .theme-dark.job-detail-page {
    background:
      radial-gradient(circle at 14% 2%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 34%),
      linear-gradient(180deg, #10182a 0, #0a1020 58%, #070b16 100%);
  }

  .theme-dark.job-detail-page .detail-topbar,
  .theme-dark.job-detail-page .detail-panel,
  .theme-dark.job-detail-page .preview-card,
  .theme-dark.job-detail-page .paywall-hero {
    background:
      linear-gradient(rgba(17, 26, 46, 0.94), rgba(17, 26, 46, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #1e293b), rgba(20, 184, 166, 0.28), rgba(84, 102, 137, 0.38)) border-box;
  }

  .theme-dark.job-detail-page .timeline li {
    background: rgba(8, 13, 26, 0.62);
  }
}

.landing-page,
.auth-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 26%),
    radial-gradient(circle at 12% 78%, rgba(96, 165, 250, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(222, 237, 245, 0.78), rgba(244, 247, 249, 0) 360px),
    linear-gradient(135deg, #ffffff 0%, #edf4f8 52%, #f7fbf9 100%);
}

.auth-page.theme-soft {
  background:
    radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 34%),
    linear-gradient(180deg, #f7fbff 0, #eef6ff 440px, #f8fbff 100%);
}

.auth-page.theme-dark {
  background:
    radial-gradient(circle at 15% 5%, color-mix(in srgb, var(--blue) 26%, transparent), transparent 30%),
    linear-gradient(180deg, #10182a 0, #0a1020 52%, #070b16 100%);
}

.landing-nav {
  position: relative;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
}

.pricing-page .landing-nav {
  padding-top: 14px;
  padding-bottom: 10px;
}

.landing-nav strong {
  color: var(--ink);
  font-size: 20px;
}

.landing-nav nav,
.landing-actions,
.brand-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.landing-nav nav {
  align-items: center;
}

.landing-nav a,
.primary-link,
.secondary-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 13px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 760;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.landing-nav a[data-icon],
.primary-link[data-icon],
.secondary-link[data-icon] {
  gap: 8px;
}

.landing-nav a[data-icon]::before,
.primary-link[data-icon]::before,
.secondary-link[data-icon]::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: var(--editor-icon, url("https://api.iconify.design/lucide/sparkles.svg")) center / contain no-repeat;
  -webkit-mask: var(--editor-icon, url("https://api.iconify.design/lucide/sparkles.svg")) center / contain no-repeat;
}

.landing-nav a:hover,
.primary-link:hover,
.secondary-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px color-mix(in srgb, var(--blue) 14%, transparent);
}

.landing-nav .nav-primary,
.primary-link {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}

.secondary-link {
  background: rgba(255, 255, 255, 0.74);
}

.landing-hero,
.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1fr);
  gap: 28px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 28px;
}

.landing-hero {
  position: relative;
  z-index: 1;
  display: block;
  overflow: visible;
}

.landing-hero::before {
  content: "";
  position: absolute;
  left: -74px;
  top: 18%;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, transparent);
  border-radius: 28px;
  background:
    var(--landing-hero-icon) center / 42px 42px no-repeat,
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.72), transparent 34%),
    color-mix(in srgb, var(--blue) 11%, rgba(255, 255, 255, 0.46));
  --landing-hero-icon: url("https://api.iconify.design/lucide/video.svg?color=%232563eb");
  box-shadow:
    0 20px 52px color-mix(in srgb, var(--blue) 18%, transparent),
    0 0 0 8px color-mix(in srgb, var(--blue) 5%, transparent);
  animation: landing-float-shape 8s ease-in-out infinite, landing-icon-cycle 14s steps(1, end) infinite;
  pointer-events: none;
  z-index: -1;
}

.landing-hero-viewport {
  overflow: hidden;
  border-radius: 28px;
}

.landing-hero-track {
  display: flex;
  gap: 80px;
  width: 100%;
  transform: translateX(calc(var(--landing-slide-index, 0) * ((-100%) - 80px)));
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.landing-hero-slide {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1fr);
  flex: 0 0 100%;
  gap: 28px;
  align-items: center;
  min-width: 0;
}

.landing-hero-slide[aria-hidden="true"] {
  pointer-events: none;
}

.landing-hero-slide .landing-copy,
.landing-hero-slide .landing-console,
.landing-hero-slide .landing-feature-board {
  transform: translateX(0);
  transition: opacity 420ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}

.landing-hero-slide:not(.is-active) .landing-copy {
  opacity: 0.2;
  transform: translateX(-18px);
}

.landing-hero-slide:not(.is-active) .landing-console,
.landing-hero-slide:not(.is-active) .landing-feature-board {
  opacity: 0.2;
  transform: translateX(18px);
}

.landing-slide-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.11);
  transform: translateY(-50%);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease, color 180ms ease;
}

.landing-slide-arrow::before {
  content: "";
  width: 21px;
  height: 21px;
  background: currentColor;
  mask: var(--landing-arrow-icon) center / contain no-repeat;
  -webkit-mask: var(--landing-arrow-icon) center / contain no-repeat;
}

.landing-slide-arrow.is-prev {
  left: -24px;
  --landing-arrow-icon: url("https://api.iconify.design/lucide/chevron-left.svg");
}

.landing-slide-arrow.is-next {
  right: -24px;
  --landing-arrow-icon: url("https://api.iconify.design/lucide/chevron-right.svg");
}

.landing-slide-arrow:hover,
.landing-slide-arrow:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line));
  background: #ffffff;
  color: var(--blue);
  box-shadow: 0 20px 46px color-mix(in srgb, var(--blue) 18%, transparent);
  outline: none;
}

.landing-slide-arrow.is-prev:hover,
.landing-slide-arrow.is-prev:focus-visible {
  transform: translate(-2px, -50%);
}

.landing-slide-arrow.is-next:hover,
.landing-slide-arrow.is-next:focus-visible {
  transform: translate(2px, -50%);
}

.landing-slide-dots {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 6;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.landing-slide-dots button {
  display: grid;
  width: 34px;
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 18%, #ffffff);
  cursor: pointer;
  transition: width 180ms ease, background 180ms ease, transform 180ms ease;
}

.landing-slide-dots button.is-active {
  width: 52px;
  background: var(--blue);
}

.landing-slide-dots button:hover,
.landing-slide-dots button:focus-visible {
  transform: translateY(-1px);
  outline: none;
}

.landing-detail-slide .landing-copy {
  display: grid;
  gap: 16px;
}

.landing-slide-points {
  display: grid;
  gap: 9px;
  margin-top: 4px;
}

.landing-slide-points span,
.feature-list span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  color: #334155;
  font-size: 13px;
  font-weight: 860;
}

.landing-slide-points span::before,
.feature-list span::before,
.feature-flow article::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--editor-icon) center / contain no-repeat;
}

.landing-feature-board {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 15%, var(--line));
  border-radius: 28px;
  padding: 18px;
  background:
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--mint) 18%, transparent), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(239, 246, 255, 0.74));
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.11);
}

.feature-board-top {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 11%, var(--line));
  padding-bottom: 14px;
}

.feature-board-top span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--rose);
  box-shadow: 18px 0 #f59e0b, 36px 0 var(--green);
}

.feature-board-top strong {
  margin-left: 42px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
}

.feature-board-top small {
  margin-left: auto;
  border-radius: 999px;
  padding: 5px 8px;
  background: color-mix(in srgb, var(--green) 10%, #ffffff);
  color: #15803d;
  font-size: 11px;
  font-weight: 950;
}

.feature-flow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.feature-flow article,
.feature-stats article {
  display: grid;
  gap: 5px;
  min-height: 112px;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
}

.feature-flow article::before {
  width: 26px;
  height: 26px;
}

.feature-flow b,
.feature-stats b {
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.feature-flow small,
.feature-stats span,
.feature-list span {
  color: #64748b;
}

.feature-progress {
  height: 8px;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, #ffffff);
}

.feature-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), var(--green));
}

.landing-slide-points [data-icon="upload-cloud"],
.feature-flow [data-icon="upload-cloud"] {
  --editor-icon: url("https://api.iconify.design/lucide/upload-cloud.svg?color=%232563eb");
}

.landing-slide-points [data-icon="scan-search"] {
  --editor-icon: url("https://api.iconify.design/lucide/scan-search.svg?color=%232563eb");
}

.landing-slide-points [data-icon="archive"] {
  --editor-icon: url("https://api.iconify.design/lucide/archive.svg?color=%232563eb");
}

.landing-slide-points [data-icon="file-user"] {
  --editor-icon: url("https://api.iconify.design/lucide/file-user.svg?color=%232563eb");
}

.landing-slide-points [data-icon="list-checks"],
.feature-list [data-icon="list-checks"] {
  --editor-icon: url("https://api.iconify.design/lucide/list-checks.svg?color=%232563eb");
}

.landing-slide-points [data-icon="coins"] {
  --editor-icon: url("https://api.iconify.design/lucide/coins.svg?color=%232563eb");
}

.landing-slide-points [data-icon="scissors"],
.feature-flow [data-icon="scissors"] {
  --editor-icon: url("https://api.iconify.design/lucide/scissors.svg?color=%232563eb");
}

.landing-slide-points [data-icon="palette"],
.feature-list [data-icon="palette"] {
  --editor-icon: url("https://api.iconify.design/lucide/palette.svg?color=%232563eb");
}

.landing-slide-points [data-icon="layers"] {
  --editor-icon: url("https://api.iconify.design/lucide/layers.svg?color=%232563eb");
}

.landing-slide-points [data-icon="image"],
.feature-list [data-icon="image"] {
  --editor-icon: url("https://api.iconify.design/lucide/image.svg?color=%232563eb");
}

.landing-slide-points [data-icon="music-2"],
.feature-flow [data-icon="music-2"] {
  --editor-icon: url("https://api.iconify.design/lucide/music-2.svg?color=%232563eb");
}

.landing-slide-points [data-icon="audio-waveform"],
.feature-flow [data-icon="audio-waveform"] {
  --editor-icon: url("https://api.iconify.design/lucide/audio-waveform.svg?color=%232563eb");
}

.landing-slide-points [data-icon="shopping-bag"] {
  --editor-icon: url("https://api.iconify.design/lucide/shopping-bag.svg?color=%232563eb");
}

.landing-slide-points [data-icon="bar-chart-3"] {
  --editor-icon: url("https://api.iconify.design/lucide/bar-chart-3.svg?color=%232563eb");
}

.landing-slide-points [data-icon="wallet"] {
  --editor-icon: url("https://api.iconify.design/lucide/wallet.svg?color=%232563eb");
}

.landing-slide-points [data-icon="send"],
.feature-list [data-icon="send"] {
  --editor-icon: url("https://api.iconify.design/lucide/send.svg?color=%232563eb");
}

.landing-slide-points [data-icon="receipt"] {
  --editor-icon: url("https://api.iconify.design/lucide/receipt.svg?color=%232563eb");
}

.landing-slide-points [data-icon="eye"],
.feature-list [data-icon="eye"] {
  --editor-icon: url("https://api.iconify.design/lucide/eye.svg?color=%232563eb");
}

.landing-slide-points [data-icon="shield-check"],
.feature-list [data-icon="shield-check"] {
  --editor-icon: url("https://api.iconify.design/lucide/shield-check.svg?color=%232563eb");
}

.feature-flow [data-icon="clapperboard"] {
  --editor-icon: url("https://api.iconify.design/lucide/clapperboard.svg?color=%232563eb");
}

.feature-flow [data-icon="sliders-horizontal"] {
  --editor-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg?color=%232563eb");
}

.feature-flow [data-icon="store"] {
  --editor-icon: url("https://api.iconify.design/lucide/store.svg?color=%232563eb");
}

.feature-list [data-icon="badge-dollar-sign"] {
  --editor-icon: url("https://api.iconify.design/lucide/badge-dollar-sign.svg?color=%232563eb");
}

.feature-flow [data-icon="image"] {
  --editor-icon: url("https://api.iconify.design/lucide/image.svg?color=%232563eb");
}

.feature-flow [data-icon="captions"] {
  --editor-icon: url("https://api.iconify.design/lucide/captions.svg?color=%232563eb");
}

.feature-flow [data-icon="package"] {
  --editor-icon: url("https://api.iconify.design/lucide/package.svg?color=%232563eb");
}

.feature-list [data-icon="link"] {
  --editor-icon: url("https://api.iconify.design/lucide/link.svg?color=%232563eb");
}

.feature-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.feature-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 18px;
  padding: 13px;
  background: rgba(255, 255, 255, 0.72);
}

.landing-copy h1,
.auth-brand h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(40px, 7vw, 70px);
  line-height: 0.95;
}

.landing-copy h1 {
  animation: auth-title-breathe 8s ease-in-out infinite;
}

.landing-copy .eyebrow {
  color: var(--blue);
}

.landing-actions {
  margin-top: 18px;
}

.landing-copy .brand-pills {
  margin-top: 10px;
}

.merchant-link-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
  max-width: 780px;
}

.merchant-link-strip a,
.legal-info-nav a {
  display: inline-grid;
  grid-template-columns: 18px minmax(0, auto);
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  padding: 0 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--mint) 8%, #ffffff));
  color: color-mix(in srgb, var(--ink) 86%, var(--blue));
  font-size: 12px;
  font-weight: 900;
  line-height: 1.15;
  text-decoration: none;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.merchant-link-strip a::before,
.legal-info-nav a::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--editor-icon) center / 17px 17px no-repeat;
  opacity: 0.9;
}

.merchant-link-strip a:hover,
.legal-info-nav a:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--green) 45%, var(--line));
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.merchant-compliance {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  max-width: 820px;
}

.merchant-compliance article {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 14px;
  padding: 13px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 34%),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(14px);
}

.merchant-compliance article::before {
  content: "";
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 10px;
  background:
    var(--editor-icon) center / 15px 15px no-repeat,
    color-mix(in srgb, var(--blue) 8%, #ffffff);
}

.merchant-compliance article > span {
  width: fit-content;
  border-radius: 999px;
  padding: 4px 7px;
  background: color-mix(in srgb, var(--blue) 8%, #ffffff);
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.merchant-compliance strong {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.15;
}

.merchant-compliance p {
  margin: 0;
  max-width: none;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.42;
}

.merchant-compliance a {
  color: color-mix(in srgb, var(--blue) 82%, #0f172a);
  font-weight: 820;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.merchant-compliance a:hover {
  text-decoration: underline;
}

.legal-info-page {
  min-height: 100vh;
  overflow-x: hidden;
}

.legal-info-shell {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
  padding: 15px 0 56px;
}

.legal-info-hero {
  display: grid;
  gap: 14px;
  max-width: 780px;
  margin-bottom: 22px;
}

.legal-info-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 48px);
  line-height: 0.98;
}

.legal-info-hero p {
  margin: 0;
  color: #4b5563;
  font-size: 16px;
  line-height: 1.55;
}

.legal-info-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.legal-info-grid {
  max-width: none;
  align-items: stretch;
}

.legal-info-grid article {
  min-height: 260px;
}

.legal-info-grid strong {
  font-size: 18px;
}

.legal-info-grid p {
  font-size: 14px;
  line-height: 1.6;
}

.legal-index-shell {
  max-width: 1040px;
}

.legal-document-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(230px, 1fr));
  gap: 16px;
  align-items: start;
}

.legal-document-list a {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  gap: 8px 12px;
  min-height: 154px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 20px;
  padding: 17px 44px 17px 17px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--green) 10%, transparent), transparent 30%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 4%, #ffffff));
  color: inherit;
  text-decoration: none;
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.08);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.legal-document-list a::before {
  content: "";
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 42px;
  height: 42px;
  align-self: start;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 14px;
  background:
    var(--editor-icon) center / 21px 21px no-repeat,
    color-mix(in srgb, var(--blue) 7%, #ffffff);
  box-shadow: 0 14px 24px rgba(15, 23, 42, 0.08);
}

.legal-document-list a::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 22px;
  width: 10px;
  height: 10px;
  border-right: 2px solid color-mix(in srgb, var(--blue) 65%, var(--ink));
  border-top: 2px solid color-mix(in srgb, var(--blue) 65%, var(--ink));
  transform: rotate(45deg);
}

.legal-document-list a:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--green) 46%, var(--line));
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.12);
}

.legal-document-list span,
.legal-document-kicker {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  max-width: max-content;
  width: fit-content;
  border-radius: 999px;
  padding: 0 10px;
  background: color-mix(in srgb, var(--green) 10%, #ffffff);
  color: color-mix(in srgb, var(--green) 72%, #0f766e);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.legal-document-list strong {
  grid-column: 2;
  display: block;
  color: var(--ink);
  font-size: 19px;
  line-height: 1.12;
}

.legal-document-list p {
  grid-column: 1 / -1;
  align-self: start;
  margin: 0;
  color: #536177;
  font-size: 12px;
  line-height: 1.48;
}

.legal-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: #64748b;
  font-size: 13px;
  font-weight: 820;
}

.legal-breadcrumbs a {
  color: color-mix(in srgb, var(--blue) 78%, var(--ink));
  text-decoration: none;
}

.legal-breadcrumbs a:hover {
  text-decoration: underline;
}

.legal-document {
  display: grid;
  gap: 16px;
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 24px;
  padding: 24px;
  background:
    radial-gradient(circle at 95% 3%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--mint) 6%, #ffffff));
  box-shadow: 0 28px 86px rgba(15, 23, 42, 0.12);
}

.legal-document-hero {
  display: grid;
  gap: 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  padding-bottom: 18px;
}

.legal-document-hero h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(34px, 5vw, 58px);
  line-height: 0.98;
}

.legal-document-hero p {
  max-width: 860px;
  margin: 0;
  color: #475569;
  font-size: 16px;
  line-height: 1.62;
}

.legal-document-hero dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 4px 0 0;
}

.legal-document-hero dl div {
  display: grid;
  gap: 4px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.76);
}

.legal-document-hero dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.legal-document-hero dd {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.3;
}

.legal-stars-card {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(280px, 1fr);
  gap: 18px;
  align-items: start;
  border: 1px solid color-mix(in srgb, var(--mint) 30%, var(--line));
  border-radius: 18px;
  padding: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mint) 16%, #ffffff), rgba(255, 255, 255, 0.94) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 5%, #ffffff));
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.legal-stars-card-index {
  margin-bottom: 16px;
}

.legal-index-contact-strip {
  margin-bottom: 16px;
}

.legal-stars-card h2 {
  margin: 6px 0 0;
  color: var(--ink);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
}

.legal-stars-card p {
  margin: 10px 0 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.62;
}

.legal-stars-card ol {
  counter-reset: stars-flow;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-stars-card li {
  counter-increment: stars-flow;
  position: relative;
  min-height: 44px;
  padding: 11px 12px 11px 48px;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.74);
  color: #334155;
  font-size: 14px;
  font-weight: 760;
  line-height: 1.42;
}

.legal-stars-card li::before {
  content: counter(stars-flow);
  position: absolute;
  left: 12px;
  top: 10px;
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 82%, #16a34a);
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.legal-document-section {
  display: grid;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 9%, var(--line));
  border-radius: 18px;
  padding: 17px 18px;
  background: rgba(255, 255, 255, 0.72);
}

.legal-document-section h2 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.2;
}

.legal-document-section p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.68;
}

.legal-document-section ol,
.legal-document-section ul {
  display: grid;
  gap: 8px;
  margin: 2px 0 0;
  padding-left: 20px;
  color: #475569;
  font-size: 15px;
  line-height: 1.62;
}

.legal-document-section li {
  padding-left: 3px;
}

.legal-document-section li::marker {
  color: color-mix(in srgb, var(--blue) 72%, #16a34a);
  font-weight: 900;
}

.legal-document-section li strong {
  color: var(--ink);
}

.legal-document-section a {
  color: color-mix(in srgb, var(--blue) 82%, var(--ink));
  font-weight: 850;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.legal-document-section a:hover {
  text-decoration: underline;
}

.legal-contact-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #475569;
  font-size: 15px;
  line-height: 1.55;
}

.legal-contact-list li {
  min-width: 0;
  overflow-wrap: anywhere;
}

.legal-market-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-top: 18px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 22px;
  padding: 18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--green) 10%, transparent), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 5%, #ffffff));
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.07);
}

.legal-market-card h2 {
  margin: 6px 0 6px;
  color: var(--ink);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.05;
}

.legal-market-card p {
  margin: 0;
  max-width: 720px;
  color: #475569;
  font-size: 15px;
  line-height: 1.55;
}

.legal-market-card nav {
  display: grid;
  gap: 8px;
  min-width: 190px;
}

.legal-market-card a {
  display: inline-grid;
  grid-template-columns: 17px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  min-height: 40px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 12px;
  padding: 9px 11px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  text-decoration: none;
}

.legal-market-card a::before {
  content: "";
  width: 17px;
  height: 17px;
  background: color-mix(in srgb, var(--blue) 84%, #16a34a);
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.legal-market-card a:hover,
.legal-market-card a:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  background: #ffffff;
  outline: none;
}

.docs-page {
  min-height: 100vh;
  overflow-x: hidden;
}

.docs-shell {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: 15px 0 60px;
}

.docs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.52fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.docs-hero-copy {
  display: grid;
  gap: 14px;
  max-width: 860px;
}

.docs-hero-copy h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(38px, 6vw, 47px);
  line-height: 0.98;
}

.docs-hero-copy p {
  margin: 0;
  color: #475569;
  font-size: 17px;
  line-height: 1.58;
}

.docs-hero-visual {
  position: relative;
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 24px;
  padding: 16px;
  background:
    radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 36%),
    linear-gradient(150deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--mint) 8%, #ffffff));
  box-shadow: 0 24px 72px rgba(15, 23, 42, 0.1);
}

.docs-flow-node {
  position: relative;
  display: grid;
  gap: 6px;
  border: 1px solid color-mix(in srgb, var(--blue) 15%, var(--line));
  border-radius: 18px;
  padding: 18px 18px 18px 62px;
  background: rgba(255, 255, 255, 0.82);
}

.docs-flow-node::before,
.docs-flow-grid span::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 28px;
  height: 28px;
  background: color-mix(in srgb, var(--blue) 75%, #16a34a);
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.docs-flow-node strong {
  color: var(--ink);
  font-size: 20px;
}

.docs-flow-node span {
  color: #64748b;
  font-size: 12px;
  font-weight: 820;
}

.docs-flow-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.docs-flow-grid span {
  position: relative;
  min-height: 62px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 16px;
  padding: 20px 12px 12px 50px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.docs-flow-grid span::before {
  left: 15px;
  top: 18px;
  width: 22px;
  height: 22px;
}

.docs-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.docs-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 22px 0;
}

.docs-quick article,
.docs-section,
.docs-toc,
.docs-video-card {
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--green) 8%, transparent), transparent 34%),
    rgba(255, 255, 255, 0.88);
  box-shadow: 0 20px 54px rgba(15, 23, 42, 0.07);
}

.docs-quick article {
  display: grid;
  gap: 8px;
  min-height: 150px;
  padding: 16px;
}

.docs-quick span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 10%, #ecfdf5);
  color: color-mix(in srgb, var(--blue) 76%, #16a34a);
  font-size: 12px;
  font-weight: 950;
}

.docs-quick strong,
.docs-video-card strong {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.2;
}

.docs-quick p,
.docs-video-card p {
  margin: 0;
  color: #536177;
  font-size: 13px;
  line-height: 1.55;
}

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

.docs-toc {
  position: sticky;
  top: 88px;
  display: grid;
  gap: 8px;
  padding: 14px;
}

.docs-toc strong {
  color: var(--ink);
  font-size: 14px;
}

.docs-toc button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 9px 10px;
  background: transparent;
  color: #475569;
  font-size: 12px;
  font-weight: 820;
  line-height: 1.25;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.docs-toc button span {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 8%, #ffffff);
  color: color-mix(in srgb, var(--blue) 72%, #16a34a);
  font-size: 10px;
  font-weight: 950;
}

.docs-toc button:hover,
.docs-toc button.is-active {
  background: color-mix(in srgb, var(--blue) 8%, #ffffff);
  color: color-mix(in srgb, var(--blue) 82%, var(--ink));
}

.docs-toc button.is-active {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--blue) 70%, #16a34a);
}

.docs-toc-subitems {
  display: none;
  gap: 5px;
  margin: -3px 0 4px 36px;
}

.docs-toc button.is-active + .docs-toc-subitems {
  display: grid;
}

.docs-toc-subitems small {
  color: #64748b;
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
}

.docs-content {
  display: grid;
  gap: 14px;
}

.docs-js .docs-panel {
  display: none;
}

.docs-js .docs-panel.is-active {
  display: grid;
}

.docs-section {
  display: grid;
  gap: 10px;
  scroll-margin-top: 88px;
  padding: 20px;
}

.docs-section-head {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.docs-section-head span {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--blue) 10%, #ecfdf5);
  color: color-mix(in srgb, var(--blue) 78%, #16a34a);
  font-size: 13px;
  font-weight: 950;
}

.docs-section h2 {
  margin: 0;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.14;
}

.docs-section p {
  margin: 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.72;
}

.docs-section-body {
  display: grid;
  gap: 10px;
}

.docs-subsection-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 6px;
}

.docs-subsection-grid article {
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 15px;
  padding: 13px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.86), color-mix(in srgb, var(--blue) 3%, #ffffff));
}

.docs-subsection-grid strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.2;
}

.docs-subsection-grid p {
  font-size: 12px;
  line-height: 1.55;
}

.docs-video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.docs-video-card {
  display: grid;
  gap: 10px;
  overflow: hidden;
  padding: 12px;
}

.docs-video-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 14px;
  background: linear-gradient(135deg, #0f172a, color-mix(in srgb, var(--blue) 26%, #0f172a));
  aspect-ratio: 16 / 9;
}

.docs-video-frame iframe,
.docs-video-placeholder {
  width: 100%;
  height: 100%;
  border: 0;
}

.docs-video-placeholder {
  display: grid;
  place-items: center;
  padding: 16px;
  color: #dbeafe;
  text-align: center;
}

.docs-video-placeholder::before {
  content: "";
  width: 42px;
  height: 42px;
  margin-bottom: 8px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.docs-video-placeholder span {
  color: #e2e8f0;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.35;
}

.docs-faq details {
  border: 1px solid color-mix(in srgb, var(--blue) 9%, var(--line));
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.72);
}

.docs-faq summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.docs-faq details p {
  margin-top: 8px;
}

.landing-copy p,
.auth-brand p {
  max-width: 620px;
  color: #3f4b5d;
  font-size: 18px;
}

.theme-dark .landing-copy p,
.theme-dark .auth-brand p {
  color: #b9c6da;
}

.landing-console,
.auth-card {
  border: 1px solid rgba(217, 225, 234, 0.82);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 24px 70px rgba(31, 41, 51, 0.14);
  backdrop-filter: blur(18px);
}

.landing-console {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(239, 246, 255, 0.68)),
    color-mix(in srgb, var(--surface) 88%, transparent);
  transform: translateZ(0);
}

.landing-console::before {
  content: "";
  position: absolute;
  inset: -16% auto auto -18%;
  width: 38%;
  height: 86%;
  background: linear-gradient(115deg, transparent 12%, rgba(255, 255, 255, 0.28), transparent 72%);
  opacity: 0.64;
  transform: rotate(16deg);
  animation: landing-console-shimmer 4.8s ease-in-out infinite alternate;
  pointer-events: none;
}

.console-top {
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid var(--line);
  padding: 14px;
  background: linear-gradient(90deg, #111827, #172033);
}

.console-top span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #ef4444;
}

.console-top span:nth-child(2) {
  background: #f59e0b;
}

.console-top span:nth-child(3) {
  background: #60a5fa;
}

.console-top strong {
  margin-left: auto;
  color: #dbeafe;
  font-size: 12px;
  font-weight: 820;
}

.console-orbit {
  position: absolute;
  inset: 76px 18px auto auto;
  display: flex;
  gap: 8px;
  pointer-events: none;
}

.console-orbit i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue);
  box-shadow: 0 14px 32px rgba(31, 41, 51, 0.1);
  animation: landing-icon-float 5.8s ease-in-out infinite;
}

.console-orbit i:nth-child(2) {
  animation-delay: -1.2s;
}

.console-orbit i:nth-child(3) {
  animation-delay: -2.4s;
}

.console-orbit i::before {
  content: "";
  width: 19px;
  height: 19px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.console-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 68px 16px 16px;
}

.console-grid article {
  position: relative;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--blue) 6%, #ffffff));
  box-shadow: 0 16px 36px rgba(31, 41, 51, 0.08);
  animation: landing-card-float 6.5s ease-in-out infinite;
}

.console-grid article:nth-child(2) {
  animation-delay: -1.35s;
}

.console-grid article:nth-child(3) {
  animation-delay: -2.7s;
}

.console-grid article::before {
  content: "";
  grid-row: 1 / span 3;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background:
    var(--editor-icon) center / 22px 22px no-repeat,
    color-mix(in srgb, var(--blue) 12%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 26%, transparent);
}

.console-grid strong {
  color: var(--teal);
  font-size: 12px;
}

.console-grid article > span {
  grid-column: 3;
  grid-row: 1 / span 2;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--blue) 8%, #ffffff);
  color: var(--blue);
  font-size: 11px;
  font-weight: 860;
}

.console-grid h2,
.console-grid p {
  grid-column: 2;
  margin: 4px 0 0;
}

.console-grid p {
  grid-column: 2 / -1;
  color: var(--muted);
}

.landing-dock {
  position: relative;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: fit-content;
  max-width: calc(100% - 28px);
  margin: 0 auto 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  padding: 10px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(239, 246, 255, 0.64)),
    color-mix(in srgb, var(--surface) 82%, transparent);
  box-shadow: 0 22px 70px rgba(31, 41, 51, 0.14);
  backdrop-filter: blur(18px);
}

.landing-dock a {
  position: relative;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.86), transparent 40%),
    color-mix(in srgb, var(--blue) 8%, #ffffff);
  color: var(--blue);
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(31, 41, 51, 0.08);
  transform-origin: 50% 100%;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, border-color 180ms ease;
}

.landing-dock a::before {
  content: "";
  width: 24px;
  height: 24px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.landing-dock a span {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 820;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 6px);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.landing-dock a:hover,
.landing-dock a:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 44%, var(--line));
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.94), transparent 42%),
    color-mix(in srgb, var(--blue) 14%, #ffffff);
  box-shadow: 0 24px 48px color-mix(in srgb, var(--blue) 20%, transparent);
  transform: translateY(-13px) scale(1.16);
  z-index: 2;
}

.landing-dock a:hover + a,
.landing-dock a:has(+ a:hover) {
  transform: translateY(-6px) scale(1.06);
}

.landing-dock a:hover span,
.landing-dock a:focus-visible span {
  opacity: 1;
  transform: translate(-50%, 0);
}

.auth-shell {
  min-height: 100vh;
  grid-template-columns: minmax(0, 0.92fr) minmax(400px, 0.7fr);
  align-items: stretch;
  max-width: 1120px;
  padding-top: 92px;
  padding-bottom: 32px;
}

.auth-brand,
.auth-card {
  position: relative;
}

.auth-brand {
  isolation: isolate;
  display: grid;
  align-content: center;
  gap: 16px;
  min-height: 520px;
  overflow: visible;
  border-radius: 0;
  padding: clamp(24px, 5vw, 54px);
  background: transparent;
  box-shadow: none;
}

.auth-brand::before {
  content: "";
  position: absolute;
  inset: clamp(58px, 8vw, 84px) auto clamp(28px, 5vw, 54px) 0;
  z-index: 0;
  width: min(610px, 84%);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-left: 4px solid color-mix(in srgb, var(--blue) 56%, #111827);
  border-radius: 0 32px 32px 0;
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 24%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.7) 0 18%, transparent 18% 28%, rgba(255, 255, 255, 0.26) 28% 29%, transparent 29%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 12%, rgba(255, 255, 255, 0.72)), rgba(255, 255, 255, 0.12) 78%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 22px 64px color-mix(in srgb, var(--blue) 10%, transparent);
  mask-image: linear-gradient(90deg, #000 0 78%, transparent 100%);
  opacity: 0.88;
  pointer-events: none;
}

.auth-brand::after {
  content: "";
  position: absolute;
  right: clamp(22px, 5vw, 62px);
  bottom: clamp(24px, 6vw, 70px);
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border: 0;
  border-radius: 24px;
  background:
    var(--editor-icon) center / 30px 30px no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 18%, #ffffff), rgba(255, 255, 255, 0.72));
  --editor-icon: url("https://api.iconify.design/lucide/video.svg");
  box-shadow: 0 22px 48px color-mix(in srgb, var(--blue) 16%, transparent);
  opacity: 0.76;
  transform: rotate(8deg);
  animation: auth-float-camera 7s ease-in-out infinite;
  pointer-events: none;
}

.auth-brand-top {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(1100px, calc(100% - 40px));
  transform: translateX(-50%);
}

.auth-brand h1,
.auth-brand p,
.auth-brand .brand-pills,
.auth-brand .back-link,
.auth-brand .profile-preview,
.auth-brand .workspace-return,
.auth-proof {
  position: relative;
  z-index: 1;
}

.auth-brand h1 {
  max-width: 760px;
  animation: auth-title-breathe 8s ease-in-out infinite;
}

.auth-mode-login .auth-brand h1 {
  max-width: none;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1;
  white-space: nowrap;
}

.auth-brand p {
  margin: 0;
  max-width: 560px;
  font-size: 15px;
  line-height: 1.55;
}

.auth-proof {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
  margin-top: 8px;
}

.auth-proof article {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 4px 8px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-left: 3px solid color-mix(in srgb, var(--blue) 58%, var(--line));
  border-radius: 8px;
  padding: 10px;
  background: color-mix(in srgb, #ffffff 66%, transparent);
  animation: auth-card-drift 6s ease-in-out infinite;
  cursor: pointer;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease;
}

.auth-proof article:hover,
.auth-proof article:focus-visible,
.auth-proof article.is-active {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  background: color-mix(in srgb, #ffffff 82%, var(--blue));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--blue) 14%, transparent);
  animation: none;
  transform: translateY(-2px);
}

.auth-proof article:nth-child(2) {
  animation-delay: -1.4s;
}

.auth-proof article:nth-child(3) {
  animation-delay: -2.8s;
}

.auth-proof article::before,
.brand-pills span::before,
.brand-pills button::before,
.landing-pill-close::before,
.landing-pill-kicker::before,
.landing-pill-visual.is-product span::before,
.landing-pill-visual.is-launch span::before {
  content: "";
  display: block;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.auth-proof article::before {
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  color: var(--blue);
}

.auth-proof strong {
  color: var(--ink);
  font-size: 15px;
}

.auth-proof span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.auth-card {
  align-self: center;
  display: grid;
  gap: 18px;
  padding: clamp(20px, 3vw, 30px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 24px 60px rgba(31, 41, 51, 0.12);
}

.theme-dark .auth-card {
  color: var(--text);
}

.theme-dark .auth-brand {
  background: transparent;
}

.theme-dark .auth-brand::before {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 16%, rgba(17, 26, 46, 0.82)), transparent 74%),
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--blue) 13%, transparent) 0 1px, transparent 1px 38px);
}

.theme-dark .auth-brand::after {
  background:
    var(--editor-icon) center / 40px 40px no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 22%, #111a2e), rgba(17, 26, 46, 0.74));
}

.theme-dark .auth-proof article,
.theme-dark .brand-pills span {
  border-color: rgba(84, 102, 137, 0.42);
  background: rgba(17, 26, 46, 0.62);
}

.auth-card-head {
  display: grid;
  gap: 6px;
}

.auth-card-head span {
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.auth-card-head h2 {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, color-mix(in srgb, var(--blue) 88%, white) var(--auth-heading-blue), var(--ink)),
    color-mix(in srgb, var(--blue) var(--auth-heading-blue), var(--ink))
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.34;
  animation: auth-heading-color 8s ease-in-out infinite;
}

.auth-card-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.auth-form {
  display: grid;
  gap: 14px;
}

.auth-field {
  display: grid;
  gap: 8px;
}

.auth-field label {
  color: var(--ink);
  font-size: 13px;
  font-weight: 820;
}

.auth-input-wrap {
  position: relative;
}

.auth-field input {
  width: 100%;
  min-height: 50px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--surface) 88%, #ffffff);
  color: var(--ink);
  font: inherit;
  font-weight: 680;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-field.has-password-toggle input {
  padding-right: 48px;
}

.auth-field input:focus {
  border-color: var(--blue);
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 14%, transparent);
}

.auth-field.has-error input {
  border-color: color-mix(in srgb, var(--red) 64%, var(--line));
}

.password-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 76%, var(--ink));
  cursor: pointer;
  transform: translateY(-50%);
}

.password-toggle:hover,
.password-toggle:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
}

.password-toggle::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.form-errors,
.field-error {
  border-radius: 8px;
  color: var(--red);
}

.form-errors {
  border: 1px solid color-mix(in srgb, var(--red) 28%, transparent);
  padding: 11px 12px;
  background: color-mix(in srgb, var(--red) 9%, var(--surface));
  font-size: 13px;
  font-weight: 760;
}

.field-error {
  font-size: 12px;
  font-weight: 760;
}

.field.has-error > span:first-child {
  color: color-mix(in srgb, var(--red) 72%, var(--ink));
}

.field.has-error input,
.checkout-account-fields .field.has-error input {
  border-color: color-mix(in srgb, var(--red) 60%, var(--line));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--red) 5%, #ffffff)),
    #ffffff;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--red) 9%, transparent),
    0 12px 26px color-mix(in srgb, var(--red) 8%, transparent);
}

.checkout-account-fields .field-error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid color-mix(in srgb, var(--red) 18%, transparent);
  border-radius: 10px;
  padding: 7px 9px;
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--red) 10%, transparent), transparent 44%),
    color-mix(in srgb, var(--red) 6%, #ffffff);
  color: color-mix(in srgb, var(--red) 82%, #6b1620);
  line-height: 1.25;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--red) 8%, transparent);
}

.checkout-account-fields .field-error[hidden] {
  display: none;
}

.checkout-account-fields .field-error::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border-radius: 999px;
  background: currentColor;
  -webkit-mask: url("https://api.iconify.design/lucide/circle-alert.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/circle-alert.svg") center / contain no-repeat;
}

.auth-switch {
  margin: 14px 0 0;
  color: var(--muted);
}

.auth-switch a {
  color: var(--blue);
  font-weight: 760;
  text-decoration: none;
}

.auth-card .primary-action {
  min-height: 50px;
  border-radius: 10px;
  font-size: 15px;
}

.auth-card .primary-action:active {
  transform: translateY(1px);
}

.brand-pills span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font-weight: 720;
  animation: auth-pill-drift 5.5s ease-in-out infinite;
  cursor: pointer;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease;
}

.brand-pills span:hover,
.brand-pills span:focus-visible,
.brand-pills span.is-active {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, #ffffff);
  color: color-mix(in srgb, var(--blue) 72%, var(--ink));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 14%, transparent);
  animation: none;
  transform: translateY(-2px);
}

.brand-pills span:nth-child(2) {
  animation-delay: -1.1s;
}

.brand-pills span:nth-child(3) {
  animation-delay: -2.2s;
}

.brand-pills span:nth-child(4) {
  animation-delay: -3.3s;
}

.brand-pills span::before {
  width: 14px;
  height: 14px;
  color: var(--blue);
}

.brand-pills button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 11px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
  font: inherit;
  font-weight: 720;
  animation: auth-pill-drift 5.5s ease-in-out infinite;
  cursor: pointer;
  outline: 0;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease, background 160ms ease, color 160ms ease;
}

.brand-pills button:hover,
.brand-pills button:focus-visible,
.brand-pills button.is-active {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  background: color-mix(in srgb, var(--blue) 12%, #ffffff);
  color: color-mix(in srgb, var(--blue) 72%, var(--ink));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 14%, transparent);
  animation: none;
  transform: translateY(-2px);
}

.brand-pills button:nth-child(2) {
  animation-delay: -1.1s;
}

.brand-pills button:nth-child(3) {
  animation-delay: -2.2s;
}

.brand-pills button:nth-child(4) {
  animation-delay: -3.3s;
}

.brand-pills button::before {
  width: 14px;
  height: 14px;
  color: var(--blue);
}

.landing-pill-modal[hidden] {
  display: none;
}

body.is-landing-pill-open {
  overflow: hidden;
}

.landing-pill-modal {
  position: fixed;
  inset: 0;
  z-index: 70000;
  display: grid;
  place-items: center;
  padding: 22px;
}

.landing-pill-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(12px);
  cursor: pointer;
}

.landing-pill-dialog {
  position: relative;
  width: min(760px, 100%);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, rgba(255, 255, 255, 0.7));
  border-radius: 24px;
  padding: 16px;
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--green) 16%, transparent), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--blue) 6%, #ffffff));
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.26);
  outline: 0;
}

.landing-pill-close {
  position: absolute;
  right: 16px;
  top: 16px;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  font-size: 0;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

.landing-pill-close::before {
  width: 18px;
  height: 18px;
}

.landing-pill-panel {
  display: none;
  grid-template-columns: minmax(0, 0.82fr) minmax(300px, 1.08fr);
  gap: 16px;
  align-items: stretch;
}

.landing-pill-panel.is-active {
  display: grid;
}

.landing-pill-text {
  display: grid;
  align-content: start;
  gap: 11px;
  padding: 12px 44px 12px 4px;
}

.landing-pill-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  border-radius: 999px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  color: color-mix(in srgb, var(--blue) 82%, var(--ink));
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-pill-kicker::before {
  width: 15px;
  height: 15px;
}

.landing-pill-text h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.02;
}

.landing-pill-text p {
  margin: 0;
  max-width: 46ch;
  color: #475569;
  font-size: 14px;
  line-height: 1.52;
}

.landing-pill-text ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.landing-pill-text li {
  border: 1px solid color-mix(in srgb, var(--green) 24%, var(--line));
  border-radius: 999px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--green) 8%, #ffffff);
  color: color-mix(in srgb, var(--green) 72%, #0f172a);
  font-size: 12px;
  font-weight: 850;
}

.landing-pill-visual {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  min-height: 250px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 20px;
  padding: 14px;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 30%),
    linear-gradient(160deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--blue) 5%, #ffffff));
}

.landing-pill-visual::before {
  display: none;
}

.landing-pill-visual span,
.landing-pill-visual i,
.landing-visual-head,
.landing-visual-grid {
  position: relative;
  z-index: 1;
}

.landing-visual-head {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 16px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05);
}

.landing-visual-head::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 72%, var(--blue));
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--green) 12%, transparent);
}

.landing-visual-head strong {
  min-width: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.landing-visual-head small {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 9px;
  background: color-mix(in srgb, var(--green) 10%, #ffffff);
  color: color-mix(in srgb, var(--green) 72%, #0f766e);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
}

.landing-visual-grid {
  display: grid;
  min-height: 0;
}

.landing-pill-visual.is-product .landing-visual-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.landing-pill-visual.is-product .landing-visual-grid span:first-child {
  grid-column: 1 / -1;
  min-height: 66px;
}

.landing-pill-visual.is-product .landing-visual-grid span,
.landing-pill-visual.is-launch .landing-visual-grid span,
.landing-pill-visual.is-engineering .landing-visual-grid span {
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 2px 9px;
  min-height: 74px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 16px;
  padding: 11px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7)),
    color-mix(in srgb, var(--blue) 3%, #ffffff);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.landing-pill-visual.is-product .landing-visual-grid span:first-child,
.landing-pill-visual.is-launch .landing-visual-grid span:first-child {
  border-color: color-mix(in srgb, var(--green) 28%, var(--line));
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--green) 16%, transparent), transparent 28%),
    rgba(255, 255, 255, 0.86);
}

.landing-pill-visual.is-product .landing-visual-grid span::before,
.landing-pill-visual.is-launch .landing-visual-grid span::before {
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  color: var(--blue);
}

.landing-pill-visual span b {
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  line-height: 1.14;
  overflow-wrap: anywhere;
  white-space: normal;
}

.landing-pill-visual span small {
  min-width: 0;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.18;
  overflow-wrap: anywhere;
  white-space: normal;
}

.landing-pill-visual.is-design .landing-visual-grid {
  grid-template-columns: 0.8fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 10px;
}

.landing-pill-visual.is-design i {
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), transparent),
    color-mix(in srgb, var(--blue) 14%, #ffffff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 16%, transparent);
}

.landing-pill-visual.is-design i:nth-child(1) {
  grid-row: 1 / -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--green) 18%, #ffffff), #ffffff);
}

.landing-pill-visual.is-design span {
  display: grid;
  align-content: end;
  min-width: 0;
  min-height: 74px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 16px;
  padding: 12px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), transparent 40%),
    linear-gradient(180deg, transparent 0 44%, color-mix(in srgb, var(--blue) 10%, #ffffff) 44% 100%),
    rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.07);
}

.landing-pill-visual.is-design .design-preview-main {
  grid-row: 1 / -1;
  background:
    radial-gradient(circle at 28% 22%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 20%),
    linear-gradient(90deg, color-mix(in srgb, var(--green) 14%, #ffffff) 0 34%, rgba(255, 255, 255, 0.86) 34%),
    linear-gradient(180deg, transparent 0 56%, color-mix(in srgb, var(--blue) 10%, #ffffff) 56% 100%);
}

.landing-pill-visual.is-engineering .landing-visual-grid {
  gap: 10px;
}

.landing-pill-visual.is-engineering .landing-visual-grid span {
  grid-template-columns: minmax(0, 1fr) auto;
}

.landing-pill-visual.is-engineering .landing-visual-grid span small {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 22px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, #ffffff);
  color: var(--blue);
  font-size: 10px;
}

.landing-pill-visual.is-launch .landing-visual-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.landing-pill-visual.is-launch .landing-visual-grid span:first-child {
  grid-column: 1 / -1;
  min-height: 66px;
}

.landing-pill-visual.is-launch::after {
  display: none;
}

.auth-tip-popover {
  position: absolute;
  z-index: 5;
  max-width: min(300px, calc(100% - 32px));
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 12px;
  padding: 11px 13px;
  background: rgba(255, 255, 255, 0.94);
  color: color-mix(in srgb, var(--ink) 82%, var(--blue));
  box-shadow: 0 18px 42px rgba(31, 41, 51, 0.14);
  font-size: 13px;
  font-weight: 720;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px) scale(0.98);
  transition: opacity 170ms ease, transform 170ms ease;
}

.auth-tip-popover::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 10px;
  height: 10px;
  border-top: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-left: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  background: rgba(255, 255, 255, 0.94);
  transform: translate(-50%, 5px) rotate(45deg);
}

.auth-tip-popover.is-visible {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

.theme-dark .auth-tip-popover {
  border-color: rgba(84, 102, 137, 0.48);
  background: rgba(17, 26, 46, 0.96);
  color: #dbeafe;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.32);
}

.theme-dark .auth-tip-popover::before {
  border-color: rgba(84, 102, 137, 0.48);
  background: rgba(17, 26, 46, 0.96);
}

@keyframes auth-float-camera {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(10deg);
  }
  50% {
    transform: translate3d(-10px, -14px, 0) rotate(4deg);
  }
}

@keyframes auth-card-drift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes auth-pill-drift {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

@keyframes auth-title-breathe {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes auth-heading-color {
  0%, 100% {
    --auth-heading-blue: 0%;
    filter: saturate(0.9);
    opacity: 0.97;
  }
  50% {
    --auth-heading-blue: 100%;
    filter: saturate(1.16);
    opacity: 1;
  }
}

@keyframes pricing-gold-shimmer {
  0%, 100% {
    background-position: 0% 50%;
    filter: saturate(0.96);
  }
  50% {
    background-position: 100% 50%;
    filter: saturate(1.18);
  }
}

@keyframes pricing-trust-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-4px) rotate(-3deg);
  }
}

@keyframes checkout-brand-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(8deg);
  }
  50% {
    transform: translate3d(-8px, -12px, 0) rotate(2deg);
  }
}

@keyframes landing-float-shape {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(18px, -16px, 0) rotate(10deg);
  }
}

@keyframes landing-icon-cycle {
  0%, 24% {
    --landing-hero-icon: url("https://api.iconify.design/lucide/video.svg?color=%232563eb");
  }
  25%, 49% {
    --landing-hero-icon: url("https://api.iconify.design/lucide/image.svg?color=%232563eb");
  }
  50%, 74% {
    --landing-hero-icon: url("https://api.iconify.design/lucide/palette.svg?color=%232563eb");
  }
  75%, 100% {
    --landing-hero-icon: url("https://api.iconify.design/lucide/sparkles.svg?color=%232563eb");
  }
}

@keyframes landing-console-shimmer {
  0% {
    opacity: 0.24;
    transform: translateX(-10%) rotate(16deg);
  }
  100% {
    opacity: 0.7;
    transform: translateX(118%) rotate(16deg);
  }
}

@keyframes landing-icon-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(5deg);
  }
}

@keyframes landing-card-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}

.paywall-mini {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
  padding: 14px;
  border-color: rgba(37, 99, 235, 0.14);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(96, 165, 250, 0.1)),
    #ffffff;
  box-shadow: var(--soft-shadow);
}

.theme-dark .paywall-mini {
  border-color: rgba(84, 102, 137, 0.45);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 15%, transparent), rgba(17, 26, 46, 0.36)),
    rgba(17, 26, 46, 0.9);
}

.theme-dark .paywall-mini span {
  color: #a9b8d0;
}

.theme-dark .paywall-mini a {
  color: color-mix(in srgb, var(--blue) 58%, white);
}

.paywall-mini strong,
.paywall-hero h2,
.pricing-hero h1,
.price-card h2,
.checkout-copy h1 {
  color: var(--ink);
}

.paywall-mini span {
  color: var(--muted);
  font-size: 13px;
}

.paywall-mini a {
  color: var(--blue);
  font-weight: 760;
  text-decoration: none;
}

.empty-jobs {
  background: rgba(255, 255, 255, 0.48);
}

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

.paywall-hero h2,
.paywall-hero p {
  margin: 4px 0 0;
}

.paywall-hero p {
  max-width: 760px;
  color: var(--muted);
}

.pricing-shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 28px 22px;
}

.pricing-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.64fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 16px;
}

.pricing-hero h1 {
  margin: 0;
  max-width: 720px;
  color: var(--ink);
  font-size: clamp(30px, 3.2vw, 36px);
  line-height: 1.02;
}

.pricing-hero p {
  max-width: 480px;
  margin: 0;
  color: #3f4b5d;
  font-size: 15px;
  line-height: 1.5;
}

.billing-state-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid color-mix(in srgb, #16a34a 24%, var(--line));
  border-radius: 8px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #16a34a 10%, #ffffff), rgba(255, 255, 255, 0.78));
  box-shadow: 0 14px 34px color-mix(in srgb, #16a34a 12%, transparent);
}

.billing-state-banner div {
  display: grid;
  gap: 3px;
}

.billing-state-banner span,
.current-plan-pill {
  color: #0f7a3b;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.billing-state-banner strong {
  color: var(--ink);
  font-size: 14px;
}

.billing-state-banner a {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, #16a34a 34%, var(--line));
  border-radius: 999px;
  padding: 8px 12px;
  color: #0f7a3b;
  font-size: 13px;
  font-weight: 820;
  text-decoration: none;
}

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

.price-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 10px;
  min-height: 0;
  --plan-accent: var(--blue);
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 8px;
  padding: 15px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.78)),
    color-mix(in srgb, var(--blue) 3%, #ffffff);
  box-shadow: 0 16px 40px rgba(31, 41, 51, 0.09);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.price-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 18%, transparent), color-mix(in srgb, var(--blue) 66%, #7dd3fc));
  opacity: 0.72;
}

.price-card:hover {
  border-color: color-mix(in srgb, var(--blue) 34%, var(--line));
  box-shadow: 0 22px 52px color-mix(in srgb, var(--blue) 14%, rgba(31, 41, 51, 0.08));
  transform: translateY(-3px);
}

.price-card.is-focused {
  border-color: color-mix(in srgb, var(--plan-accent) 68%, var(--line));
  box-shadow:
    0 22px 62px color-mix(in srgb, var(--plan-accent) 18%, transparent),
    0 0 0 4px color-mix(in srgb, var(--plan-accent) 10%, transparent);
}

.price-card.is-featured {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, #ffffff), rgba(255, 255, 255, 0.84)),
    #ffffff;
  box-shadow: 0 24px 58px color-mix(in srgb, var(--blue) 20%, transparent);
}

.price-card.is-current {
  border-color: color-mix(in srgb, #16a34a 54%, var(--line));
  box-shadow: 0 22px 52px color-mix(in srgb, #16a34a 16%, transparent);
}

.current-plan-pill {
  width: fit-content;
  border: 1px solid color-mix(in srgb, #16a34a 28%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  background: color-mix(in srgb, #16a34a 9%, #ffffff);
}

.pricing-return-link {
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--blue) 20%, var(--line));
  border-radius: 999px;
  padding: 9px 13px;
  background: color-mix(in srgb, #ffffff 86%, transparent);
  color: var(--blue);
  font-size: 13px;
  font-weight: 860;
  text-decoration: none;
  box-shadow: 0 14px 34px color-mix(in srgb, var(--blue) 10%, transparent);
}

.price-card.plan-free::before {
  background: linear-gradient(90deg, #22c55e, color-mix(in srgb, var(--blue) 36%, #a7f3d0));
}

.price-card.plan-free {
  --plan-accent: #16a34a;
}

.price-card.plan-starter {
  --plan-accent: #2563eb;
}

.price-card.plan-pro {
  --plan-accent: var(--blue);
}

.price-card.plan-studio::before {
  overflow: hidden;
  background:
    linear-gradient(90deg, #7c4a03, #f5c542 38%, #fff3b0 50%, #d99a16 68%, #6f4307);
  background-size: 220% 100%;
  box-shadow: 0 0 18px rgba(245, 197, 66, 0.34);
  animation: pricing-gold-shimmer 4.8s ease-in-out infinite;
}

.price-card.plan-studio {
  --plan-accent: #c1840f;
}

.price-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.price-card-head span {
  border-radius: 999px;
  padding: 4px 8px;
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  color: var(--teal);
  font-size: 11px;
  font-weight: 820;
}

.price-card-head strong {
  color: var(--ink);
  font-size: 17px;
}

.price-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.storage-limit {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

.storage-limit span {
  color: var(--muted);
}

.price-value strong {
  color: var(--ink);
  font-size: clamp(34px, 3.4vw, 42px);
  line-height: 1;
}

.price-value span,
.price-card p,
.feature-list,
.trust-band span {
  color: var(--muted);
}

.price-card h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.16;
}

.price-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.42;
}

.feature-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.25;
}

.feature-list li {
  position: relative;
  padding-left: 18px;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 82%, white), var(--blue));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}

.price-action {
  width: 100%;
  min-height: 38px;
  border-color: color-mix(in srgb, var(--plan-accent) 72%, var(--line));
  margin-top: auto;
  padding: 8px 10px;
  background: transparent;
  color: var(--plan-accent);
  align-self: end;
  box-shadow: none;
}

.price-action:hover,
.price-action:focus-visible {
  border-color: var(--plan-accent);
  background: color-mix(in srgb, var(--plan-accent) 8%, transparent);
  color: var(--plan-accent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--plan-accent) 16%, transparent);
}

.trust-band {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.trust-band article {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 8px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.58);
}

.trust-band article::before {
  content: "";
  grid-row: 1 / span 2;
  width: 36px;
  height: 36px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 11px;
  background:
    var(--editor-icon) center / 18px 18px no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 12%, #ffffff), rgba(255, 255, 255, 0.72));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 13%, transparent);
  animation: pricing-trust-float 5.4s ease-in-out infinite;
}

.trust-band article::after {
  content: "";
  position: absolute;
  right: -26px;
  top: -34px;
  width: 92px;
  height: 92px;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, transparent);
  border-radius: 28px;
  opacity: 0.34;
  transform: rotate(18deg);
  pointer-events: none;
}

.trust-band article:nth-child(2)::before {
  animation-delay: -1.8s;
}

.trust-band strong {
  color: var(--teal);
  font-size: 13px;
}

.trust-band span {
  grid-column: 2;
  font-size: 12px;
  line-height: 1.35;
}

.pricing-dock {
  margin-top: 12px;
  margin-bottom: 0;
}

.checkout-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.66fr) minmax(430px, 0.78fr);
  gap: 22px;
  align-items: center;
  max-width: 1040px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 92px 24px 32px;
}

.checkout-brand {
  position: relative;
  isolation: auto;
  display: grid;
  gap: 12px;
  padding: 12px 10px;
  z-index: 1;
}

.checkout-brand:has(.language-switcher.is-open) {
  z-index: 80000;
}

.checkout-brand::before {
  content: "";
  position: absolute;
  inset: 58px auto 24px 0;
  z-index: -1;
  width: min(500px, 88%);
  border: 1px solid color-mix(in srgb, var(--blue) 18%, transparent);
  border-left: 4px solid color-mix(in srgb, var(--blue) 56%, #111827);
  border-radius: 0 22px 22px 0;
  background:
    radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 24%),
    linear-gradient(112deg, rgba(255, 255, 255, 0.7) 0 18%, transparent 18% 28%, rgba(255, 255, 255, 0.26) 28% 29%, transparent 29%),
    repeating-linear-gradient(135deg, color-mix(in srgb, var(--blue) 9%, transparent) 0 1px, transparent 1px 18px),
    linear-gradient(90deg, color-mix(in srgb, var(--blue) 12%, rgba(255, 255, 255, 0.72)), rgba(255, 255, 255, 0.12) 78%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.68),
    0 22px 64px color-mix(in srgb, var(--blue) 10%, transparent);
  mask-image: linear-gradient(90deg, #000 0 78%, transparent 100%);
  pointer-events: none;
}

.checkout-brand::after {
  content: "";
  position: absolute;
  right: clamp(-12px, 4vw, 42px);
  bottom: clamp(-34px, -3vw, -14px);
  z-index: -1;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background:
    var(--editor-icon) center / 23px 23px no-repeat,
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 18%, #ffffff), rgba(255, 255, 255, 0.74));
  --editor-icon: url("https://api.iconify.design/lucide/credit-card.svg");
  box-shadow: 0 20px 48px color-mix(in srgb, var(--blue) 17%, transparent);
  opacity: 0.76;
  transform: rotate(8deg);
  animation: checkout-brand-float 7s ease-in-out infinite;
  pointer-events: none;
}

.checkout-topline {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: min(1040px, calc(100% - 40px));
  transform: translateX(-50%);
}

.checkout-copy h1 {
  max-width: 520px;
  margin: 0;
  color: var(--ink);
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1;
}

.checkout-copy p {
  max-width: 480px;
  margin: 0;
  color: #3f4b5d;
  font-size: 14px;
  line-height: 1.42;
}

.checkout-summary,
.payment-box {
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.86);
}

.checkout-summary {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 6px;
  max-width: 480px;
  margin: 0;
  padding: 13px 14px;
  box-shadow: 0 18px 42px rgba(31, 41, 51, 0.1);
}

.checkout-summary::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 20%, transparent), color-mix(in srgb, var(--blue) 70%, #93c5fd));
}

.checkout-summary span,
.payment-box span,
.payment-box small {
  color: var(--muted);
}

.checkout-summary strong,
.payment-box strong {
  color: var(--ink);
}

.checkout-summary em {
  width: fit-content;
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  color: var(--teal);
  font-style: normal;
  font-size: 12px;
  font-weight: 820;
}

.checkout-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.34;
}

.checkout-access-note {
  width: fit-content;
  border: 1px solid color-mix(in srgb, #16a34a 22%, var(--line));
  border-radius: 999px;
  padding: 5px 8px;
  background: color-mix(in srgb, #16a34a 8%, #ffffff);
  color: #0f7a3b;
  font-size: 12px;
  font-weight: 760;
}

.checkout-card {
  align-self: center;
  border-color: color-mix(in srgb, var(--blue) 15%, var(--line));
  background: rgba(255, 255, 255, 0.92);
  padding: 22px;
}

.checkout-help,
.profile-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.checkout-help {
  color: var(--muted);
  font-weight: 650;
}

.checkout-help,
.checkout-benefits {
  display: none;
}

.checkout-help a {
  color: var(--blue);
  font-weight: 780;
  text-decoration: none;
}

.checkout-benefits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  max-width: 560px;
}

.checkout-benefits article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 4px 9px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-left: 3px solid color-mix(in srgb, var(--blue) 58%, var(--line));
  border-radius: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.66);
}

.checkout-benefits article::before {
  content: "";
  grid-row: 1 / span 2;
  width: 24px;
  height: 24px;
  background: var(--blue);
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.checkout-benefits strong {
  color: var(--ink);
  font-size: 14px;
}

.checkout-benefits span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.plan-picker {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
}

.checkout-plan-option {
  --plan-accent: var(--blue);
  position: relative;
  min-width: 0;
}

.checkout-plan-option.plan-free {
  --plan-accent: #16a34a;
}

.checkout-plan-option.plan-studio {
  --plan-accent: #c1840f;
}

.plan-button {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  width: 100%;
  min-height: 108px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 18%, var(--line));
  border-radius: 14px;
  padding: 12px 40px 12px 12px;
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--plan-accent) 13%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(255, 255, 255, 0.8)),
    color-mix(in srgb, var(--plan-accent) 4%, #ffffff);
  color: var(--text);
  text-align: left;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.plan-button::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--plan-accent), color-mix(in srgb, var(--plan-accent) 32%, #ffffff));
  opacity: 0.82;
}

.plan-button.plan-free {
  --plan-accent: #16a34a;
}

.plan-button.plan-studio {
  --plan-accent: #c1840f;
}

.plan-button:hover,
.plan-button.is-selected {
  border-color: color-mix(in srgb, var(--plan-accent) 70%, var(--line));
  background: color-mix(in srgb, var(--plan-accent) 8%, #ffffff);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--plan-accent) 14%, transparent);
  transform: translateY(-1px);
}

.plan-button.is-selected::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    url("https://api.iconify.design/lucide/check.svg?color=white") center / 12px 12px no-repeat,
    var(--plan-accent);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--plan-accent) 24%, transparent);
}

.plan-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.plan-button .plan-badge {
  color: var(--plan-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.plan-button strong {
  color: var(--ink);
  font-size: 15px;
  line-height: 1.1;
}

.plan-button em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 760;
}

.plan-button small {
  color: color-mix(in srgb, var(--plan-accent) 78%, var(--muted));
  font-size: 11px;
  font-weight: 780;
  line-height: 1.2;
}

.plan-info-link {
  position: absolute;
  top: 11px;
  right: 10px;
  z-index: 2;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 24%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, #ffffff 92%, transparent);
  color: var(--plan-accent);
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
  text-decoration: none;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--plan-accent) 10%, transparent);
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.plan-info-link:hover,
.plan-info-link:focus-visible {
  border-color: color-mix(in srgb, var(--plan-accent) 64%, var(--line));
  background: color-mix(in srgb, var(--plan-accent) 9%, #ffffff);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--plan-accent) 16%, transparent);
  transform: translateY(-1px);
}

.payment-box {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--blue) 7%, #ffffff));
}

.payment-box strong {
  font-size: 28px;
  line-height: 1;
}

.checkout-price-breakdown {
  display: grid;
  gap: 6px;
  margin: 6px 0 3px;
}

.checkout-price-breakdown div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--blue) 9%, var(--line));
  padding-top: 6px;
}

.checkout-price-breakdown dt,
.checkout-price-breakdown dd {
  margin: 0;
  font-size: 12px;
}

.checkout-price-breakdown dt {
  color: var(--muted);
  font-weight: 700;
}

.checkout-price-breakdown dd {
  color: var(--ink);
  font-weight: 840;
}

.checkout-action {
  min-height: 46px;
  border-color: color-mix(in srgb, var(--blue) 72%, var(--line));
  background: transparent;
  color: var(--blue);
  box-shadow: none;
}

.checkout-action:hover,
.checkout-action:focus-visible {
  background: color-mix(in srgb, var(--blue) 9%, transparent);
  color: var(--blue);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--blue) 16%, transparent);
}

.checkout-input-wrap {
  position: relative;
  display: block;
}

.checkout-input-wrap input {
  width: 100%;
}

.field.has-password-toggle input {
  padding-right: 48px;
}

.checkout-input-wrap .password-toggle {
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

.checkout-steps-shell {
  grid-template-columns: 1fr;
  align-content: start;
  gap: 14px;
  max-width: 1180px;
  padding-top: 82px;
}

.checkout-steps-shell .checkout-brand::before,
.checkout-steps-shell .checkout-brand::after {
  display: none;
}

.checkout-steps-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
  padding: 0;
}

.checkout-steps-intro h1 {
  max-width: 680px;
  font-size: clamp(28px, 3.2vw, 44px);
}

.checkout-steps-intro p {
  max-width: 720px;
  font-size: 14px;
}

.checkout-progress {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.checkout-progress span {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 999px;
  padding: 6px 10px;
  background: color-mix(in srgb, #ffffff 82%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.checkout-progress b,
.checkout-step-head b {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: var(--blue);
  color: #ffffff;
  font-size: 12px;
  line-height: 1;
}

.checkout-flow-card {
  width: 100%;
  padding: 18px;
}

.checkout-flow-card > .section-title {
  margin-bottom: 2px;
}

.checkout-flow {
  display: grid;
  grid-template-columns: minmax(300px, 1.05fr) minmax(260px, .9fr) minmax(270px, .85fr);
  align-items: start;
  gap: 12px;
}

.checkout-flow .form-errors {
  grid-column: 1 / -1;
}

.checkout-step {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 10px;
  padding: 12px;
  background: color-mix(in srgb, #ffffff 78%, transparent);
}

.checkout-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.checkout-step-head span {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}

.checkout-step .plan-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.checkout-step .plan-button {
  min-height: 78px;
}

.checkout-account-fields {
  display: grid;
  gap: 10px;
}

.checkout-account-fields .field {
  gap: 5px;
}

.checkout-account-fields input {
  min-height: 40px;
}

.checkout-step-payment .checkout-summary {
  max-width: none;
  padding: 12px;
  box-shadow: none;
}

.checkout-step-payment .payment-box {
  padding: 12px;
}

.checkout-step-payment .auth-switch {
  margin: 0;
  text-align: center;
}

@media (max-width: 1120px) {
  .checkout-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .checkout-step-payment {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .checkout-steps-intro,
  .checkout-flow {
    grid-template-columns: 1fr;
  }

  .checkout-progress {
    justify-content: flex-start;
  }

  .checkout-step-payment {
    grid-column: auto;
  }
}

.checkout-wizard-shell {
  grid-template-columns: minmax(0, 0.82fr) minmax(430px, 0.78fr);
  gap: 28px;
  align-items: center;
  max-width: 1120px;
  padding-top: 92px;
}

.checkout-wizard-shell .checkout-brand::before,
.checkout-wizard-shell .checkout-brand::after,
.checkout-wizard-shell .checkout-benefits,
.checkout-wizard-shell .checkout-help {
  display: grid;
}

.checkout-wizard-shell .checkout-brand::before {
  inset: -21px auto -49px 0;
  width: min(500px, 88%);
  border-radius: 0 22px 22px 0;
}

.checkout-wizard-shell .checkout-help {
  display: inline-flex;
  width: fit-content;
  max-width: min(520px, 100%);
  border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
  border-radius: 999px;
  padding: 8px 11px;
  background: color-mix(in srgb, #ffffff 78%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 8%, transparent);
}

.checkout-wizard-shell .checkout-brand {
  gap: 14px;
}

.checkout-wizard-card {
  align-self: center;
}

.checkout-wizard-card .checkout-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  justify-content: stretch;
  gap: 8px;
}

.checkout-progress button {
  display: inline-flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 999px;
  padding: 6px 9px;
  background: color-mix(in srgb, #ffffff 82%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 840;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.checkout-progress button:hover,
.checkout-progress button.is-active {
  border-color: color-mix(in srgb, var(--blue) 50%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, #ffffff);
  color: var(--blue);
  transform: translateY(-1px);
}

.checkout-flow {
  grid-template-columns: 1fr;
}

.checkout-wizard-card .checkout-step {
  min-height: 390px;
  animation: checkoutStepIn 180ms ease both;
}

.checkout-wizard-card .checkout-step[hidden] {
  display: none;
}

.checkout-wizard-card .checkout-step .plan-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.checkout-wizard-card .checkout-plan-picker {
  align-items: stretch;
}

.checkout-wizard-card .checkout-step-payment {
  background:
    radial-gradient(circle at 82% 0%, color-mix(in srgb, var(--blue) 11%, transparent), transparent 34%),
    color-mix(in srgb, #ffffff 82%, transparent);
}

.checkout-wizard-card .payment-box {
  position: relative;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 14px;
  padding: 16px;
  background:
    linear-gradient(135deg, color-mix(in srgb, #ffffff 96%, transparent), color-mix(in srgb, var(--blue) 8%, #ffffff)),
    #ffffff;
  box-shadow:
    0 20px 46px color-mix(in srgb, var(--blue) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .86);
}

.checkout-wizard-card .payment-box::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 38%, #ffffff));
}

.checkout-wizard-card .payment-box > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.checkout-wizard-card .payment-box > strong {
  font-size: 42px;
  letter-spacing: 0;
}

.checkout-wizard-card .checkout-price-breakdown {
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, #ffffff 72%, transparent);
}

.checkout-wizard-card .checkout-price-breakdown div {
  border-top: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--blue) 9%, var(--line));
  padding: 9px 10px;
}

.checkout-wizard-card .checkout-price-breakdown div:last-child {
  border-bottom: 0;
  background: color-mix(in srgb, var(--blue) 6%, #ffffff);
}

.checkout-wizard-card .checkout-action {
  flex: 1 1 auto;
  border-color: transparent;
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #ffffff), var(--blue));
  color: #ffffff;
  box-shadow: 0 18px 34px color-mix(in srgb, var(--blue) 20%, transparent);
}

.checkout-step-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: auto;
}

.checkout-step-actions .primary-action,
.checkout-step-actions .secondary-link {
  min-height: 42px;
  border-radius: 8px;
  padding: 9px 14px;
}

.checkout-step-actions .secondary-link {
  background: transparent;
}

@keyframes checkoutStepIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 980px) {
  .checkout-wizard-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .checkout-wizard-card .checkout-progress {
    grid-template-columns: 1fr;
  }

  .checkout-wizard-card .checkout-step {
    min-height: 0;
  }
}

.settings-shell {
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 0.72fr);
}

.settings-shell .auth-brand::before {
  inset: clamp(96px, 10vw, 126px) auto clamp(58px, 7vw, 86px) 0;
  width: min(560px, 78%);
  opacity: 0.52;
}

.settings-shell .auth-brand::after {
  z-index: 0;
  opacity: 0.42;
}

.profile-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 460px;
  margin-top: 20px;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 16px 40px rgba(31, 41, 51, 0.1);
  backdrop-filter: blur(16px);
}

.workspace-return {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: 460px;
  min-height: 56px;
  margin-top: 14px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 14px;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blue) 13%, transparent), transparent),
    rgba(255, 255, 255, 0.78);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--soft-shadow);
}

.workspace-return span {
  color: var(--muted);
  font-weight: 720;
}

.workspace-return strong {
  border-radius: 999px;
  padding: 7px 11px;
  background: var(--blue);
  color: white;
}

.profile-preview-avatar {
  width: 86px;
  height: 86px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 9%, white);
  object-fit: contain;
  padding: 3px;
}

.profile-preview div {
  display: grid;
  gap: 3px;
}

.profile-preview strong {
  color: var(--ink);
  font-size: 18px;
}

.profile-preview span {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.account-settings-card {
  align-self: center;
}

.account-settings-form {
  gap: 12px;
}

.account-photo-upload {
  cursor: pointer;
}

.account-photo-upload input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.photo-upload-surface {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px dashed rgba(37, 99, 235, 0.38);
  border-radius: 14px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(96, 165, 250, 0.1)),
    rgba(255, 255, 255, 0.78);
}

.photo-upload-surface img {
  width: 70px;
  height: 70px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: #eef4ff;
  object-fit: contain;
  padding: 3px;
  box-shadow: var(--soft-shadow);
}

.photo-upload-surface strong,
.settings-divider strong {
  color: var(--ink);
}

.photo-upload-surface small,
.settings-divider span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.photo-upload-surface em {
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 10px;
  padding: 8px 11px;
  background: #ffffff;
  color: var(--blue);
  font-style: normal;
  font-weight: 780;
  white-space: nowrap;
}

.settings-section {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.settings-section summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  cursor: pointer;
  list-style: none;
  padding: 15px 16px;
}

.settings-section summary::-webkit-details-marker {
  display: none;
}

.settings-section summary::after {
  content: "+";
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 12%, white);
  color: var(--blue);
  font-size: 18px;
  font-weight: 780;
}

.settings-section[open] summary::after {
  content: "-";
}

.settings-section summary span {
  display: grid;
  gap: 3px;
}

.settings-section summary strong {
  color: var(--ink);
  font-size: 16px;
}

.settings-section summary small {
  color: var(--muted);
  font-size: 12px;
}

.settings-section-body {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding: 15px 16px 16px;
}

.accent-picker,
.theme-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  border: 0;
  padding: 0;
}

.language-settings {
  margin: 0;
  border: 0;
  padding: 0;
}

.language-settings legend {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.settings-section .language-grid {
  padding: 0;
  border: 0;
}

.theme-dark .language-button {
  border-color: rgba(126, 154, 203, 0.34);
  background: rgba(8, 13, 26, 0.58);
  color: #e7eefc;
}

.theme-dark .language-button:hover {
  border-color: color-mix(in srgb, var(--blue) 50%, white);
  background: rgba(17, 26, 46, 0.96);
}

.theme-dark .language-button:has(input:checked) {
  border-color: color-mix(in srgb, var(--blue) 64%, white);
  background: color-mix(in srgb, var(--blue) 22%, #111a2e);
  color: #ffffff;
}

.accent-picker legend,
.theme-picker legend {
  width: 100%;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.accent-picker label {
  position: relative;
  display: grid;
  place-items: center;
}

.accent-picker input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.accent-picker span {
  width: 34px;
  height: 34px;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: var(--swatch);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
}

.accent-picker input:checked + span {
  outline: 3px solid rgba(37, 99, 235, 0.2);
  box-shadow: 0 0 0 2px var(--blue), 0 12px 28px rgba(37, 99, 235, 0.18);
}

.theme-option {
  flex: 1 1 120px;
  position: relative;
}

.theme-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.theme-option > span {
  display: grid;
  gap: 10px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink);
  box-shadow: var(--soft-shadow);
}

.theme-option > span small {
  display: block;
  height: 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), color-mix(in srgb, var(--blue) 24%, white));
}

.theme-option input[value="dark"] + span {
  background: linear-gradient(135deg, #090d18, #151c2e);
  color: white;
}

.theme-option input[value="soft"] + span {
  background: linear-gradient(135deg, #ffffff, #eaf3ff);
}

.theme-option input:checked + span {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 16%, transparent), var(--soft-shadow);
}

.settings-divider {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.avatar-crop-modal[hidden] {
  display: none;
}

.avatar-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(3, 7, 18, 0.62);
  backdrop-filter: blur(12px);
}

.avatar-crop-dialog {
  position: relative;
  display: grid;
  gap: 14px;
  width: min(460px, 100%);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.theme-dark .avatar-crop-dialog {
  background: rgba(17, 26, 46, 0.98);
  border-color: rgba(84, 102, 137, 0.55);
}

#avatar-crop-canvas {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  background: #0b1220;
  cursor: grab;
  touch-action: none;
}

#avatar-crop-canvas:active {
  cursor: grabbing;
}

.avatar-crop-grid {
  pointer-events: none;
  position: absolute;
  left: 18px;
  right: 18px;
  top: 72px;
  aspect-ratio: 1;
  border-radius: 14px;
  background:
    linear-gradient(to right, transparent 32.9%, rgba(255, 255, 255, 0.46) 33%, rgba(255, 255, 255, 0.46) 33.4%, transparent 33.5%, transparent 66.4%, rgba(255, 255, 255, 0.46) 66.5%, rgba(255, 255, 255, 0.46) 66.9%, transparent 67%),
    linear-gradient(to bottom, transparent 32.9%, rgba(255, 255, 255, 0.46) 33%, rgba(255, 255, 255, 0.46) 33.4%, transparent 33.5%, transparent 66.4%, rgba(255, 255, 255, 0.46) 66.5%, rgba(255, 255, 255, 0.46) 66.9%, transparent 67%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.72);
}

.avatar-crop-controls {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

@media (max-width: 1500px) {
  .layout {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .layout.is-designer-mode {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .jobs-panel {
    grid-column: 1 / -1;
    position: static;
    max-height: 520px;
  }

  .jobs-list {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media (max-width: 1120px) {
  .layout {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .layout.is-designer-mode {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .jobs-panel {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }

  .detail-layout {
    grid-template-columns: 1fr;
  }

  .stats-hero {
    grid-template-columns: 1fr;
  }

  .stats-row {
    grid-template-columns: 4px minmax(0, 1fr) auto;
  }

  .stats-actions {
    grid-column: 2 / -1;
    justify-content: flex-start;
  }

  .video-editor-app {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 0;
  }

  .editor-rail {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow-x: auto;
  }

  .editor-rail button {
    min-height: 42px;
  }

  .editor-workbench {
    grid-template-rows: minmax(360px, auto) auto;
  }

  .editor-properties {
    min-height: 0;
  }

  .detail-side {
    position: static;
    max-height: none;
  }

  .landing-hero,
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    min-height: 440px;
  }

  .dashboard-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pricing-hero,
  .trust-band,
  .checkout-shell {
    grid-template-columns: 1fr;
  }

  .plan-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px 14px 10px;
  }

  body.is-designer-workspace .studio-topbar {
    padding: 8px 10px;
  }

  body.is-designer-workspace .studio-topbar .eyebrow {
    display: none;
  }

  body.is-designer-workspace .studio-topbar h1 {
    font-size: 20px;
    line-height: 1.12;
  }

  .video-editor-page .video-editor-topbar {
    padding: 10px 12px 8px;
    gap: 8px;
  }

  .video-editor-page .video-editor-topbar .topbar-copy {
    gap: 2px;
  }

  .video-editor-page .video-editor-topbar h1 {
    font-size: clamp(24px, 8vw, 32px);
    line-height: 1.02;
  }

  .video-editor-page .video-editor-topbar .limits {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .video-editor-page .video-editor-topbar .limits::-webkit-scrollbar {
    display: none;
  }

  .layout {
    grid-template-columns: 1fr;
    padding: 0 14px 88px;
  }

  .subtitle-language-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .layout.is-designer-mode {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0 10px 10px;
  }

  .value-strip,
  .pricing-shell,
  .checkout-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .billing-state-banner {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-state-banner a {
    text-align: center;
  }

  .checkout-price-breakdown div {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .value-strip {
    grid-template-columns: 1fr;
  }

  .tabs {
    position: sticky;
    bottom: 10px;
    z-index: 80;
    display: flex;
    overflow-x: auto;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, #ffffff 92%, transparent);
    box-shadow: 0 16px 42px rgb(15 23 42 / 14%);
    scrollbar-width: none;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tab {
    flex: 0 0 auto;
    min-height: 42px;
    text-align: center;
  }

  .video-editor-app {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 10px;
    padding: 0 12px 118px;
  }

  .editor-rail {
    display: grid;
    grid-template-columns: repeat(6, 72px);
    order: 3;
    position: sticky;
    bottom: 8px;
    z-index: 90;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-radius: 14px;
    background: color-mix(in srgb, #ffffff 96%, transparent);
    box-shadow: 0 18px 48px rgb(15 23 42 / 18%);
    scrollbar-width: none;
  }

  .editor-rail::-webkit-scrollbar {
    display: none;
  }

  .editor-icon-button,
  .editor-layer-actions button,
  .editor-media-actions button {
    width: 42px;
    min-width: 42px;
    height: 42px;
  }

  .editor-workbench {
    order: 1;
    min-width: 0;
    grid-template-rows: auto minmax(228px, auto);
  }

  .editor-preview-panel {
    min-width: 0;
  }

  .editor-timeline-scroll {
    width: 100%;
    min-height: 210px;
    overflow: auto;
    overscroll-behavior-x: contain;
  }

  .editor-timeline {
    min-width: max(760px, var(--timeline-width, 760px));
  }

  .editor-properties {
    order: 2;
    position: sticky;
    bottom: 72px;
    z-index: 80;
    max-height: min(34dvh, 340px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
    border-radius: 14px 14px 0 0;
    background: color-mix(in srgb, #ffffff 96%, transparent);
    box-shadow: 0 -16px 42px rgb(15 23 42 / 14%);
  }

  .editor-property-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .editor-property-tabs::-webkit-scrollbar {
    display: none;
  }

  .editor-tool-panel.is-active {
    max-height: calc(min(34dvh, 340px) - 94px);
    overflow: auto;
  }

  .editor-preview-head,
  .editor-playbar,
  .editor-timeline-head,
  .editor-properties-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .editor-preview-frame {
    width: min(100%, 320px);
    max-height: none;
  }

  .editor-track {
    grid-template-columns: 1fr;
  }

  .designer-switch-wrap {
    flex: 0 0 190px;
    margin-top: 0;
    border-top: 0;
    border-left: 1px solid var(--line);
    padding-top: 0;
    padding-left: 8px;
  }

  .designer-studio {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto auto;
    gap: 8px;
  }

  .designer-toolbar {
    display: flex;
    position: sticky;
    bottom: 8px;
    z-index: 90;
    overflow-x: auto;
    border-right: 0;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
    border-radius: 14px;
    padding: 8px;
    background: color-mix(in srgb, #ffffff 96%, transparent);
    box-shadow: 0 18px 48px rgb(15 23 42 / 18%);
    order: 3;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .designer-toolbar::-webkit-scrollbar {
    display: none;
  }

  .designer-toolbar .design-tool {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }

  .designer-canvas-shell {
    order: 1;
    min-height: 220px;
    border-radius: 14px;
  }

  .designer-floating-bar {
    left: 10px;
    right: 10px;
    justify-content: center;
  }

  .designer-inspector {
    order: 2;
    position: sticky;
    bottom: 68px;
    z-index: 80;
    grid-template-rows: auto minmax(0, 1fr) auto;
    max-height: min(30dvh, 280px);
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
    border-radius: 14px 14px 0 0;
    background: color-mix(in srgb, #ffffff 96%, transparent);
    box-shadow: 0 -16px 42px rgb(15 23 42 / 14%);
  }

  .designer-context {
    overflow: auto;
    min-height: 0;
  }

  .designer-layers [data-design-layers] {
    max-height: min(18dvh, 170px);
  }

  .designer-page-topbar {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 10px;
    padding: 8px 10px 4px;
  }

  .designer-page-topbar .workspace-return-mini {
    grid-column: 1;
    grid-row: 1;
  }

  .designer-page-topbar > div {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }

  .designer-page-topbar .language-switcher {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
  }

  .designer-page-topbar .eyebrow {
    display: none;
  }

  .designer-page-topbar h1 {
    overflow: hidden;
    font-size: clamp(18px, 6vw, 22px);
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .workspace-return-mini,
  .language-current {
    min-height: 34px;
    padding: 6px 10px;
  }

  .designer-workspace-switch {
    min-width: 138px;
  }

  .designer-page-main {
    padding: 0 10px 84px;
  }

  .designer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 8px;
  }

  .designer-head > div:first-child {
    display: grid;
    gap: 5px;
    min-width: 0;
  }

  .designer-head-actions {
    max-width: 100%;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: none;
  }

  .designer-head-actions::-webkit-scrollbar {
    display: none;
  }

  .designer-project-kicker {
    display: none;
  }

  .designer-project-title {
    overflow: hidden;
    margin: 0;
    font-size: 18px;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .designer-save-row {
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 0;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .designer-save-row::-webkit-scrollbar {
    display: none;
  }

  .designer-save-row small,
  .designer-save-row b {
    flex: 0 0 auto;
    min-height: 24px;
    padding: 3px 7px;
    white-space: nowrap;
  }

  .designer-ghost,
  .designer-icon-button {
    min-height: 36px;
  }

  .designer-ghost {
    flex: 0 0 auto;
    max-width: 152px;
    overflow: hidden;
    padding: 7px 10px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .designer-icon-button {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
  }

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

  .resume-profile-grid {
    grid-template-columns: 1fr;
  }

  .resume-steps {
    grid-template-columns: 1fr;
  }

  .resume-template-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .resume-nav {
    flex-direction: row;
  }

  .section-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .section-title span {
    text-align: left;
  }

  .detail-layout {
    padding: 0 14px 18px;
  }

  .preview-grid {
    grid-template-columns: 1fr;
  }

  .preview-head {
    flex-direction: column;
  }

  .file-dropzone {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .file-button {
    grid-column: 1 / -1;
  }

  .account-bar {
    justify-content: flex-start;
  }

  .plan-picker {
    grid-template-columns: 1fr;
  }

  .dashboard-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-nav,
  .landing-hero,
  .auth-shell {
    padding-left: 14px;
    padding-right: 14px;
  }

  .pricing-shell {
    padding: 14px;
  }

  .pricing-hero,
  .pricing-grid,
  .trust-band,
  .checkout-benefits {
    grid-template-columns: 1fr;
  }

  .checkout-shell {
    padding-top: 86px;
    padding-bottom: 24px;
  }

  .checkout-brand {
    gap: 12px;
    padding: 18px 0 0;
  }

  .checkout-topline {
    align-items: flex-start;
    flex-direction: column;
  }

  .checkout-copy h1 {
    font-size: clamp(31px, 10vw, 42px);
    line-height: 1;
  }

  .video-projects-head,
  .project-filter-bar,
  .video-project-bulk,
  .video-project-empty {
    align-items: stretch;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .video-project-bulk div {
    justify-content: space-between;
    width: 100%;
  }

  .video-project-bulk div:first-child {
    display: grid;
    justify-content: stretch;
  }

  .project-delete-dialog footer {
    display: grid;
    grid-template-columns: 1fr;
  }

  .auth-shell {
    gap: 14px;
    padding-top: 14px;
    padding-bottom: 24px;
  }

  .auth-brand {
    min-height: 0;
    gap: 10px;
    padding: 70px 16px 14px;
  }

  .auth-brand::after {
    right: 18px;
    bottom: 16px;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background:
      var(--editor-icon) center / 25px 25px no-repeat,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 20%, transparent), rgba(255, 255, 255, 0.24));
    opacity: 0.56;
  }

  .auth-brand h1 {
    max-width: 280px;
    font-size: clamp(30px, 9vw, 38px);
    line-height: 0.96;
    white-space: normal;
  }

  .auth-brand p {
    max-width: 310px;
    font-size: 12px;
    line-height: 1.35;
  }

  .auth-brand-top {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
    top: 14px;
    left: 16px;
    right: 16px;
  }

  .auth-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-top: 0;
  }

  .auth-proof article {
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 2px 5px;
    min-height: 42px;
    border-radius: 10px;
    padding: 7px;
  }

  .auth-proof article::before {
    width: 16px;
    height: 16px;
  }

  .auth-proof strong {
    font-size: 11px;
    line-height: 1;
  }

  .auth-proof span {
    font-size: 9px;
    line-height: 1.1;
  }

  .brand-pills {
    gap: 6px;
  }

  .brand-pills span {
    gap: 5px;
    padding: 5px 7px;
    font-size: 11px;
    line-height: 1;
  }

  .brand-pills span::before {
    width: 12px;
    height: 12px;
  }

  .brand-pills button {
    gap: 5px;
    padding: 5px 7px;
    font-size: 11px;
    line-height: 1;
  }

  .brand-pills button::before {
    width: 12px;
    height: 12px;
  }

  .landing-pill-modal {
    align-items: center;
    justify-items: center;
    padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }

  .landing-pill-backdrop {
    background:
      radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 36%),
      rgba(15, 23, 42, 0.34);
    backdrop-filter: blur(14px) saturate(112%);
  }

  .landing-pill-dialog {
    width: min(92vw, 372px);
    max-width: calc(100vw - 24px);
    max-height: min(82svh, 680px);
    overflow: hidden;
    border-radius: 24px;
    padding: 13px;
    box-shadow:
      0 28px 78px rgba(15, 23, 42, 0.3),
      0 0 0 1px rgba(255, 255, 255, 0.58);
  }

  .landing-pill-close {
    right: 12px;
    top: 12px;
    width: 36px;
    height: 36px;
    border-radius: 13px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--blue) 5%, #ffffff)),
      #ffffff;
    box-shadow:
      0 12px 28px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  .landing-pill-panel,
  .landing-pill-panel.is-active {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .landing-pill-panel,
  .landing-pill-panel.is-active {
    max-height: calc(min(82svh, 680px) - 26px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding-right: 1px;
    scrollbar-width: none;
  }

  .landing-pill-panel::-webkit-scrollbar {
    display: none;
  }

  .landing-pill-text {
    gap: 8px;
    padding: 3px 43px 0 0;
  }

  .landing-pill-kicker {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 10px;
  }

  .landing-pill-text h2 {
    max-width: 12ch;
    font-size: clamp(24px, 7.2vw, 28px);
    line-height: 1.05;
    overflow-wrap: anywhere;
  }

  .landing-pill-text p {
    font-size: 12px;
    line-height: 1.38;
  }

  .landing-pill-text li {
    padding: 6px 9px;
    font-size: 11px;
  }

  .landing-pill-visual {
    min-height: 0;
    border-radius: 18px;
    padding: 12px;
    gap: 10px;
  }

  .landing-visual-head {
    border-radius: 15px;
    padding: 9px 10px;
  }

  .landing-visual-head small {
    max-width: 116px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .landing-pill-visual.is-product .landing-visual-grid,
  .landing-pill-visual.is-launch .landing-visual-grid,
  .landing-pill-visual.is-design .landing-visual-grid {
    gap: 8px;
  }

  .landing-pill-visual.is-design .landing-visual-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 70px 60px;
  }

  .landing-pill-visual.is-design .design-preview-main {
    grid-row: 1 / -1;
  }

  .landing-pill-visual.is-product .landing-visual-grid span,
  .landing-pill-visual.is-launch .landing-visual-grid span,
  .landing-pill-visual.is-engineering .landing-visual-grid span,
  .landing-pill-visual.is-design .landing-visual-grid span {
    min-height: 58px;
    border-radius: 14px;
    padding: 8px;
  }

  .landing-pill-visual span b {
    font-size: 11px;
  }

  .landing-pill-visual span small {
    font-size: 9px;
  }

  .auth-card {
    padding: 18px;
  }

  .landing-nav {
    align-items: flex-start;
    flex-direction: column;
    text-align: center;
  }

  .landing-nav > div,
  .landing-nav nav,
  .landing-actions,
  .brand-pills {
    width: 100%;
    justify-content: center;
  }

  .landing-actions {
    gap: 9px 8px;
    margin-top: 16px;
  }

  .landing-copy .brand-pills {
    gap: 7px;
    margin-top: 8px;
  }

  .landing-copy {
    text-align: center;
  }

  .landing-copy h1 {
    font-size: clamp(38px, 12vw, 54px);
  }

  .landing-copy p {
    margin-left: auto;
    margin-right: auto;
    font-size: 15px;
  }

  .landing-nav a,
  .primary-link,
  .secondary-link {
    min-height: 38px;
    padding: 8px 10px;
  }

  .landing-nav nav {
    gap: 8px;
  }

  .landing-nav nav .nav-primary {
    flex-basis: auto;
  }

  .landing-hero {
    gap: 18px;
    padding-top: 18px;
  }

  .landing-hero::before {
    display: none;
  }

  .landing-console {
    border-radius: 16px;
  }

  .console-orbit {
    position: static;
    justify-content: center;
    padding: 12px 12px 0;
  }

  .console-orbit i {
    width: 34px;
    height: 34px;
  }

  .console-grid {
    padding: 12px;
  }

  .console-grid article {
    grid-template-columns: 38px minmax(0, 1fr);
    padding: 12px;
    text-align: left;
  }

  .console-grid article::before {
    width: 36px;
    height: 36px;
    background-size: 19px 19px, auto;
  }

  .console-grid article > span {
    grid-column: 2;
    grid-row: auto;
    width: fit-content;
    padding: 4px 7px;
  }

  .console-grid p {
    grid-column: 2;
    font-size: 13px;
  }

  .landing-dock {
    position: relative;
    bottom: auto;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 52px;
    justify-content: start;
    gap: 7px;
    width: min(100% - 24px, 360px);
    max-width: none;
    margin: 18px auto 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    border-radius: 24px;
    padding: 8px;
    scrollbar-width: none;
  }

  .landing-dock::-webkit-scrollbar {
    display: none;
  }

  .landing-dock a {
    width: 52px;
    height: 52px;
    border-radius: 16px;
  }

  .landing-dock a::before {
    width: 20px;
    height: 20px;
  }

  .landing-dock a:hover,
  .landing-dock a:focus-visible {
    transform: translateY(-7px) scale(1.08);
  }

  .landing-dock a:hover + a,
  .landing-dock a:has(+ a:hover) {
    transform: translateY(-3px) scale(1.03);
  }

  .landing-dock a span {
    display: none;
  }

.paywall-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

.cherryx-pay-nav {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, rgba(255, 255, 255, 0.7));
  border-radius: 9px;
  padding: 8px 10px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--blue) 82%, white), color-mix(in srgb, var(--blue) 96%, #0f172a));
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--blue) 18%, transparent);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.cherryx-pay-nav::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.cherryx-pay-nav:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--blue) 12%, white);
  box-shadow: 0 16px 32px color-mix(in srgb, var(--blue) 24%, transparent);
}

.cherryx-pay-nav b,
.cherryx-pay-nav small {
  display: block;
}

.cherryx-pay-nav b {
  overflow: hidden;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cherryx-brand-red {
  color: #d4143a;
}

.cherryx-pay-nav .cherryx-brand-red {
  color: #ffffff;
  text-shadow: none;
}

.cherryx-balance-badge {
  display: inline-grid;
  grid-template-columns: 16px auto auto;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, var(--line));
  border-radius: 999px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--blue) 10%, #ffffff);
  color: var(--blue);
  text-decoration: none;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 10%, transparent);
}

.cherryx-balance-badge::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.cherryx-balance-badge b {
  color: var(--text);
  font-size: 13px;
  line-height: 1;
}

.cherryx-balance-badge span {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font-size: 12px;
  font-weight: 850;
}

.cherryx-pay-nav small {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 11px;
  font-weight: 720;
}

.cherryx-pay-page {
  min-height: 100vh;
  overflow-x: hidden;
}

.cherryx-pay-shell {
  display: grid;
  gap: 18px;
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto 44px;
}

.cherryx-wallet-hero {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: 18px;
  align-items: stretch;
}

.cherryx-wallet-card,
.cherryx-wallet-copy,
.cherryx-pay-panel,
.cherryx-spend-list article {
  border: 1px solid rgba(221, 229, 239, 0.92);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.cherryx-wallet-card {
  display: grid;
  align-content: end;
  min-height: 260px;
  padding: 24px;
  overflow: hidden;
  background:
    linear-gradient(140deg, rgba(2, 6, 23, 0.88), rgba(23, 64, 84, 0.9) 52%, rgba(37, 99, 235, 0.92)),
    var(--surface);
  color: #ffffff;
}

.cherryx-wallet-card span,
.cherryx-wallet-copy > span {
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.cherryx-wallet-card strong {
  margin-top: 16px;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 0.95;
}

.cherryx-wallet-card small {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 760;
}

.cherryx-wallet-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 28px;
}

.cherryx-wallet-copy > span {
  color: var(--blue);
}

.cherryx-wallet-copy h2 {
  max-width: 700px;
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.02;
}

.cherryx-wallet-copy p {
  max-width: 640px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.62;
}

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

.cherryx-pay-panel {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.cherryx-pay-panel header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}

.cherryx-pay-panel header > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--blue) 12%, white);
  color: var(--blue);
}

.cherryx-pay-panel header > span::before {
  content: "";
  width: 21px;
  height: 21px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.cherryx-pay-panel strong,
.cherryx-spend-list b {
  color: var(--text);
}

.cherryx-pay-panel small,
.cherryx-pay-panel label span,
.cherryx-spend-list span {
  color: var(--muted);
}

.cherryx-pay-panel label {
  display: grid;
  gap: 7px;
}

.cherryx-conversion {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  padding: 13px;
  background: rgba(248, 251, 255, 0.72);
}

.cherryx-withdraw-balance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cherryx-withdraw-balance span {
  display: grid;
  gap: 4px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 14%, rgba(148, 163, 184, 0.28));
  border-radius: 12px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--blue) 5%, rgba(248, 251, 255, 0.88));
}

.cherryx-withdraw-balance small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.cherryx-withdraw-balance b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.cherryx-withdraw-balance em {
  font-style: normal;
}

.cherryx-telegram-panel {
  grid-column: 1 / -1;
  gap: 10px;
  padding: 12px;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, #22c55e 5%, #ffffff));
}

.cherryx-telegram-panel header {
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 9px;
}

.cherryx-telegram-panel header > span {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: color-mix(in srgb, #22c55e 13%, white);
  color: #16a34a;
}

.cherryx-telegram-panel header > span::before {
  width: 18px;
  height: 18px;
}

.cherryx-telegram-panel header div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: baseline;
}

.cherryx-telegram-panel header small {
  font-size: 12px;
}

.cherryx-telegram-command-row {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 16px;
  align-items: center;
}

.cherryx-telegram-link-code {
  display: grid;
  gap: 6px;
  min-height: 74px;
  border: 1px solid color-mix(in srgb, #16a34a 22%, var(--line));
  border-radius: 0;
  padding: 13px 16px;
  background: rgba(255, 255, 255, 0.82);
}

.cherryx-telegram-link-code span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.cherryx-telegram-link-code b {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
}

.cherryx-telegram-help {
  margin: 0;
  color: #16a34a;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.cherryx-telegram-account {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(34, 197, 94, 0.22);
  border-radius: 12px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(255, 255, 255, 0.82));
}

.cherryx-telegram-account span,
.cherryx-telegram-account small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 820;
}

.cherryx-telegram-account b {
  color: #15803d;
  font-size: 18px;
  font-weight: 950;
}

.cherryx-telegram-linked-note {
  color: var(--muted);
}

.cherryx-telegram-panel.is-linked .cherryx-telegram-command-row,
.cherryx-telegram-panel.is-linked .cherryx-telegram-help {
  display: none;
}

.cherryx-telegram-panel > button {
  justify-self: start;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--blue) 22%, var(--line));
  border-radius: 10px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.74);
  color: var(--blue);
  font-weight: 850;
}

.cherryx-telegram-command-row > button {
  justify-self: center;
  min-width: 112px;
  min-height: 48px;
  border: 1px solid rgba(34, 197, 94, 0.34);
  border-radius: 10px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.88);
  color: #16a34a;
  font-size: 14px;
  font-weight: 950;
  box-shadow: 0 10px 24px rgba(22, 163, 74, 0.08);
}

.cherryx-telegram-command-row > button:hover,
.cherryx-telegram-command-row > button:focus-visible {
  border-color: rgba(22, 163, 74, 0.58);
  background: color-mix(in srgb, #22c55e 8%, white);
}

.cherryx-confirm {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}

.cherryx-confirm input {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  place-items: center;
  flex: 0 0 20px;
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  aspect-ratio: 1 / 1;
  margin: 0;
  border: 1.5px solid rgba(100, 116, 139, 0.46);
  border-radius: 6px;
  padding: 0;
  background: #ffffff;
  color: var(--blue);
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.cherryx-confirm input::before {
  content: "";
  width: 11px;
  height: 3px;
  opacity: 0;
  transform: rotate(-45deg) scale(0.9);
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: opacity 140ms ease, transform 140ms ease;
}

.cherryx-confirm input:hover,
.cherryx-confirm input:focus-visible {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 12%, transparent);
}

.cherryx-confirm input:checked {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  background: color-mix(in srgb, var(--blue) 10%, #ffffff);
}

.cherryx-confirm input:checked::before {
  opacity: 1;
  transform: rotate(-45deg) scale(1);
}

.cherryx-confirm span {
  line-height: 1.25;
}

.cherryx-pay-panel p {
  min-height: 20px;
  margin: 0;
  color: var(--blue);
  font-size: 13px;
  font-weight: 760;
}

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

.cherryx-spend-list article {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.cherryx-spend-list strong {
  color: var(--blue);
}

.theme-dark .cherryx-wallet-copy,
.theme-dark .cherryx-pay-panel,
.theme-dark .cherryx-action-switcher,
.theme-dark .cherryx-spend-list article {
  background: rgba(17, 26, 46, 0.88);
  border-color: rgba(84, 102, 137, 0.45);
}

.theme-dark .cherryx-conversion,
.theme-dark .cherryx-withdraw-balance span,
.theme-dark .cherryx-action-button:hover,
.theme-dark .cherryx-action-button:focus-visible,
.theme-dark .cherryx-action-button.is-active,
.theme-dark .cherryx-pay-panel header > span {
  background: rgba(8, 13, 26, 0.72);
  border-color: rgba(84, 102, 137, 0.42);
}

@media (max-width: 860px) {
  .cherryx-wallet-hero,
  .cherryx-pay-grid,
  .cherryx-spend-list {
    grid-template-columns: 1fr;
  }

  .cherryx-action-switcher {
    align-items: stretch;
    flex-direction: row;
  }
}

.cherryx-pay-topbar {
  align-items: flex-start;
  min-height: 0;
  padding: 8px 20px 10px;
  margin-bottom: 6px;
}

.cherryx-pay-topbar .topbar-copy {
  max-width: 520px;
}

.cherryx-pay-topbar .eyebrow {
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 1.2;
}

.cherryx-pay-topbar h1 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1;
}

.cherryx-pay-topbar .topbar-note {
  max-width: 480px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.35;
}

.cherryx-pay-topbar .account-bar {
  margin-top: 0;
  transform: scale(0.92);
  transform-origin: top right;
}

.cherryx-pay-shell.is-minimal {
  gap: 12px;
  width: min(1040px, calc(100% - 32px));
}

.cherryx-pay-summary {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cherryx-balance-tile,
.cherryx-mini-tile,
.cherryx-pay-panel.is-compact,
.cherryx-pay-rows,
.cherryx-pay-note {
  border: 1px solid rgba(221, 229, 239, 0.88);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
}

.cherryx-balance-tile,
.cherryx-mini-tile {
  position: relative;
  display: grid;
  gap: 7px;
  min-height: 122px;
  padding: 16px;
}

.cherryx-balance-tile::before,
.cherryx-mini-tile::before,
.cherryx-pay-rows header > span::before,
.cherryx-pay-rows article::before,
.cherryx-pay-note::before,
.primary-action[data-icon]::before {
  content: "";
  width: 18px;
  height: 18px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.cherryx-balance-tile::before,
.cherryx-mini-tile::before {
  position: absolute;
  top: 14px;
  right: 14px;
  color: var(--blue);
}

.cherryx-balance-tile span,
.cherryx-mini-tile span,
.cherryx-pay-rows header small,
.cherryx-pay-panel.is-compact small,
.cherryx-pay-note span {
  color: var(--muted);
}

.cherryx-balance-tile span,
.cherryx-mini-tile span {
  font-size: 12px;
  font-weight: 780;
}

.cherryx-balance-tile strong {
  align-self: end;
  color: var(--text);
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1;
}

.cherryx-pay-topbar .cherryx-brand-red,
.cherryx-balance-tile .cherryx-brand-red {
  color: #d4143a;
  text-shadow: 0 8px 28px rgba(212, 20, 58, 0.16);
}

.cherryx-balance-tile strong .cherryx-brand-red {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  margin-left: 8px;
  border: 1px solid rgba(212, 20, 58, 0.18);
  border-radius: 8px;
  padding: 4px 8px;
  background: rgba(212, 20, 58, 0.08);
  color: #d4143a;
  font-size: clamp(16px, 1.8vw, 22px);
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}

.cherryx-mini-tile strong {
  align-self: end;
  color: var(--text);
  font-size: 15px;
  line-height: 1.2;
}

.cherryx-mini-tile small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  color: var(--muted);
  font-weight: 720;
}

.flag-us {
  position: relative;
  display: inline-block;
  width: 24px;
  height: 16px;
  overflow: hidden;
  border-radius: 3px;
  background: repeating-linear-gradient(to bottom, #b91c1c 0 1.23px, #ffffff 1.23px 2.46px);
  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.14);
}

.flag-us::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 8.7px;
  background: #1d4ed8;
}

.cherryx-pay-panel.is-compact {
  gap: 12px;
  padding: 15px;
}

.cherryx-pay-panel.is-compact header {
  grid-template-columns: 34px minmax(0, 1fr);
}

.cherryx-pay-panel.is-compact header div,
.cherryx-pay-panel.is-compact label,
.cherryx-plan-grid article,
.cherryx-pay-rows article,
.cherryx-pay-note {
  min-width: 0;
}

.cherryx-pay-panel.is-compact header > span {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.cherryx-quick-amounts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

.cherryx-quick-amounts button {
  min-height: 34px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 8px;
  background: rgba(248, 251, 255, 0.8);
  color: var(--text);
  font-weight: 820;
}

.cherryx-quick-amounts button:hover {
  border-color: color-mix(in srgb, var(--blue) 38%, var(--line));
  color: var(--blue);
}

.cherryx-pay-grid {
  gap: 10px;
}

.cherryx-action-switcher {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(203, 213, 225, 0.88);
  border-radius: 11px;
  padding: 5px;
  background: rgba(248, 251, 255, 0.9);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
}

.cherryx-action-button {
  position: relative;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.cherryx-action-button::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.cherryx-action-button span {
  min-width: 0;
}

.cherryx-action-button span {
  color: var(--ink);
  font-weight: 920;
  line-height: 1.1;
}

.cherryx-action-button:hover,
.cherryx-action-button:focus-visible,
.cherryx-action-button.is-active {
  border-color: color-mix(in srgb, var(--blue) 28%, var(--line));
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  color: var(--blue);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.08);
}

.cherryx-action-button.is-active::before {
  color: currentColor;
}

.cherryx-pay-panel.is-compact[data-wallet-action-panel] {
  grid-column: 1 / -1;
}

.cherryx-pay-panel.is-compact[data-wallet-action-panel]:not(.is-active-panel) {
  display: none;
}

.cherryx-pay-panel.is-compact input {
  min-height: 38px;
  border-radius: 8px;
}

.cherryx-pay-panel.is-compact .cherryx-confirm input {
  width: 20px;
  min-width: 20px;
  max-width: 20px;
  height: 20px;
  min-height: 20px;
  max-height: 20px;
  border-radius: 6px;
}

.cherryx-pay-panel.is-compact .primary-action {
  width: 100%;
  min-height: 40px;
  border-radius: 8px;
}

.primary-action[data-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.primary-action[data-icon]::before {
  width: 16px;
  height: 16px;
}

.cherryx-pay-rows {
  display: grid;
  overflow: hidden;
}

.cherryx-pay-rows header,
.cherryx-pay-rows article {
  display: grid;
  grid-template-columns: 30px minmax(150px, 0.75fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.cherryx-pay-rows header {
  grid-template-columns: 30px minmax(0, 1fr);
  background: rgba(248, 251, 255, 0.62);
}

.cherryx-pay-rows header > span,
.cherryx-pay-rows article::before,
.cherryx-pay-note::before {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--blue) 9%, white);
  color: var(--blue);
}

.cherryx-pay-rows article::before,
.cherryx-pay-note::before {
  background: color-mix(in srgb, var(--blue) 86%, #059669);
  filter: drop-shadow(0 5px 9px color-mix(in srgb, var(--blue) 20%, transparent));
  opacity: 1;
}

.cherryx-pay-rows header > span::before {
  opacity: 1;
}

.cherryx-pay-rows article:last-child {
  border-bottom: 0;
}

.cherryx-pay-rows article span {
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.cherryx-pay-rows article strong {
  min-width: max-content;
  color: var(--blue);
}

.cherryx-pay-rows article strong::after {
  content: " CherryX";
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.cherryx-pay-bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cherryx-pay-note {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  padding: 14px;
}

.cherryx-pay-note span {
  grid-column: 2;
  font-size: 13px;
  line-height: 1.5;
}

.cherryx-operation-list {
  grid-column: 2;
  display: grid;
  gap: 8px;
}

.cherryx-operation-list span {
  display: grid;
  grid-column: auto;
  gap: 2px;
  border: 1px solid rgba(221, 229, 239, 0.82);
  border-radius: 10px;
  padding: 9px 10px;
  background: rgba(248, 250, 252, 0.78);
}

.cherryx-operation-list b,
.cherryx-operation-list em,
.cherryx-operation-list small {
  font-style: normal;
}

.cherryx-operation-list b {
  color: var(--ink);
  font-weight: 900;
}

.cherryx-operation-list em {
  color: var(--blue);
  font-weight: 950;
}

.cherryx-operation-list small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 740;
}

.theme-dark .cherryx-balance-tile,
.theme-dark .cherryx-mini-tile,
.theme-dark .cherryx-pay-panel.is-compact,
.theme-dark .cherryx-pay-rows,
.theme-dark .cherryx-pay-note {
  background: rgba(17, 26, 46, 0.88);
  border-color: rgba(84, 102, 137, 0.45);
}

.theme-dark .cherryx-pay-rows header,
.theme-dark .cherryx-quick-amounts button {
  background: rgba(8, 13, 26, 0.72);
}

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

.cherryx-plan-grid article {
  --plan-accent: var(--blue);
  --plan-accent-2: #22c55e;
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 18%, rgba(221, 229, 239, 0.94));
  border-radius: 14px;
  padding: 15px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--plan-accent) 8%, #ffffff) 0, rgba(255, 255, 255, 0.9) 48%),
    #ffffff;
  box-shadow: 0 16px 34px color-mix(in srgb, var(--plan-accent) 10%, rgba(15, 23, 42, 0.08));
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.cherryx-plan-grid article::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--plan-accent), var(--plan-accent-2));
}

.cherryx-plan-grid article::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 20px;
  right: -28px;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--plan-accent) 12%, transparent);
}

.cherryx-plan-info {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
}

.cherryx-plan-info summary {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 24%, rgba(203, 213, 225, 0.8));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--plan-accent);
  cursor: pointer;
  font-family: Georgia, serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  list-style: none;
  box-shadow: 0 10px 22px color-mix(in srgb, var(--plan-accent) 12%, transparent);
  transition: transform 150ms ease, background 150ms ease, border-color 150ms ease;
}

.cherryx-plan-info summary::-webkit-details-marker {
  display: none;
}

.cherryx-plan-info summary:hover,
.cherryx-plan-info summary:focus-visible,
.cherryx-plan-info[open] summary {
  border-color: color-mix(in srgb, var(--plan-accent) 48%, rgba(203, 213, 225, 0.8));
  background: color-mix(in srgb, var(--plan-accent) 10%, #ffffff);
  transform: translateY(-1px);
}

.cherryx-plan-info > div {
  position: absolute;
  top: 36px;
  right: -3px;
  display: grid;
  gap: 9px;
  width: min(250px, 72vw);
  border: 1px solid color-mix(in srgb, var(--plan-accent) 24%, rgba(203, 213, 225, 0.86));
  border-radius: 13px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 42px color-mix(in srgb, var(--plan-accent) 18%, rgba(15, 23, 42, 0.16));
  animation: cherryxPlanInfoIn 150ms ease both;
}

.cherryx-plan-info > div b {
  color: var(--plan-accent);
  font-size: 14px;
  line-height: 1.1;
}

.cherryx-plan-info ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cherryx-plan-info li {
  position: relative;
  min-width: 0;
  padding-left: 17px;
  color: var(--text);
  font-size: 12px;
  font-weight: 780;
  line-height: 1.35;
}

.cherryx-plan-info li::before {
  content: "";
  position: absolute;
  top: 0.48em;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--plan-accent), var(--plan-accent-2));
}

@keyframes cherryxPlanInfoIn {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.cherryx-plan-grid article:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--plan-accent) 42%, rgba(221, 229, 239, 0.94));
  box-shadow: 0 22px 44px color-mix(in srgb, var(--plan-accent) 16%, rgba(15, 23, 42, 0.12));
}

.cherryx-plan-grid article[data-plan-code="free"] {
  --plan-accent: #0ea5e9;
  --plan-accent-2: #22c55e;
}

.cherryx-plan-grid article[data-plan-code="starter"] {
  --plan-accent: #2563eb;
  --plan-accent-2: #06b6d4;
}

.cherryx-plan-grid article[data-plan-code="pro"] {
  --plan-accent: #d4143a;
  --plan-accent-2: #7c3aed;
}

.cherryx-plan-grid article[data-plan-code="studio"] {
  --plan-accent: #111827;
  --plan-accent-2: #d97706;
}

.cherryx-plan-grid article.is-featured {
  border-color: color-mix(in srgb, var(--plan-accent) 46%, var(--line));
  box-shadow: 0 24px 48px color-mix(in srgb, var(--plan-accent) 19%, rgba(15, 23, 42, 0.12));
}

.cherryx-plan-grid span {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--plan-accent) 20%, transparent);
  border-radius: 999px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--plan-accent) 9%, #ffffff);
  color: var(--plan-accent);
  font-size: 12px;
  font-weight: 920;
  line-height: 1;
}

.cherryx-plan-grid b {
  color: var(--text);
  font-size: 21px;
  line-height: 1.05;
}

.cherryx-plan-grid strong {
  color: var(--plan-accent);
  font-size: 18px;
  font-weight: 950;
}

.cherryx-plan-grid small {
  min-height: 44px;
  color: var(--muted);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cherryx-plan-grid button,
.cherryx-pay-rows article button {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 28%, var(--line));
  border-radius: 8px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--blue) 9%, white);
  color: var(--blue);
  font-weight: 850;
}

.cherryx-plan-grid button {
  border-color: color-mix(in srgb, var(--plan-accent) 34%, var(--line));
  background: linear-gradient(135deg, var(--plan-accent), color-mix(in srgb, var(--plan-accent-2) 74%, var(--plan-accent)));
  color: #ffffff;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--plan-accent) 18%, transparent);
}

.cherryx-plan-grid button:hover,
.cherryx-pay-rows article button:hover {
  border-color: color-mix(in srgb, var(--blue) 54%, var(--line));
  background: color-mix(in srgb, var(--blue) 14%, white);
}

.cherryx-plan-grid button:hover {
  border-color: color-mix(in srgb, var(--plan-accent) 58%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--plan-accent) 92%, #ffffff), var(--plan-accent-2));
}

.cherryx-plan-grid button:disabled,
.cherryx-pay-rows article button:disabled {
  cursor: default;
  opacity: 0.7;
}

.cherryx-plan-grid a {
  justify-self: start;
  color: color-mix(in srgb, var(--plan-accent) 76%, var(--muted));
  font-size: 12px;
  font-weight: 840;
  text-decoration: none;
}

.cherryx-plan-grid a:hover {
  color: var(--plan-accent);
}

.cherryx-pay-rows article {
  grid-template-columns: 30px minmax(120px, 0.62fr) minmax(0, 1fr) auto auto;
}

.cherryx-pay-rows article button {
  min-width: 84px;
  min-height: 32px;
}

.cherryx-confirm-modal[hidden] {
  display: none;
}

.cherryx-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 90000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.cherryx-confirm-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(8px);
}

.cherryx-confirm-modal > section {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  border: 1px solid rgba(221, 229, 239, 0.92);
  border-radius: 12px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
}

.cherryx-confirm-modal header {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.cherryx-confirm-modal header > span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--blue) 10%, white);
  color: var(--blue);
}

.cherryx-confirm-modal header > span::before {
  content: "";
  width: 20px;
  height: 20px;
  background: currentColor;
  mask: var(--editor-icon) center / contain no-repeat;
  -webkit-mask: var(--editor-icon) center / contain no-repeat;
}

.cherryx-confirm-modal strong {
  color: var(--text);
}

.cherryx-confirm-modal small,
.cherryx-confirm-modal p,
.cherryx-confirm-total span {
  color: var(--muted);
}

.cherryx-confirm-modal p {
  margin: 0;
  line-height: 1.5;
}

.cherryx-confirm-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 9px;
  padding: 11px 12px;
  background: rgba(248, 251, 255, 0.78);
}

.cherryx-confirm-total b {
  color: #d4143a;
}

.cherryx-confirm-modal footer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.cherryx-confirm-modal footer button {
  min-height: 38px;
  border-radius: 8px;
}

.cherryx-confirm-modal footer button[data-confirm-close] {
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(248, 251, 255, 0.86);
  color: var(--text);
  font-weight: 820;
}

.theme-dark .cherryx-plan-grid article,
.theme-dark .cherryx-confirm-modal > section {
  background: rgba(17, 26, 46, 0.96);
  border-color: rgba(84, 102, 137, 0.45);
}

.theme-dark .cherryx-plan-grid article {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--plan-accent) 14%, rgba(17, 26, 46, 0.96)) 0, rgba(17, 26, 46, 0.94) 58%),
    rgba(17, 26, 46, 0.96);
  border-color: color-mix(in srgb, var(--plan-accent) 28%, rgba(84, 102, 137, 0.45));
}

.theme-dark .cherryx-plan-grid span {
  background: color-mix(in srgb, var(--plan-accent) 16%, rgba(8, 13, 26, 0.82));
}

.theme-dark .cherryx-plan-info summary {
  background: rgba(8, 13, 26, 0.86);
  border-color: color-mix(in srgb, var(--plan-accent) 34%, rgba(84, 102, 137, 0.5));
}

.theme-dark .cherryx-plan-info > div {
  background: rgba(17, 26, 46, 0.98);
  border-color: color-mix(in srgb, var(--plan-accent) 34%, rgba(84, 102, 137, 0.52));
}

.theme-dark .cherryx-plan-grid button,
.theme-dark .cherryx-pay-rows article button,
.theme-dark .cherryx-confirm-modal header > span,
.theme-dark .cherryx-confirm-total,
.theme-dark .cherryx-confirm-modal footer button[data-confirm-close] {
  background: rgba(8, 13, 26, 0.72);
  border-color: rgba(84, 102, 137, 0.42);
}

@media (max-width: 920px) {
  .cherryx-pay-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cherryx-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cherryx-pay-bottom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .cherryx-pay-page {
    min-height: 100svh;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 7%, #f8fbff) 0, #f7f9fc 52%, var(--bg) 100%),
      var(--bg);
  }

  .cherryx-pay-topbar {
    position: sticky;
    top: 0;
    z-index: 65000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    margin: 0;
    padding: 7px 10px 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
    backdrop-filter: blur(18px);
  }

  .cherryx-pay-topbar .topbar-copy {
    min-width: 0;
    max-width: none;
  }

  .cherryx-pay-topbar .eyebrow {
    margin: 0;
    font-size: 10px;
    line-height: 1;
  }

  .cherryx-pay-topbar .back-link {
    display: inline-block;
    max-width: min(48vw, 210px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cherryx-pay-topbar h1 {
    margin-top: 3px;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cherryx-pay-topbar .topbar-note {
    display: none;
  }

  .cherryx-pay-topbar .account-bar {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    max-width: none;
    transform: none;
  }

  .cherryx-pay-topbar .language-switcher {
    display: none;
  }

  .cherryx-pay-topbar .topbar-link {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    overflow: hidden;
    border-radius: 14px;
    padding: 0;
    font-size: 0;
  }

  .cherryx-pay-topbar .detail-workspace-link {
    background:
      url("https://api.iconify.design/lucide/layout-dashboard.svg?color=%232563eb") center / 19px 19px no-repeat,
      color-mix(in srgb, var(--blue) 9%, #ffffff);
  }

  .cherryx-pay-topbar .topbar-link[href$="/pricing/"],
  .cherryx-pay-topbar .topbar-link[href*="pricing"] {
    background:
      url("https://api.iconify.design/lucide/tags.svg?color=%232563eb") center / 19px 19px no-repeat,
      color-mix(in srgb, var(--blue) 9%, #ffffff);
  }

  .cherryx-pay-shell.is-minimal {
    gap: 8px;
    width: min(100% - 20px, 1040px);
    margin-bottom: calc(20px + env(safe-area-inset-bottom));
    padding-top: 8px;
  }

  .cherryx-pay-grid {
    grid-template-columns: 1fr;
  }

  .cherryx-pay-summary {
    display: grid;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 2px 4px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  .cherryx-pay-summary::-webkit-scrollbar {
    display: none;
  }

  .cherryx-pay-summary .cherryx-balance-tile,
  .cherryx-pay-summary .cherryx-mini-tile {
    width: max-content;
    min-width: 214px;
    max-width: 78vw;
    scroll-snap-align: start;
  }

  .cherryx-plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .cherryx-balance-tile,
  .cherryx-mini-tile {
    min-height: 0;
    padding: 10px 12px;
  }

  .cherryx-balance-tile::before,
  .cherryx-mini-tile::before {
    top: 10px;
    right: 10px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--blue) 88%, #047857);
    color: color-mix(in srgb, var(--blue) 88%, #047857);
    filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--blue) 18%, transparent));
    opacity: 1;
  }

  .cherryx-balance-tile {
    min-height: 96px;
  }

  .cherryx-mini-tile {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }

  .cherryx-mini-tile strong,
  .cherryx-mini-tile small,
  .cherryx-balance-tile strong,
  .cherryx-balance-tile small {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .cherryx-balance-tile strong {
    font-size: clamp(27px, 10vw, 38px);
  }

  .cherryx-balance-tile strong .cherryx-brand-red {
    margin-left: 5px;
    padding: 4px 7px;
    font-size: 14px;
  }

  .cherryx-pay-panel.is-compact,
  .cherryx-plan-grid article,
  .cherryx-pay-rows,
  .cherryx-pay-note {
    border-radius: 12px;
  }

  .cherryx-pay-panel.is-compact {
    gap: 9px;
    padding: 11px;
  }

  .cherryx-pay-panel.is-compact header {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
  }

  .cherryx-pay-panel.is-compact header > span {
    width: 30px;
    height: 30px;
  }

  .cherryx-pay-panel.is-compact header > span::before {
    width: 18px;
    height: 18px;
  }

  .cherryx-telegram-command-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cherryx-telegram-command-row > button {
    justify-self: stretch;
  }

  .cherryx-action-switcher {
    justify-content: space-evenly;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .cherryx-action-switcher::-webkit-scrollbar {
    display: none;
  }

  .cherryx-action-button {
    flex: 0 0 max-content;
    min-width: 112px;
  }

  .cherryx-pay-panel.is-compact small {
    font-size: 12px;
    line-height: 1.3;
  }

  .cherryx-quick-amounts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .cherryx-quick-amounts button,
  .cherryx-pay-panel.is-compact input,
  .cherryx-pay-panel.is-compact .primary-action {
    min-height: 34px;
  }

  .cherryx-conversion {
    display: grid;
    gap: 3px;
  }

  .cherryx-conversion b {
    overflow-wrap: anywhere;
  }

  .cherryx-plan-grid article {
    gap: 6px;
    padding: 10px;
  }

  .cherryx-plan-info {
    top: 8px;
    right: 8px;
  }

  .cherryx-plan-info summary {
    width: 26px;
    height: 26px;
    font-size: 15px;
  }

  .cherryx-plan-info > div {
    top: 32px;
    width: min(230px, 78vw);
  }

  .cherryx-plan-grid small {
    min-height: 0;
    font-size: 12px;
    line-height: 1.3;
  }

  .cherryx-plan-grid button,
  .cherryx-plan-grid a,
  .cherryx-pay-rows article button {
    width: 100%;
  }

  .cherryx-plan-grid button,
  .cherryx-plan-grid a {
    min-height: 32px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .cherryx-plan-grid a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, 0.24);
    border-radius: 8px;
  }

  .cherryx-pay-rows header {
    min-height: 44px;
    padding: 8px 10px;
  }

  .cherryx-pay-rows header small {
    display: none;
  }

  .cherryx-pay-rows article {
    grid-template-columns: 24px minmax(0, 1fr) auto 84px;
    gap: 6px 8px;
    align-items: center;
    min-height: 0;
    padding: 8px 10px;
  }

  .cherryx-pay-rows header > span,
  .cherryx-pay-rows article::before,
  .cherryx-pay-note::before {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--blue) 17%, #ffffff);
    color: color-mix(in srgb, var(--blue) 88%, #047857);
    box-shadow:
      inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent),
      0 6px 14px color-mix(in srgb, var(--blue) 10%, transparent);
  }

  .cherryx-pay-rows article::before,
  .cherryx-pay-note::before,
  .cherryx-pay-rows header > span::before {
    opacity: 1;
  }

  .cherryx-pay-rows article::before,
  .cherryx-pay-note::before {
    background: color-mix(in srgb, var(--blue) 88%, #059669);
    filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--blue) 24%, transparent));
  }

  .cherryx-pay-rows article::before {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .cherryx-pay-rows article b {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cherryx-pay-rows article span {
    grid-column: 2;
    grid-row: 2;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cherryx-pay-rows article strong {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-width: 34px;
    font-size: 13px;
    text-align: right;
  }

  .cherryx-pay-rows article strong::after {
    content: " ch";
    font-size: 10px;
  }

  .cherryx-pay-rows article button {
    grid-column: 4;
    grid-row: 1 / span 2;
    min-width: 0;
    min-height: 34px;
    padding: 6px 8px;
    font-size: 12px;
  }

  .cherryx-pay-bottom {
    grid-template-columns: 1fr;
  }

  .cherryx-pay-note {
    padding: 10px;
  }

  .cherryx-pay-note span {
    font-size: 12px;
    line-height: 1.35;
  }

  .cherryx-confirm-modal {
    place-items: end center;
    padding: 10px;
  }

  .cherryx-confirm-modal > section {
    width: 100%;
    max-height: calc(100svh - 20px);
    overflow: auto;
    border-radius: 16px;
    padding: 14px;
  }

  .cherryx-confirm-modal footer {
    grid-template-columns: 1fr;
  }

  .cherryx-confirm-modal footer button {
    min-height: 42px;
  }
}

@media (max-width: 390px) {
  .cherryx-plan-grid {
    grid-template-columns: 1fr;
  }

  .cherryx-pay-rows article {
    grid-template-columns: 24px minmax(0, 1fr) auto;
  }

  .cherryx-pay-rows article button {
    grid-column: 2 / -1;
    grid-row: 3;
    width: 100%;
  }
}

.originality-web-plan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.originality-web-plan article,
.originality-report-list a,
.originality-share-note,
.originality-share-metrics article {
  border: 1px solid rgba(221, 229, 239, 0.88);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
}

.originality-web-plan article {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 9px;
  padding: 12px;
}

.originality-web-plan article::before {
  content: "";
  grid-row: span 2;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: currentColor;
  color: var(--blue);
  mask: var(--editor-icon) center / 18px 18px no-repeat;
  -webkit-mask: var(--editor-icon) center / 18px 18px no-repeat;
}

.originality-web-plan strong,
.originality-report-list b,
.originality-share-note strong {
  color: var(--text);
}

.originality-web-plan span,
.originality-report-list span,
.originality-report-list small,
.originality-share-note span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.originality-report-list {
  display: grid;
  gap: 9px;
}

.originality-report-list h2 {
  margin: 0 0 2px;
}

.originality-report-list a {
  display: grid;
  gap: 4px;
  padding: 12px;
  text-decoration: none;
}

.originality-share-shell {
  display: grid;
  gap: 14px;
  width: min(1040px, calc(100% - 32px));
  margin: 28px auto;
}

.originality-share-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  border: 1px solid rgba(221, 229, 239, 0.88);
  border-radius: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow);
}

.originality-share-hero h1,
.originality-share-hero p {
  margin: 0;
}

.originality-share-hero h1 {
  color: var(--text);
}

.originality-share-hero p:not(.eyebrow) {
  color: var(--muted);
}

.originality-share-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.originality-share-metrics article {
  display: grid;
  gap: 6px;
  padding: 13px;
}

.originality-share-metrics span,
.originality-share-metrics small {
  color: var(--muted);
}

.originality-share-metrics b {
  color: var(--blue);
  font-size: 28px;
}

.originality-share-note {
  display: grid;
  gap: 6px;
  padding: 14px;
}

.theme-dark .originality-mode-grid span,
.theme-dark .originality-web-plan article,
.theme-dark .originality-report-list a,
.theme-dark .originality-share-note,
.theme-dark .originality-share-metrics article,
.theme-dark .originality-share-hero {
  background: rgba(17, 26, 46, 0.88);
  border-color: rgba(84, 102, 137, 0.45);
}

.theme-dark .document-text-preview-head {
  background: rgba(8, 13, 26, 0.92);
  border-color: rgba(84, 102, 137, 0.45);
}

@media (max-width: 760px) {
  .originality-mode-grid,
  .originality-web-plan,
  .originality-share-metrics {
    grid-template-columns: 1fr;
  }

  .originality-share-hero {
    grid-template-columns: 1fr;
  }
}

.subtitle-style-picker {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 26%, rgba(255, 255, 255, 0.35));
  border-radius: 16px;
  padding: 14px;
  background:
    linear-gradient(135deg, rgba(3, 7, 18, 0.88), rgba(15, 23, 42, 0.62) 45%, rgba(37, 99, 235, 0.34)),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1600&q=75") center / cover;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22);
}

.subtitle-style-picker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 35%),
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--blue) 34%, transparent), transparent 30%);
  pointer-events: none;
}

.subtitle-style-picker legend {
  width: fit-content;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(2, 6, 23, 0.48);
  color: rgba(255, 255, 255, 0.86);
  box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
}

.subtitle-style-current {
  min-height: 150px;
  border-color: rgba(255, 255, 255, 0.18);
  background:
    linear-gradient(90deg, rgba(2, 6, 23, 0.86), rgba(15, 23, 42, 0.34)),
    url("https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=1400&q=75") center / cover;
  color: #ffffff;
  box-shadow: 0 22px 58px rgba(2, 6, 23, 0.34);
}

.subtitle-style-current::after {
  background:
    linear-gradient(90deg, rgba(2, 6, 23, 0.78), rgba(2, 6, 23, 0.28) 48%, rgba(255, 255, 255, 0.12)),
    radial-gradient(circle at 72% 18%, rgba(255, 255, 255, 0.2), transparent 26%);
}

.subtitle-style-current b,
.subtitle-style-current small {
  color: #ffffff;
}

.subtitle-style-current small {
  color: rgba(226, 232, 240, 0.82);
}

.subtitle-style-current .subtitle-style-swatch {
  min-height: 108px;
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.subtitle-style-menu {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  padding-top: 2px;
}

.subtitle-style-card {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
}

.subtitle-style-card:hover,
.subtitle-style-card.is-selected {
  border-color: color-mix(in srgb, var(--blue) 44%, rgba(255, 255, 255, 0.72));
  background: rgba(255, 255, 255, 0.18);
  box-shadow: 0 18px 42px rgba(2, 6, 23, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.subtitle-style-card button {
  min-height: 164px;
}

.subtitle-style-card .subtitle-style-copy b {
  color: #ffffff;
}

.subtitle-style-card .subtitle-style-copy small {
  color: rgba(226, 232, 240, 0.76);
}

.subtitle-style-card .subtitle-style-swatch {
  border: 1px solid rgba(255, 255, 255, 0.13);
}

.subtitle-style-card a {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.subtitle-style-card a:hover {
  background: color-mix(in srgb, var(--blue) 26%, rgba(255, 255, 255, 0.18));
}

.subtitle-style-card.is-selected::after {
  background:
    url("https://api.iconify.design/lucide/check.svg?color=white") center / 13px 13px no-repeat,
    color-mix(in srgb, var(--blue) 86%, #111827);
}

.theme-dark .subtitle-style-picker {
  border-color: rgba(126, 154, 203, 0.32);
}

.subtitle-style-picker {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.subtitle-style-picker::before {
  display: none;
}

.subtitle-style-picker legend {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

.subtitle-style-current {
  min-height: 112px;
  border-color: color-mix(in srgb, var(--blue) 18%, #d7e1ec);
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.subtitle-style-current::after {
  display: none;
}

.subtitle-style-current b {
  color: var(--text);
}

.subtitle-style-current small {
  color: var(--muted);
}

.subtitle-style-card {
  border-color: color-mix(in srgb, var(--blue) 12%, #d7e1ec);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
  backdrop-filter: none;
}

.subtitle-style-card:hover,
.subtitle-style-card.is-selected {
  background: #ffffff;
  box-shadow: 0 16px 36px color-mix(in srgb, var(--blue) 13%, transparent);
}

.subtitle-style-card .subtitle-style-copy b {
  color: var(--text);
}

.subtitle-style-card .subtitle-style-copy small {
  color: var(--muted);
}

.subtitle-style-card a {
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  color: var(--blue);
}

.subtitle-style-swatch {
  background-image:
    radial-gradient(circle at 70% 18%, rgba(255, 255, 255, 0.22), transparent 26%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.04), rgba(2, 6, 23, 0.58)),
    url("https://images.unsplash.com/photo-1516280440614-37939bbacd81?auto=format&fit=crop&w=900&q=70");
  background-position: center;
  background-size: cover;
}

.subtitle-style-swatch.is-pop {
  background-image: radial-gradient(circle at 70% 18%, rgba(249, 115, 22, 0.82), transparent 24%), linear-gradient(180deg, rgba(29, 78, 216, 0.1), rgba(15, 23, 42, 0.72)), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-neon {
  background-image: radial-gradient(circle at 70% 16%, rgba(6, 182, 212, 0.86), transparent 26%), linear-gradient(180deg, rgba(76, 29, 149, 0.12), rgba(11, 16, 36, 0.74)), url("https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-candy {
  background-image: radial-gradient(circle at 70% 18%, rgba(251, 113, 133, 0.8), transparent 25%), radial-gradient(circle at 26% 24%, rgba(250, 204, 21, 0.78), transparent 22%), linear-gradient(180deg, rgba(124, 58, 237, 0.1), rgba(17, 24, 39, 0.72)), url("https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-kinetic {
  background-image: radial-gradient(circle at 72% 18%, rgba(250, 204, 21, 0.84), transparent 22%), linear-gradient(180deg, rgba(220, 38, 38, 0.18), rgba(17, 24, 39, 0.74)), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-bounce {
  background-image: radial-gradient(circle at 70% 18%, rgba(245, 158, 11, 0.84), transparent 24%), linear-gradient(180deg, rgba(34, 197, 94, 0.12), rgba(15, 118, 110, 0.74)), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-comic {
  background-image: radial-gradient(circle at 70% 18%, rgba(239, 68, 68, 0.82), transparent 24%), radial-gradient(circle at 28% 28%, rgba(250, 204, 21, 0.76), transparent 24%), linear-gradient(180deg, rgba(30, 58, 138, 0.16), rgba(17, 24, 39, 0.76)), url("https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-clean,
.subtitle-style-swatch.is-editorial {
  background-image: linear-gradient(180deg, rgba(51, 65, 85, 0.22), rgba(17, 24, 39, 0.76)), url("https://images.unsplash.com/photo-1495567720989-cebdbdd97913?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-minimal,
.subtitle-style-swatch.is-typewriter {
  background-image: linear-gradient(180deg, rgba(248, 250, 252, 0.16), rgba(203, 213, 225, 0.56)), url("https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-headline {
  background-image: radial-gradient(circle at 70% 18%, rgba(153, 27, 27, 0.82), transparent 24%), linear-gradient(180deg, rgba(2, 6, 23, 0.08), rgba(17, 24, 39, 0.78)), url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-luxury {
  background-image: radial-gradient(circle at 72% 18%, rgba(245, 232, 199, 0.84), transparent 24%), linear-gradient(180deg, rgba(87, 83, 78, 0.2), rgba(24, 24, 27, 0.74)), url("https://images.unsplash.com/photo-1519167758481-83f550bb49b3?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-mono {
  background-image: linear-gradient(180deg, rgba(6, 78, 59, 0.24), rgba(2, 6, 23, 0.82)), url("https://images.unsplash.com/photo-1515879218367-8466d910aaa4?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch.is-soft {
  background-image: linear-gradient(180deg, rgba(254, 215, 170, 0.22), rgba(186, 230, 253, 0.56)), url("https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=900&q=70");
}

.subtitle-style-swatch b {
  padding: 0 10px;
  transform: translateY(-1px);
}

.subtitle-style-current {
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 18px;
  min-height: 142px;
  overflow: visible;
  padding: 16px 18px;
}

.subtitle-style-current .subtitle-style-swatch {
  width: 100%;
  min-height: 106px;
  aspect-ratio: 2.08 / 1;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.subtitle-style-current > span:last-child {
  align-self: center;
  min-width: 0;
}

@media (max-width: 640px) {
  .subtitle-style-current {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .subtitle-style-current .subtitle-style-swatch {
    max-width: 320px;
  }
}

@media (max-width: 760px) {
  body.is-mobile-workspace .subtitle-style-picker {
    display: grid;
    gap: 10px;
    overflow: visible;
    margin-bottom: 14px;
  }

  body.is-mobile-workspace .subtitle-style-current {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 12px;
    min-height: 92px;
    border-radius: 18px;
    padding: 10px;
    overflow: visible;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--blue) 8%, transparent);
  }

  body.is-mobile-workspace .subtitle-style-current .subtitle-style-swatch {
    width: 88px;
    min-height: 68px;
    max-width: none;
    aspect-ratio: 1.3 / 1;
    border-radius: 14px;
  }

  body.is-mobile-workspace .subtitle-style-current .subtitle-style-swatch b {
    max-width: calc(100% - 1px);
    padding: 0 9px;
    color: #ffffff;
    font-size: 10.5px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.9);
    transform: none;
  }

  body.is-mobile-workspace .subtitle-style-current > span:last-child {
    align-self: center;
  }

  body.is-mobile-workspace .subtitle-style-menu {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
  }

  body.is-mobile-workspace .subtitle-style-card {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    gap: 12px;
    min-height: 112px;
    overflow: visible;
    border-radius: 18px;
    padding: 10px 12px 10px 10px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 4%, #ffffff)),
      #ffffff;
  }

  body.is-mobile-workspace .subtitle-style-card:hover,
  body.is-mobile-workspace .subtitle-style-card.is-selected {
    border-color: color-mix(in srgb, var(--blue) 42%, #c7d8ee);
    box-shadow:
      0 8px 18px color-mix(in srgb, var(--blue) 8%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  body.is-mobile-workspace .subtitle-style-card button {
    display: contents;
    grid-template-columns: none;
    gap: 0;
    min-height: 104px;
    padding: 0;
  }

  body.is-mobile-workspace .subtitle-style-card .subtitle-style-swatch {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 102px;
    min-height: 78px;
    aspect-ratio: 1.31 / 1;
    border-radius: 14px;
  }

  body.is-mobile-workspace .subtitle-style-card .subtitle-style-swatch b {
    max-width: calc(100% - 1px);
    padding: 0 9px;
    color: #ffffff;
    font-size: 10.5px;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(2, 6, 23, 0.9);
    transform: none;
  }

  body.is-mobile-workspace .subtitle-style-card .subtitle-style-copy {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    align-content: start;
    gap: 5px;
    min-width: 0;
    padding: 1px 24px 0 0;
  }

  body.is-mobile-workspace .subtitle-style-card .subtitle-style-copy b {
    font-size: 14px;
    line-height: 1.08;
    white-space: normal;
  }

  body.is-mobile-workspace .subtitle-style-card .subtitle-style-copy small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  body.is-mobile-workspace .subtitle-style-card a {
    position: static;
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 5px;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, #d7e1ec);
    border-radius: 999px;
    padding: 5px 9px;
    background:
      linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--blue) 8%, #ffffff));
    color: var(--blue);
    box-shadow:
      0 8px 18px color-mix(in srgb, var(--blue) 14%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    font-size: 11px;
    font-weight: 950;
    line-height: 1;
  }

  body.is-mobile-workspace .subtitle-style-card a::before {
    content: "";
    width: 12px;
    height: 12px;
    background: currentColor;
    -webkit-mask: url("https://api.iconify.design/lucide/info.svg") center / contain no-repeat;
    mask: url("https://api.iconify.design/lucide/info.svg") center / contain no-repeat;
  }

  body.is-mobile-workspace .subtitle-style-card.is-selected::after {
    right: 10px;
    top: 10px;
    width: 22px;
    height: 22px;
    background:
      url("https://api.iconify.design/lucide/check.svg?color=white") center / 12px 12px no-repeat,
      color-mix(in srgb, var(--blue) 88%, #0f172a);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--blue) 24%, transparent);
  }
}

@media (max-width: 380px) {
  body.is-mobile-workspace .subtitle-style-card {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

  body.is-mobile-workspace .subtitle-style-card button {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
  }

  body.is-mobile-workspace .subtitle-style-card .subtitle-style-swatch {
    width: 92px;
    min-height: 72px;
  }

  body.is-mobile-workspace .subtitle-style-card .subtitle-style-copy small {
    -webkit-line-clamp: 4;
  }
}

.subtitle-style-detail-v2 {
  grid-template-columns: minmax(420px, 1.05fr) minmax(320px, 0.75fr);
  align-items: center;
  gap: 38px;
  width: min(1240px, calc(100% - 32px));
}

.subtitle-style-stage {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 24px;
  padding: 16px;
  background:
    linear-gradient(135deg, rgba(2, 6, 23, 0.92), rgba(15, 23, 42, 0.62)),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1500&q=75") center / cover;
  box-shadow: 0 34px 90px rgba(15, 23, 42, 0.28);
}

.subtitle-style-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--blue) 34%, transparent), transparent 30%),
    linear-gradient(90deg, rgba(255,255,255,.08), transparent 42%);
  pointer-events: none;
}

.subtitle-style-stage > * {
  position: relative;
}

.subtitle-style-stage-top,
.subtitle-style-stage-timeline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255, 255, 255, 0.86);
}

.subtitle-style-stage-top {
  margin-bottom: 12px;
}

.subtitle-style-stage-top span {
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.subtitle-style-stage-top b {
  font-size: 13px;
}

.subtitle-style-stage-screen {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 430px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background: #020617;
}

.subtitle-style-stage-media {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.04), rgba(2, 6, 23, 0.58)),
    url("https://images.unsplash.com/photo-1492684223066-81342ee5ff30?auto=format&fit=crop&w=1400&q=75") center / cover;
  transform: scale(1.02);
}

.subtitle-style-stage-ui {
  position: absolute;
  inset: 18px;
  pointer-events: none;
}

.subtitle-style-stage-ui span {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
}

.subtitle-style-stage-ui span:nth-child(1) {
  width: 92px;
  height: 28px;
  top: 0;
  left: 0;
}

.subtitle-style-stage-ui span:nth-child(2) {
  width: 54px;
  height: 54px;
  right: 0;
  top: 0;
}

.subtitle-style-stage-ui span:nth-child(3) {
  width: 60%;
  height: 6px;
  left: 20%;
  bottom: 0;
  background: rgba(255, 255, 255, 0.34);
}

.subtitle-style-stage-screen .subtitle-style-demo-line {
  margin-bottom: 42px;
}

.subtitle-style-stage-timeline {
  margin-top: 12px;
}

.subtitle-style-stage-timeline span,
.subtitle-style-stage-timeline b {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.subtitle-style-stage-timeline span {
  flex: 1;
}

.subtitle-style-stage-timeline b {
  width: 34%;
  background: color-mix(in srgb, var(--blue) 72%, #ffffff);
}

.subtitle-style-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.subtitle-style-specs span {
  border: 1px solid color-mix(in srgb, var(--blue) 16%, var(--line));
  border-radius: 999px;
  padding: 7px 10px;
  background: color-mix(in srgb, var(--blue) 7%, #ffffff);
  color: var(--blue);
  font-size: 12px;
  font-weight: 820;
}

.theme-dark .subtitle-style-specs span {
  background: rgba(8, 13, 26, 0.72);
  border-color: rgba(84, 102, 137, 0.45);
}

@media (max-width: 860px) {
  .subtitle-style-detail-v2 {
    grid-template-columns: 1fr;
  }

  .subtitle-style-stage-screen {
    min-height: 360px;
  }
}

@media (max-width: 760px) {
  .settings-shell .auth-brand {
    display: grid;
    align-content: start;
    position: relative;
    z-index: 3;
    min-height: 0;
    gap: 13px;
    overflow: visible;
    border-radius: 0;
    padding: 3px 2px 0;
  }

  .settings-shell .language-settings .language-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .settings-shell .language-settings .language-button {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: center;
    min-height: 58px;
    gap: 5px;
    padding: 8px 6px;
    text-align: center;
  }

  .settings-shell .language-settings .language-button img {
    width: 26px;
    height: 18px;
    border-radius: 5px;
  }

  .settings-shell .language-settings .language-button span {
    display: none;
  }

  .settings-shell .language-settings .language-button::after {
    content: attr(data-code);
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
    text-transform: uppercase;
  }

  .landing-page.is-mobile-landing .landing-copy,
  .landing-page.is-mobile-landing .landing-console,
  .landing-page.is-mobile-landing .landing-feature-board,
  .landing-page.is-mobile-landing .landing-dock {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 420ms ease, transform 420ms ease;
  }

  .landing-page.is-mobile-landing .landing-dock {
    transform: translateX(-50%) translateY(14px);
  }

  .landing-page.is-mobile-landing .landing-copy.is-visible,
  .landing-page.is-mobile-landing .landing-console.is-visible,
  .landing-page.is-mobile-landing .landing-feature-board.is-visible,
  .landing-page.is-mobile-landing .landing-dock.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .landing-page.is-mobile-landing .console-grid article {
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px) scale(0.965);
    transition: opacity 360ms ease, transform 360ms ease, box-shadow 360ms ease, border-color 360ms ease;
  }

  .landing-page.is-mobile-landing .console-grid article.is-carousel-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }

  .landing-page.is-mobile-landing .console-grid article.is-carousel-active::after {
    animation: landing-mobile-card-shine 2.8s ease-in-out both;
  }

  .landing-page.is-mobile-landing .console-grid article.is-mobile-focused,
  .landing-page.is-mobile-landing .console-grid article.is-carousel-active {
    border-color: color-mix(in srgb, var(--blue) 46%, var(--line));
    box-shadow:
      0 24px 54px color-mix(in srgb, var(--blue) 16%, transparent),
      0 0 0 5px color-mix(in srgb, var(--blue) 7%, transparent);
  }

  .landing-page.is-mobile-landing .landing-dock a.is-active {
    border-color: color-mix(in srgb, var(--blue) 54%, var(--line));
    background:
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.96), transparent 42%),
      color-mix(in srgb, var(--blue) 18%, #ffffff);
    color: var(--blue);
    box-shadow: 0 12px 26px color-mix(in srgb, var(--blue) 18%, transparent);
  }

  .landing-page {
    min-height: 100svh;
    padding-bottom: max(128px, calc(env(safe-area-inset-bottom) + 112px));
    background:
      radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--blue) 22%, transparent), transparent 28%),
      radial-gradient(circle at 0% 48%, rgba(20, 184, 166, 0.13), transparent 30%),
      linear-gradient(180deg, rgba(238, 247, 255, 0.96) 0 42%, #ffffff 100%);
  }

  .landing-nav {
    position: sticky;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 6px 9px 2px;
    text-align: left;
    transition: padding 180ms ease, box-shadow 180ms ease, background 180ms ease;
  }

  .landing-page.is-nav-compact .landing-nav {
    padding-top: 7px;
    padding-bottom: 6px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  }

  .landing-nav > div {
    width: auto;
    min-width: 0;
    justify-content: start;
  }

  .landing-nav .eyebrow {
    margin-bottom: 0;
    font-size: 10px;
  }

  .landing-nav strong {
    display: block;
    overflow: hidden;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .landing-nav nav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    justify-content: end;
    width: auto;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    gap: 6px;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .landing-nav nav::-webkit-scrollbar {
    display: none;
  }

  .landing-nav .language-current {
    min-height: 34px;
    max-width: 112px;
    padding: 5px 8px;
  }

  .landing-nav .language-current::after {
    width: 20px;
    height: 20px;
    background-size: 12px 12px, auto, auto;
  }

  .landing-nav a {
    min-height: 34px;
    border-radius: 999px;
    border: none;
    gap: 0 !important;
    padding: 7px 9px;
    font-size: 0;
  }

  .landing-nav a::before {
    margin: 0;
  }

  .landing-nav .nav-primary {
    min-width: 38px;
    padding-inline: 10px;
  }

  .landing-hero {
    display: block;
    gap: 24px;
    min-height: auto;
    padding: 30px 16px 18px;
  }

  .landing-hero-viewport {
    border-radius: 22px;
    touch-action: pan-y;
  }

  .landing-hero-slide {
    grid-template-columns: 1fr;
    gap: 22px;
    align-content: start;
  }

  .landing-slide-arrow {
    display: none;
  }

  .landing-slide-dots {
    position: static;
    justify-content: center;
    margin-top: 12px;
    transform: none;
  }

  .landing-slide-dots button {
    width: 26px;
    height: 7px;
  }

  .landing-slide-dots button.is-active {
    width: 44px;
  }

  .landing-copy {
    display: grid;
    align-content: start;
    gap: 14px;
    text-align: left;
  }

  .landing-copy .eyebrow {
    width: fit-content;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.7));
    border-radius: 999px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.68);
    font-size: 10px;
    letter-spacing: 0;
  }

  .landing-copy h1 {
    font-size: clamp(40px, 4.4vw, 56px);
    line-height: 0.92;
  }

  .landing-copy p {
    max-width: 34rem;
    margin: 0;
    color: #42526a;
    font-size: 14.5px;
    line-height: 1.58;
  }

  .landing-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    justify-content: stretch;
    width: 100%;
    gap: 10px;
    margin-top: 4px;
  }

  .primary-link,
  .secondary-link {
    min-height: 42px;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.05;
    text-align: center;
  }

  .landing-copy .brand-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    margin-top: 2px;
  }

  .landing-feature-board {
    border-radius: 24px;
    padding: 14px;
  }

  .feature-flow,
  .feature-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .feature-flow article,
  .feature-stats article {
    min-height: 96px;
    border-radius: 16px;
    padding: 12px;
  }

  .feature-flow b,
  .feature-stats b {
    font-size: 19px;
  }

  .landing-slide-points {
    gap: 8px;
  }

  .brand-pills span {
    justify-content: center;
    min-width: 0;
    min-height: 40px;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, rgba(148, 163, 184, 0.22));
    border-radius: 13px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.7);
    font-size: 11px;
    font-weight: 850;
    text-align: center;
  }

  .brand-pills span::before {
    width: 13px;
    height: 13px;
  }

  .landing-console {
    display: grid;
    align-self: start;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(238, 246, 255, 0.82));
    box-shadow: 0 26px 64px rgba(15, 23, 42, 0.12);
  }

  .console-top {
    min-height: 42px;
    padding: 10px 12px;
  }

  .console-top strong {
    font-size: 11px;
  }

  .console-orbit {
    position: absolute;
    inset: 52px 12px auto auto;
    justify-content: flex-end;
    padding: 0;
  }

  .console-orbit i {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .console-orbit i::before {
    width: 16px;
    height: 16px;
  }

  .console-grid {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 214px;
    overflow: hidden;
    padding: 62px 14px 16px;
  }

  .console-grid article {
    grid-area: 1 / 1;
    grid-template-columns: 38px minmax(0, 1fr);
    align-content: start;
    min-height: 168px;
    overflow: hidden;
    padding: 18px;
    border-radius: 18px;
    background:
      radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--blue) 13%, transparent), transparent 28%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 5%, #ffffff));
  }

  .console-grid article::before {
    grid-row: 1 / span 2;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background-size: 20px 20px, auto;
  }

  .console-grid article::after {
    content: "";
    position: absolute;
    inset: -20% auto auto -46%;
    width: 54%;
    height: 140%;
    background: linear-gradient(112deg, transparent 10%, rgba(255, 255, 255, 0.72), transparent 72%);
    opacity: 0;
    pointer-events: none;
    transform: rotate(17deg) translateX(0);
  }

  .console-grid strong {
    font-size: 11px;
  }

  .console-grid h2 {
    grid-column: 2;
    margin-top: 1px;
    font-size: 17px;
    line-height: 1.08;
  }

  .console-grid p {
    grid-column: 1 / -1;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.52;
  }

  .console-grid article > span {
    grid-column: 1 / -1;
    grid-row: auto;
    width: fit-content;
    margin-top: 10px;
    padding: 6px 9px;
  }

  .landing-dock {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px));
    z-index: 65000;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 46px;
    justify-content: start;
    width: min(100% - 32px, 348px);
    max-width: none;
    margin: 0;
    overflow-x: auto;
    border-radius: 24px;
    padding: 8px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(238, 246, 255, 0.76));
    box-shadow:
      0 18px 48px rgba(15, 23, 42, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
    transform: translateX(-50%);
    transition: opacity 420ms ease, transform 420ms ease, width 180ms ease, box-shadow 180ms ease;
  }

  .landing-page.is-dock-compact .landing-dock {
    box-shadow:
      0 14px 36px rgba(15, 23, 42, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  .landing-page.is-mobile-landing .landing-dock.is-visible {
    transform: translateX(-50%) translateY(0);
  }

  .landing-dock a {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .landing-dock a::before {
    width: 20px;
    height: 20px;
  }

  .landing-dock a:hover,
  .landing-dock a:focus-visible,
  .landing-dock a:hover + a,
  .landing-dock a:has(+ a:hover) {
    transform: none;
  }

  .landing-dock a span {
    display: none;
  }

  .landing-nav .language-switcher {
    position: static;
  }

  .landing-nav .language-switcher.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 60000;
    background: rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(6px);
    pointer-events: none;
  }

  .landing-nav .language-menu {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    top: auto;
    z-index: 60002;
    width: auto;
    max-width: none;
    max-height: min(54svh, 372px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px;
    padding: 14px 12px 16px;
    opacity: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    transform: translateY(22px) scale(0.98);
    transform-origin: bottom center;
    clip-path: inset(0 round 20px);
  }

  .landing-nav .language-switcher.is-open .language-menu {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
  }

  .landing-nav .language-menu::before {
    display: none;
  }

  .landing-nav .language-menu::-webkit-scrollbar {
    width: 8px;
  }

  .landing-nav .language-menu::-webkit-scrollbar-track {
    margin: 16px 0;
    border-radius: 999px;
    background: transparent;
  }

  .landing-nav .language-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 62%, #94a3b8);
    background-clip: padding-box;
  }

  .landing-nav .language-menu button {
    min-height: 42px;
    border-radius: 13px;
    padding: 8px 10px;
  }

  .landing-nav .language-menu span {
    font-size: 13px;
  }
}

@keyframes landing-mobile-card-shine {
  0% {
    opacity: 0;
    transform: rotate(17deg) translateX(0);
  }

  18% {
    opacity: 0.85;
  }

  52%,
  100% {
    opacity: 0;
    transform: rotate(17deg) translateX(330%);
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .landing-page.is-mobile-landing .landing-copy,
  .landing-page.is-mobile-landing .landing-console,
  .landing-page.is-mobile-landing .landing-dock,
  .landing-page.is-mobile-landing .console-grid article {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 760px) {
  .auth-page {
    min-height: 100svh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--blue) 20%, transparent), transparent 28%),
      radial-gradient(circle at 0% 44%, rgba(20, 184, 166, 0.13), transparent 30%),
      linear-gradient(180deg, rgba(240, 247, 255, 0.96) 0 46%, #ffffff 100%);
  }

  .auth-shell {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    min-height: 100svh;
    max-width: none;
    padding: 8px 14px 22px;
  }

  .auth-brand {
    display: grid;
    align-content: start;
    position: relative;
    z-index: 3;
    min-height: 0;
    gap: 13px;
    overflow: visible;
    border-radius: 0;
    padding: 76px 2px 0;
  }

  .auth-brand::before {
    width: 170px;
    height: 170px;
    border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
    border-left-width: 1px;
    border-radius: 46px;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.8), transparent 32%),
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 13%, #ffffff), rgba(255, 255, 255, 0.16));
    box-shadow: 0 24px 58px color-mix(in srgb, var(--blue) 10%, transparent);
    mask-image: none;
    opacity: 0.66;
    transform: rotate(10deg);
  }

  .auth-brand::after {
    right: 12px;
    bottom: auto;
    top: 116px;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background:
      var(--editor-icon) center / 22px 22px no-repeat,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 20%, #ffffff), rgba(255, 255, 255, 0.72));
    opacity: 0.72;
  }

  .auth-brand-top {
    top: 0;
    left: 0;
    right: 0;
    z-index: 70000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: auto;
    padding: 8px 12px 5px;
    transform: none;
  }

  .auth-brand-top:has(.language-switcher.is-open) {
    z-index: 120000;
  }

  .auth-page.is-language-menu-open .auth-brand,
  .auth-page:has(.language-switcher.is-open) .auth-brand {
    z-index: 120000;
  }

  .auth-page.is-language-menu-open .auth-brand-top {
    z-index: 120000;
  }

  .auth-page.is-language-menu-open .auth-card,
  .auth-page:has(.language-switcher.is-open) .auth-card {
    z-index: 0;
    pointer-events: none;
  }

  .auth-brand-top .back-link {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: var(--blue);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .auth-brand-top .language-current {
    min-height: 34px;
    max-width: 124px;
    padding: 5px 8px;
  }

  .auth-brand-top .language-current::after {
    width: 20px;
    height: 20px;
    background-size: 12px 12px, auto, auto;
  }

  .auth-brand-top .language-switcher {
    position: static;
  }

  .auth-brand-top .language-switcher.is-open {
    position: fixed;
    inset: 0;
    z-index: 160000;
    pointer-events: auto;
    isolation: isolate;
  }

  .auth-brand-top .language-switcher.is-open .language-current {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 160003;
    pointer-events: auto;
  }

  .auth-brand-top .language-switcher.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 160000;
    background: rgba(15, 23, 42, 0.3);
    pointer-events: none;
  }

  .auth-brand-top .language-menu {
    position: fixed;
    left: auto;
    right: 14px;
    top: 58px;
    bottom: auto;
    z-index: 160002;
    width: min(230px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    max-height: min(58svh, 420px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px;
    padding: 9px;
    opacity: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    clip-path: inset(0 round 20px);
    box-shadow: 0 28px 78px rgba(15, 23, 42, 0.3);
  }

  .auth-brand-top .language-switcher.is-open .language-menu {
    z-index: 160002;
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
  }

  .auth-brand-top .language-menu::before {
    display: none;
  }

  .auth-brand-top .language-menu::-webkit-scrollbar {
    width: 8px;
  }

  .auth-brand-top .language-menu::-webkit-scrollbar-track {
    margin: 16px 0;
    border-radius: 999px;
    background: transparent;
  }

  .auth-brand-top .language-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 62%, #94a3b8);
    background-clip: padding-box;
  }

  .auth-brand-top .language-menu button {
    min-height: 42px;
    border-radius: 13px;
    padding: 8px 10px;
  }

  .auth-brand h1 {
    max-width: 11ch;
    margin: 0;
    font-size: clamp(34px, 10vw, 46px);
    line-height: 1;
    white-space: normal;
  }

  .auth-mode-login .auth-brand h1 {
    font-size: clamp(17px, 7.8vw, 43px);
    white-space: normal;
  }

  .auth-brand p {
    max-width: 34rem;
    margin: 0;
    color: #42526a;
    font-size: 14.5px;
    line-height: 1.55;
  }

  .auth-brand .brand-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    margin-top: 2px;
  }

  .auth-brand .brand-pills span {
    justify-content: center;
    min-height: 40px;
    border-radius: 13px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 11px;
    font-weight: 850;
    line-height: 1;
    text-align: center;
  }

  .auth-proof {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    max-width: none;
    overflow: visible;
    margin: -4px -2px 0;
    padding: 7px 2px 9px;
  }

  .auth-proof article {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 76px;
    gap: 5px;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 10px 7px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.76)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 58%, #ffffff), rgba(20, 184, 166, 0.54), rgba(255, 255, 255, 0.72)) border-box;
    box-shadow:
      0 10px 24px color-mix(in srgb, var(--blue) 9%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
    text-align: center;
  }

  .auth-proof article::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 70%, #ffffff), rgba(20, 184, 166, 0.62), rgba(255, 255, 255, 0.4));
    opacity: 0.72;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  .auth-proof article::before {
    grid-row: auto;
    width: 20px;
    height: 20px;
  }

  .auth-proof strong {
    font-size: 11px;
    line-height: 1.05;
  }

  .auth-proof span {
    font-size: 9px;
    line-height: 1.15;
  }

  .auth-card {
    align-self: start;
    position: relative;
    z-index: 2;
    display: grid;
    gap: 17px;
    width: 100%;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, rgba(148, 163, 184, 0.2));
    border-radius: 22px;
    padding: 20px 18px 16px;
    background:
      radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 32%),
      rgba(255, 255, 255, 0.92);
    box-shadow: 0 22px 58px rgba(15, 23, 42, 0.12);
  }

  .auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 3px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, var(--blue), rgba(20, 184, 166, 0.72), color-mix(in srgb, var(--blue) 48%, #ffffff));
    opacity: 0.78;
  }

  .auth-card-head {
    gap: 5px;
  }

  .auth-card-head span {
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(148, 163, 184, 0.22));
    border-radius: 999px;
    padding: 5px 8px;
    background: color-mix(in srgb, var(--blue) 8%, #ffffff);
    font-size: 10px;
    letter-spacing: 0;
  }

  .auth-card-head h2 {
    font-size: clamp(28px, 8vw, 38px);
  }

  .auth-card-head p {
    font-size: 13px;
    line-height: 1.45;
  }

  .auth-form {
    gap: 14px;
  }

  .auth-field {
    gap: 7px;
  }

  .auth-field label {
    font-size: 13px;
  }

  .auth-field input {
    min-height: 52px;
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 16px;
    line-height: 1.25;
  }

  .auth-field.has-password-toggle input {
    padding-right: 52px;
  }

  .password-toggle {
    right: 8px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .auth-card .primary-action {
    min-height: 52px;
    border-radius: 14px;
    font-size: 16px;
    box-shadow: 0 16px 36px color-mix(in srgb, var(--blue) 22%, transparent);
  }

  .auth-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, rgba(148, 163, 184, 0.22));
    border-radius: 14px;
    padding: 10px 12px;
    background: color-mix(in srgb, var(--blue) 6%, rgba(255, 255, 255, 0.72));
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
  }

  .auth-switch a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 1px 6px;
    background: transparent;
  }

  .auth-tip-popover {
    display: none;
  }
}

@media (max-width: 760px) {
  .checkout-wizard-shell,
  .checkout-wizard-shell *,
  .checkout-wizard-shell *::before,
  .checkout-wizard-shell *::after {
    box-sizing: border-box;
  }

  .auth-page:has(.checkout-wizard-shell) {
    overflow-x: hidden;
    background:
      radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 30%),
      radial-gradient(circle at 92% 34%, rgba(20, 184, 166, 0.13), transparent 28%),
      linear-gradient(180deg, #f8fbff 0%, color-mix(in srgb, var(--blue) 7%, #ffffff) 46%, #ffffff 100%);
  }

  .checkout-shell.checkout-wizard-shell {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 18px;
    box-sizing: border-box;
    width: auto;
    min-height: 100svh;
    max-width: none;
    padding: 8px 14px 24px;
  }

  .checkout-wizard-shell .checkout-brand {
    position: relative;
    z-index: 3;
    gap: 13px;
    min-width: 0;
    padding: 0 2px;
  }

  .checkout-wizard-shell .checkout-brand::before {
    inset: 64px auto auto -78px;
    display: block;
    width: 210px;
    height: 210px;
    border: 1px solid color-mix(in srgb, var(--blue) 16%, transparent);
    border-left-width: 1px;
    border-radius: 48px;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.82), transparent 32%),
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 13%, #ffffff), rgba(255, 255, 255, 0.18));
    box-shadow: 0 24px 58px color-mix(in srgb, var(--blue) 10%, transparent);
    mask-image: none;
    opacity: 0.62;
    transform: rotate(10deg);
  }

  .checkout-wizard-shell .checkout-brand::after {
    top: 108px;
    right: 4px;
    bottom: auto;
    display: block;
    width: 46px;
    height: 46px;
    border-radius: 16px;
    background:
      var(--editor-icon) center / 22px 22px no-repeat,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 20%, #ffffff), rgba(255, 255, 255, 0.72));
    opacity: 0.68;
  }

  .checkout-topline {
    position: static;
    z-index: 70000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    width: auto;
    gap: 8px;
    padding: 8px 0 2px;
    transform: none;
  }

  .checkout-topline:has(.language-switcher.is-open),
  .checkout-brand:has(.language-switcher.is-open),
  .auth-page:has(.checkout-topline .language-switcher.is-open) .checkout-brand {
    z-index: 120000;
  }

  .auth-page:has(.checkout-topline .language-switcher.is-open) .checkout-wizard-card {
    z-index: 0;
    pointer-events: none;
  }

  .checkout-topline .back-link {
    min-width: 0;
    overflow: hidden;
    color: var(--blue);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .checkout-topline .language-current {
    justify-self: end;
    min-width: 0;
    width: 108px;
    min-height: 34px;
    max-width: 108px;
    padding: 5px 8px;
  }

  .checkout-topline .language-current span {
    min-width: 0;
    overflow: hidden;
    max-width: 58px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .checkout-topline .language-current::after {
    width: 20px;
    height: 20px;
    background-size: 12px 12px, auto, auto;
  }

  .checkout-topline .language-switcher {
    position: static;
    justify-self: end;
    min-width: 0;
    max-width: 108px;
  }

  .checkout-topline .language-switcher.is-open {
    position: fixed;
    inset: 0;
    z-index: 120000;
    pointer-events: auto;
  }

  .checkout-topline .language-switcher.is-open .language-current {
    position: fixed;
    top: 8px;
    right: 12px;
    pointer-events: auto;
  }

  .checkout-topline .language-switcher.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 119998;
    background: rgba(15, 23, 42, 0.3);
    pointer-events: none;
  }

  .checkout-topline .language-menu {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    top: auto;
    z-index: 120001;
    width: auto;
    max-width: none;
    max-height: min(54svh, 372px);
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 20px;
    padding: 14px 12px 16px;
    opacity: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    transform: translateY(22px) scale(0.98);
    transform-origin: bottom center;
    clip-path: inset(0 round 20px);
    box-shadow: 0 28px 78px rgba(15, 23, 42, 0.3);
  }

  .checkout-topline .language-switcher.is-open .language-menu {
    z-index: 120001;
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
  }

  .checkout-topline .language-menu::before {
    display: none;
  }

  .checkout-topline .language-menu::-webkit-scrollbar {
    width: 8px;
  }

  .checkout-topline .language-menu::-webkit-scrollbar-track {
    margin: 16px 0;
    border-radius: 999px;
    background: transparent;
  }

  .checkout-topline .language-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 62%, #94a3b8);
    background-clip: padding-box;
  }

  .checkout-topline .language-menu button {
    min-height: 42px;
    border-radius: 13px;
    padding: 8px 10px;
  }

  .checkout-copy h1 {
    margin: 0;
    font-size: clamp(11px, 4vw, 14px);
    line-height: 1;
  }

  .checkout-copy p {
    max-width: 34rem;
    margin: 0;
    color: #42526a;
    font-size: 14.5px;
    line-height: 1.55;
  }

  .checkout-summary {
    max-width: none;
    border: 1px solid transparent;
    border-radius: 20px;
    padding: 16px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.84)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 52%, #ffffff), rgba(20, 184, 166, 0.5), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow:
      0 18px 42px color-mix(in srgb, var(--blue) 11%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  .checkout-summary::before {
    height: 3px;
    background: linear-gradient(90deg, var(--blue), rgba(20, 184, 166, 0.74));
  }

  .checkout-summary span {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .03em;
    text-transform: uppercase;
  }

  .checkout-summary strong {
    font-size: 18px;
    line-height: 1.15;
  }

  .checkout-benefits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
    overflow: visible;
    padding: 4px 0 2px;
  }

  .checkout-benefits article {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    min-height: 82px;
    gap: 5px;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 15px;
    padding: 11px 8px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.74)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 52%, #ffffff), rgba(20, 184, 166, 0.46), rgba(255, 255, 255, 0.74)) border-box;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 8%, transparent);
    text-align: center;
  }

  .checkout-benefits article::before {
    grid-row: auto;
    width: 25px;
    height: 25px;
    background: var(--blue);
  }

  .checkout-benefits strong {
    font-size: 12px;
    line-height: 1.12;
  }

  .checkout-benefits span {
    font-size: 10.5px;
    line-height: 1.22;
  }

  .checkout-help {
    display: flex;
    justify-content: space-between;
    width: 100%;
    border-radius: 15px;
    padding: 9px 10px;
    font-size: 12px;
  }

  .checkout-wizard-card {
    position: relative;
    z-index: 2;
    display: grid;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 23px;
    padding: 18px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 44%, #ffffff), rgba(20, 184, 166, 0.36), rgba(255, 255, 255, 0.72)) border-box;
    box-shadow:
      0 24px 60px color-mix(in srgb, var(--blue) 15%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.76);
  }

  .checkout-wizard-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), rgba(20, 184, 166, 0.8));
  }

  .checkout-wizard-card .section-title {
    align-items: start;
    gap: 4px;
    margin: 0;
  }

  .checkout-wizard-card .section-title h2 {
    font-size: clamp(24px, 7vw, 34px);
    line-height: 1;
  }

  .checkout-wizard-card .section-title span {
    font-size: 11px;
  }

  .checkout-wizard-card .checkout-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, rgba(148, 163, 184, 0.22));
    border-radius: 17px;
    padding: 5px;
    background: color-mix(in srgb, var(--blue) 5%, rgba(255, 255, 255, 0.76));
  }

  .checkout-progress button {
    min-height: 42px;
    gap: 0;
    border: 0;
    border-radius: 13px;
    padding: 6px;
    background: transparent;
    font-size: 0;
  }

  .checkout-progress button b {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .checkout-progress button.is-active {
    background: #ffffff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--blue) 13%, transparent);
    transform: none;
  }

  .checkout-flow {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .checkout-wizard-card .checkout-step {
    gap: 14px;
    min-height: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
  }

  .checkout-step-head {
    width: fit-content;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, rgba(148, 163, 184, 0.24));
    border-radius: 999px;
    padding: 5px 9px 5px 6px;
    background: color-mix(in srgb, var(--blue) 6%, rgba(255, 255, 255, 0.76));
  }

  .checkout-step-head span {
    font-size: 12px;
  }

  .checkout-wizard-card .checkout-step .checkout-plan-picker {
    display: flex;
    gap: 12px;
    width: auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -18px;
    padding: 2px 18px 14px;
    scroll-padding: 18px;
    scroll-snap-type: x mandatory;
    scrollbar-color: color-mix(in srgb, var(--blue) 58%, #94a3b8) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  .checkout-wizard-card .checkout-step .checkout-plan-picker::-webkit-scrollbar {
    height: 8px;
  }

  .checkout-wizard-card .checkout-step .checkout-plan-picker::-webkit-scrollbar-track {
    margin: 0 18px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 7%, rgba(148, 163, 184, 0.18));
  }

  .checkout-wizard-card .checkout-step .checkout-plan-picker::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 62%, #94a3b8);
    background-clip: padding-box;
  }

  .checkout-plan-option {
    flex: 0 0 calc(100% - 34px);
    width: calc(100% - 34px);
    max-width: calc(100% - 34px);
    min-width: calc(100% - 34px);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .checkout-wizard-card .checkout-step .plan-button {
    min-height: 132px;
    border-radius: 18px;
    padding: 15px 42px 15px 14px;
  }

  .checkout-wizard-card .checkout-step .plan-button::before {
    height: 3px;
  }

  .checkout-account-fields {
    gap: 12px;
  }

  .checkout-account-fields .field {
    gap: 7px;
  }

  .checkout-account-fields .field > span:first-child {
    font-size: 12px;
  }

  .checkout-account-fields input,
  .checkout-input-wrap input {
    min-height: 52px;
    border-radius: 14px;
    padding: 13px 14px;
    font-size: 16px;
    line-height: 1.25;
  }

  .field.has-password-toggle input {
    padding-right: 52px;
  }

  .checkout-input-wrap .password-toggle {
    right: 6px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
  }

  .checkout-wizard-card .payment-box {
    border-radius: 18px;
    padding: 16px;
  }

  .checkout-wizard-card .payment-box > strong {
    font-size: clamp(36px, 12vw, 46px);
  }

  .checkout-step-actions {
    display: grid;
    grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
    gap: 10px;
    margin-top: 2px;
  }

  .checkout-step-plan .checkout-step-actions {
    grid-template-columns: 1fr;
  }

  .checkout-step-actions .primary-action,
  .checkout-step-actions .secondary-link {
    min-height: 52px;
    border-radius: 14px;
    padding: 11px 13px;
    font-size: 15px;
  }

  .checkout-step-actions .secondary-link {
    border: 1px solid color-mix(in srgb, var(--blue) 14%, rgba(148, 163, 184, 0.24));
    background: rgba(255, 255, 255, 0.72);
  }
}

@media (max-width: 760px) {
  .pricing-page {
    min-height: 100svh;
    overflow-x: hidden;
    padding-bottom: 0;
    background:
      radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 28%),
      radial-gradient(circle at 0% 42%, rgba(20, 184, 166, 0.13), transparent 30%),
      linear-gradient(180deg, rgba(240, 247, 255, 0.96) 0 44%, #f8fbff 100%);
    background-attachment: fixed;
  }

  .pricing-page .pricing-shell,
  .pricing-page .pricing-shell *,
  .pricing-page .pricing-shell *::before,
  .pricing-page .pricing-shell *::after {
    box-sizing: border-box;
  }

  .pricing-page .pricing-shell {
    display: grid;
    gap: 16px;
    width: auto;
    max-width: none;
    min-height: 0;
    align-content: start;
    padding: 10px 14px 0;
  }

  .pricing-page .landing-nav:has(.language-switcher.is-open) {
    z-index: 120000;
  }

  .pricing-page:has(.language-switcher.is-open) .pricing-shell {
    pointer-events: none;
  }

  .pricing-page .landing-nav nav {
    position: static;
    overflow: visible;
  }

  .pricing-page .landing-nav .language-switcher {
    position: static;
    justify-self: end;
    min-width: 0;
    max-width: 118px;
  }

  .pricing-page .landing-nav .language-current {
    justify-self: end;
    width: 118px;
    min-width: 0;
    max-width: 118px;
    border-radius: 999px;
  }

  .pricing-page .landing-nav .language-current span {
    min-width: 0;
    overflow: hidden;
    max-width: 66px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pricing-page .landing-nav .nav-primary[data-icon] {
    position: relative;
    overflow: hidden;
    display: inline-grid;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    place-items: center;
    justify-items: center;
    align-items: center;
    grid-auto-flow: column;
    border: 1px solid color-mix(in srgb, var(--blue) 22%, rgba(255, 255, 255, 0.88));
    border-radius: 999px;
    padding: 0;
    background:
      radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.98), transparent 34%),
      linear-gradient(145deg, color-mix(in srgb, var(--blue) 12%, #ffffff), rgba(255, 255, 255, 0.78));
    color: var(--ink);
    font-size: 0;
    box-shadow:
      0 14px 30px color-mix(in srgb, var(--blue) 14%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.95);
  }

  .pricing-page .landing-nav .nav-primary[data-icon]::before {
    position: relative;
    z-index: 1;
    width: 19px;
    height: 19px;
    margin: 0;
    background: currentColor;
    mask: var(--editor-icon) center / contain no-repeat;
    -webkit-mask: var(--editor-icon) center / contain no-repeat;
  }

  .pricing-page .landing-nav .nav-primary[data-icon]:hover,
  .pricing-page .landing-nav .nav-primary[data-icon]:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 48%, rgba(255, 255, 255, 0.88));
    background:
      radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 1), transparent 34%),
      linear-gradient(145deg, color-mix(in srgb, var(--blue) 18%, #ffffff), rgba(255, 255, 255, 0.88));
    box-shadow:
      0 16px 36px color-mix(in srgb, var(--blue) 20%, transparent),
      0 0 0 5px color-mix(in srgb, var(--blue) 9%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.98);
    transform: translateY(-1px);
  }

  .pricing-page .landing-nav .language-switcher.is-open {
    position: fixed;
    inset: 0;
    z-index: 120000;
    max-width: none;
    pointer-events: auto;
  }

  .pricing-page .landing-nav .language-switcher.is-open .language-current {
    position: fixed;
    top: 8px;
    right: 12px;
    z-index: 120002;
    pointer-events: auto;
  }

  .pricing-page .landing-nav .language-switcher.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 119998;
    background:
      radial-gradient(circle at 86% 12%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 30%),
      rgba(15, 23, 42, 0.32);
    pointer-events: none;
  }

  .pricing-page .landing-nav .language-menu {
    display: grid;
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
    top: auto;
    z-index: 120001;
    width: auto;
    max-width: none;
    max-height: min(56svh, 392px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.38));
    border-radius: 22px;
    padding: 14px 12px 16px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 48%, #ffffff), rgba(20, 184, 166, 0.44), rgba(255, 255, 255, 0.78)) border-box;
    opacity: 0;
    visibility: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    transform: translateY(22px) scale(0.98);
    transform-origin: bottom center;
    clip-path: inset(0 round 22px);
    box-shadow: 0 30px 82px rgba(15, 23, 42, 0.34);
  }

  .pricing-page .landing-nav .language-switcher.is-open .language-menu {
    display: grid;
    z-index: 120001;
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
  }

  .pricing-page .landing-nav .language-switcher.is-open .language-scrollbar {
    z-index: 120002;
  }

  .pricing-page .landing-nav .language-menu::before {
    display: none;
  }

  .pricing-page .landing-nav .language-menu::-webkit-scrollbar {
    width: 8px;
  }

  .pricing-page .landing-nav .language-menu::-webkit-scrollbar-track {
    margin: 16px 0;
    border-radius: 999px;
    background: transparent;
  }

  .pricing-page .landing-nav .language-menu::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 62%, #94a3b8);
    background-clip: padding-box;
  }

  .pricing-page .landing-nav .language-menu button {
    min-height: 43px;
    border-radius: 14px;
    padding: 8px 10px;
  }

  .pricing-page .pricing-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    overflow: hidden;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--blue) 12%, rgba(148, 163, 184, 0.2));
    border-radius: 22px;
    padding: 16px;
    background:
      radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 34%),
      linear-gradient(135deg, rgba(255, 255, 255, 0.9), color-mix(in srgb, var(--blue) 5%, #ffffff));
    box-shadow: 0 22px 54px color-mix(in srgb, var(--blue) 12%, transparent);
  }

  .pricing-page .pricing-hero::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--blue), rgba(20, 184, 166, 0.76));
  }

  .pricing-page .pricing-hero .eyebrow {
    width: fit-content;
    margin: 0 0 8px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(148, 163, 184, 0.2));
    border-radius: 999px;
    padding: 5px 8px;
    background: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    letter-spacing: 0;
  }

  .pricing-page .pricing-hero h1 {
    margin: 0;
    font-size: clamp(9px, 4vw, 14px);
    line-height: .96;
  }

  .pricing-page .pricing-hero > p {
    max-width: 34rem;
    color: #42526a;
    font-size: 14px;
    line-height: 1.55;
  }

  .pricing-page .pricing-return-link {
    width: fit-content;
    min-height: 36px;
    border-radius: 999px;
    padding: 8px 11px;
    font-size: 12px;
  }

  .pricing-page .billing-state-banner {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
    border-radius: 17px;
    padding: 12px;
  }

  .pricing-page .billing-state-banner a {
    width: fit-content;
    min-height: 34px;
    padding: 7px 10px;
  }

  .pricing-page .pricing-grid {
    display: flex;
    gap: 12px;
    width: auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 -14px;
    padding: 2px 14px 40px;
    scroll-padding: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .pricing-page .pricing-grid::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .pricing-page .price-card {
    flex: 0 0 calc(100% - 34px);
    width: calc(100% - 34px);
    max-width: calc(100% - 34px);
    min-width: calc(100% - 34px);
    min-height: 0;
    gap: 11px;
    border: 1px solid transparent;
    border-radius: 21px;
    padding: 17px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    background:
      linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.86)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--plan-accent) 48%, #ffffff), rgba(20, 184, 166, 0.36), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow:
      0 20px 50px color-mix(in srgb, var(--plan-accent) 13%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.78);
  }

  .pricing-page .price-card:hover {
    transform: none;
  }

  .pricing-page .price-card.is-featured,
  .pricing-page .price-card.is-focused {
    box-shadow:
      0 24px 62px color-mix(in srgb, var(--plan-accent) 18%, transparent),
      0 0 0 5px color-mix(in srgb, var(--plan-accent) 8%, transparent);
  }

  .pricing-page .price-card::before {
    height: 4px;
    opacity: .95;
  }

  .pricing-page .price-card-head {
    align-items: start;
  }

  .pricing-page .price-card-head span {
    max-width: 56%;
    overflow: hidden;
    padding: 5px 8px;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pricing-page .price-card-head strong {
    font-size: 20px;
    line-height: 1.05;
    text-align: right;
  }

  .pricing-page .price-value strong {
    font-size: clamp(42px, 14vw, 58px);
  }

  .pricing-page .price-value span {
    font-size: 13px;
    font-weight: 760;
  }

  .pricing-page .storage-limit {
    min-height: 34px;
    border-radius: 999px;
    padding: 7px 10px;
  }

  .pricing-page .price-card h2 {
    font-size: 19px;
    line-height: 1.16;
  }

  .pricing-page .price-card p {
    font-size: 13px;
    line-height: 1.48;
  }

  .pricing-page .feature-list {
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--plan-accent) 12%, rgba(148, 163, 184, 0.22));
    border-radius: 16px;
    padding: 11px;
    background: rgba(255, 255, 255, 0.58);
    font-size: 12.5px;
    line-height: 1.32;
  }

  .pricing-page .price-action {
    min-height: 52px;
    border-radius: 15px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--plan-accent) 88%, #ffffff), var(--plan-accent));
    color: #ffffff;
    font-size: 15px;
    box-shadow: 0 16px 34px color-mix(in srgb, var(--plan-accent) 18%, transparent);
  }

  .pricing-page .trust-band {
    display: none;
  }

  .pricing-page .pricing-dock {
    display: none;
  }
}

@media (max-width: 760px) {
  body.video-projects-page,
  body.cherryx-pay-page {
    padding-bottom: max(112px, calc(env(safe-area-inset-bottom) + 96px));
  }

  .mobile-workspace-dock {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 93000;
    display: flex;
    gap: 6px;
    width: min(100% - 24px, 390px);
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, rgba(255, 255, 255, 0.86));
    border-radius: 24px;
    padding: 7px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.97), color-mix(in srgb, var(--blue) 3%, rgba(255, 255, 255, 0.94)));
    box-shadow:
      0 14px 32px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px) saturate(116%);
    transform: translateX(-50%);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0, #000 12px, #000 calc(100% - 12px), rgba(0, 0, 0, 0.72) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0, #000 12px, #000 calc(100% - 12px), rgba(0, 0, 0, 0.72) 100%);
  }

  .mobile-workspace-dock::-webkit-scrollbar {
    display: none;
  }

  .mobile-workspace-dock a {
    position: relative;
    flex: 0 0 44px;
    display: inline-grid;
    place-items: center;
    justify-items: center;
    grid-auto-flow: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    min-width: 44px;
    width: 44px;
    min-height: 44px;
    height: 44px;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, rgba(148, 163, 184, 0.24));
    border-radius: 15px;
    padding: 0;
    background: rgba(255, 255, 255, 0.82);
    color: var(--blue);
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
  }

  .mobile-workspace-dock a::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--dock-icon-size, 20px);
    height: var(--dock-icon-size, 20px);
    background: currentColor;
    transform: translate(calc(-50% + var(--dock-icon-x, 0px)), calc(-50% + var(--dock-icon-y, 0px)));
    -webkit-mask: var(--editor-icon) center / var(--dock-icon-size, 20px) var(--dock-icon-size, 20px) no-repeat;
    mask: var(--editor-icon) center / var(--dock-icon-size, 20px) var(--dock-icon-size, 20px) no-repeat;
  }

  .mobile-workspace-dock [data-icon="file-user"]::before {
    --dock-icon-size: 19px;
    --dock-icon-x: 0.5px;
  }

  .mobile-workspace-dock [data-icon="clapperboard"]::before,
  .mobile-workspace-dock [data-icon="music-2"]::before,
  .mobile-workspace-dock [data-icon="palette"]::before {
    --dock-icon-size: 19px;
  }

  .mobile-workspace-dock [data-icon="coins"]::before {
    --dock-icon-size: 18px;
    --dock-icon-x: 0.5px;
  }

  .mobile-workspace-dock a:hover,
  .mobile-workspace-dock a:focus-visible,
  .mobile-workspace-dock a.is-active {
    border-color: color-mix(in srgb, var(--blue) 48%, rgba(148, 163, 184, 0.28));
    background:
      radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.98), transparent 42%),
      color-mix(in srgb, var(--blue) 17%, #ffffff);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 17%, transparent);
    transform: translateY(-1px);
  }

  .mobile-workspace-dock a.is-active {
    color: #0f4fd0;
  }

  .theme-dark .mobile-workspace-dock {
    border-color: color-mix(in srgb, var(--blue) 24%, rgba(84, 102, 137, 0.5));
    background:
      linear-gradient(180deg, rgba(17, 26, 46, 0.94), rgba(11, 18, 32, 0.86)),
      #111a2e;
  }

  .theme-dark .mobile-workspace-dock a {
    background: rgba(15, 23, 42, 0.68);
    color: color-mix(in srgb, var(--blue) 46%, #ffffff);
  }

  .theme-dark .mobile-workspace-dock a:hover,
  .theme-dark .mobile-workspace-dock a:focus-visible,
  .theme-dark .mobile-workspace-dock a.is-active {
    background:
      radial-gradient(circle at 30% 15%, rgba(255, 255, 255, 0.14), transparent 40%),
      color-mix(in srgb, var(--blue) 24%, #111a2e);
    color: #ffffff;
  }

  body.is-mobile-workspace {
    overflow-x: hidden;
    padding-bottom: 88px;
    background:
      radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 28%),
      radial-gradient(circle at 0% 46%, rgba(20, 184, 166, 0.12), transparent 30%),
      linear-gradient(180deg, rgba(240, 247, 255, 0.96) 0 42%, #ffffff 100%);
  }

  body.is-mobile-workspace::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 85000;
    background:
      radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 30%),
      rgba(15, 23, 42, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  body.is-mobile-workspace.is-mobile-jobs-open::before,
  body.is-mobile-workspace.is-mobile-account-open::before {
    opacity: 1;
    pointer-events: auto;
  }

  body.is-mobile-workspace.is-mobile-account-open .studio-topbar,
  body.is-mobile-workspace:has(.account-panel-content .language-switcher.is-open) .studio-topbar {
    z-index: 94000;
  }

  body.is-mobile-workspace .studio-topbar {
    position: sticky;
    top: 0;
    z-index: 70000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 12px 5px;
    background: transparent;
  }

  body.is-mobile-workspace .studio-topbar .topbar-copy {
    min-width: 0;
  }

  body.is-mobile-workspace .studio-topbar .eyebrow {
    overflow: hidden;
    max-width: 16ch;
    margin: 0 0 1px;
    color: var(--blue);
    font-size: 10px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-mobile-workspace .studio-topbar h1 {
    overflow: hidden;
    max-width: 18ch;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-mobile-workspace .studio-topbar .topbar-note {
    display: none;
  }

  body.is-mobile-workspace .account-panel {
    position: static;
    z-index: 91000;
    display: grid;
    justify-self: end;
    max-width: none;
    transform: none;
  }

  body.is-mobile-workspace .account-panel-toggle {
    --editor-icon: url("https://api.iconify.design/lucide/sliders-horizontal.svg?color=%232563eb");
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--blue) 22%, rgba(255, 255, 255, 0.84));
    border-radius: 14px;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.98), transparent 42%),
      var(--editor-icon) center / 20px 20px no-repeat,
      linear-gradient(145deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 7%, #ffffff));
    color: var(--blue);
    box-shadow:
      0 14px 34px color-mix(in srgb, var(--blue) 13%, transparent),
      0 0 0 5px rgba(255, 255, 255, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  body.is-mobile-workspace.subscription-drawer-open .account-panel-toggle {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.84);
  }

  body.is-mobile-workspace .account-panel-toggle::before {
    display: none;
  }

  body.is-mobile-workspace .limits.account-panel-content {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(20px, calc(env(safe-area-inset-bottom) + 30px));
    z-index: 94001;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
    max-height: min(58svh, 520px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 14px;
    background:
      radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 30%) padding-box,
      linear-gradient(145deg, #ffffff, #f8fbff) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 48%, #ffffff), rgba(20, 184, 166, 0.42), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow:
      0 30px 82px rgba(15, 23, 42, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.82);
    opacity: 0;
    pointer-events: none;
    transform: translateY(22px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body.is-mobile-workspace .limits.account-panel-content::before {
    content: "";
    grid-column: 1 / -1;
    justify-self: center;
    width: 44px;
    height: 4px;
    margin: -3px 0 3px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 24%, #dbe7fb);
  }

  body.is-mobile-workspace .account-panel.is-open .limits.account-panel-content {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  body.is-mobile-workspace .account-panel-content .language-switcher,
  body.is-mobile-workspace .account-panel-content .subscription-meter,
  body.is-mobile-workspace .account-panel-content > span,
  body.is-mobile-workspace .account-panel-content .cherryx-balance-badge {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.is-mobile-workspace .account-panel-content .language-current,
  body.is-mobile-workspace .account-panel-content .topbar-link,
  body.is-mobile-workspace .account-panel-content .topbar-form button,
  body.is-mobile-workspace .account-panel-content .subscription-meter,
  body.is-mobile-workspace .account-panel-content > span,
  body.is-mobile-workspace .account-panel-content .cherryx-balance-badge {
    min-height: 40px;
    border-radius: 13px;
  }

  body.is-mobile-workspace .account-panel-content .topbar-link,
  body.is-mobile-workspace .account-panel-content .topbar-form button {
    width: 100%;
    padding: 10px 12px;
    font-size: 12px;
  }

  body.is-mobile-workspace .account-panel-content > span {
    display: flex;
    align-items: center;
    overflow: hidden;
    max-width: none;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-mobile-workspace .account-panel-content .account-avatar {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 2px solid rgba(255, 255, 255, 0.96);
    border-radius: 999px;
    padding: 0;
    background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--blue) 8%, #ffffff));
    box-shadow:
      0 14px 32px color-mix(in srgb, var(--blue) 16%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    object-fit: cover;
  }

  body.is-mobile-workspace .account-panel-content .account-settings-shortcut {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, var(--blue) 24%, #ffffff);
    border-radius: 999px;
    padding: 6px;
    background:
      radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.98), transparent 42%),
      linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--blue) 8%, #ffffff));
    color: var(--blue);
    box-shadow:
      0 12px 28px color-mix(in srgb, var(--blue) 15%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  body.is-mobile-workspace .account-panel-content .account-settings-shortcut::before {
    content: "";
    width: 20px;
    height: 20px;
    background: currentColor;
    -webkit-mask: url("https://api.iconify.design/lucide/settings.svg") center / contain no-repeat;
    mask: url("https://api.iconify.design/lucide/settings.svg") center / contain no-repeat;
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1);
  }

  body.is-mobile-workspace .account-panel-content .account-settings-shortcut:hover,
  body.is-mobile-workspace .account-panel-content .account-settings-shortcut:focus-visible {
    border-color: color-mix(in srgb, var(--blue) 42%, #ffffff);
    box-shadow:
      0 16px 34px color-mix(in srgb, var(--blue) 20%, transparent),
      0 0 0 5px color-mix(in srgb, var(--blue) 9%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    transform: translateY(-1px);
  }

  body.is-mobile-workspace .account-panel-content .account-settings-shortcut:hover::before,
  body.is-mobile-workspace .account-panel-content .account-settings-shortcut:focus-visible::before {
    transform: rotate(160deg);
  }

  body.is-mobile-workspace .account-panel-content .account-settings-shortcut:active::before {
    transform: rotate(260deg) scale(0.94);
  }

  body.is-mobile-workspace .account-panel-content .account-settings-shortcut.is-spinning {
    pointer-events: none;
  }

  body.is-mobile-workspace .account-panel-content .account-settings-shortcut.is-spinning::before {
    animation: accountSettingsSpin 320ms cubic-bezier(.2, .8, .2, 1) both;
  }

  body.is-mobile-workspace .account-panel-content .account-settings-link,
  body.is-mobile-workspace .account-panel-content .account-settings-link[href] {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    justify-items: center;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    gap: 8px;
    padding: 9px 12px;
    background-image: none;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.1;
    text-align: center;
  }

  body.is-mobile-workspace .account-panel-content .account-settings-link::before {
    content: "";
    justify-self: end;
    width: 17px;
    height: 17px;
    background: currentColor;
    opacity: 0.82;
    -webkit-mask: url("https://api.iconify.design/lucide/settings.svg") center / contain no-repeat;
    mask: url("https://api.iconify.design/lucide/settings.svg") center / contain no-repeat;
    transition: transform 420ms cubic-bezier(.2, .8, .2, 1), opacity 180ms ease;
  }

  body.is-mobile-workspace .account-panel-content .account-settings-link:hover::before,
  body.is-mobile-workspace .account-panel-content .account-settings-link:focus-visible::before {
    opacity: 1;
    transform: rotate(160deg);
  }

  body.is-mobile-workspace .account-panel-content .account-settings-link:active::before {
    transform: rotate(260deg) scale(0.94);
  }

  body.is-mobile-workspace .account-panel-content .account-settings-link.is-spinning::before {
    animation: accountSettingsSpin 320ms cubic-bezier(.2, .8, .2, 1) both;
  }

  body.is-mobile-workspace .account-panel-content .language-switcher.is-open {
    position: fixed;
    inset: 0;
    z-index: 96000;
    overflow: visible;
    pointer-events: none;
  }

  body.is-mobile-workspace .account-panel-content .language-switcher.is-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 95998;
    background: rgba(15, 23, 42, 0.26);
    pointer-events: auto;
  }

  body.is-mobile-workspace .account-panel-content .language-switcher.is-open .language-current {
    display: none;
  }

  body.is-mobile-workspace .account-panel-content .language-menu {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 28px));
    top: auto;
    z-index: 96001;
    width: auto;
    max-height: min(50svh, 380px);
    overflow-y: auto;
    border-radius: 22px;
    padding: 14px 12px 16px;
    background:
      radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 32%),
      linear-gradient(180deg, #ffffff, #f8fbff);
    opacity: 0;
    visibility: hidden;
    transform: translateY(22px) scale(0.98);
    clip-path: inset(0 round 22px);
    box-shadow:
      0 30px 82px rgba(15, 23, 42, 0.28),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  body.is-mobile-workspace .account-panel-content .language-switcher.is-open .language-menu {
    position: fixed;
    top: auto;
    left: 14px;
    right: 14px;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 28px));
    opacity: 1;
    width: auto;
    max-height: min(50svh, 380px);
    overflow-x: hidden;
    overflow-y: auto;
    visibility: visible;
    z-index: 96001;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  body.is-mobile-workspace .account-panel-content .language-menu button {
    min-height: 44px;
    border-color: color-mix(in srgb, var(--blue) 11%, #dbe7fb);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  }

  body.is-mobile-workspace .account-panel-content .language-menu button.is-active {
    border-color: color-mix(in srgb, var(--blue) 38%, #dbe7fb);
    background:
      radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 34%),
      #ffffff;
  }

  body.is-mobile-workspace > .language-switcher.is-mobile-language-sheet {
    position: fixed;
    inset: 0;
    z-index: 96000;
    overflow: visible;
    pointer-events: none;
  }

  body.is-mobile-workspace > .language-switcher.is-mobile-language-sheet::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 95998;
    background:
      radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 30%),
      rgba(15, 23, 42, 0.28);
    pointer-events: auto;
  }

  body.is-mobile-workspace > .language-switcher.is-mobile-language-sheet .language-current {
    display: none;
  }

  body.is-mobile-workspace > .language-switcher.is-mobile-language-sheet .language-menu {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 28px));
    top: auto;
    z-index: 96001;
    display: grid;
    width: auto;
    max-width: none;
    max-height: min(50svh, 380px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid transparent;
    border-radius: 22px;
    padding: 14px 12px 16px;
    background:
      radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 32%) padding-box,
      linear-gradient(180deg, #ffffff, #f8fbff) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #ffffff), rgba(20, 184, 166, 0.34), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow:
      0 30px 82px rgba(15, 23, 42, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    overscroll-behavior: contain;
    clip-path: inset(0 round 22px);
  }

  body.is-mobile-workspace > .language-switcher.is-mobile-language-sheet .language-menu button {
    min-height: 44px;
    border-color: color-mix(in srgb, var(--blue) 11%, #dbe7fb);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
  }

  body.is-mobile-workspace > .language-switcher.is-mobile-language-sheet .language-menu button.is-active {
    border-color: color-mix(in srgb, var(--blue) 38%, #dbe7fb);
    background:
      radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 34%),
      #ffffff;
  }

  .mobile-language-modal,
  body.is-mobile-workspace .mobile-language-modal {
    position: fixed;
    inset: 0;
    z-index: 97000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
  }

  .mobile-language-modal.is-open,
  body.is-mobile-workspace .mobile-language-modal.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-language-backdrop,
  body.is-mobile-workspace .mobile-language-backdrop {
    position: fixed;
    inset: 0;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    padding: 0;
    background:
      radial-gradient(circle at 86% 10%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 30%),
      rgba(15, 23, 42, 0.28);
  }

  .mobile-language-panel,
  body.is-mobile-workspace .mobile-language-panel {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(24px, calc(env(safe-area-inset-bottom) + 28px));
    z-index: 97001;
    display: grid;
    gap: 8px;
    max-height: min(50svh, 380px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid transparent;
    border-radius: 22px;
    padding: 14px 12px 16px;
    background:
      radial-gradient(circle at 84% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 32%) padding-box,
      linear-gradient(180deg, #ffffff, #f8fbff) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #ffffff), rgba(20, 184, 166, 0.34), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow:
      0 30px 82px rgba(15, 23, 42, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overscroll-behavior: contain;
    transform: translateY(22px) scale(0.98);
    transition: transform 180ms ease;
  }

  .mobile-language-modal.is-open .mobile-language-panel,
  body.is-mobile-workspace .mobile-language-modal.is-open .mobile-language-panel {
    transform: translateY(0) scale(1);
  }

  .mobile-language-handle,
  body.is-mobile-workspace .mobile-language-handle {
    justify-self: center;
    width: 44px;
    height: 4px;
    margin-bottom: 2px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 24%, #dbe7fb);
  }

  .mobile-language-panel button,
  body.is-mobile-workspace .mobile-language-panel button {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 44px;
    gap: 10px;
    border: 1px solid color-mix(in srgb, var(--blue) 11%, #dbe7fb);
    border-radius: 15px;
    padding: 9px 12px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
    font-size: 15px;
    text-align: left;
  }

  .mobile-language-panel button.is-active,
  body.is-mobile-workspace .mobile-language-panel button.is-active {
    border-color: color-mix(in srgb, var(--blue) 38%, #dbe7fb);
    background:
      radial-gradient(circle at 94% 18%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 34%),
      #ffffff;
  }

  .mobile-language-panel img,
  body.is-mobile-workspace .mobile-language-panel img {
    width: 22px;
    height: 16px;
    border-radius: 4px;
    object-fit: cover;
  }

  body.is-mobile-workspace .value-strip {
    display: none;
  }

  body.is-mobile-workspace .layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 0 14px 104px;
  }

  body.is-mobile-workspace .workspace {
    min-width: 0;
  }

  body.is-mobile-workspace .dashboard-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(116px, 34%);
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    margin: 0 -14px 14px;
    padding: 2px 14px 8px;
    scroll-padding: 14px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  body.is-mobile-workspace .dashboard-strip::-webkit-scrollbar {
    display: none;
  }

  body.is-mobile-workspace .dashboard-card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 66px;
    align-content: center;
    gap: 5px;
    border-color: color-mix(in srgb, var(--blue) 15%, rgba(148, 163, 184, 0.28));
    border-radius: 15px;
    padding: 9px 10px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--blue) 7%, transparent);
    scroll-snap-align: start;
  }

  body.is-mobile-workspace .dashboard-card::before {
    right: 8px;
    top: 8px;
    width: 30px;
    height: 30px;
    opacity: 0.18;
  }

  body.is-mobile-workspace .dashboard-card span {
    gap: 3px;
  }

  body.is-mobile-workspace .dashboard-card small:first-child,
  body.is-mobile-workspace .storage-card small {
    overflow: hidden;
    font-size: 10px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-mobile-workspace .dashboard-card strong {
    font-size: clamp(18px, 5.8vw, 22px);
    line-height: 1;
    white-space: nowrap;
  }

  body.is-mobile-workspace .dashboard-card.storage-card {
    grid-auto-columns: auto;
    min-width: 176px;
  }

  body.is-mobile-workspace .dashboard-open {
    display: none;
  }

  body.is-mobile-workspace .tool-panel {
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 22px;
    padding: 16px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.88)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #ffffff), rgba(20, 184, 166, 0.34), rgba(255, 255, 255, 0.76)) border-box;
    box-shadow: 0 22px 58px color-mix(in srgb, var(--blue) 13%, transparent);
  }

  body.is-mobile-workspace .tool-panel.is-mobile-panel-enter {
    animation: mobileToolPanelIn 220ms ease both;
  }

  body.is-mobile-workspace .section-title {
    align-items: start;
    gap: 5px;
    margin-bottom: 12px;
  }

  body.is-mobile-workspace .section-title h2 {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1;
  }

  body.is-mobile-workspace .section-title span {
    font-size: 11px;
  }

  body.is-mobile-workspace .form-grid,
  body.is-mobile-workspace .resume-grid,
  body.is-mobile-workspace .originality-compose {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.is-mobile-workspace .originality-source-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.is-mobile-workspace .originality-file-panel {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.is-mobile-workspace .field,
  body.is-mobile-workspace .segmented,
  body.is-mobile-workspace .subtitle-style-picker,
  body.is-mobile-workspace .subtitle-language-picker {
    min-width: 0;
  }

  body.is-mobile-workspace input,
  body.is-mobile-workspace textarea,
  body.is-mobile-workspace select,
  body.is-mobile-workspace button {
    font-size: 16px;
  }

  body.is-mobile-workspace .file-dropzone {
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    min-height: 64px;
    border-style: solid;
    border-radius: 17px;
    padding: 9px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 6%, #ffffff)),
      #ffffff;
    box-shadow:
      0 12px 28px color-mix(in srgb, var(--blue) 9%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
  }

  body.is-mobile-workspace .compact-upload .file-dropzone,
  body.is-mobile-workspace .originality-upload .file-dropzone {
    grid-template-columns: 42px minmax(0, 1fr) auto;
  }

  body.is-mobile-workspace .file-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 15px !important;
  }

  body.is-mobile-workspace .file-copy {
    gap: 2px;
  }

  body.is-mobile-workspace .file-copy strong {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.is-mobile-workspace .file-copy small {
    display: -webkit-box;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  body.is-mobile-workspace .file-button {
    min-height: 36px;
    border-radius: 13px;
    padding: 8px 11px;
    box-shadow: none;
    font-size: 12px;
    line-height: 1;
  }

  body.is-mobile-workspace .compact-upload .file-button {
    grid-column: auto;
    justify-self: end;
  }

  body.is-mobile-workspace .file-meta {
    min-height: 34px;
    border-radius: 14px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.15;
  }

  body.is-mobile-workspace .media-preview {
    min-height: 172px;
    max-height: 260px;
    border-radius: 18px;
  }

  body.is-mobile-workspace .originality-preview {
    min-height: 156px;
  }

  body.is-mobile-workspace .originality-upload .file-dropzone {
    min-height: 64px;
  }

  body.is-mobile-workspace .originality-preview.is-document-preview {
    max-height: 260px;
  }

  body.is-mobile-workspace .resume-steps {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.is-mobile-workspace .originality-mode-grid,
  body.is-mobile-workspace .subtitle-language-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(132px, 68%);
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  body.is-mobile-workspace .resume-steps::-webkit-scrollbar,
  body.is-mobile-workspace .originality-mode-grid::-webkit-scrollbar,
  body.is-mobile-workspace .subtitle-language-grid::-webkit-scrollbar {
    display: none;
  }

  body.is-mobile-workspace .resume-nav {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-direction: row;
  }

  body.is-mobile-workspace .primary-action,
  body.is-mobile-workspace .secondary-action {
    min-height: 52px;
    border-radius: 15px;
  }

  body.is-mobile-workspace .tabs {
    position: fixed;
    top: auto;
    left: 50%;
    right: auto;
    bottom: max(10px, env(safe-area-inset-bottom));
    z-index: 80000;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 44px;
    align-items: center;
    gap: 6px;
    width: min(100% - 24px, 390px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 7px;
    scroll-snap-type: x mandatory;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(148, 163, 184, 0.28));
    border-radius: 24px;
    padding: 7px;
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.97), color-mix(in srgb, var(--blue) 3%, rgba(255, 255, 255, 0.94)));
    box-shadow:
      0 14px 32px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transform: translateX(-50%);
    transition: opacity 180ms ease, transform 180ms ease;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0, #000 12px, #000 calc(100% - 12px), rgba(0, 0, 0, 0.72) 100%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0, #000 12px, #000 calc(100% - 12px), rgba(0, 0, 0, 0.72) 100%);
    scrollbar-width: none;
  }

  body.is-mobile-workspace.is-mobile-account-open .tabs,
  body.is-mobile-workspace.is-mobile-jobs-open .tabs,
  body.is-mobile-workspace.is-mobile-language-open .tabs,
  body.is-mobile-workspace:has(.account-panel-content .language-switcher.is-open) .tabs {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) translateY(22px) scale(0.98);
  }

  body.is-mobile-workspace .tabs::-webkit-scrollbar {
    display: none;
  }

  body.is-mobile-workspace .tab,
  body.is-mobile-workspace .designer-switch,
  body.is-mobile-workspace .cherryx-pay-nav {
    box-sizing: border-box;
    display: inline-flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, rgba(148, 163, 184, 0.24));
    border-radius: 15px;
    padding: 0;
    background: rgba(255, 255, 255, 0.82);
    color: var(--blue);
    font-size: 0;
    line-height: 0;
    text-decoration: none;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transform: none;
  }

  body.is-mobile-workspace .tab::before,
  body.is-mobile-workspace .cherryx-pay-nav::before,
  body.is-mobile-workspace .designer-switch::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: var(--dock-icon-size, 20px);
    height: var(--dock-icon-size, 20px);
    flex: 0 0 var(--dock-icon-size, 20px);
    margin: 0;
    background: currentColor;
    opacity: 1;
    transform: translate(calc(-50% + var(--dock-icon-x, 0px)), calc(-50% + var(--dock-icon-y, 0px)));
    transform-origin: center;
    -webkit-mask: var(--editor-icon) center / var(--dock-icon-size, 20px) var(--dock-icon-size, 20px) no-repeat;
    mask: var(--editor-icon) center / var(--dock-icon-size, 20px) var(--dock-icon-size, 20px) no-repeat;
  }

  body.is-mobile-workspace .tabs [data-icon="file-user"]::before {
    --dock-icon-size: 19px;
    --dock-icon-x: 0.5px;
    --dock-icon-y: 0px;
  }

  body.is-mobile-workspace .tabs [data-icon="scan-text"]::before,
  body.is-mobile-workspace .tabs [data-icon="captions"]::before {
    --dock-icon-y: 0px;
  }

  body.is-mobile-workspace .tabs [data-icon="clapperboard"]::before {
    --dock-icon-size: 19px;
    --dock-icon-x: 0.5px;
  }

  body.is-mobile-workspace .tabs [data-icon="music-2"]::before {
    --dock-icon-size: 19px;
    --dock-icon-x: 1px;
  }

  body.is-mobile-workspace .tabs .designer-switch::before {
    --dock-icon-size: 19px;
  }

  body.is-mobile-workspace .tabs [data-icon="coins"]::before {
    --dock-icon-size: 18px;
    --dock-icon-x: 0.5px;
  }

  body.is-mobile-workspace .tabs [data-icon="list-filter"]::before {
    --dock-icon-size: 19px;
    --dock-icon-x: 0.5px;
  }

  body.is-mobile-workspace .designer-switch::before {
    --editor-icon: url("https://api.iconify.design/lucide/palette.svg");
  }

  body.is-mobile-workspace .tab.is-active,
  body.is-mobile-workspace.is-mobile-jobs-open .mobile-jobs-tab {
    border-color: color-mix(in srgb, var(--blue) 48%, rgba(148, 163, 184, 0.28));
    background:
      radial-gradient(circle at 32% 18%, rgba(255, 255, 255, 0.98), transparent 42%),
      color-mix(in srgb, var(--blue) 17%, #ffffff);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--blue) 17%, transparent);
  }

  body.is-mobile-workspace .designer-switch-wrap {
    display: contents;
  }

  body.is-mobile-workspace .designer-switch-track,
  body.is-mobile-workspace .designer-switch span:not(.designer-switch-track),
  body.is-mobile-workspace .cherryx-pay-nav span,
  body.is-mobile-workspace .tab span {
    display: none;
  }

  body.is-mobile-workspace .mobile-jobs-tab {
    display: inline-flex;
  }

  body.is-mobile-workspace .jobs-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: max(12px, calc(env(safe-area-inset-bottom) + 8px));
    z-index: 90000;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: min(80svh, 720px);
    max-height: calc(100svh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 18px 14px 14px;
    background:
      linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 48%, #ffffff), rgba(20, 184, 166, 0.42), rgba(255, 255, 255, 0.78)) border-box;
    box-shadow: 0 30px 82px rgba(15, 23, 42, 0.34);
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 24px)) scale(0.98);
    transition: opacity 180ms ease, transform 200ms ease;
  }

  body.is-mobile-workspace.is-mobile-jobs-open .jobs-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  body.is-mobile-workspace .jobs-heading {
    position: relative;
    padding: 10px 2px 2px;
  }

  body.is-mobile-workspace .jobs-heading::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 28%, #cbd5e1);
    transform: translateX(-50%);
  }

  body.is-mobile-workspace .jobs-filter {
    overflow-x: auto;
    margin: 0 -2px;
    padding: 8px 2px 10px;
    scrollbar-width: none;
  }

  body.is-mobile-workspace .jobs-filter button {
    min-height: 38px;
  }

  body.is-mobile-workspace .jobs-filter button.is-active {
    box-shadow: none;
  }

  body.is-mobile-workspace .jobs-filter::-webkit-scrollbar {
    display: none;
  }

  body.is-mobile-workspace .jobs-list,
  body.is-mobile-workspace #empty-jobs {
    min-height: 0;
    overflow-y: auto;
    max-height: none;
    padding: 0 1px 10px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }

  body.is-mobile-workspace .jobs-all-link {
    position: relative;
    z-index: 1;
    min-height: 44px;
    border-radius: 14px;
    margin-top: 8px;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
  }

  .theme-dark.is-mobile-workspace .tabs,
  .theme-dark.is-mobile-workspace .tool-panel,
  .theme-dark.is-mobile-workspace .jobs-panel,
  .theme-dark.is-mobile-workspace .limits.account-panel-content {
    background:
      linear-gradient(rgba(17, 26, 46, 0.94), rgba(17, 26, 46, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #1e293b), rgba(20, 184, 166, 0.28), rgba(84, 102, 137, 0.38)) border-box;
  }
}

@keyframes mobileToolPanelIn {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes accountSettingsSpin {
  from {
    transform: rotate(0deg) scale(1);
  }

  to {
    transform: rotate(360deg) scale(1);
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  body.is-mobile-workspace .tool-panel.is-mobile-panel-enter {
    animation: none;
  }

  body.is-mobile-workspace .account-panel-content .account-settings-shortcut.is-spinning::before {
    animation: none;
  }
}

@media (min-width: 761px) {
  .detail-topbar .account-bar .language-switcher {
    display: block !important;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 0;
    height: auto !important;
    overflow: visible;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .detail-topbar .account-bar .language-current {
    display: flex !important;
    width: auto !important;
    min-width: 114px;
    height: auto !important;
    min-height: 38px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .detail-topbar .account-bar {
    overflow: visible;
  }
}

@media (max-width: 760px) {
  .settings-shell .auth-brand {
    display: grid;
    align-content: start;
    position: relative;
    z-index: 3;
    min-height: 0;
    gap: 13px;
    overflow: visible;
    border-radius: 0;
    padding: 3px 2px 0;
  }
}

@media (max-width: 760px) {
  body.video-editor-page {
    overflow-x: hidden;
    background:
      radial-gradient(circle at 18% 10%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 32%),
      radial-gradient(circle at 86% 22%, rgba(20, 184, 166, 0.14), transparent 28%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #f7fbff), #ffffff 46%, color-mix(in srgb, var(--blue) 7%, #eef7ff));
  }

  body.video-editor-page .video-editor-topbar {
    position: sticky;
    top: 0;
    z-index: 320;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 10px 5px;
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72));
    backdrop-filter: blur(18px);
  }

  body.video-editor-page .video-editor-topbar .topbar-copy {
    min-width: 0;
    gap: 0;
  }

  body.video-editor-page .video-editor-topbar .eyebrow {
    margin: 0;
    font-size: 9px;
    line-height: 1;
  }

  body.video-editor-page .video-editor-topbar h1 {
    max-width: 18ch;
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.02;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.video-editor-page .video-editor-topbar .limits {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    max-width: 58vw;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
  }

  body.video-editor-page .video-editor-topbar .limits::-webkit-scrollbar {
    display: none;
  }

  body.video-editor-page .detail-workspace-link {
    flex: 0 0 auto;
    min-height: 34px;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 850;
  }

  body.video-editor-page a.detail-workspace-link {
    display: none;
  }

  body.video-editor-page a.detail-workspace-link::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url("https://api.iconify.design/lucide/layout-dashboard.svg") center / contain no-repeat;
    -webkit-mask: url("https://api.iconify.design/lucide/layout-dashboard.svg") center / contain no-repeat;
  }

  body.video-editor-page [data-editor-export-shortcut] {
    display: inline-grid;
    width: 34px;
    min-width: 34px;
    place-items: center;
    padding: 0;
    font-size: 0;
  }

  body.video-editor-page [data-editor-export-shortcut]::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url("https://api.iconify.design/lucide/download.svg") center / contain no-repeat;
    -webkit-mask: url("https://api.iconify.design/lucide/download.svg") center / contain no-repeat;
  }

  body.video-editor-page .language-current {
    min-height: 34px;
    border-radius: 999px;
    padding: 6px 9px;
  }

  body.video-editor-page .video-editor-topbar .language-switcher {
    display: none;
  }

  body.video-editor-page .video-editor-app {
    display: block;
    width: 100%;
    min-height: 0;
    height: auto;
    overflow-x: hidden;
    padding: 8px 10px calc(355px + env(safe-area-inset-bottom));
  }

  body.video-editor-page .editor-workbench {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  body.video-editor-page .editor-preview-panel,
  body.video-editor-page .editor-timeline-panel {
    min-width: 0;
    max-width: 100%;
    border-color: color-mix(in srgb, var(--blue) 22%, rgba(255, 255, 255, 0.82));
    border-radius: 22px;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.96), color-mix(in srgb, var(--blue) 7%, rgba(255, 255, 255, 0.9))) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 46%, #ffffff), rgba(20, 184, 166, 0.28), rgba(255, 255, 255, 0.72)) border-box;
    box-shadow: 0 20px 58px rgba(15, 23, 42, 0.1);
  }

  body.video-editor-page .editor-preview-panel {
    position: relative;
    display: grid;
    gap: 9px;
    min-height: 0;
    overflow: visible;
    padding: 10px;
  }

  body.video-editor-page .editor-preview-head,
  body.video-editor-page .editor-playbar,
  body.video-editor-page .editor-timeline-head,
  body.video-editor-page .editor-properties-head {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  body.video-editor-page .editor-preview-head {
    min-height: 40px;
    padding: 0 94px 0 2px;
  }

  body.video-editor-page .editor-preview-head > div:first-child {
    min-width: 0;
  }

  body.video-editor-page .editor-preview-head span,
  body.video-editor-page .editor-properties-head span {
    font-size: 9px;
    letter-spacing: 0;
  }

  body.video-editor-page .editor-title-inline,
  body.video-editor-page .editor-properties-head strong {
    max-width: 30vw;
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.video-editor-page .editor-save-wrap {
    display: none;
  }

  body.video-editor-page .editor-aspect {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 12;
    min-width: 0;
    margin-left: auto;
  }

  body.video-editor-page .editor-aspect-toggle {
    min-width: 74px;
    min-height: 34px;
    grid-template-columns: 16px minmax(0, 1fr);
    column-gap: 6px;
    border-radius: 999px;
    padding: 6px 18px 6px 8px;
  }

  body.video-editor-page .editor-aspect-toggle::before {
    width: 15px;
    height: 15px;
  }

  body.video-editor-page .editor-aspect-toggle b {
    font-size: 11px;
  }

  body.video-editor-page .editor-aspect-toggle small {
    display: none;
  }

  body.video-editor-page .editor-aspect-menu {
    position: fixed;
    top: 58px;
    right: 12px;
    left: 12px;
    z-index: 96000;
    width: auto;
    max-height: min(62svh, 520px);
    overflow: auto;
    border-radius: 22px;
  }

  body.video-editor-page .editor-preview-frame {
    width: min(66vw, 292px);
    height: auto;
    max-width: calc(100vw - 64px);
    max-height: min(48svh, 420px);
    justify-self: start;
    margin-left: clamp(42px, 13vw, 58px);
    margin-right: 0;
    border-radius: 24px;
    box-shadow:
      0 28px 70px rgba(15, 23, 42, 0.28),
      0 0 0 8px rgba(15, 23, 42, 0.035);
  }

  body.video-editor-page .editor-preview-frame.is-wide {
    width: min(100%, 360px);
  }

  body.video-editor-page .editor-import {
    gap: 7px;
    padding: 18px;
  }

  body.video-editor-page .editor-import i {
    width: 50px;
    height: 50px;
    border-radius: 15px;
  }

  body.video-editor-page .editor-import b {
    font-size: 18px;
    line-height: 1.05;
  }

  body.video-editor-page .editor-import span {
    max-width: 220px;
    font-size: 12px;
    line-height: 1.3;
  }

  body.video-editor-page .editor-playbar {
    display: grid;
    grid-template-columns: 42px minmax(76px, auto) minmax(0, 1fr) 42px;
    min-height: 52px;
    border-top: 0;
    border-radius: 18px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 14%, rgba(255, 255, 255, 0.82));
  }

  body.video-editor-page .editor-playbar span {
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
  }

  body.video-editor-page .editor-timeline-panel {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 196px;
    min-height: 196px;
    max-height: none;
    overflow: hidden;
    resize: none;
    padding: 8px;
  }

  body.video-editor-page .editor-timeline-head {
    align-items: center;
    min-height: 40px;
    padding: 0 2px 7px;
  }

  body.video-editor-page .editor-timeline-head > strong,
  body.video-editor-page [data-editor-duration] {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 900;
  }

  body.video-editor-page .editor-layer-actions {
    flex: 1 1 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 1px 2px 5px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  body.video-editor-page .editor-layer-actions::-webkit-scrollbar {
    display: none;
  }

  body.video-editor-page .editor-layer-actions .editor-icon-button {
    flex: 0 0 36px;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--blue) 7%, #ffffff);
    scroll-snap-align: center;
  }

  body.video-editor-page .editor-timeline-scroll {
    width: 100%;
    max-width: 100%;
    min-height: 128px;
    overflow: auto;
    border-radius: 17px;
    padding: 10px 10px 18px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 12%, rgba(255, 255, 255, 0.88));
  }

  body.video-editor-page .editor-timeline {
    min-width: max(720px, var(--timeline-width, 720px));
    padding: 0 10px 12px;
  }

  body.video-editor-page .editor-time-ruler {
    margin-left: 64px;
  }

  body.video-editor-page .editor-track {
    grid-template-columns: 52px var(--timeline-width);
    gap: 8px;
  }

  body.video-editor-page .editor-track-label {
    position: sticky;
    left: 0;
    z-index: 12;
    justify-content: center;
    width: 48px;
    min-height: 40px;
    border: 1px solid color-mix(in srgb, var(--blue) 28%, rgba(255, 255, 255, 0.8));
    border-radius: 12px;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.82), transparent 34%),
      linear-gradient(145deg, color-mix(in srgb, var(--blue) 12%, #ffffff), rgba(255, 255, 255, 0.82));
    color: var(--blue);
    font-size: 10px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  }

  body.video-editor-page .editor-track-icon {
    width: 18px;
    height: 18px;
    opacity: 1;
  }

  body.video-editor-page .editor-track.is-text .editor-track-label {
    color: #7c3aed;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.82), transparent 34%),
      linear-gradient(145deg, rgba(124, 58, 237, 0.14), rgba(255, 255, 255, 0.82));
  }

  body.video-editor-page .editor-track.is-image .editor-track-label {
    color: #059669;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.82), transparent 34%),
      linear-gradient(145deg, rgba(5, 150, 105, 0.14), rgba(255, 255, 255, 0.82));
  }

  body.video-editor-page .editor-track.is-audio .editor-track-label {
    color: #d97706;
    background:
      radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.82), transparent 34%),
      linear-gradient(145deg, rgba(217, 119, 6, 0.14), rgba(255, 255, 255, 0.82));
  }

  body.video-editor-page .editor-track-label b {
    max-width: 46px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.video-editor-page .editor-track-lane {
    min-height: 40px;
    border-radius: 10px;
  }

  body.video-editor-page .editor-rail {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 94000;
    display: flex;
    grid-template-columns: none;
    align-items: center;
    gap: 8px;
    height: 66px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.86));
    border-radius: 24px;
    padding: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 255, 0.84)),
      color-mix(in srgb, var(--blue) 5%, #ffffff);
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.17);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
  }

  body.video-editor-page .editor-rail::-webkit-scrollbar {
    display: none;
  }

  body.video-editor-page .editor-rail .editor-icon-button {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--blue);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 9%, rgba(255, 255, 255, 0.7));
  }

  body.video-editor-page .editor-rail .editor-icon-button::before {
    width: 21px;
    height: 21px;
  }

  body.video-editor-page .editor-rail .editor-icon-button.is-active {
    border-color: color-mix(in srgb, var(--blue) 56%, #ffffff);
    background:
      radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 18%, #ffffff), color-mix(in srgb, var(--blue) 8%, #ffffff));
    box-shadow:
      0 12px 26px color-mix(in srgb, var(--blue) 18%, transparent),
      inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  }

  body.video-editor-page .editor-properties {
    position: fixed;
    right: 10px;
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
    left: 10px;
    z-index: 93990;
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr);
    height: auto;
    min-height: 0;
    max-height: min(42svh, 380px);
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 24px;
    padding-top: 8px;
    background:
      radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 32%) padding-box,
      linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(247, 251, 255, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 48%, #ffffff), rgba(20, 184, 166, 0.34), rgba(255, 255, 255, 0.8)) border-box;
    box-shadow: 0 28px 78px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(14px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
  }

  body.video-editor-page.workspace-share-open .editor-properties {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 26px)) scale(0.98);
  }

  body.video-editor-page .editor-properties::before {
    display: none;
  }

  body.video-editor-page .editor-properties-head {
    min-height: 34px;
    padding: 5px 14px 2px;
  }

  body.video-editor-page .editor-properties-head strong {
    display: none;
  }

  body.video-editor-page .editor-property-tab-strip {
    position: static;
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 6px;
    padding: 7px 10px 8px;
    background: transparent;
  }

  body.video-editor-page .editor-property-tab-nav {
    width: 32px;
    height: 32px;
    border-radius: 999px;
  }

  body.video-editor-page .editor-property-tabs {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding: 0 2px 2px;
    background: transparent;
  }

  body.video-editor-page .editor-property-tabs button {
    flex: 0 0 auto;
    min-height: 32px;
    border-radius: 999px;
    padding: 6px 11px;
    font-size: 11px;
  }

  body.video-editor-page .editor-tool-panel {
    padding: 6px 12px 14px;
  }

  body.video-editor-page .editor-tool-panel.is-active {
    max-height: min(30svh, 268px);
    overflow: auto;
    animation: mobileVideoPanelIn 180ms ease both;
  }

  body.video-editor-page .editor-tool-panel.is-mobile-panel-enter {
    animation: mobileVideoPanelIn 180ms ease both;
  }

  body.video-editor-page .editor-tool-panel input,
  body.video-editor-page .editor-tool-panel select,
  body.video-editor-page .editor-tool-panel textarea {
    font-size: 16px;
  }

  body.video-editor-page .editor-clip-grid,
  body.video-editor-page .editor-color-row,
  body.video-editor-page .editor-filter-grid,
  body.video-editor-page .editor-export-presets,
  body.video-editor-page .editor-media-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.video-editor-page .editor-file-picker strong {
    min-height: 44px;
    border-radius: 14px;
  }

  body.video-editor-page .editor-media-bin {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  body.video-editor-page .editor-media-bin::-webkit-scrollbar {
    display: none;
  }

  body.video-editor-page .editor-media-item {
    flex: 0 0 210px;
    border-radius: 14px;
  }

  body.video-editor-page .editor-confirm-dialog {
    width: min(100% - 28px, 420px);
    border-radius: 22px;
  }

  .theme-dark.video-editor-page .video-editor-topbar,
  .theme-dark.video-editor-page .editor-preview-panel,
  .theme-dark.video-editor-page .editor-timeline-panel,
  .theme-dark.video-editor-page .editor-properties,
  .theme-dark.video-editor-page .editor-rail {
    background:
      linear-gradient(rgba(17, 26, 46, 0.94), rgba(17, 26, 46, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #1e293b), rgba(20, 184, 166, 0.28), rgba(84, 102, 137, 0.38)) border-box;
  }
}

@keyframes mobileVideoPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  body.video-editor-page .editor-tool-panel.is-active,
  body.video-editor-page .editor-tool-panel.is-mobile-panel-enter {
    animation: none;
  }
}

@media (max-width: 760px) {
  body.designer-page {
    min-height: 100svh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 30%),
      radial-gradient(circle at 92% 20%, rgba(20, 184, 166, 0.14), transparent 28%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #f7fbff), #ffffff 48%, color-mix(in srgb, var(--blue) 7%, #eef7ff));
  }

  body.designer-page .designer-check {
    justify-self: start;
    min-height: 32px;
    border-radius: 10px;
    padding: 6px 8px;
    font-size: 11px;
  }

  body.designer-page .designer-check input[type="checkbox"] {
    flex-basis: 17px;
    width: 17px !important;
    min-width: 17px !important;
    max-width: 17px !important;
    height: 17px !important;
    min-height: 17px !important;
    max-height: 17px !important;
    border-radius: 4px;
  }

  body.designer-page .designer-page-topbar {
    position: sticky;
    top: 0;
    z-index: 500;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 8px 10px 5px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.72));
    backdrop-filter: blur(18px);
  }

  body.designer-page .designer-page-topbar .language-switcher {
    display: none;
  }

  body.designer-page .designer-workspace-switch {
    min-width: 0;
    min-height: 34px;
    border-radius: 999px;
    padding: 6px 9px;
  }

  body.designer-page .designer-workspace-switch span:last-child {
    display: none;
  }

  body.designer-page .designer-switch-track {
    width: 34px;
    height: 20px;
  }

  body.designer-page .designer-page-topbar > div {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
  }

  body.designer-page .designer-page-topbar .eyebrow {
    display: none;
  }

  body.designer-page .designer-page-topbar h1 {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.designer-page .designer-page-main {
    min-height: calc(100svh - -27px);
    padding: 0 1px calc(86px + env(safe-area-inset-bottom));
  }

  body.designer-page .designer-mode-panel {
    display: grid;
    gap: 8px;
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.designer-page .designer-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 8px 2px;
  }

  body.designer-page .designer-head > div:first-child {
    min-width: 0;
  }

  body.designer-page .designer-project-kicker {
    display: none;
  }

  body.designer-page .designer-project-title {
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.08;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.designer-page .designer-save-row {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    margin-top: 5px;
    scrollbar-width: none;
  }

  body.designer-page .designer-save-row::-webkit-scrollbar {
    display: none;
  }

  body.designer-page .designer-save-row small,
  body.designer-page .designer-save-row b {
    flex: 0 0 auto;
    min-height: 22px;
    padding: 3px 7px;
    font-size: 10px;
  }

  body.designer-page .designer-head-actions {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    max-width: 46vw;
    overflow-x: auto;
    scrollbar-width: none;
  }

  body.designer-page .designer-head-actions::-webkit-scrollbar {
    display: none;
  }

  body.designer-page .designer-ghost {
    flex: 0 0 auto;
    min-height: 34px;
    border-radius: 999px;
    padding: 7px 10px;
    font-size: 11px;
  }

  body.designer-page .designer-ghost[href],
  body.designer-page .designer-ghost[data-design-action="clear"],
  body.designer-page .designer-ghost[data-design-import-draft],
  body.designer-page .designer-icon-button[data-icon="workspace"] {
    display: none;
  }

  body.designer-page .designer-icon-button {
    flex: 0 0 34px;
    width: 34px;
    min-height: 34px;
    height: 34px;
    border-radius: 999px;
  }

  body.designer-page .designer-studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    height: auto;
    min-height: 0;
  }

  body.designer-page .designer-canvas-shell {
    order: 1;
    height: calc(100svh - 190px);
    min-height: 520px;
    max-height: calc(100svh - 132px);
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--blue) 22%, rgba(255, 255, 255, 0.84));
    border-radius: 24px;
    background:
      linear-gradient(rgba(110, 130, 160, 0.075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(110, 130, 160, 0.075) 1px, transparent 1px),
      linear-gradient(145deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--blue) 5%, rgba(255, 255, 255, 0.86)));
    background-size: 10px 10px, 10px 10px, auto;
    box-shadow:
      0 24px 64px rgba(15, 23, 42, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.72);
    -webkit-overflow-scrolling: touch;
    touch-action: none;
  }

  body.designer-page .designer-canvas-start {
    top: 92px;
    width: min(268px, calc(100vw - 64px));
    border-radius: 18px;
    padding: 10px;
  }

  body.designer-page .designer-canvas-start-presets,
  body.designer-page .designer-canvas-start-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.designer-page .designer-canvas-shell.is-pannable {
    touch-action: none;
  }

  body.designer-page .designer-canvas-shell.is-pinching {
    scroll-behavior: auto;
    user-select: none;
  }

  body.designer-page .designer-ruler {
    opacity: 0.35;
  }

  body.designer-page .designer-floating-bar {
    position: sticky;
    top: 10px;
    z-index: 30;
    left: 10px;
    right: 10px;
  }

  body.designer-page .designer-zoom-controls {
    gap: 5px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.13);
  }

  body.designer-page .designer-zoom-controls button,
  body.designer-page .designer-zoom-controls output {
    min-width: 32px;
    min-height: 30px;
    font-size: 11px;
  }

  body.designer-page .designer-zoom-controls output {
    min-width: 48px;
  }

  body.designer-page .designer-toolbar {
    position: fixed;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom));
    left: 10px;
    z-index: 94000;
    order: 3;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 66px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(255, 255, 255, 0.86));
    border-radius: 24px;
    padding: 8px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(247, 251, 255, 0.84)),
      color-mix(in srgb, var(--blue) 5%, #ffffff);
    box-shadow: 0 20px 54px rgba(15, 23, 42, 0.17);
    backdrop-filter: blur(12px);
    scrollbar-width: none;
    touch-action: pan-x;
  }

  body.designer-page .designer-toolbar::-webkit-scrollbar {
    display: none;
  }

  body.designer-page .designer-toolbar .design-tool {
    flex: 0 0 48px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    color: var(--blue);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 9%, rgba(255, 255, 255, 0.7));
    scroll-snap-align: center;
  }

  body.designer-page .designer-toolbar .design-tool::before {
    width: 21px;
    height: 21px;
  }

  body.designer-page .designer-toolbar .design-tool.is-active {
    border-color: color-mix(in srgb, var(--blue) 56%, #ffffff);
    background:
      radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 18%, #ffffff), color-mix(in srgb, var(--blue) 8%, #ffffff));
    box-shadow:
      0 12px 26px color-mix(in srgb, var(--blue) 18%, transparent),
      inset 0 0 0 1px rgba(255, 255, 255, 0.8);
  }

  body.designer-page .designer-inspector {
    position: fixed;
    right: 10px;
    bottom: max(84px, calc(env(safe-area-inset-bottom) + 84px));
    left: 10px;
    z-index: 93990;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: auto;
    min-height: 0;
    max-height: min(42svh, 380px);
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 10px 12px 12px;
    background:
      radial-gradient(circle at 90% 8%, color-mix(in srgb, var(--blue) 12%, transparent), transparent 32%) padding-box,
      linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(247, 251, 255, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 48%, #ffffff), rgba(20, 184, 166, 0.34), rgba(255, 255, 255, 0.8)) border-box;
    box-shadow: 0 28px 78px rgba(15, 23, 42, 0.22);
    backdrop-filter: blur(14px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
  }

  body.designer-page.workspace-share-open .designer-inspector {
    opacity: 0;
    pointer-events: none;
    transform: translateY(calc(100% + 26px)) scale(0.98);
  }

  body.designer-page .designer-inspector-head {
    min-height: 34px;
    padding: 4px 2px 7px;
  }

  body.designer-page .designer-inspector-head strong {
    font-size: 12px;
  }

  body.designer-page .designer-inspector-head span {
    max-width: 58%;
    min-height: 24px;
    padding: 4px 8px;
  }

  body.designer-page .designer-context,
  body.designer-page .designer-inspector-section,
  body.designer-page .designer-layers {
    border-radius: 16px;
  }

  body.designer-page .designer-context {
    min-height: 0;
    overflow: auto;
  }

  body.designer-page .designer-inspector-grid,
  body.designer-page .designer-command-grid,
  body.designer-page .designer-selection-actions,
  body.designer-page .designer-export-presets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.designer-page .designer-field input,
  body.designer-page .designer-field select,
  body.designer-page .designer-color-code {
    font-size: 16px;
  }

  body.designer-page .designer-layers [data-design-layers],
  body.designer-page .designer-layer-list {
    max-height: min(34svh, 320px);
    overflow: auto;
  }

  body.designer-page .designer-context-menu {
    left: 12px !important;
    right: 12px;
    bottom: max(90px, calc(env(safe-area-inset-bottom) + 90px));
    top: auto !important;
    width: auto;
    border-radius: 20px;
  }

.theme-dark.designer-page .designer-toolbar,
.theme-dark.designer-page .designer-inspector,
.theme-dark.designer-page .designer-canvas-shell {
    background:
      linear-gradient(rgba(17, 26, 46, 0.94), rgba(17, 26, 46, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #1e293b), rgba(20, 184, 166, 0.28), rgba(84, 102, 137, 0.38)) border-box;
  }
}

@media (min-width: 761px) {
  body.designer-page {
    background:
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 5%, #f7fbff), #ffffff 42%, color-mix(in srgb, var(--blue) 4%, #eef6ff));
  }

  body.designer-page .designer-page-topbar {
    min-height: 78px;
    border-bottom: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
    padding: 12px 18px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
  }

  body.designer-page .designer-page-topbar h1 {
    font-size: 20px;
    letter-spacing: 0;
  }

  body.designer-page .designer-page-main {
    padding: 0 12px 12px;
  }

  body.designer-page .designer-mode-panel.is-fullscreen {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, var(--line));
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.1);
  }

  body.designer-page .designer-mode-panel.is-fullscreen .designer-head {
    min-height: 72px;
    border-bottom-color: color-mix(in srgb, var(--blue) 13%, var(--line));
    padding: 11px 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.92), color-mix(in srgb, var(--blue) 4%, rgba(255, 255, 255, 0.82)));
  }

  body.designer-page .designer-project-title {
    font-size: 22px;
  }

  body.designer-page .designer-head-actions {
    gap: 8px;
  }

  body.designer-page .designer-ghost,
  body.designer-page .designer-icon-button {
    min-height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
  }

  body.designer-page .designer-studio {
    grid-template-columns: 58px minmax(0, 1fr) clamp(320px, 21vw, 380px);
    background: color-mix(in srgb, var(--blue) 3%, #ffffff);
  }

  body.designer-page .designer-toolbar {
    gap: 7px;
    border-right-color: color-mix(in srgb, var(--blue) 13%, var(--line));
    padding: 12px 9px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.72), color-mix(in srgb, var(--blue) 5%, rgba(255, 255, 255, 0.68)));
  }

  body.designer-page .designer-toolbar .design-tool {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  body.designer-page .designer-toolbar .design-tool.is-active {
    box-shadow:
      0 10px 24px color-mix(in srgb, var(--blue) 18%, transparent),
      inset 0 0 0 1px rgba(255, 255, 255, 0.82);
  }

  body.designer-page .designer-canvas-shell {
    margin: 0;
    border: 0;
    background:
      linear-gradient(rgba(90, 112, 145, 0.075) 1px, transparent 1px),
      linear-gradient(90deg, rgba(90, 112, 145, 0.075) 1px, transparent 1px),
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.92), rgba(244, 248, 255, 0.78) 48%, color-mix(in srgb, var(--blue) 5%, #edf5ff));
    background-size: 8px 8px, 8px 8px, auto;
  }

  body.designer-page .designer-canvas-shell::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  body.designer-page .designer-canvas-shell::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 26%, #94a3b8) padding-box;
  }

  body.designer-page .designer-floating-bar {
    top: 14px;
  }

  body.designer-page .designer-zoom-controls {
    gap: 6px;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, rgba(255, 255, 255, 0.86));
    border-radius: 999px;
    padding: 6px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.12);
    backdrop-filter: blur(12px);
  }

  body.designer-page .designer-inspector {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    overflow-x: hidden;
    border-left-color: color-mix(in srgb, var(--blue) 13%, var(--line));
    padding: 12px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.84), color-mix(in srgb, var(--blue) 4%, rgba(255, 255, 255, 0.74)));
  }

  body.designer-page .designer-context,
  body.designer-page .designer-inspector-section,
  body.designer-page .designer-layers {
    min-width: 0;
    max-width: 100%;
    border-color: color-mix(in srgb, var(--blue) 14%, var(--line));
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.76);
  }

  body.designer-page .designer-inspector-section.is-empty {
    gap: 10px;
    border-style: solid;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.82), color-mix(in srgb, var(--blue) 5%, rgba(255, 255, 255, 0.74)));
  }

  body.designer-page .designer-context {
    flex: 0 0 auto;
    max-height: min(58vh, 520px);
  }

  body.designer-page .designer-layers {
    flex: 0 0 auto;
    margin-top: auto;
  }

  body.designer-page .designer-inspector.is-layers-open .designer-context {
    display: none;
  }

  body.designer-page .designer-inspector.is-layers-open .designer-layers {
    flex: 1 1 auto;
    margin-top: 0;
  }

  body.designer-page .designer-inspector-head {
    grid-template-columns: minmax(0, 1fr) minmax(68px, auto);
  }

  body.designer-page .designer-inspector-head span {
    max-width: 108px;
    justify-self: end;
  }

  body.designer-page .designer-inspector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.designer-page .designer-context::-webkit-scrollbar,
  body.designer-page .designer-inspector::-webkit-scrollbar {
    width: 10px;
    height: 0;
  }

  body.designer-page .designer-context::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 28%, #94a3b8) padding-box;
  }
}

.designer-start-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.designer-start-presets button {
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--blue) 5%, #ffffff);
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.designer-start-presets button:hover {
  border-color: color-mix(in srgb, var(--blue) 48%, var(--line));
  color: var(--blue);
}

@media (min-width: 761px) and (max-width: 1280px) {
  body.designer-page .designer-studio {
    grid-template-columns: 58px minmax(0, 1fr) 318px;
  }

  body.designer-page .designer-inspector-grid {
    grid-template-columns: 1fr;
  }

  body.designer-page .designer-selection-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body.design-projects-page {
    min-height: 100svh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--blue) 18%, transparent), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 9%, #f8fbff) 0, #eff8f6 52%, #f8fbff 100%);
  }

  body.design-projects-page .detail-topbar {
    position: sticky;
    top: 0;
    z-index: 65000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 11px 4px;
    border: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68));
    box-shadow: none;
    backdrop-filter: blur(18px);
  }

  body.design-projects-page .detail-topbar .topbar-copy,
  body.design-projects-page .detail-topbar .account-bar,
  body.design-projects-page .video-project-empty,
  body.design-projects-page .video-project-empty div,
  body.design-projects-page .design-project-card,
  body.design-projects-page .video-project-body {
    min-width: 0;
  }

  body.design-projects-page .detail-topbar .eyebrow {
    margin: 0;
    font-size: 10px;
    line-height: 1;
  }

  body.design-projects-page .detail-topbar .back-link {
    display: inline-block;
    max-width: 142px;
    overflow: hidden;
    color: var(--blue);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.design-projects-page .detail-topbar h1 {
    max-width: 154px;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.design-projects-page .detail-topbar .account-bar {
    right: clamp(12px, 17vw, 82px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.design-projects-page .detail-topbar .language-switcher {
    display: none;
  }

  body.design-projects-page .detail-topbar .language-current {
    max-width: 108px;
    min-height: 34px;
    padding: 6px 7px;
    font-size: 12px;
  }

  body.design-projects-page .detail-topbar .language-current img {
    width: 21px;
    height: 15px;
  }

  body.design-projects-page .detail-topbar .language-current::after {
    width: 20px;
    height: 20px;
    background-size: 12px 12px, auto, auto;
  }

  body.design-projects-page .detail-topbar .detail-workspace-link {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 28%, rgba(255, 255, 255, 0.82));
    border-radius: 16px;
    padding: 0;
    font-size: 0;
    background:
      url("https://api.iconify.design/lucide/layout-dashboard.svg?color=%232563eb") center / 19px 19px no-repeat,
      radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95), transparent 36%),
      color-mix(in srgb, var(--blue) 10%, #ffffff);
    box-shadow:
      0 12px 28px color-mix(in srgb, var(--blue) 14%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  body.design-projects-page .detail-topbar .language-menu {
    position: fixed;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
    width: auto;
    max-width: none;
    max-height: min(54svh, 470px);
    border-radius: 24px;
    transform: translateY(18px) scale(0.98);
    transform-origin: bottom center;
  }

  body.design-projects-page .detail-topbar .language-switcher.is-open .language-menu {
    transform: translateY(0) scale(1);
  }

  body.design-projects-page .design-projects-shell {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 10px 12px calc(94px + env(safe-area-inset-bottom));
  }

  body.design-projects-page .design-projects-shell .video-projects-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 10px;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 17px;
    background:
      radial-gradient(circle at 85% 16%, color-mix(in srgb, var(--blue) 17%, transparent), transparent 30%) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.95), color-mix(in srgb, var(--blue) 7%, #ffffff)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 46%, #ffffff), rgba(20, 184, 166, 0.32), rgba(255, 255, 255, 0.76)) border-box;
    box-shadow: 0 22px 58px color-mix(in srgb, var(--blue) 14%, transparent);
  }

  body.design-projects-page .video-projects-head span {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 9px;
    background: color-mix(in srgb, var(--blue) 10%, #ffffff);
    color: var(--blue);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  body.design-projects-page .video-projects-head strong {
    margin-top: 7px;
    font-size: clamp(30px, 10.5vw, 44px);
    line-height: 0.94;
  }

  body.design-projects-page .video-projects-head small {
    max-width: 190px;
    font-size: 12px;
  }

  body.design-projects-page .video-projects-head > button[data-create-project] {
    position: absolute;
    top: 17px;
    right: 64px;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--blue) 30%, rgba(255, 255, 255, 0.82));
    border-radius: 18px;
    padding: 0;
    background:
      url("https://api.iconify.design/lucide/sparkles.svg?color=%232563eb") center / 21px 21px no-repeat,
      radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.98), transparent 36%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #ffffff), rgba(255, 255, 255, 0.84));
    color: transparent;
    box-shadow:
      0 16px 36px color-mix(in srgb, var(--blue) 16%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    font-size: 0;
  }

  body.design-projects-page .design-projects-shell:has(.design-project-empty:not([hidden])) .video-projects-head > button[data-create-project] {
    display: inline-grid;
  }

  body.design-projects-page .design-project-mobile-filter-toggle {
    position: absolute;
    top: 17px;
    right: 120px;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    align-self: start;
    justify-self: end;
    border: 1px solid color-mix(in srgb, var(--blue) 30%, rgba(255, 255, 255, 0.82));
    border-radius: 18px;
    padding: 0;
    background:
      url("https://api.iconify.design/lucide/sliders-horizontal.svg?color=%232563eb") center / 21px 21px no-repeat,
      radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.98), transparent 36%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #ffffff), rgba(255, 255, 255, 0.84));
    box-shadow:
      0 16px 36px color-mix(in srgb, var(--blue) 16%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    font-size: 0;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
  }

  body.design-projects-page .design-project-mobile-filter-toggle:hover,
  body.design-projects-page .design-project-mobile-filter-toggle:focus-visible,
  body.design-projects-page .design-project-mobile-filter-toggle[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--blue) 54%, rgba(255, 255, 255, 0.82));
    box-shadow:
      0 18px 40px color-mix(in srgb, var(--blue) 22%, transparent),
      0 0 0 5px color-mix(in srgb, var(--blue) 10%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    transform: translateY(-1px);
  }

  body.design-projects-page .design-project-mobile-filter-toggle::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 9px;
    width: 7px;
    height: 7px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 84%, #22c55e);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--blue) 20%, transparent);
  }

  body.design-projects-page .project-filter-bar {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(14px, calc(env(safe-area-inset-bottom) + 14px));
    z-index: 65030;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 106px;
    gap: 9px;
    max-height: min(70svh, 520px);
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 22px;
    padding: 28px 12px 12px;
    background:
      radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 30%) padding-box,
      linear-gradient(145deg, rgba(255, 255, 255, 0.98), #f8fbff) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 48%, #ffffff), rgba(20, 184, 166, 0.38), rgba(255, 255, 255, 0.8)) border-box;
    box-shadow: 0 30px 82px rgba(15, 23, 42, 0.28);
    opacity: 0;
    overscroll-behavior: contain;
    pointer-events: none;
    transform: translateY(18px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body.design-projects-page .project-filter-bar::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 50%;
    width: 42px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 22%, #cbd5e1);
    transform: translateX(-50%);
  }

  body.is-mobile-design-filter-open.design-projects-page .project-filter-bar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  body.design-projects-page .project-filter-bar label:first-child,
  body.design-projects-page .project-filter-search {
    grid-column: 1 / -1;
  }

  body.design-projects-page .project-filter-bar label {
    gap: 7px;
  }

  body.design-projects-page .project-filter-bar label > span {
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
  }

  body.design-projects-page .project-filter-search {
    position: relative;
  }

  body.design-projects-page .project-filter-search::after {
    content: "";
    position: absolute;
    left: 13px;
    bottom: 15px;
    width: 17px;
    height: 17px;
    background: #64748b;
    mask: url("https://api.iconify.design/lucide/search.svg") center / contain no-repeat;
    -webkit-mask: url("https://api.iconify.design/lucide/search.svg") center / contain no-repeat;
    pointer-events: none;
  }

  body.design-projects-page .project-filter-bar input,
  body.design-projects-page .project-filter-sort.has-custom-sort-dropdown select {
    min-height: 44px;
    border: 1px solid color-mix(in srgb, var(--blue) 14%, #cbd5e1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-size: 15px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
  }

  body.design-projects-page .project-filter-bar input {
    padding: 10px 12px 10px 40px;
  }

  body.design-projects-page .project-filter-sort {
    position: relative;
    min-width: 0;
  }

  body.design-projects-page .project-filter-sort::before {
    display: none;
  }

  body.design-projects-page .project-filter-bar select {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
    white-space: nowrap;
  }

  body.design-projects-page .project-sort-dropdown {
    position: relative;
    display: block;
    min-width: 0;
  }

  body.design-projects-page .project-sort-trigger {
    position: relative;
    width: 100%;
    min-height: 44px;
    justify-content: flex-start;
    border: 1px solid color-mix(in srgb, var(--blue) 16%, #cbd5e1);
    border-radius: 14px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.98), color-mix(in srgb, var(--blue) 4%, #ffffff));
    color: var(--ink);
    padding: 10px 34px 10px 38px;
    font-size: 15px;
    font-weight: 820;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  body.design-projects-page .project-sort-trigger::after {
    content: "";
    position: absolute;
    right: 13px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #64748b;
    border-bottom: 2px solid #64748b;
    transform: translateY(-62%) rotate(45deg);
    transition: transform 160ms ease;
  }

  body.design-projects-page .project-sort-dropdown.is-open .project-sort-trigger {
    border-color: color-mix(in srgb, var(--blue) 48%, #22c55e);
    background:
      radial-gradient(circle at 0 0, color-mix(in srgb, #22c55e 12%, transparent), transparent 42%),
      #ffffff;
  }

  body.design-projects-page .project-sort-dropdown.is-open .project-sort-trigger::after {
    transform: translateY(-22%) rotate(225deg);
  }

  body.design-projects-page .project-sort-menu {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 2;
    display: grid;
    gap: 6px;
    max-height: 236px;
    overflow: auto;
    border: 1px solid color-mix(in srgb, var(--blue) 20%, #dbeafe);
    border-radius: 18px;
    padding: 8px;
    background:
      radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 38%),
      rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.2);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(0.98);
    transform-origin: 50% 100%;
    transition: opacity 160ms ease, transform 160ms ease;
  }

  body.design-projects-page .project-sort-dropdown.is-open .project-sort-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  body.design-projects-page .project-sort-option {
    position: relative;
    min-height: 42px;
    justify-content: flex-start;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #334155;
    padding: 9px 12px 9px 34px;
    font-size: 14px;
    font-weight: 820;
    text-align: left;
    box-shadow: none;
  }

  body.design-projects-page .project-sort-option::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 10px;
    height: 10px;
    border: 2px solid color-mix(in srgb, var(--blue) 30%, #cbd5e1);
    border-radius: 999px;
    transform: translateY(-50%);
  }

  body.design-projects-page .project-sort-option[aria-selected="true"] {
    background: color-mix(in srgb, var(--blue) 9%, #ecfdf5);
    color: color-mix(in srgb, var(--blue) 72%, #047857);
  }

  body.design-projects-page .project-sort-option[aria-selected="true"]::before {
    border-color: color-mix(in srgb, var(--blue) 66%, #22c55e);
    background: radial-gradient(circle, color-mix(in srgb, var(--blue) 82%, #22c55e) 0 42%, transparent 46%);
  }

  body.design-projects-page .project-filter-bar button,
  body.design-projects-page .project-filter-bar a {
    min-height: 44px;
    border-radius: 14px;
  }

  body.design-projects-page .project-filter-bar button[type="submit"] {
    align-self: end;
    border-color: transparent;
    background: linear-gradient(180deg, color-mix(in srgb, #16a34a 88%, #34d399), #16a34a);
    color: #ffffff;
    box-shadow: 0 14px 30px color-mix(in srgb, #16a34a 20%, transparent);
  }

  body.design-projects-page .project-filter-bar a {
    grid-column: 1 / -1;
    background: rgba(255, 255, 255, 0.82);
  }

  body.design-projects-page .video-projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.design-projects-page .design-project-card {
    display: grid;
    grid-template-columns: minmax(108px, 35%) minmax(0, 1fr);
    grid-template-areas: "thumb body" "thumb actions";
    align-items: stretch;
    gap: 10px;
    min-height: 156px;
    border: 1px solid transparent;
    border-radius: 23px;
    padding: 10px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 4%, #ffffff)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 30%, #ffffff), rgba(20, 184, 166, 0.22), rgba(255, 255, 255, 0.72)) border-box;
    box-shadow: 0 20px 52px color-mix(in srgb, var(--blue) 11%, transparent);
  }

  body.design-projects-page .design-project-card:first-child {
    grid-template-columns: 1fr;
    grid-template-areas: "thumb" "body" "actions";
    min-height: 0;
    padding: 11px;
  }

  body.design-projects-page .design-project-card:hover,
  body.design-projects-page .design-project-card.is-mobile-pressed {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--blue) 38%, transparent);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--blue) 16%, transparent);
  }

  body.design-projects-page .design-project-card.is-selected {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #ffffff), #ffffff) padding-box,
      linear-gradient(135deg, var(--blue), rgba(20, 184, 166, 0.42), rgba(255, 255, 255, 0.72)) border-box;
  }

  body.design-projects-page .design-project-thumb {
    grid-area: thumb;
    min-height: 136px;
    border-radius: 18px;
    padding: 9px;
  }

  body.design-projects-page .design-project-card:first-child .design-project-thumb {
    min-height: clamp(210px, 58vw, 270px);
  }

  body.design-projects-page .video-project-body {
    grid-area: body;
    align-content: start;
    padding: 2px 4px 0 0;
  }

  body.design-projects-page .video-project-body strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.design-projects-page .video-project-body span,
  body.design-projects-page .design-project-thumb .design-project-thumb-badge,
  body.design-projects-page .design-project-thumb b {
    font-size: 11px;
  }

  body.design-projects-page .video-project-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px 52px;
    align-self: end;
    gap: 8px;
  }

  body.design-projects-page .video-project-actions a,
  body.design-projects-page .video-project-actions button {
    min-height: 42px;
    border-radius: 15px;
    padding: 8px 10px;
  }

  body.design-projects-page .video-project-actions a {
    border-color: transparent;
    background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #60a5fa), var(--blue));
    color: #ffffff;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--blue) 22%, transparent);
  }

  body.design-projects-page .video-project-actions a:first-child {
    grid-column: 1 / -1;
  }

  body.design-projects-page .video-project-actions a:nth-of-type(2) {
    border-color: rgba(34, 197, 94, 0.28);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(255, 255, 255, 0.86));
    color: #16a34a;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.08);
  }

  body.design-projects-page .video-project-actions button {
    font-size: 0;
  }

  body.design-projects-page .video-project-actions button::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: var(--project-action-icon) center / contain no-repeat;
    -webkit-mask: var(--project-action-icon) center / contain no-repeat;
  }

  body.design-projects-page .video-project-actions button[data-duplicate-project] {
    --project-action-icon: url("https://api.iconify.design/lucide/copy-plus.svg");
    color: var(--blue);
  }

  body.design-projects-page .video-project-actions button[data-delete-project] {
    --project-action-icon: url("https://api.iconify.design/lucide/trash-2.svg");
    color: var(--red);
  }

  body.design-projects-page .video-project-select {
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.72);
  }

  body.design-projects-page .video-project-bulk {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 82px));
    z-index: 65014;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 22px;
    padding: 10px;
  }

  body.design-projects-page .video-project-bulk[hidden] {
    display: none;
  }

  body.design-projects-page .video-project-bulk div,
  body.design-projects-page .video-project-bulk div:first-child {
    min-width: 0;
    width: auto;
  }

  body.design-projects-page .video-project-bulk strong {
    display: none;
  }

  body.design-projects-page .video-project-bulk button {
    min-height: 38px;
    border-radius: 14px;
    padding: 8px 10px;
  }

  body.design-projects-page .video-project-empty {
    display: grid;
    gap: 12px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 23px;
    padding: 18px;
    text-align: left;
  }

  body.design-projects-page .video-project-empty[hidden] {
    display: none;
  }

  body.design-projects-page .video-project-empty div {
    display: grid;
    gap: 4px;
  }

  body.design-projects-page .video-project-empty strong,
  body.design-projects-page .video-project-empty span {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body.design-projects-page .video-project-empty span {
    line-height: 1.45;
  }

  body.design-projects-page .video-project-empty button {
    justify-self: start;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 16px;
    padding: 0;
    background:
      url("https://api.iconify.design/lucide/sparkles.svg?color=white") center / 20px 20px no-repeat,
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #60a5fa), var(--blue));
    color: transparent;
    font-size: 0;
  }

  body.design-projects-page .project-pagination {
    justify-content: flex-start;
    overflow-x: auto;
    padding: 2px 0 4px;
    scrollbar-width: none;
  }

  body.design-projects-page .project-pagination::-webkit-scrollbar {
    display: none;
  }

  body.design-projects-page .project-delete-modal {
    place-items: end center;
    padding: 14px;
    z-index: 66000;
  }

  body.design-projects-page .project-delete-backdrop {
    background: rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(10px);
  }

  body.design-projects-page .project-delete-dialog {
    width: 100%;
    border-radius: 24px;
    padding: 18px;
    transform-origin: bottom center;
  }

  body.design-projects-page .project-delete-dialog h2 {
    font-size: 22px;
  }

  body.design-projects-page .project-delete-dialog footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .theme-dark.design-projects-page .detail-topbar,
  .theme-dark.design-projects-page .project-filter-bar,
  .theme-dark.design-projects-page .design-project-card,
  .theme-dark.design-projects-page .design-projects-shell .video-projects-head {
    background:
      linear-gradient(rgba(17, 26, 46, 0.94), rgba(17, 26, 46, 0.9)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 42%, #1e293b), rgba(20, 184, 166, 0.28), rgba(84, 102, 137, 0.38)) border-box;
  }
}

body.design-projects-page .detail-topbar .language-switcher {
  display: none;
}

body.design-projects-page .design-project-mobile-filter-toggle {
  display: none;
}

@media (max-width: 760px) {
  body.design-projects-page .design-project-mobile-filter-toggle {
    display: inline-grid;
    place-items: center;
  }
}

body.video-projects-page:not(.design-projects-page) .video-project-mobile-filter-toggle {
  display: none;
}

@media (max-width: 760px) {
  body.video-projects-page:not(.design-projects-page) {
    min-height: 100svh;
    overflow-x: hidden;
    background:
      radial-gradient(circle at 12% 6%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 34%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #f8fbff) 0, #eef8f6 54%, #f8fbff 100%);
  }

  body.is-mobile-video-filter-open,
  body.is-mobile-design-filter-open {
    overflow: hidden;
    touch-action: none;
  }

  body.video-projects-page:not(.design-projects-page) .detail-topbar {
    position: sticky;
    top: 0;
    z-index: 65000;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 7px 11px 4px;
    border: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.68));
    box-shadow: none;
    backdrop-filter: blur(18px);
  }

  body.video-projects-page:not(.design-projects-page) .detail-topbar .topbar-copy {
    min-width: 0;
  }

  body.video-projects-page:not(.design-projects-page) .detail-topbar .eyebrow {
    margin: 0;
    font-size: 10px;
    line-height: 1;
  }

  body.video-projects-page:not(.design-projects-page) .detail-topbar .back-link {
    display: inline-block;
    max-width: 142px;
    overflow: hidden;
    color: var(--blue);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.video-projects-page:not(.design-projects-page) .detail-topbar h1 {
    max-width: 164px;
    margin: 2px 0 0;
    overflow: hidden;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.video-projects-page:not(.design-projects-page) .detail-topbar .account-bar {
    right: clamp(12px, 17vw, 82px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  body.video-projects-page:not(.design-projects-page) .detail-topbar .language-switcher {
    display: none;
  }

  body.video-projects-page:not(.design-projects-page) .detail-topbar .detail-workspace-link {
    width: 42px;
    min-width: 42px;
    min-height: 42px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--blue) 28%, rgba(255, 255, 255, 0.82));
    border-radius: 16px;
    padding: 0;
    font-size: 0;
    background:
      url("https://api.iconify.design/lucide/layout-dashboard.svg?color=%232563eb") center / 19px 19px no-repeat,
      radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.95), transparent 36%),
      color-mix(in srgb, var(--blue) 10%, #ffffff);
    box-shadow:
      0 12px 28px color-mix(in srgb, var(--blue) 14%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
  }

  body.video-projects-page:not(.design-projects-page) .video-projects-shell {
    display: grid;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding: 10px 12px calc(96px + env(safe-area-inset-bottom));
  }

  body.video-projects-page:not(.design-projects-page) .video-projects-head {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: end;
    gap: 10px;
    overflow: visible;
    border: 1px solid transparent;
    border-radius: 24px;
    padding: 17px;
    background:
      radial-gradient(circle at 85% 16%, color-mix(in srgb, var(--blue) 17%, transparent), transparent 30%) padding-box,
      linear-gradient(135deg, rgba(255, 255, 255, 0.95), color-mix(in srgb, var(--blue) 7%, #ffffff)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 44%, #ffffff), rgba(20, 184, 166, 0.3), rgba(255, 255, 255, 0.76)) border-box;
    box-shadow: 0 22px 58px color-mix(in srgb, var(--blue) 14%, transparent);
  }

  body.video-projects-page:not(.design-projects-page) .video-projects-head span {
    display: inline-flex;
    width: fit-content;
    border-radius: 999px;
    padding: 5px 9px;
    background: color-mix(in srgb, var(--blue) 10%, #ffffff);
    color: var(--blue);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
  }

  body.video-projects-page:not(.design-projects-page) .video-projects-head strong {
    margin-top: 7px;
    font-size: clamp(30px, 10.5vw, 44px);
    line-height: 0.94;
  }

  body.video-projects-page:not(.design-projects-page) .video-projects-head small {
    max-width: 190px;
    font-size: 12px;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-mobile-filter-toggle {
    position: absolute;
    top: 17px;
    right: 120px;
    display: inline-grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--blue) 30%, rgba(255, 255, 255, 0.82));
    border-radius: 18px;
    padding: 0;
    background:
      url("https://api.iconify.design/lucide/sliders-horizontal.svg?color=%232563eb") center / 21px 21px no-repeat,
      radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.98), transparent 36%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #ffffff), rgba(255, 255, 255, 0.84));
    box-shadow:
      0 16px 36px color-mix(in srgb, var(--blue) 16%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    font-size: 0;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-mobile-filter-toggle::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 9px;
    width: 7px;
    height: 7px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 84%, #22c55e);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--blue) 20%, transparent);
  }

  body.video-projects-page:not(.design-projects-page) .video-project-mobile-filter-toggle:hover,
  body.video-projects-page:not(.design-projects-page) .video-project-mobile-filter-toggle:focus-visible,
  body.video-projects-page:not(.design-projects-page) .video-project-mobile-filter-toggle[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--blue) 54%, rgba(255, 255, 255, 0.82));
    box-shadow:
      0 18px 40px color-mix(in srgb, var(--blue) 22%, transparent),
      0 0 0 5px color-mix(in srgb, var(--blue) 10%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    transform: translateY(-1px);
  }

  body.video-projects-page:not(.design-projects-page) .video-projects-head > button[data-create-project] {
    position: absolute;
    top: 17px;
    right: 64px;
    z-index: 2;
    display: inline-grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border: 1px solid color-mix(in srgb, var(--blue) 30%, rgba(255, 255, 255, 0.82));
    border-radius: 18px;
    padding: 0;
    background:
      url("https://api.iconify.design/lucide/circle-plus.svg?color=%232563eb") center / 22px 22px no-repeat,
      radial-gradient(circle at 32% 20%, rgba(255, 255, 255, 0.98), transparent 36%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 8%, #ffffff), rgba(255, 255, 255, 0.84));
    color: transparent;
    box-shadow:
      0 16px 36px color-mix(in srgb, var(--blue) 16%, transparent),
      inset 0 1px 0 rgba(255, 255, 255, 0.94);
    font-size: 0;
  }

  body.video-projects-page:not(.design-projects-page) .video-projects-shell:has(.video-project-empty:not([hidden])) .video-projects-head > button[data-create-project] {
    display: inline-grid;
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 82px));
    z-index: 65030;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(118px, 0.44fr);
    gap: 11px;
    max-height: min(62svh, 520px);
    overflow: auto;
    overflow-x: visible;
    border: 1px solid transparent;
    border-radius: 28px;
    padding: 22px 14px 14px;
    background:
      radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 30%) padding-box,
      linear-gradient(145deg, #ffffff, #f8fbff) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 48%, #ffffff), rgba(20, 184, 166, 0.38), rgba(255, 255, 255, 0.8)) border-box;
    box-shadow:
      0 32px 88px rgba(15, 23, 42, 0.32),
      inset 0 1px 0 rgba(255, 255, 255, 0.92);
    opacity: 0;
    overscroll-behavior: contain;
    pointer-events: none;
    transform: translateY(18px) scale(0.98);
    transition: opacity 180ms ease, transform 180ms ease;
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 50%;
    width: 48px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--blue) 22%, #94a3b8);
    transform: translateX(-50%);
  }

  body.is-mobile-video-filter-open.video-projects-page:not(.design-projects-page) .project-filter-bar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar label:first-child {
    grid-column: 1 / -1;
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar label {
    gap: 7px;
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar label > span {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 18px;
    border-radius: 999px;
    padding: 2px 7px;
    background: color-mix(in srgb, var(--blue) 7%, transparent);
    color: color-mix(in srgb, var(--ink) 70%, var(--blue));
    font-size: 10px;
    font-weight: 900;
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar input,
  body.video-projects-page:not(.design-projects-page) .project-filter-bar select {
    min-height: 48px;
    border-radius: 15px;
    font-size: 16px;
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar input,
  body.video-projects-page:not(.design-projects-page) .project-sort-trigger {
    border-color: color-mix(in srgb, var(--blue) 18%, #dbeafe);
    background:
      radial-gradient(circle at 0 0, color-mix(in srgb, var(--blue) 6%, transparent), transparent 42%),
      rgba(255, 255, 255, 0.96);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 8px 24px color-mix(in srgb, var(--blue) 7%, transparent);
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar button,
  body.video-projects-page:not(.design-projects-page) .project-filter-bar a {
    min-height: 44px;
    border-radius: 15px;
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar button[type="submit"] {
    border-color: color-mix(in srgb, var(--blue) 28%, #93c5fd);
    background:
      radial-gradient(circle at 24% 0%, rgba(255, 255, 255, 0.42), transparent 36%),
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 86%, #60a5fa), var(--blue));
    color: #ffffff;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--blue) 24%, transparent);
  }

  body.video-projects-page:not(.design-projects-page) .project-filter-bar a {
    grid-column: 1 / -1;
    justify-content: center;
    background: rgba(255, 255, 255, 0.78);
  }

  body.video-projects-page:not(.design-projects-page) .video-projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-card {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 10px;
    min-height: 0;
    border: 1px solid transparent;
    border-radius: 23px;
    padding: 10px;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.94), color-mix(in srgb, var(--blue) 4%, #ffffff)) padding-box,
      linear-gradient(135deg, color-mix(in srgb, var(--blue) 30%, #ffffff), rgba(20, 184, 166, 0.22), rgba(255, 255, 255, 0.72)) border-box;
    box-shadow: 0 20px 52px color-mix(in srgb, var(--blue) 11%, transparent);
  }

  body.video-projects-page:not(.design-projects-page) .video-project-card:hover,
  body.video-projects-page:not(.design-projects-page) .video-project-card.is-mobile-pressed {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--blue) 38%, transparent);
    box-shadow: 0 24px 60px color-mix(in srgb, var(--blue) 16%, transparent);
  }

  body.video-projects-page:not(.design-projects-page) .video-project-thumb {
    grid-row: auto;
    height: auto;
    min-height: clamp(186px, 53vw, 245px);
    border-radius: 18px;
    padding: 9px;
    background-size: cover;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-thumb span {
    max-width: calc(100% - 44px);
    padding: 5px 8px;
    font-size: 11px;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-thumb b {
    max-width: 100%;
    padding: 6px 8px;
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-body {
    min-width: 0;
    padding: 0 2px;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-body strong {
    display: -webkit-box;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.12;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-body > span {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-meta {
    gap: 5px;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-meta em {
    min-height: 24px;
    padding: 5px 7px;
    font-size: 10.5px;
    white-space: nowrap;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-actions a,
  body.video-projects-page:not(.design-projects-page) .video-project-actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    border-radius: 15px;
    padding: 8px 10px;
    white-space: nowrap;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-actions a:first-child {
    grid-column: 1 / -1;
    border-color: transparent;
    background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #60a5fa), var(--blue));
    color: #ffffff;
    box-shadow: 0 14px 30px color-mix(in srgb, var(--blue) 22%, transparent);
  }

  body.video-projects-page:not(.design-projects-page) .video-project-actions a:nth-of-type(2) {
    border: 1px solid rgba(34, 197, 94, 0.28);
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.14), rgba(255, 255, 255, 0.86));
    color: #16a34a;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.08);
    font-weight: 900;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-actions a:nth-of-type(2)::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url("https://api.iconify.design/lucide/send.svg") center / contain no-repeat;
    -webkit-mask: url("https://api.iconify.design/lucide/send.svg") center / contain no-repeat;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-actions a:nth-of-type(2):has(img)::before {
    content: none;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-actions button {
    border: 1px solid rgba(215, 25, 32, 0.3);
    background: linear-gradient(180deg, rgba(215, 25, 32, 0.06), rgba(255, 255, 255, 0.88));
    color: var(--red);
    font-size: 0;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-actions button::before {
    content: "";
    width: 18px;
    height: 18px;
    background: currentColor;
    mask: url("https://api.iconify.design/lucide/trash-2.svg") center / contain no-repeat;
    -webkit-mask: url("https://api.iconify.design/lucide/trash-2.svg") center / contain no-repeat;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-select {
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255, 255, 255, 0.72);
  }

  body.video-projects-page:not(.design-projects-page) .video-project-bulk {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: max(82px, calc(env(safe-area-inset-bottom) + 82px));
    z-index: 65014;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    border-radius: 22px;
    padding: 10px;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-bulk[hidden] {
    display: none;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-bulk div,
  body.video-projects-page:not(.design-projects-page) .video-project-bulk div:first-child {
    min-width: 0;
    width: auto;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-bulk strong {
    display: none;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-empty {
    display: grid;
    gap: 12px;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    border-radius: 23px;
    padding: 18px;
    text-align: left;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-empty[hidden] {
    display: none;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-empty div {
    display: grid;
    gap: 4px;
    min-width: 0;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-empty strong,
  body.video-projects-page:not(.design-projects-page) .video-project-empty span {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
  }

  body.video-projects-page:not(.design-projects-page) .video-project-empty button {
    justify-self: start;
    width: 48px;
    min-width: 48px;
    height: 48px;
    min-height: 48px;
    border-radius: 16px;
    padding: 0;
    background:
      url("https://api.iconify.design/lucide/circle-plus.svg?color=white") center / 21px 21px no-repeat,
      linear-gradient(180deg, color-mix(in srgb, var(--blue) 88%, #60a5fa), var(--blue));
    color: transparent;
    font-size: 0;
  }

  body.video-projects-page:not(.design-projects-page) .project-delete-modal {
    place-items: end center;
    padding: 14px;
    z-index: 66000;
  }

  body.video-projects-page:not(.design-projects-page) .project-delete-backdrop {
    background: rgba(15, 23, 42, 0.24);
    backdrop-filter: blur(10px);
  }

  body.video-projects-page:not(.design-projects-page) .project-delete-dialog {
    width: 100%;
    border-radius: 24px;
    padding: 18px;
    transform-origin: bottom center;
  }

  body.video-projects-page:not(.design-projects-page) .project-delete-dialog footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  body.video-projects-page .project-sort-trigger {
    min-height: 44px;
    border-radius: 14px;
    padding: 10px 34px 10px 38px;
    font-size: 15px;
  }

  body.video-projects-page .project-sort-trigger::before {
    width: 18px;
    height: 18px;
  }

  body.video-projects-page .project-sort-menu {
    top: auto;
    bottom: calc(100% + 10px);
    z-index: 70080;
    gap: 6px;
    border-radius: 18px;
    padding: 8px;
    transform: translateY(8px) scale(0.98);
    transform-origin: 50% 100%;
  }

  body.video-projects-page .project-sort-dropdown.is-open .project-sort-menu {
    transform: translateY(0) scale(1);
  }

  body.video-projects-page .project-sort-option {
    min-height: 42px;
    border-radius: 12px;
    padding: 9px 12px 9px 34px;
    font-size: 14px;
  }

  body.video-projects-page .project-sort-menu[data-project-sort-portal] {
    position: fixed;
    right: auto;
    z-index: 70080;
  }
}

@media (max-width: 760px) {
  body.is-mobile-workspace .resume-template-picker {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  body.is-mobile-workspace .resume-template-picker button {
    gap: 7px;
    border-radius: 15px;
    padding: 8px;
  }

  body.is-mobile-workspace .resume-template-picker button .resume-template-number {
    top: 8px;
    left: 8px;
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  body.is-mobile-workspace .resume-template-picker button strong {
    font-size: 12px;
    white-space: nowrap;
  }

  body.is-mobile-workspace .resume-template-picker button small {
    display: none;
  }

  body.is-mobile-workspace .resume-template-preview {
    min-height: 122px;
    border-radius: 11px;
  }
}

@media (max-width: 760px) {
  .merchant-link-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    max-width: 100%;
    margin-top: 6px;
  }

  .landing-page .merchant-link-strip a {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    grid-template-columns: 24px minmax(0, 1fr);
    justify-content: stretch;
    align-content: center;
    gap: 7px;
    border-radius: 16px;
    padding: 8px 9px;
    background:
      radial-gradient(circle at 16% 18%, color-mix(in srgb, var(--blue) 10%, transparent), transparent 32%),
      rgba(255, 255, 255, 0.72);
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055);
    font-size: 10.5px;
    line-height: 1.08;
    text-align: left;
    white-space: normal;
  }

  .landing-page .merchant-link-strip a:nth-child(1),
  .landing-page .merchant-link-strip a:nth-child(4) {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.86), color-mix(in srgb, var(--blue) 5%, #ffffff)),
      rgba(255, 255, 255, 0.74);
  }

  .landing-page .merchant-link-strip a:nth-child(2),
  .landing-page .merchant-link-strip a:nth-child(3) {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.74), color-mix(in srgb, var(--green) 5%, #ffffff)),
      rgba(255, 255, 255, 0.68);
  }

  .landing-page .merchant-link-strip a::before {
    width: 24px;
    height: 24px;
    border: 1px solid color-mix(in srgb, var(--blue) 18%, rgba(148, 163, 184, 0.24));
    border-radius: 9px;
    background:
      var(--editor-icon) center / 14px 14px no-repeat,
      color-mix(in srgb, var(--blue) 7%, #ffffff);
    opacity: 1;
  }

  .legal-info-nav a {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: start;
    border-radius: 14px;
    padding: 0 12px;
    font-size: 12px;
    white-space: normal;
  }

  .legal-info-page .landing-nav {
    width: calc(100% - 24px);
  }

  .legal-info-page .landing-nav nav {
    gap: 6px;
  }

  .legal-info-page .landing-nav nav a {
    max-width: 132px;
  }

  .legal-info-shell {
    width: min(100% - 24px, 560px);
    padding: 12px 0 28px;
  }

  .legal-info-hero {
    gap: 11px;
    margin-bottom: 14px;
  }

  .legal-info-hero h1 {
    font-size: 34px;
  }

  .legal-info-hero p {
    font-size: 14px;
  }

  .legal-info-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .legal-document-list {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .legal-document-list a {
    min-height: 0;
    border-radius: 18px;
    padding: 15px;
  }

  .legal-document-list strong {
    font-size: 17px;
  }

  .legal-document-list p {
    font-size: 12px;
  }

  .legal-breadcrumbs {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .legal-document {
    gap: 12px;
    border-radius: 20px;
    padding: 14px;
  }

  .legal-document-hero {
    gap: 11px;
    padding-bottom: 14px;
  }

  .legal-document-hero h1 {
    font-size: 31px;
  }

  .legal-document-hero p {
    font-size: 13px;
  }

  .legal-document-hero dl {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .legal-stars-card {
    grid-template-columns: 1fr;
    gap: 12px;
    border-radius: 16px;
    padding: 14px;
  }

  .legal-stars-card h2 {
    font-size: 22px;
  }

  .legal-stars-card p,
  .legal-stars-card li {
    font-size: 13px;
  }

  .legal-market-card {
    grid-template-columns: 1fr;
    gap: 12px;
    border-radius: 16px;
    padding: 14px;
  }

  .legal-market-card h2 {
    font-size: 22px;
  }

  .legal-market-card p,
  .legal-market-card a {
    font-size: 13px;
  }

  .legal-market-card nav {
    grid-template-columns: 1fr;
    min-width: 0;
  }

  .legal-document-section {
    border-radius: 15px;
    padding: 13px;
  }

  .legal-document-section h2 {
    font-size: 15px;
  }

  .legal-document-section p,
  .legal-document-section ol,
  .legal-document-section ul,
  .legal-contact-list {
    font-size: 13px;
  }

  .docs-shell {
    width: min(100% - 24px, 560px);
    padding: 12px 0 30px;
  }

  .docs-hero {
    grid-template-columns: 1fr;
    gap: 11px;
    margin-bottom: 14px;
  }

  .docs-hero-copy h1 {
    font-size: clamp(38px, 10vw, 47px);
    line-height: 0.98;
  }

  .docs-hero-copy p,
  .docs-section p {
    font-size: 13px;
  }

  .docs-hero-visual {
    border-radius: 18px;
    padding: 12px;
  }

  .docs-flow-node {
    border-radius: 15px;
    padding: 14px 14px 14px 54px;
  }

  .docs-flow-node::before {
    left: 15px;
    top: 15px;
    width: 24px;
    height: 24px;
  }

  .docs-flow-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .docs-flow-grid span {
    min-height: 52px;
    border-radius: 13px;
    padding: 17px 10px 10px 42px;
    font-size: 12px;
  }

  .docs-flow-grid span::before {
    left: 12px;
    top: 16px;
    width: 19px;
    height: 19px;
  }

  .docs-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .docs-actions a {
    width: 100%;
    justify-content: center;
  }

  .docs-quick {
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 14px 0;
  }

  .docs-quick article {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 4px 10px;
    min-height: 0;
    padding: 13px;
  }

  .docs-quick span {
    grid-row: 1 / span 2;
  }

  .docs-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .docs-toc {
    position: static;
    gap: 6px;
    padding: 12px;
  }

  .docs-toc button {
    padding: 8px 9px;
  }

  .docs-toc-subitems {
    margin-left: 34px;
  }

  .docs-section {
    gap: 8px;
    scroll-margin-top: 18px;
    border-radius: 16px;
    padding: 14px;
  }

  .docs-section h2 {
    font-size: 18px;
  }

  .docs-section-head {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 9px;
  }

  .docs-section-head span {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .docs-subsection-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .docs-video-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .docs-faq summary {
    font-size: 14px;
  }

  .legal-info-grid article {
    min-height: 0;
  }

  .legal-info-grid strong {
    font-size: 14px;
  }

  .legal-info-grid p {
    font-size: 12px;
  }

  .merchant-compliance {
    grid-template-columns: 1fr;
    gap: 9px;
    max-width: 100%;
    margin-top: 14px;
  }

  .merchant-compliance article {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 5px 10px;
    border-radius: 16px;
    padding: 12px;
  }

  .merchant-compliance article::before {
    grid-row: 1 / span 3;
    width: 30px;
    height: 30px;
  }

  .merchant-compliance article > span,
  .merchant-compliance strong,
  .merchant-compliance p {
    grid-column: 2;
    min-width: 0;
  }

  .merchant-compliance strong {
    font-size: 13px;
  }

  .merchant-compliance p {
    font-size: 11px;
  }
}

/* Landing hero slider final layout guard */
.landing-page .landing-hero {
  display: block;
  width: min(1180px, calc(100% - 56px));
  max-width: none;
  margin-inline: auto;
  padding: 48px 0 72px;
  overflow: visible;
}

.landing-page .landing-hero-viewport {
  width: 100%;
  overflow: hidden;
  border-radius: 28px;
}

.landing-page .landing-hero-track {
  display: flex;
  align-items: stretch;
  gap: 80px;
  width: 100%;
  transform: translateX(calc(var(--landing-slide-index, 0) * ((-100%) - 80px)));
}

.landing-page .landing-hero-slide {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  gap: clamp(18px, 2.4vw, 30px);
  align-items: center;
  padding: 8px 8px 10px;
}

.landing-page .landing-hero-slide > .landing-copy,
.landing-page .landing-hero-slide > .landing-console,
.landing-page .landing-hero-slide > .landing-feature-board {
  min-width: 0;
  max-width: 100%;
}

.landing-page .landing-copy,
.landing-page .landing-console,
.landing-page .landing-feature-board {
  align-self: center;
  box-shadow: none;
}

.landing-page .feature-list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  border: 1px solid color-mix(in srgb, var(--blue) 10%, var(--line));
  border-radius: 18px;
  padding: 13px;
  list-style: none;
  background: rgba(255, 255, 255, 0.72);
  color: #64748b;
  font-size: 13px;
  line-height: 1.25;
}

.landing-page .feature-list span {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #64748b;
  font-size: 13px;
  font-weight: 860;
}

.landing-page .feature-list span::before {
  content: "";
  width: 18px;
  height: 18px;
  background: var(--editor-icon) center / contain no-repeat;
}

.landing-page .landing-slide-dots {
  bottom: 26px;
}

.landing-page .landing-slide-arrow.is-prev {
  left: -50px;
}

.landing-page .landing-slide-arrow.is-next {
  right: -50px;
}

.landing-page .landing-console {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blue) 18%, #ffffff);
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 244, 255, 0.82)) padding-box,
    linear-gradient(145deg, rgba(191, 219, 254, 0.82), rgba(255, 255, 255, 0.72), rgba(125, 211, 252, 0.38)) border-box;
  box-shadow:
    0 28px 70px rgba(37, 99, 235, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -18px 42px rgba(96, 165, 250, 0.08);
  backdrop-filter: blur(18px);
}

.landing-page .landing-console::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 0 28%, rgba(255, 255, 255, 0.48) 28% 34%, transparent 34%),
    radial-gradient(circle at 18% 8%, rgba(255, 255, 255, 0.82), transparent 26%),
    radial-gradient(circle at 88% 92%, rgba(37, 99, 235, 0.1), transparent 32%);
  opacity: 0.72;
  transform: none;
  animation: none;
  z-index: -1;
}

.landing-page .landing-console::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  z-index: 1;
  width: 74px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 16%, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.74);
  transform: translateX(-50%);
  pointer-events: none;
}

.landing-page .console-top {
  position: relative;
  z-index: 2;
  min-height: 58px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 0;
  padding: 12px 14px;
  background:
    linear-gradient(105deg, #151e31 0 31%, #0f172a 31% 100%);
  box-shadow:
    0 16px 38px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.landing-page .console-top::after {
  content: "";
  position: absolute;
  left: 36%;
  top: -30%;
  width: 18%;
  height: 160%;
  background: rgba(255, 255, 255, 0.045);
  transform: skewX(-14deg);
  pointer-events: none;
}

.landing-page .console-top-links {
  gap: 8px;
}

.landing-page .console-top-links a {
  min-height: 34px;
  border-color: rgba(147, 197, 253, 0.24);
  padding: 7px 11px;
  color: #dbeafe;
}

.landing-page .console-top-links a:first-child {
  border-color: transparent;
  background: transparent;
  color: #f8fafc;
}

.landing-page .console-top-links a:not(:first-child) {
  background: rgba(147, 197, 253, 0.11);
}

.landing-page .console-top-links a:hover,
.landing-page .console-top-links a:focus-visible {
  border-color: rgba(191, 219, 254, 0.58);
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  transform: translateY(-1px);
}

.landing-page .console-orbit {
  position: relative;
  inset: auto;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 10px 0 14px;
  pointer-events: auto;
}

.landing-page .console-orbit a {
  width: 42px;
  height: 42px;
  border-color: color-mix(in srgb, var(--blue) 24%, var(--line));
  border-radius: 14px;
  background:
    radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.94), transparent 42%),
    rgba(255, 255, 255, 0.78);
  color: var(--blue);
  box-shadow:
    0 12px 26px rgba(37, 99, 235, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  pointer-events: auto;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.landing-page .console-orbit a:hover,
.landing-page .console-orbit a:focus-visible {
  border-color: color-mix(in srgb, var(--blue) 52%, var(--line));
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(37, 99, 235, 0.16);
  outline: none;
  transform: translateY(-3px);
}

.landing-page .console-orbit a i {
  width: 20px;
  height: 20px;
}

.landing-page .console-grid {
  position: relative;
  z-index: 2;
  gap: 12px;
  padding: 0 16px 22px;
}

.landing-page .console-grid article {
  border-color: color-mix(in srgb, var(--blue) 13%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(246, 250, 255, 0.88));
  box-shadow:
    0 16px 36px rgba(37, 99, 235, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.landing-page .console-grid article::before {
  border-radius: 13px;
  background:
    var(--editor-icon) center / 22px 22px no-repeat,
    color-mix(in srgb, var(--blue) 10%, #ffffff);
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--blue) 28%, transparent),
    0 8px 18px rgba(37, 99, 235, 0.1);
}

@media (min-width: 1081px) {
  .landing-page {
    min-height: 100svh;
    overflow-x: hidden;
  }

  .landing-page .landing-nav {
    min-height: 76px;
    padding: 18px 28px 12px;
  }

  .landing-page .landing-nav strong {
    font-size: 20px;
  }

  .landing-page .landing-nav .eyebrow {
    margin-bottom: 3px;
  }

  .landing-page .landing-nav a,
  .landing-page .primary-link,
  .landing-page .secondary-link {
    min-height: 38px;
    padding: 8px 13px;
  }

  .landing-page .landing-hero {
    width: min(1160px, calc(100% - 124px));
    padding: 28px 0 38px;
  }

  .landing-page .landing-hero::before {
    width: 82px;
    height: 82px;
    left: -56px;
    border-radius: 24px;
    background-size: 36px 36px, auto, auto;
  }

  .landing-page .landing-hero-slide {
    grid-template-columns: minmax(0, 0.95fr) minmax(350px, 1.05fr);
    gap: clamp(20px, 2.2vw, 28px);
    padding: 6px 8px 8px;
  }

  .landing-page .landing-detail-slide .landing-copy,
  .landing-page .landing-copy {
    gap: 14px;
  }

  .landing-page .landing-copy h1 {
    font-size: clamp(40px, 5.6vw, 64px);
    line-height: 0.95;
  }

  .landing-page .landing-copy p:not(.eyebrow) {
    font-size: 15px;
    line-height: 1.5;
  }

  .landing-page .landing-actions {
    margin-top: 12px;
  }

  .landing-page .landing-slide-points {
    gap: 8px;
    margin-top: 2px;
  }

  .landing-page .landing-slide-points span,
  .landing-page .feature-list span {
    font-size: 13px;
  }

  .landing-page .landing-console,
  .landing-page .landing-feature-board {
    border-radius: 24px;
  }

  .landing-page .console-grid {
    gap: 12px;
  }

  .landing-page .console-grid article {
    min-height: 128px;
    padding: 15px;
  }

  .landing-page .console-orbit {
    margin: 14px 6px 4px;
  }

  .landing-page .feature-board-top {
    padding-bottom: 12px;
  }

  .landing-page .feature-flow,
  .landing-page .feature-stats {
    gap: 12px;
    margin-top: 15px;
  }

  .landing-page .feature-flow article,
  .landing-page .feature-stats article {
    min-height: 100px;
    border-radius: 16px;
    padding: 13px;
  }

  .landing-page .feature-flow article::before {
    width: 24px;
    height: 24px;
  }

  .landing-page .feature-flow b,
  .landing-page .feature-stats b {
    font-size: 21px;
  }

  .landing-page .feature-list {
    gap: 9px;
    margin-top: 13px;
    border-radius: 16px;
    padding: 12px;
  }

  .landing-page .feature-progress {
    margin-top: 15px;
  }

  .landing-page .landing-slide-dots {
    bottom: 18px;
  }

  .landing-page .landing-dock {
    margin-bottom: 24px;
    padding: 9px;
  }

  .landing-page .landing-dock a {
    width: 54px;
    height: 54px;
    border-radius: 18px;
  }

  .landing-page .landing-dock a::before {
    width: 23px;
    height: 23px;
  }
}

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

  .landing-page .landing-console {
    border-radius: 24px;
  }

  .landing-page .console-top {
    min-height: 46px;
    padding: 10px 12px;
  }

  .landing-page .console-orbit {
    gap: 7px;
    margin: 8px 0 10px;
  }

  .landing-page .console-orbit a {
    width: 34px;
    height: 34px;
    border-radius: 12px;
  }

  .landing-page .console-grid {
    grid-template-columns: 1fr;
    min-height: 216px;
    padding: 12px 4px 7px;
  }

  .landing-page.is-mobile-landing .console-grid article {
    grid-area: 1 / 1;
    grid-template-columns: 38px minmax(0, 1fr);
    align-content: start;
    min-height: 168px;
    padding: 18px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px) scale(0.965);
  }

  .landing-page.is-mobile-landing .console-grid article.is-carousel-active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
}

@media (max-width: 1080px) {
  .landing-page .landing-hero {
    width: min(100% - 36px, 920px);
    padding-top: 34px;
  }

  .landing-page .landing-hero-slide {
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  .landing-page .landing-console,
  .landing-page .landing-feature-board {
    width: 100%;
  }

  .landing-page .landing-slide-arrow {
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .landing-page .landing-slide-arrow.is-prev {
    left: 18px;
  }

  .landing-page .landing-slide-arrow.is-next {
    right: 18px;
  }

  .landing-page .landing-slide-arrow.is-prev:hover,
  .landing-page .landing-slide-arrow.is-prev:focus-visible {
    transform: translateX(-2px);
  }

  .landing-page .landing-slide-arrow.is-next:hover,
  .landing-page .landing-slide-arrow.is-next:focus-visible {
    transform: translateX(2px);
  }
}

@media (max-width: 760px) {
  .landing-page .landing-nav {
    grid-template-columns: minmax(108px, 1fr) minmax(0, auto);
    gap: 6px;
    min-height: 48px;
    padding: 5px 8px 0;
  }

  .landing-page .landing-nav .eyebrow {
    font-size: 9px;
    line-height: 1;
  }

  .landing-page .landing-nav strong {
    max-width: 118px;
    font-size: 15px;
    line-height: 1.04;
  }

  .landing-page .landing-nav nav {
    grid-auto-columns: max-content;
    max-width: min(218px, calc(100vw - 138px));
    gap: 5px;
    overflow: visible;
    padding-bottom: 0;
  }

  .landing-page .landing-nav .language-switcher {
    min-width: 0;
  }

  .landing-page .landing-nav .language-current {
    width: clamp(116px, 34vw, 138px);
    max-width: none;
    min-height: 32px;
    gap: 5px;
    padding: 4px 6px;
  }

  .landing-page .landing-nav .language-current img {
    width: 20px;
    height: 14px;
  }

  .landing-page .landing-nav .language-current span {
    min-width: 0;
    font-size: 12px;
  }

  .landing-page .landing-nav .language-current::after {
    width: 18px;
    height: 18px;
    background-size: 11px 11px, auto, auto;
  }

  .landing-page .landing-nav a {
    min-width: 32px;
    min-height: 32px;
    padding: 7px;
  }

  .landing-page .landing-nav .nav-primary {
    min-width: 34px;
    padding-inline: 8px;
  }

  .landing-page .landing-hero {
    width: min(100% - 18px, 560px);
    padding: 14px 0 18px;
  }

  .landing-page .landing-hero-viewport {
    border-radius: 22px;
  }

  .landing-page .landing-hero-slide {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 2px 0 4px;
  }

  .landing-page .landing-copy,
  .landing-page .landing-console,
  .landing-page .landing-feature-board {
    width: 100%;
  }

  .landing-page .landing-slide-dots {
    position: static;
    margin-top: 12px;
  }

  .landing-page .landing-slide-arrow {
    display: none;
  }

  .landing-page .feature-flow,
  .landing-page .feature-stats {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 380px) {
  .landing-page .landing-nav {
    grid-template-columns: minmax(96px, 1fr) minmax(0, auto);
    gap: 5px;
    padding-inline: 7px;
  }

  .landing-page .landing-nav strong {
    max-width: 104px;
    font-size: 14px;
  }

  .landing-page .landing-nav nav {
    max-width: min(194px, calc(100vw - 112px));
    gap: 4px;
  }

  .landing-page .landing-nav .language-current {
    width: clamp(108px, 32vw, 124px);
    padding-inline: 5px;
  }

  .landing-page .landing-nav .language-current span {
    font-size: 11.5px;
  }
}

body.is-mobile-workspace .package-compose,
body.is-mobile-workspace .package-file-stack,
body.is-mobile-workspace .package-settings,
body.is-mobile-workspace .package-style-picker,
body.is-mobile-workspace .package-language-picker,
body.is-mobile-workspace .package-ai-grid {
  min-width: 0;
  max-width: 100%;
  overflow-x: hidden;
}

body.is-mobile-workspace .package-file-stack,
body.is-mobile-workspace .package-settings {
  grid-template-columns: minmax(0, 1fr);
}

body.is-mobile-workspace .package-name-field,
body.is-mobile-workspace .package-style-picker,
body.is-mobile-workspace .package-ai-grid,
body.is-mobile-workspace .package-action-row,
body.is-mobile-workspace .package-language-picker {
  grid-column: 1;
}

body.is-mobile-workspace .package-language-picker {
  grid-row: auto;
}

body.is-mobile-workspace .package-language-picker .subtitle-language-grid {
  display: grid;
  grid-auto-flow: row;
  grid-auto-columns: initial;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  max-height: 180px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: none;
}

body.is-mobile-workspace .package-language-picker .subtitle-language-option {
  width: 100%;
  min-width: 0;
  scroll-snap-align: none;
}

.tool-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.tool-flow-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--blue) 12%, var(--line));
  border-radius: 12px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.64);
}

.tool-flow-steps button {
  display: flex;
  min-width: 0;
  min-height: 38px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-weight: 850;
}

.tool-flow-steps button span {
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 9%, #ffffff);
  color: var(--blue);
  font-size: 12px;
}

.tool-flow-steps button b {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tool-flow-steps button.is-active {
  background: color-mix(in srgb, var(--blue) 10%, #ffffff);
  color: color-mix(in srgb, var(--blue) 76%, var(--ink));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--blue) 10%, transparent);
}

.tool-flow-step {
  display: none;
  gap: 12px;
  min-width: 0;
}

.tool-flow-step.is-active {
  display: grid;
}

.tool-flow-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.tool-flow-actions .secondary-action {
  min-height: 38px;
  border-radius: 10px;
  padding: 8px 13px;
}

.subtitle-style-choice {
  display: grid;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 0;
}

.subtitle-style-choice legend {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.subtitle-style-choice legend::before {
  content: "";
  width: 14px;
  height: 14px;
  background: color-mix(in srgb, var(--blue) 72%, var(--pink));
  -webkit-mask: url("https://api.iconify.design/lucide/palette.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/palette.svg") center / contain no-repeat;
}

.subtitle-style-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  max-height: 460px;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 2px 3px 6px 0;
  scrollbar-color: var(--scrollbar-thumb) color-mix(in srgb, var(--scrollbar-track) 78%, transparent);
}

.subtitle-style-choice-card {
  position: relative;
  display: grid;
  align-content: stretch;
  min-width: 0;
  min-height: 128px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 42px 10px 10px;
  background: rgba(255, 255, 255, 0.72);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.subtitle-style-choice-card label {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  height: 100%;
  min-width: 0;
  cursor: pointer;
}

.subtitle-style-choice-card,
.subtitle-style-choice-card label,
.subtitle-style-choice-card .subtitle-style-swatch,
.subtitle-style-choice-copy {
  max-width: 100%;
  overflow-x: hidden;
}

.subtitle-style-choice-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subtitle-style-choice-card .subtitle-style-swatch {
  width: 118px;
  min-height: 86px;
  border-radius: 10px;
}

.subtitle-style-choice-card .subtitle-style-swatch b {
  position: relative;
  z-index: 2;
  display: inline-flex;
  max-width: calc(100% - 12px);
  min-height: 28px;
  max-height: 42px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 5px 11px;
  background: rgba(15, 23, 42, 0.48);
  color: #ffffff;
  font-size: clamp(9.5px, 1.1vw, 11px);
  line-height: 1.12;
  text-align: center;
  text-overflow: ellipsis;
  white-space: normal;
  overflow-wrap: anywhere;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 16px rgba(15, 23, 42, 0.2);
}

.subtitle-style-choice-card .subtitle-style-swatch.is-minimal b,
.subtitle-style-choice-card .subtitle-style-swatch.is-typewriter b,
.subtitle-style-choice-card .subtitle-style-swatch.is-soft b {
  color: #111827;
  background: rgba(255, 255, 255, 0.68);
  text-shadow: none;
}

.subtitle-style-choice-copy {
  display: grid;
  align-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 86px;
}

.subtitle-style-choice-copy b,
.subtitle-style-choice-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.subtitle-style-choice-copy b {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.15;
  font-weight: 880;
  white-space: nowrap;
}

.subtitle-style-choice-copy small {
  display: -webkit-box;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.subtitle-style-choice-card:has(input:checked) {
  border-color: color-mix(in srgb, var(--pink) 54%, var(--line));
  background: color-mix(in srgb, var(--pink) 8%, #ffffff);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--pink) 10%, transparent);
}

.subtitle-style-choice-card:has(input:checked)::after {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background:
    url("https://api.iconify.design/lucide/check.svg?color=white") center / 12px 12px no-repeat,
    var(--pink);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--pink) 26%, transparent);
}

.subtitle-style-choice-card:hover {
  border-color: color-mix(in srgb, var(--blue) 42%, var(--line));
  transform: translateY(-1px);
}

.subtitle-style-choice-card a {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-grid;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  justify-items: center;
  grid-auto-flow: column;
  border: 1px solid color-mix(in srgb, var(--pink) 84%, #106de1);
  border-radius: 999px;
  padding: 0;
  background: rgb(255 221 221 / 86%);
  color: color-mix(in srgb, var(--pink) 78%, var(--ink));
  font-size: 0;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.subtitle-style-choice-card a::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("https://api.iconify.design/lucide/external-link.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/external-link.svg") center / contain no-repeat;
}

.subtitle-style-choice-card a:hover,
.subtitle-style-choice-card a:focus-visible {
  border-color: color-mix(in srgb, var(--pink) 54%, var(--line));
  background: #ffffff;
  color: var(--pink);
}

.subtitles-settings,
.package-settings {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  overflow: visible;
}

.subtitles-final-step,
.package-final-step {
  max-width: min(100%, 640px);
}

.tool-flow-step .subtitle-language-grid {
  max-height: 178px;
  overflow-x: hidden;
  overflow-y: auto;
}

@media (max-width: 760px) {
  .tool-flow-steps {
    grid-template-columns: 1fr;
  }

  .tool-flow-steps button {
    justify-content: flex-start;
  }

  .subtitle-style-choice-grid {
    grid-template-columns: 1fr;
    max-height: 360px;
  }

  .subtitle-style-choice-card {
    min-height: 0;
  }

  .subtitle-style-choice-card label {
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .subtitle-style-choice-card .subtitle-style-swatch {
    width: 96px;
    min-height: 72px;
  }

  .tool-flow-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tool-flow-actions .secondary-action:only-child {
    grid-column: 1 / -1;
  }
}

.subtitle-step-grid,
.package-step-grid {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.subtitle-step-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.package-settings {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 10px 12px;
  align-items: start;
}

.package-name-field {
  grid-column: 1;
}

.package-step-grid {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.package-ai-grid {
  grid-column: 1;
  grid-row: 2;
}

.package-action-row {
  grid-column: 1 / -1;
  max-width: none;
}

.subtitle-select-field {
  position: relative;
  gap: 5px;
}

.subtitle-select-field > span {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
}

.subtitle-select-field > span::before {
  content: "";
  width: 14px;
  height: 14px;
  background: color-mix(in srgb, var(--blue) 72%, var(--pink));
}

.subtitles-style-select > span::before,
.package-style-select > span::before {
  -webkit-mask: url("https://api.iconify.design/lucide/palette.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/palette.svg") center / contain no-repeat;
}

.subtitles-language-select > span::before,
.package-language-select > span::before {
  -webkit-mask: url("https://api.iconify.design/lucide/languages.svg") center / contain no-repeat;
  mask: url("https://api.iconify.design/lucide/languages.svg") center / contain no-repeat;
}

.subtitle-select-field select {
  min-height: 42px;
  border-radius: 10px;
  padding: 8px 38px 8px 11px;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1180px) {
  .package-settings,
  .subtitle-step-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .package-name-field,
  .package-step-grid,
  .package-ai-grid,
  .package-action-row {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 760px) {
  .subtitle-select-field select {
    min-height: 46px;
  }
}

.package-style-picker .subtitle-style-current {
  grid-template-columns: 40px minmax(0, 1fr) 16px;
  min-height: 46px;
  padding: 6px 9px;
}

.package-style-picker .subtitle-style-current .subtitle-style-swatch {
  width: 38px;
  min-height: 30px;
}

.package-style-picker .subtitle-style-menu {
  position: absolute;
  z-index: 1300;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  grid-template-columns: 1fr;
}

@media (max-width: 760px) {
  .package-style-picker .subtitle-style-current {
    grid-template-columns: 40px minmax(0, 1fr) 16px;
  }
}