@font-face {
  font-family: "VLyrics Orbit Font";
  src: url("./assets/fonts/orbit/Unbounded-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Rain Font";
  src: url("./assets/fonts/rain/Nunito-Variable.ttf") format("truetype");
  font-weight: 200 1000;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Rage Classic";
  src: url("./assets/fonts/rage/Oswald-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Mono Font";
  src: url("./assets/fonts/rage/Oswald-Variable.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Pixel Font";
  src: url("./assets/fonts/pixel/PressStart2P-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Rage Font";
  src: url("./assets/fonts/rage/StyleFont.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Neon Font";
  src: url("./assets/fonts/neon/StyleFont.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Sad Font";
  src:
    local("Caslon Antique"),
    url("./assets/fonts/sad/StyleFont.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Comic Font";
  src: url("./assets/fonts/comic/StyleFont.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Clean Font";
  src: url("./assets/fonts/clean/StyleFont.otf") format("opentype");
  font-weight: 850;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "VLyrics Rage Cyrillic";
  src: url("./assets/fonts/cyrillic/rage/StyleCyrillic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "VLyrics Rage Cyrillic";
  src: url("./assets/fonts/cyrillic/rage/StyleLatin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "VLyrics Neon Cyrillic";
  src: url("./assets/fonts/cyrillic/neon/StyleCyrillic.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "VLyrics Neon Cyrillic";
  src: url("./assets/fonts/cyrillic/neon/StyleLatin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "VLyrics Sad Cyrillic";
  src: url("./assets/fonts/cyrillic/sad/StyleCyrillic.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "VLyrics Sad Cyrillic";
  src: url("./assets/fonts/cyrillic/sad/StyleLatin.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "VLyrics Comic Cyrillic";
  src: url("./assets/fonts/cyrillic/comic/StyleCyrillic.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "VLyrics Comic Cyrillic";
  src: url("./assets/fonts/cyrillic/comic/StyleLatin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "VLyrics Clean Cyrillic";
  src: url("./assets/fonts/cyrillic/clean/StyleCyrillic.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: block;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "VLyrics Clean Cyrillic";
  src: url("./assets/fonts/cyrillic/clean/StyleLatin.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --bg: #101114;
  --panel: #191b21;
  --panel-2: #22252d;
  --text: #f6f4ef;
  --muted: #a6abb7;
  --line: #363a45;
  --accent: #25e0a4;
  --accent-2: #ffcf5a;
  --hot: #ff4d6d;
  --blue: #5aa7ff;
  --shadow: rgba(0, 0, 0, 0.34);
}

body.theme-light {
  color-scheme: light;
  --bg: #f6f4ef;
  --panel: #ffffff;
  --panel-2: #eef1f0;
  --text: #101114;
  --muted: #68707a;
  --line: #d5dad8;
  --accent: #138f69;
  --accent-2: #b98318;
  --hot: #d43f5c;
  --blue: #3978d4;
  --shadow: rgba(16, 17, 20, 0.14);
}

body.theme-aurora {
  --bg: #090b12;
  --panel: #121723;
  --panel-2: #1b2433;
  --text: #f7fbff;
  --muted: #a5b5c7;
  --line: #314055;
  --accent: #7cf7d4;
  --accent-2: #f7d56c;
  --hot: #ff6b9d;
  --blue: #8ab4ff;
  --shadow: rgba(0, 0, 0, 0.42);
}

body.theme-cyber {
  --bg: #110914;
  --panel: #191021;
  --panel-2: #24162f;
  --text: #fff7fb;
  --muted: #c5a9bd;
  --line: #47304f;
  --accent: #ff4fa3;
  --accent-2: #6ef7ff;
  --hot: #ff3568;
  --blue: #8c7cff;
  --shadow: rgba(10, 0, 18, 0.46);
}

body.theme-royal {
  --bg: #100e16;
  --panel: #181521;
  --panel-2: #24202f;
  --text: #fff8e7;
  --muted: #c2b8a4;
  --line: #4a3d2c;
  --accent: #d9a441;
  --accent-2: #ffe08a;
  --hot: #b75555;
  --blue: #7f9ee8;
  --shadow: rgba(0, 0, 0, 0.44);
}

body.theme-sakura {
  --bg: #160e14;
  --panel: #21171f;
  --panel-2: #2c202a;
  --text: #fff7fb;
  --muted: #d4b6c8;
  --line: #513545;
  --accent: #ff9ac7;
  --accent-2: #ffd7a8;
  --hot: #ff5e8d;
  --blue: #a7c8ff;
  --shadow: rgba(40, 8, 28, 0.4);
}

body.theme-glacier {
  --bg: #071018;
  --panel: #101a24;
  --panel-2: #172534;
  --text: #eefaff;
  --muted: #a8bfd0;
  --line: #284356;
  --accent: #8fe9ff;
  --accent-2: #c8f7ff;
  --hot: #76a8ff;
  --blue: #6ac7ff;
  --shadow: rgba(0, 12, 24, 0.46);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 10% 15%, rgba(37, 224, 164, 0.16), transparent 32%),
    linear-gradient(135deg, #101114 0%, #181820 45%, #171d1d 100%);
  color: var(--text);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

body.theme-light {
  background:
    radial-gradient(circle at 8% 16%, rgba(19, 143, 105, 0.16), transparent 32%),
    linear-gradient(135deg, #f6f4ef 0%, #eef2f0 55%, #f9f7f1 100%);
}

body.theme-aurora {
  background:
    radial-gradient(circle at 16% 12%, rgba(124, 247, 212, 0.14), transparent 30%),
    radial-gradient(circle at 90% 18%, rgba(255, 107, 157, 0.12), transparent 24%),
    linear-gradient(135deg, #090b12 0%, #121723 55%, #0b1417 100%);
}

body.theme-cyber {
  background:
    radial-gradient(circle at 14% 14%, rgba(255, 79, 163, 0.16), transparent 31%),
    radial-gradient(circle at 84% 20%, rgba(110, 247, 255, 0.13), transparent 27%),
    linear-gradient(135deg, #110914 0%, #191021 52%, #0b1020 100%);
}

body.theme-royal {
  background:
    radial-gradient(circle at 18% 16%, rgba(217, 164, 65, 0.18), transparent 28%),
    radial-gradient(circle at 82% 22%, rgba(127, 158, 232, 0.1), transparent 25%),
    linear-gradient(135deg, #100e16 0%, #181521 55%, #14110e 100%);
}

body.theme-sakura {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 154, 199, 0.18), transparent 31%),
    radial-gradient(circle at 86% 18%, rgba(255, 215, 168, 0.12), transparent 25%),
    linear-gradient(135deg, #160e14 0%, #21171f 55%, #171426 100%);
}

body.theme-glacier {
  background:
    radial-gradient(circle at 12% 14%, rgba(143, 233, 255, 0.17), transparent 31%),
    radial-gradient(circle at 88% 20%, rgba(118, 168, 255, 0.12), transparent 25%),
    linear-gradient(135deg, #071018 0%, #101a24 52%, #071824 100%);
}

button,
input,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.workspace {
  position: relative;
  min-height: calc(100vh - 48px);
  overflow: visible;
}

.workspace::after {
  content: "";
  position: absolute;
  left: 18px;
  top: 88px;
  width: 220px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #f6f4ef, var(--accent), transparent);
  box-shadow:
    0 0 12px rgba(246, 244, 239, 0.9),
    0 0 26px rgba(37, 224, 164, 0.55);
  opacity: 0;
  transform: translateX(0) rotate(12deg);
  animation: menu-flash 5.8s ease-in-out infinite;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
}

.wordmark {
  position: relative;
  display: inline-block;
  min-height: 86px;
  margin-left: -58px;
  padding: 18px 64px 26px 70px;
  transform: rotate(-1.5deg) translateX(10px);
  filter:
    drop-shadow(4px 5px 0 #050608)
    drop-shadow(0 0 12px rgba(37, 224, 164, 0.22));
  animation: logo-breathe 3.2s ease-in-out infinite;
}

.wordmark::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 8px;
  top: 0;
  bottom: 2px;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 42% 46%, rgba(37, 224, 164, 0.48) 0%, rgba(37, 224, 164, 0.22) 34%, rgba(37, 224, 164, 0) 70%);
  filter: blur(12px);
  opacity: 0.95;
}

.wordmark-main,
.wordmark-tail {
  display: inline-block;
  font-family: Impact, "Arial Black", Inter, sans-serif;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: none;
  -webkit-text-stroke: 2px #050608;
  text-shadow:
    3px 3px 0 #050608,
    -2px 3px 0 #050608,
    0 0 12px rgba(246, 244, 239, 0.34),
    0 0 24px rgba(37, 224, 164, 0.24);
  animation: metal-glint 4.8s ease-in-out infinite;
}

.wordmark-main {
  position: relative;
  z-index: 2;
  color: #f8f8f3;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.88;
  transform: skewX(-10deg);
}

.wordmark-main::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 10%;
  top: 54%;
  height: 9px;
  background:
    linear-gradient(90deg, transparent 0 8%, #050608 8% 11%, transparent 11% 16%, rgba(255, 77, 109, 0.9) 16% 22%, transparent 22% 31%, #050608 31% 34%, transparent 34% 100%);
  transform: rotate(-6deg);
  opacity: 0.9;
}

.wordmark-main::before {
  content: "";
  position: absolute;
  right: 3%;
  top: -2%;
  width: 26px;
  height: 26px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  opacity: 0;
  transform: rotate(45deg) scale(0.4);
  filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 18px var(--accent));
  animation: corner-spark 5.8s ease-in-out infinite;
}

.wordmark-tail {
  position: absolute;
  right: 6px;
  bottom: 1px;
  z-index: 1;
  color: #25e0a4;
  font-size: clamp(42px, 5.5vw, 70px);
  line-height: 0.8;
  transform: skewX(-14deg) rotate(15deg);
  text-shadow:
    3px 3px 0 #050608,
    -2px 3px 0 #050608,
    0 0 18px rgba(37, 224, 164, 0.78);
  animation:
    metal-glint 4.8s ease-in-out infinite,
    tail-dive 3.2s ease-in-out infinite;
}

h2 {
  font-size: 18px;
}

.privacy-pill {
  border: 1px solid rgba(37, 224, 164, 0.42);
  border-radius: 999px;
  color: var(--accent);
  padding: 10px 14px;
  white-space: nowrap;
  background: rgba(37, 224, 164, 0.08);
}

.topbar-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.account-button {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(37, 224, 164, 0.42);
  border-radius: 50%;
  color: #071318;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
  font-size: 12px;
  font-weight: 1000;
  white-space: nowrap;
}

.account-button.developer-avatar {
  border-color: rgba(255, 207, 90, 0.8);
  box-shadow: 0 0 0 3px rgba(255, 207, 90, 0.08), 0 0 22px rgba(255, 207, 90, 0.22);
}

.account-button img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.account-button span {
  position: relative;
  z-index: 1;
}

.editor-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(340px, 1fr) minmax(240px, 320px);
  gap: 16px;
  align-items: start;
}

.panel {
  background: rgba(25, 27, 33, 0.88);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 50px var(--shadow);
}

.controls {
  position: relative;
  overflow: hidden;
  padding: 18px;
}

.controls::before {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 34%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(246, 244, 239, 0.08) 35%, rgba(37, 224, 164, 0.24) 50%, transparent 70%);
  opacity: 0;
  transform: skewX(-18deg);
  animation: settings-sweep 5.8s ease-in-out infinite;
}

.field + .field {
  margin-top: 18px;
}

label {
  display: block;
  margin-bottom: 8px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

input[type="file"],
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
}

input[type="file"] {
  padding: 12px;
}

textarea {
  min-height: 220px;
  resize: vertical;
  padding: 14px;
  line-height: 1.45;
}

.hint {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.active-work-notice {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(103, 241, 203, 0.34);
  border-radius: 7px;
  background: rgba(12, 22, 23, 0.94);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16);
}

.active-work-notice[hidden] {
  display: none;
}

.active-work-notice.local-work {
  border-color: rgba(255, 205, 88, 0.52);
  background: rgba(28, 23, 13, 0.95);
}

.active-work-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: active-work-spin 0.8s linear infinite;
}

.active-work-notice.local-work .active-work-spinner {
  border-top-color: var(--accent-2);
}

.active-work-copy {
  min-width: 0;
}

.active-work-copy strong,
.active-work-copy small {
  display: block;
}

.active-work-copy strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
}

.active-work-copy small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

@keyframes active-work-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .active-work-spinner {
    animation: none;
  }
}

.row,
.actions,
.split,
.nudge-row,
.stage-toolbar {
  display: flex;
  gap: 10px;
}

.row {
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.sync-command-panel {
  margin-top: 10px;
  border: 1px solid rgba(246, 244, 239, 0.11);
  border-radius: 8px;
  background: rgba(246, 244, 239, 0.035);
  overflow: hidden;
}

.sync-command-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.sync-fold-toggle,
.branch-toggle {
  border: 1px solid rgba(246, 244, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 17, 20, 0.64);
  color: var(--text);
  text-align: left;
}

.sync-fold-toggle {
  flex: 1;
  min-height: 38px;
  padding: 7px 10px;
}

.sync-fold-toggle strong,
.sync-fold-toggle span,
.branch-toggle strong,
.branch-toggle span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-fold-toggle strong {
  font-size: 12px;
}

.sync-fold-toggle span,
.branch-toggle span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.sync-fold-toggle::before,
.branch-toggle::before {
  content: "";
  float: right;
  width: 0;
  height: 0;
  margin-top: 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--accent);
  transition: transform 180ms ease;
}

.sync-fold-toggle[aria-expanded="true"]::before,
.branch-toggle[aria-expanded="true"]::before {
  transform: rotate(180deg);
}

.sync-command-heading #clearLyrics {
  width: 32px;
  min-height: 32px;
}

.sync-command-panel.collapsed .sync-mode-carousel,
.sync-command-panel.collapsed .sync-options-drawer {
  display: none;
}

.sync-mode-carousel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
}

.sync-mode-card {
  min-width: 0;
  min-height: 58px;
  border: 1px solid rgba(246, 244, 239, 0.12);
  border-radius: 8px;
  background: rgba(16, 17, 20, 0.72);
  color: var(--text);
  padding: 8px;
  text-align: left;
}

#alignLyrics {
  border-color: rgba(92, 157, 255, 0.36);
  background: linear-gradient(180deg, rgba(65, 126, 240, 0.18), rgba(16, 17, 20, 0.76));
}

#tapSyncLyrics {
  border-color: rgba(163, 45, 58, 0.46);
  background: linear-gradient(180deg, rgba(116, 22, 38, 0.22), rgba(16, 17, 20, 0.78));
}

#transcribeLyrics {
  border-color: rgba(50, 157, 104, 0.4);
  background: linear-gradient(180deg, rgba(30, 115, 76, 0.2), rgba(16, 17, 20, 0.78));
}

.sync-mode-card strong,
.sync-mode-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sync-mode-card strong {
  font-size: 13px;
  line-height: 1.1;
}

.sync-mode-card span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.sync-mode-card:disabled {
  opacity: 0.48;
  cursor: not-allowed;
}

.sync-mode-card:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(37, 224, 164, 0.42);
}

.gold-action {
  color: #ffd76a;
  border-color: rgba(255, 215, 106, 0.36);
  background: linear-gradient(180deg, rgba(255, 215, 106, 0.12), rgba(16, 17, 20, 0.78));
}

.tap-branch-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.tap-branch .gold-action {
  min-height: 50px;
  text-align: left;
  color: #ffd76a;
  border-color: rgba(255, 215, 106, 0.52);
  background:
    linear-gradient(180deg, rgba(255, 215, 106, 0.18), rgba(255, 164, 46, 0.075)),
    rgba(16, 17, 20, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 239, 178, 0.12), 0 0 18px rgba(255, 207, 90, 0.08);
}

.tap-branch .gold-action span {
  color: rgba(255, 230, 151, 0.78);
}

.tap-branch .gold-action:disabled {
  opacity: 0.72;
  color: rgba(255, 215, 106, 0.72);
  border-color: rgba(255, 215, 106, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 215, 106, 0.11), rgba(255, 164, 46, 0.035)),
    rgba(16, 17, 20, 0.76);
}

.tap-branch .gold-action.active {
  color: #ffeeba;
  border-color: rgba(255, 215, 106, 0.88);
  background:
    radial-gradient(circle at 24% 0%, rgba(255, 241, 179, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(255, 215, 106, 0.26), rgba(255, 164, 46, 0.12)),
    rgba(16, 17, 20, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 245, 198, 0.22), 0 0 24px rgba(255, 207, 90, 0.16);
}

.tap-standard-action {
  color: #d9dde7;
  border-color: rgba(217, 221, 231, 0.24);
  background: linear-gradient(180deg, rgba(217, 221, 231, 0.07), rgba(16, 17, 20, 0.72));
  text-align: left;
}

.sync-options-drawer {
  border-top: 1px solid rgba(246, 244, 239, 0.09);
  padding: 8px;
  background: rgba(0, 0, 0, 0.14);
}

.sync-drawer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.branch-toggle {
  width: 100%;
  min-height: 46px;
  padding: 8px 10px;
  color: var(--text);
}

.sync-drawer-group.open {
  border-color: rgba(246, 244, 239, 0.12);
}

.branch-content,
.tap-branch-actions {
  max-height: 180px;
  opacity: 1;
  overflow: hidden;
  transform: translateY(0);
  transition:
    max-height 220ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    margin-top 180ms ease;
}

.sync-drawer-group.branch-collapsed .branch-content,
.sync-drawer-group.branch-collapsed .tap-branch-actions {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
  transform: translateY(-4px);
}

.sync-drawer-group:not(.open) .precision-access,
.sync-drawer-group:not(.open) #precisionAccessMeta {
  display: none;
}

.compact-sync-modes {
  gap: 5px;
  margin-top: 7px;
}

.compact-sync-modes .quality-mode {
  min-height: 48px;
  padding: 7px;
}

.compact-sync-modes .quality-mode strong {
  font-size: 11px;
}

.compact-sync-modes .quality-mode span {
  font-size: 9px;
}

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

.lyrics-language-modes .quality-mode {
  min-width: 0;
  min-height: 48px;
  padding: 7px 5px;
}

.lyrics-language-modes .quality-mode strong,
.lyrics-language-modes .quality-mode span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.russian-language-mode {
  color: #f4d6dc;
}

.russian-language-mode.active {
  border-color: rgba(238, 92, 119, 0.58);
  background: rgba(238, 92, 119, 0.1);
}

.paste-branch .fast-sync-mode {
  color: #d9dde7;
  border-color: rgba(217, 221, 231, 0.28);
  background:
    linear-gradient(180deg, rgba(217, 221, 231, 0.085), rgba(90, 167, 255, 0.045)),
    rgba(16, 17, 20, 0.72);
}

.paste-branch .fast-sync-mode span {
  color: rgba(217, 221, 231, 0.72);
}

.paste-branch .fast-sync-mode.active {
  color: #f4f7ff;
  border-color: rgba(217, 221, 231, 0.62);
  background:
    radial-gradient(circle at 18% 0%, rgba(246, 244, 239, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(217, 221, 231, 0.16), rgba(90, 167, 255, 0.075)),
    rgba(16, 17, 20, 0.72);
}

.paste-branch .turbo-sync-mode {
  color: #a9ffe7;
  border-color: rgba(37, 224, 164, 0.42);
  background:
    linear-gradient(180deg, rgba(37, 224, 164, 0.14), rgba(37, 224, 164, 0.045)),
    rgba(16, 17, 20, 0.72);
}

.paste-branch .turbo-sync-mode span {
  color: rgba(169, 255, 231, 0.74);
}

.paste-branch .turbo-sync-mode.active {
  color: #eafff7;
  border-color: rgba(37, 224, 164, 0.82);
  background:
    radial-gradient(circle at 20% 0%, rgba(169, 255, 231, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(37, 224, 164, 0.24), rgba(37, 224, 164, 0.085)),
    rgba(16, 17, 20, 0.72);
  box-shadow: inset 0 1px 0 rgba(169, 255, 231, 0.14), 0 0 20px rgba(37, 224, 164, 0.12);
}

.paste-branch .deep-vocal-mode {
  color: #c7d2ff;
  border-color: rgba(137, 167, 255, 0.44);
  background:
    linear-gradient(180deg, rgba(137, 167, 255, 0.14), rgba(122, 92, 255, 0.055)),
    rgba(16, 17, 20, 0.72);
}

.paste-branch .deep-vocal-mode span {
  color: rgba(199, 210, 255, 0.74);
}

.paste-branch .deep-vocal-mode.active {
  color: #eef1ff;
  border-color: rgba(137, 167, 255, 0.82);
  background:
    radial-gradient(circle at 20% 0%, rgba(199, 210, 255, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(137, 167, 255, 0.24), rgba(122, 92, 255, 0.11)),
    rgba(16, 17, 20, 0.72);
  box-shadow: inset 0 1px 0 rgba(199, 210, 255, 0.14), 0 0 20px rgba(137, 167, 255, 0.1);
}

.hear-branch .precision-quality {
  color: #ffd76a;
  border-color: rgba(255, 215, 106, 0.44);
  background: linear-gradient(180deg, rgba(255, 215, 106, 0.12), rgba(16, 17, 20, 0.72));
}

.hear-branch .quality-mode:not(.precision-quality) {
  color: #d9dde7;
  border-color: rgba(217, 221, 231, 0.24);
  background: linear-gradient(180deg, rgba(217, 221, 231, 0.07), rgba(16, 17, 20, 0.72));
}

.compact-precision-access {
  margin-top: 8px;
}

.precision-quality,
.premium-mode,
.premium-mark,
.gold-action {
  color: #ffd76a;
}

.split > div {
  flex: 1;
}

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

output {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.segment,
.ghost,
.primary,
.secondary,
.icon-button {
  border-radius: 8px;
  min-height: 42px;
  transition:
    transform 140ms ease,
    background 140ms ease,
    border-color 140ms ease;
}

.segment {
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.segment.active {
  border-color: rgba(37, 224, 164, 0.65);
  background: rgba(37, 224, 164, 0.14);
  color: var(--text);
}

.vibe-style-cards [data-vibe="orbit"] { --vibe-accent: #f98436; background: #080604; }
.vibe-style-cards [data-vibe="orbit"]::before {
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,0.16) 3px 4px),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(0,0,0,0.12) 3px 4px),
    radial-gradient(ellipse 8% 110% at 30% 30%, #ff9a29, #e64c06 25%, transparent 100%),
    radial-gradient(ellipse 10% 95% at 70% 70%, #ff7818, #b33402 25%, transparent 100%),
    radial-gradient(ellipse 18% 90% at 88% 35%, #ec6b19, transparent 100%), #000;
}
.vibe-style-cards [data-vibe="orbit"] .vibe-card-sample {
  color: #000;
  font: 800 18px "VLyrics Orbit Font", sans-serif;
  text-shadow: none;
}

.vibe-style-cards [data-vibe="stack"] { --vibe-accent: #a3aaaa; background: #fafafa; }
.vibe-style-cards [data-vibe="stack"]::before {
  background: #fafafa;
}
.vibe-style-cards [data-vibe="stack"] .vibe-card-name { color: #484848; }
.vibe-style-cards [data-vibe="stack"] .vibe-stack-sample {
  display: grid;
  grid-template-columns: auto auto;
  gap: 1px 4px;
  width: 62px;
  height: 45px;
  text-align: left;
  font: 700 11px/1 "VLyrics Rage Classic", sans-serif;
  color: #080808;
  text-shadow: 0 0 3px rgba(0,0,0,0.35);
}
.vibe-stack-sample b { font-size: 28px; line-height: 1; }
.vibe-stack-sample span { color: inherit; align-self: center; }
.vibe-stack-sample strong { grid-column: 1 / -1; font-size: 18px; line-height: 1; }

.vibe-style-cards {
  grid-template-columns: 1fr;
  gap: 6px;
}

.vibe-style-cards .segment {
  --vibe-accent: rgba(37, 224, 164, 0.82);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  overflow: hidden;
  padding: 8px 12px;
  border-color: rgba(255, 255, 255, 0.12);
  color: #f7f8fb;
  text-align: left;
}

.vibe-style-cards .segment::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  opacity: 0.92;
  transition: opacity 160ms ease, transform 180ms ease;
}

.vibe-style-cards .segment:active::before {
  transform: scale(1.015);
}

.vibe-style-cards .segment.active {
  border-color: var(--vibe-accent);
  background: transparent;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vibe-accent) 28%, transparent);
}

.vibe-card-name,
.vibe-card-sample {
  position: relative;
  z-index: 1;
}

.vibe-card-name {
  width: 58px;
  color: rgba(247, 248, 251, 0.72);
  font: 800 11px Inter, Arial, sans-serif;
}

.vibe-card-sample {
  max-width: 66%;
  overflow: hidden;
  font-size: 22px;
  line-height: 1;
  text-align: right;
  text-overflow: clip;
  white-space: nowrap;
}

.vibe-style-cards [data-vibe="auto"]::before {
  background: linear-gradient(108deg, #0a0d12 0 42%, #101820 42% 69%, #10201b 69%);
}

.vibe-style-cards [data-vibe="auto"] .vibe-card-sample {
  color: #e9fff7;
  font: 850 21px Inter, Arial, sans-serif;
  text-shadow: 4px 3px 0 rgba(37, 224, 164, 0.18);
}

.vibe-style-cards [data-vibe="neon"] {
  --vibe-accent: rgba(33, 212, 253, 0.9);
}

.vibe-style-cards [data-vibe="neon"]::before {
  background: linear-gradient(104deg, #020509 0 48%, #082326 48% 50%, #03070d 50% 78%, #321020 78% 80%, #03070d 80%);
}

.vibe-style-cards [data-vibe="neon"] .vibe-card-sample {
  color: #cffff3;
  font: 900 21px "VLyrics Neon Font", Inter, sans-serif;
  text-shadow: 0 0 6px rgba(37, 224, 164, 0.88), 2px 1px 0 rgba(255, 49, 90, 0.54);
}

.vibe-style-cards [data-vibe="sad"] {
  --vibe-accent: rgba(137, 167, 255, 0.82);
}

.vibe-style-cards [data-vibe="sad"]::before {
  background: linear-gradient(112deg, #101521 0 57%, #202a40 57% 58%, #141a29 58%);
}

.vibe-style-cards [data-vibe="sad"] .vibe-card-sample {
  color: #d7e0ff;
  font: 700 22px "VLyrics Sad Font", Georgia, serif;
  text-shadow: 3px 4px 0 rgba(113, 135, 201, 0.34);
}

.vibe-style-cards [data-vibe="rage"] {
  --vibe-accent: rgba(255, 49, 90, 0.88);
}

.vibe-style-cards [data-vibe="rage"]::before {
  background: linear-gradient(102deg, #100206 0 54%, #4c0717 54% 58%, #180208 58% 82%, #6b4d12 82% 85%, #100206 85%);
}

.vibe-style-cards [data-vibe="rage"] .vibe-card-sample {
  color: #f7f4ef;
  font: 900 23px "VLyrics Rage Classic", Impact, sans-serif;
  transform: rotate(-1deg);
  text-shadow: 3px 2px 0 #ff315a, -1px -1px 0 rgba(255, 207, 90, 0.62);
}

.vibe-style-cards [data-vibe="comic"] {
  --vibe-accent: rgba(255, 231, 106, 0.92);
}

.vibe-style-cards [data-vibe="comic"]::before {
  background: linear-gradient(108deg, #f4e76a 0 72%, #21d4fd 72% 76%, #ff315a 76% 80%, #f4e76a 80%);
}

.vibe-style-cards [data-vibe="comic"] .vibe-card-name {
  color: #101114;
}

.vibe-style-cards [data-vibe="comic"] .vibe-card-sample {
  color: #101114;
  font: 900 23px "VLyrics Comic Font", Impact, sans-serif;
  transform: rotate(1deg);
  text-shadow: 2px 2px 0 #f7f4ef;
}

.vibe-style-cards [data-vibe="clean"] {
  --vibe-accent: rgba(37, 167, 125, 0.86);
}

.vibe-style-cards [data-vibe="clean"]::before {
  background: linear-gradient(105deg, #eef4f1 0 68%, #d5e8df 68% 70%, #f8fbfa 70%);
}

.vibe-style-cards [data-vibe="clean"] .vibe-card-name {
  color: #101114;
}

.vibe-style-cards [data-vibe="clean"] .vibe-card-sample {
  color: #168b68;
  font: 850 21px "VLyrics Clean Font", Inter, sans-serif;
}

.vibe-style-cards [data-vibe="mono"] {
  --vibe-accent: rgba(246, 244, 239, 0.9);
}

.vibe-style-cards [data-vibe="mono"]::before {
  background: linear-gradient(90deg, #070708 0 49.5%, #f1f1ef 50.5% 100%);
}

.vibe-style-cards [data-vibe="mono"] .vibe-card-sample {
  color: #111214;
  font: 350 23px "VLyrics Mono Font", "Arial Narrow", sans-serif;
  text-shadow: -64px 0 0 #f4f4f1;
}

.vibe-style-cards [data-vibe="pixel"] {
  --vibe-accent: rgba(148, 112, 199, 0.92);
}

.vibe-style-cards [data-vibe="pixel"]::before {
  background:
    linear-gradient(90deg, transparent 0 58%, rgba(155, 148, 169, 0.18) 58% 61%, transparent 61%),
    repeating-linear-gradient(0deg, #07080c 0 9px, #17141c 9px 10px),
    #07080c;
}

.vibe-style-cards [data-vibe="pixel"] .vibe-card-sample {
  color: #9470c7;
  font: 400 15px "VLyrics Pixel Font", monospace;
  text-shadow: 3px 3px 0 #251832;
}

.vibe-style-cards [data-vibe="rain"] {
  --vibe-accent: rgba(42, 175, 255, 0.94);
}

.vibe-style-cards [data-vibe="rain"]::before {
  background:
    radial-gradient(ellipse at 83% 22%, rgba(151, 225, 255, 0.22) 0 2px, rgba(20, 97, 135, 0.18) 3px 7px, transparent 8px),
    radial-gradient(ellipse at 16% 72%, rgba(151, 225, 255, 0.18) 0 1px, rgba(20, 97, 135, 0.14) 2px 6px, transparent 7px),
    repeating-linear-gradient(96deg, transparent 0 13px, rgba(75, 200, 255, 0.15) 14px 15px, transparent 16px 27px),
    #010207;
}

.vibe-style-cards [data-vibe="rain"] .vibe-card-sample {
  color: #2aafff;
  font: 1000 20px "VLyrics Rain Font", "Arial Rounded MT Bold", sans-serif;
  text-shadow: 0 0 5px rgba(42, 175, 255, 0.98), 0 0 13px rgba(11, 108, 168, 0.76);
}

.vibe-style-cards [data-vibe="rose"] {
  background: #e7e8e5 url("./assets/backgrounds/rose-v1.png") right 70% / 70% auto no-repeat;
  color: #171719;
  border-color: #878985;
}
.vibe-style-cards [data-vibe="rose"] .vibe-card-name { color: #171719; }
.vibe-style-cards [data-vibe="rose"] .vibe-card-sample {
  color: transparent;
  -webkit-text-stroke: 1px #121214;
  font-family: "VLyrics Rain Font", sans-serif;
  font-weight: 1000;
  text-shadow: 0 0 4px rgba(242,240,236,0.25);
}
.vibe-style-cards [data-vibe="lava"] {
  --vibe-accent: rgba(189, 255, 36, 0.92);
}

.vibe-style-cards [data-vibe="lava"]::before {
  background: radial-gradient(ellipse at 22% 130%, #ef821e 0 27%, transparent 57%),
    radial-gradient(ellipse at 94% -40%, #af3d0b 0 23%, transparent 55%), #030507;
}

.vibe-style-cards [data-vibe="lava"] .vibe-card-sample {
  color: rgba(189, 255, 36, 0.65);
  -webkit-text-stroke: 1px #d6ff81;
  font: 700 25px "VLyrics Rage Classic", sans-serif;
}

.vibe-style-cards [data-vibe="chrome"] { --vibe-accent: #d8dce4; }
.vibe-style-cards [data-vibe="chrome"]::before {
  background: linear-gradient(160deg, #020204 25%, #580015 78%, #a30720);
}
.vibe-style-cards [data-vibe="chrome"] .vibe-card-sample {
  color: #e4e8ed;
  font: 800 21px "VLyrics Clean Cyrillic", sans-serif;
  text-shadow: 0 2px #536173, 1px 3px #3c0010;
}

.field-heading,
.storyboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.field-heading label {
  margin-bottom: 0;
}

.field-heading output {
  margin-top: 0;
}

.special-heading-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.beta-test-badge {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 2px 6px;
  border: 1px solid rgba(255, 207, 90, 0.56);
  border-radius: 4px;
  color: var(--accent-2);
  background: rgba(255, 207, 90, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  font-size: 9px;
  font-weight: 1000;
  line-height: 1;
  letter-spacing: 0;
}

.settings-card,
.timing-card {
  border: 1px solid rgba(246, 244, 239, 0.11);
  border-radius: 8px;
  padding: 10px;
  background:
    linear-gradient(180deg, rgba(246, 244, 239, 0.045), rgba(16, 17, 20, 0.34));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.quality-field {
  gap: 6px;
}

.quality-field .hint {
  max-width: 31ch;
  margin-top: 0;
  font-size: 12px;
}

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

.timing-field > div {
  min-width: 0;
  border: 1px solid rgba(246, 244, 239, 0.09);
  border-radius: 8px;
  padding: 8px;
  background: rgba(246, 244, 239, 0.03);
}

.timing-field label,
.timing-card label,
.visual-controls-field .compact-label {
  color: rgba(246, 244, 239, 0.78);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.timing-field output,
.timing-card output {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.timing-field input[type="range"],
.timing-card input[type="range"] {
  margin-top: 8px;
}

.sync-field {
  border-color: rgba(90, 167, 255, 0.18);
  background:
    linear-gradient(180deg, rgba(90, 167, 255, 0.08), rgba(37, 224, 164, 0.035));
}

.listen-field .nudge-row {
  display: grid;
  grid-template-columns: 0.75fr 0.75fr 1.15fr 0.75fr 0.75fr;
  gap: 7px;
  margin-top: 8px;
}

.listen-field .nudge,
.listen-field .primary {
  min-width: 0;
  min-height: 41px;
  border-radius: 8px;
  padding-inline: 8px;
  white-space: normal;
}

.tap-sync-panel {
  margin-top: 10px;
  border: 1px solid rgba(37, 224, 164, 0.24);
  border-radius: 8px;
  padding: 10px;
  background: rgba(37, 224, 164, 0.055);
}

.inline-tap-panel {
  margin: 0 8px 8px;
  border-color: rgba(163, 45, 58, 0.28);
  background: linear-gradient(180deg, rgba(116, 22, 38, 0.1), rgba(37, 224, 164, 0.035));
}

.tap-sync-track {
  position: relative;
  height: 58px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(246, 244, 239, 0.13);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(246, 244, 239, 0.035) 1px, transparent 1px) 0 0 / 22px 100%,
    linear-gradient(180deg, rgba(90, 167, 255, 0.1), rgba(37, 224, 164, 0.055));
}

.tap-sync-waveform {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tap-sync-progress {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(37, 224, 164, 0.22), rgba(37, 224, 164, 0.02));
  border-right: 2px solid var(--accent);
}

.tap-sync-flags {
  position: absolute;
  inset: 0;
}

.tap-sync-flag {
  position: absolute;
  top: 6px;
  width: 2px;
  height: 44px;
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(255, 207, 90, 0.55);
  cursor: ew-resize;
  z-index: 4;
}

.tap-sync-flag::after {
  content: attr(data-line);
  position: absolute;
  left: 4px;
  top: 0;
  min-width: 18px;
  height: 16px;
  border-radius: 3px;
  padding: 0 4px;
  background: var(--accent-2);
  color: #101114;
  font-size: 10px;
  font-weight: 900;
  line-height: 16px;
}

.tap-sync-flag.is-dragging {
  background: #ffffff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.82);
}

.tap-sync-zero {
  background: var(--blue);
  box-shadow: 0 0 10px rgba(90, 167, 255, 0.55);
}

.tap-sync-zero::after {
  background: var(--blue);
  color: #ffffff;
}

.tap-sync-tools {
  display: grid;
  grid-template-columns: 1fr 0.78fr 0.78fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.tap-sync-tools .ghost,
.tap-sync-tools .primary {
  min-height: 36px;
  font-size: 12px;
}

.ready-flash {
  animation: ready-flash 620ms ease-in-out 3;
}

.ai-badge,
.premium-mark,
.plan-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 900;
}

.ai-badge {
  border: 1px solid rgba(37, 224, 164, 0.5);
  color: var(--accent);
  background: rgba(37, 224, 164, 0.1);
}

.visual-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
}

.quality-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 8px;
}

.quality-mode {
  min-width: 0;
  min-height: 60px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
}

.quality-mode strong,
.quality-mode span {
  display: block;
}

.quality-mode strong {
  font-size: 12px;
}

.quality-mode span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.quality-mode.active {
  border-color: rgba(37, 224, 164, 0.65);
  background: rgba(37, 224, 164, 0.12);
}

.quality-mode.precision-quality.active {
  border-color: rgba(255, 207, 90, 0.72);
  background: rgba(255, 207, 90, 0.12);
}

.quality-mode.deep-vocal-mode.active {
  border-color: rgba(137, 167, 255, 0.72);
  background: rgba(137, 167, 255, 0.12);
}

.quality-mode.turbo-sync-mode.active {
  border-color: rgba(37, 224, 164, 0.72);
  background: rgba(37, 224, 164, 0.12);
}

.paste-branch .quality-mode.fast-sync-mode.active {
  border-color: rgba(217, 221, 231, 0.62);
  background:
    radial-gradient(circle at 18% 0%, rgba(246, 244, 239, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(217, 221, 231, 0.16), rgba(90, 167, 255, 0.075)),
    rgba(16, 17, 20, 0.72);
}

.paste-branch .quality-mode.turbo-sync-mode.active {
  border-color: rgba(37, 224, 164, 0.82);
  background:
    radial-gradient(circle at 20% 0%, rgba(169, 255, 231, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(37, 224, 164, 0.24), rgba(37, 224, 164, 0.085)),
    rgba(16, 17, 20, 0.72);
}

.paste-branch .quality-mode.deep-vocal-mode.active {
  border-color: rgba(137, 167, 255, 0.82);
  background:
    radial-gradient(circle at 20% 0%, rgba(199, 210, 255, 0.22), transparent 38%),
    linear-gradient(180deg, rgba(137, 167, 255, 0.24), rgba(122, 92, 255, 0.11)),
    rgba(16, 17, 20, 0.72);
}

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

.ratio-modes button {
  min-width: 0;
  min-height: 38px;
  border: 1px solid rgba(246, 244, 239, 0.12);
  border-radius: 8px;
  background: rgba(246, 244, 239, 0.035);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 800;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.ratio-modes button:hover {
  border-color: rgba(37, 224, 164, 0.36);
  background: rgba(37, 224, 164, 0.055);
}

.ratio-modes button.active {
  border-color: rgba(37, 224, 164, 0.72);
  background: linear-gradient(180deg, rgba(37, 224, 164, 0.18), rgba(37, 224, 164, 0.075));
  color: #eafff7;
}

.position-grid .custom-text-position {
  grid-column: span 3;
  color: var(--accent-2);
  border-color: rgba(255, 207, 90, 0.38);
  background: rgba(255, 207, 90, 0.055);
}

.position-grid .custom-text-position.active {
  border-color: rgba(255, 207, 90, 0.78);
  background: linear-gradient(180deg, rgba(255, 207, 90, 0.18), rgba(255, 207, 90, 0.07));
}

.position-grid .custom-text-position:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.custom-text-hint {
  margin-top: 0;
}

.precision-quota {
  border: 1px solid rgba(255, 207, 90, 0.42);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--accent-2);
  background: linear-gradient(180deg, rgba(255, 207, 90, 0.16), rgba(255, 207, 90, 0.065));
  font-size: 10px;
  font-weight: 900;
  box-shadow: 0 0 16px rgba(255, 207, 90, 0.08);
}

.precision-quota.empty {
  border-color: var(--line);
  color: var(--muted);
  background: var(--panel-2);
}

.clip-source-video { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--text); font-size: 14px; }
.clip-source-video[hidden] { display: none; }
.clip-source-video input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; margin: 0; accent-color: var(--accent); }
#clipPickerDialog .clip-picker-header { position: sticky; top: 0; z-index: 2; background: var(--panel); }
.toggle-control {
  display: inline-flex;
  cursor: pointer;
}

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

.toggle-control span {
  position: relative;
  width: 38px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-2);
  transition: background 160ms ease, border-color 160ms ease;
}

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

.toggle-control input:checked + span {
  border-color: rgba(255, 207, 90, 0.72);
  background: rgba(255, 207, 90, 0.16);
}

.toggle-control input:checked + span::after {
  transform: translateX(16px);
  background: var(--accent-2);
}

.explicit-filter-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  border: 1px solid rgba(37, 224, 164, 0.2);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(37, 224, 164, 0.045);
}

.explicit-filter-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.explicit-filter-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.explicit-filter-copy span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}

.explicit-filter-control .toggle-control {
  flex: 0 0 auto;
}

.visual-controls-field {
  gap: 10px;
  overflow: hidden;
}

.visual-controls-field .field-heading {
  padding-bottom: 2px;
}

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

.editor-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  min-height: 40px;
  border: 1px solid rgba(246, 244, 239, 0.12);
  border-radius: 8px;
  padding: 7px 8px;
  background: rgba(246, 244, 239, 0.04);
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.editor-toggle:hover {
  border-color: rgba(255, 207, 90, 0.34);
  background: rgba(255, 207, 90, 0.055);
}

.editor-toggle input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent-2);
}

.compact-label {
  margin-top: 3px;
  font-size: 11px;
}

.background-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 66px;
  gap: 7px;
  align-items: center;
}

.background-video-heading {
  margin-top: 2px;
}

.background-row input[type="file"] {
  min-width: 0;
  height: 42px;
  border: 1px solid rgba(246, 244, 239, 0.12);
  border-radius: 8px;
  padding: 6px;
  background: rgba(90, 167, 255, 0.055);
  color: var(--muted);
  font-size: 12px;
}

.background-row input[type="file"]::file-selector-button {
  height: 28px;
  margin-right: 8px;
  border: 0;
  border-radius: 6px;
  padding: 0 10px;
  background: rgba(246, 244, 239, 0.18);
  color: var(--text);
  font-weight: 850;
}

.background-row .ghost {
  min-height: 42px;
  border-radius: 8px;
}

#backgroundVideoInput {
  border-color: rgba(255, 215, 106, 0.22);
  background:
    linear-gradient(180deg, rgba(255, 215, 106, 0.07), rgba(90, 167, 255, 0.035)),
    rgba(16, 17, 20, 0.72);
}

#backgroundVideoInput::file-selector-button {
  background: rgba(255, 215, 106, 0.18);
}

.video-trim-panel {
  border: 1px solid rgba(255, 215, 106, 0.16);
  border-radius: 8px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(255, 215, 106, 0.065), rgba(16, 17, 20, 0.42));
}

.video-trim-panel input[type="range"] {
  margin-top: 8px;
  accent-color: var(--accent-2);
}

.media-editor-drawer {
  border: 1px solid rgba(246, 244, 239, 0.1);
  border-radius: 8px;
  overflow: visible;
  background: rgba(246, 244, 239, 0.03);
}

.media-editor-drawer .branch-toggle {
  border: 0;
  border-radius: 0;
  background: rgba(16, 17, 20, 0.42);
}

.media-editor-panel {
  display: grid;
  gap: 8px;
  padding: 8px;
  border-top: 1px solid rgba(246, 244, 239, 0.08);
  max-height: 0;
  padding-block: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: max-height 220ms ease, padding 180ms ease, opacity 180ms ease;
}

.media-editor-panel.open {
  max-height: 720px;
  padding-block: 8px;
  opacity: 1;
  pointer-events: auto;
  overflow: visible;
}

.video-preview-shell {
  position: sticky;
  top: 8px;
  z-index: 5;
  display: grid;
  place-items: center;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(255, 215, 106, 0.2);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.58);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

.video-preview-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 36%, rgba(0, 0, 0, 0.12) 62%, rgba(0, 0, 0, var(--preview-vignette, 0.2)) 100%),
    repeating-linear-gradient(0deg, rgba(246,244,239,var(--preview-grain,0.02)) 0 1px, transparent 1px 4px);
  z-index: 2;
}

.video-start-preview,
.media-start-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-preview-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), #7cf8dc);
  box-shadow: 0 0 14px rgba(255, 215, 106, 0.38);
  transition: transform 80ms linear;
}

.video-preview-label {
  position: absolute;
  left: 8px;
  bottom: 9px;
  border: 1px solid rgba(255, 215, 106, 0.24);
  border-radius: 999px;
  padding: 3px 7px;
  background: rgba(16, 17, 20, 0.72);
  color: var(--accent-2);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.media-slider-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
}

.media-slider-row label {
  margin: 0;
  color: rgba(246, 244, 239, 0.78);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.media-slider-row output {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.media-slider-row input {
  grid-column: 1 / -1;
  accent-color: var(--accent-2);
}

.video-sound-toggle {
  border-color: rgba(255, 215, 106, 0.18);
  background:
    linear-gradient(180deg, rgba(255, 215, 106, 0.07), rgba(16, 17, 20, 0.42));
}

.video-sound-toggle:has(input:disabled) {
  opacity: 0.58;
}

.visual-controls-field.pro-locked .premium-mark {
  box-shadow: 0 0 0 1px rgba(255, 207, 90, 0.26);
}

.visual-controls-field.pro-locked .background-video-heading,
.visual-controls-field.pro-locked .media-editor-drawer {
  opacity: 0.58;
}

.visual-controls-field.pro-locked #backgroundVideoInput {
  cursor: not-allowed;
}

.text-position-heading {
  margin-top: 2px;
}

.position-grid {
  display: grid;
  grid-template-columns: repeat(3, 36px);
  gap: 6px;
}

.position-grid button {
  width: 36px;
  height: 32px;
  border: 1px solid rgba(246, 244, 239, 0.12);
  border-radius: 7px;
  background: rgba(246, 244, 239, 0.04);
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.position-grid button.active {
  border-color: rgba(255, 207, 90, 0.72);
  color: var(--accent-2);
  background: rgba(255, 207, 90, 0.12);
}

.special-styles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 9px;
  opacity: 0.46;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.special-field.enabled .special-styles {
  opacity: 1;
  pointer-events: auto;
}

.special-style {
  --special-accent: rgba(255, 49, 90, 0.82);
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 88px;
  overflow: hidden;
  padding: 13px 12px 12px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 8px;
  color: #f7f8fb;
  background: #0d1017;
  text-align: left;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.special-style::before,
.special-style::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}

.special-style::before {
  inset: 0;
  background:
    linear-gradient(118deg, transparent 0 31%, rgba(255, 231, 106, 0.92) 31% 34%, transparent 34% 63%, rgba(33, 212, 253, 0.68) 63% 66%, transparent 66%),
    linear-gradient(145deg, #090c12 0 54%, #2c0712 54% 72%, #090c12 72%);
}

.special-style::after {
  right: 10px;
  bottom: 7px;
  width: 34px;
  height: 34px;
  border: 6px solid rgba(255, 255, 255, 0.78);
  transform: rotate(12deg);
}

.special-style:active {
  transform: scale(0.985);
}

.special-style strong,
.special-style span {
  position: relative;
  z-index: 1;
  display: block;
}

.special-style strong {
  max-width: calc(100% - 28px);
  color: #ffffff;
  font-size: 12px;
  line-height: 1.15;
}

.special-style span {
  max-width: calc(100% - 22px);
  margin-top: 8px;
  color: rgba(244, 246, 250, 0.68);
  font-size: 9px;
  line-height: 1.3;
}

.special-style.active {
  border-color: var(--special-accent);
  background: #0d1017;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--special-accent) 28%, transparent);
}

.special-style.fantasy-style {
  --special-accent: rgba(137, 167, 255, 0.82);
  background: #080b12;
}

.special-style.fantasy-style::before {
  background:
    repeating-linear-gradient(125deg, transparent 0 17px, rgba(137, 167, 255, 0.1) 17px 18px),
    linear-gradient(150deg, #070910 0 42%, #172036 42% 43%, #0a0d16 43% 74%, #252d40 74% 75%, #080a10 75%);
}

.special-style.fantasy-style::after {
  right: 15px;
  bottom: 10px;
  width: 25px;
  height: 25px;
  border-width: 1px;
  border-color: rgba(190, 206, 255, 0.62);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 5px rgba(8, 10, 16, 0.72), 0 0 12px rgba(137, 167, 255, 0.28);
}

.special-style.beach-style {
  --special-accent: rgba(37, 224, 164, 0.86);
  background: #071617;
}

.special-style.beach-style::before {
  background:
    linear-gradient(172deg, transparent 0 49%, rgba(255, 231, 106, 0.82) 49% 52%, transparent 52%),
    linear-gradient(168deg, #0c3436 0 51%, #117d78 51% 66%, #f36b66 66% 70%, #f3cd5f 70%);
}

.special-style.beach-style::after {
  right: 12px;
  bottom: 9px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #ffe76a;
  box-shadow: -19px 17px 0 -9px rgba(255, 255, 255, 0.72), -4px 18px 0 -9px rgba(255, 255, 255, 0.72);
}

.special-style.mono-special-style {
  --special-accent: rgba(246, 244, 239, 0.92);
  background: #070708;
}

.special-style.mono-special-style::before {
  background: linear-gradient(90deg, #f4f4f1 0 50%, #080809 50% 100%);
}

.special-style.mono-special-style::after {
  right: 12px;
  bottom: 12px;
  width: 36px;
  height: 22px;
  border: 3px solid #f4f4f1;
  background: #111214;
  transform: none;
  box-shadow: -18px -12px 0 #111214, -18px -12px 0 3px #f4f4f1;
}

.special-style.mono-special-style strong {
  color: #111214;
  font-family: "VLyrics Mono Font", "Arial Narrow", sans-serif;
  font-weight: 500;
}

.special-style.mono-special-style span {
  color: rgba(17, 18, 20, 0.7);
}

.precision-access {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
  margin-top: 8px;
}

.precision-access[hidden] {
  display: none;
}

.access-mode {
  min-width: 0;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel-2);
  text-align: left;
}

.access-mode strong,
.access-mode span {
  display: block;
}

.access-mode strong {
  font-size: 12px;
}

.access-mode span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.access-mode.active {
  border-color: rgba(255, 207, 90, 0.72);
  background: rgba(255, 207, 90, 0.12);
}

.access-mode.unavailable {
  opacity: 0.56;
}

.monetization-overlay {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 20px;
  background: rgba(4, 5, 8, 0.82);
  backdrop-filter: blur(8px);
}

.monetization-overlay[hidden] {
  display: none;
}

body.legal-consent-pending {
  overflow: hidden;
}

.legal-consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 18px;
  background: rgba(3, 5, 8, 0.82);
  backdrop-filter: blur(9px);
}

.legal-consent-overlay[hidden] {
  display: none;
}

.legal-consent-dialog {
  position: relative;
  overflow: auto;
  width: min(660px, 100%);
  max-height: min(820px, calc(100vh - 36px));
  padding: 24px;
  border: 1px solid rgba(37, 224, 164, 0.35);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.58);
}

.legal-consent-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.legal-consent-dialog h2 {
  margin: 4px 48px 0 0;
  font-size: 24px;
}

.legal-consent-intro {
  margin: 10px 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.legal-document-list {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.legal-document-list details {
  border-bottom: 1px solid var(--line);
}

.legal-document-list details:last-child {
  border-bottom: 0;
}

.legal-document-list summary {
  padding: 12px 2px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
}

.legal-document-list p {
  margin: -2px 0 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.legal-consent-version {
  margin: 10px 0;
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
}

.legal-document-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-block: 14px;
  font-size: 12px;
}

.legal-document-links a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 9px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.45;
}

.legal-consent-check input {
  flex: 0 0 auto;
  width: 17px;
  min-height: 17px;
  margin-top: 1px;
  accent-color: var(--accent);
}

.legal-consent-dialog .primary:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.monetization-dialog {
  position: relative;
  width: min(390px, 100%);
  padding: 24px;
  border: 1px solid rgba(255, 207, 90, 0.42);
  border-radius: 8px;
  background: #15171d;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.48);
}

.monetization-dialog h2 {
  margin: 6px 0 8px;
  font-size: 22px;
}

.app-update-dialog {
  width: min(420px, 100%);
  border-color: color-mix(in srgb, var(--accent) 56%, rgba(255, 207, 90, 0.42));
}

.app-update-message {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.app-update-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
}

.app-update-actions .ghost,
.app-update-actions .primary {
  min-height: 42px;
  padding-inline: 16px;
}

.export-dialog {
  width: min(460px, 100%);
}

.export-minimize {
  position: absolute;
  top: 14px;
  right: 54px;
}

.export-minimize::before {
  width: auto;
  height: auto;
  background: transparent;
  content: "-";
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.export-minimize[hidden] {
  display: none;
}

.export-setting {
  margin-top: 20px;
}

.export-setting > label,
.export-setting-heading label {
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.export-setting-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.export-setting-heading output {
  color: var(--accent-2);
  font-size: 13px;
  font-weight: 800;
}

.export-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.resolution-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.export-options button {
  min-width: 0;
  padding: 10px 6px;
  border-color: var(--line);
  background: var(--panel-2);
}

.export-options button.active {
  border-color: var(--accent-2);
  color: var(--accent-2);
  background: rgba(37, 224, 164, 0.11);
}

.export-setting input[type="range"] {
  width: 100%;
  margin-top: 12px;
}

.export-summary {
  margin: 20px 0 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.export-device-status {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 11px 12px;
  border: 1px solid rgba(37, 224, 164, 0.22);
  border-radius: 7px;
  background: rgba(37, 224, 164, 0.055);
}

.export-device-dot {
  width: 8px;
  height: 8px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 10px rgba(37, 224, 164, 0.5);
}

.export-device-status > span:last-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.export-device-status strong {
  color: var(--text);
  font-size: 12px;
}

.export-device-status small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.export-device-status[data-tone="fallback"] {
  border-color: rgba(255, 207, 90, 0.28);
  background: rgba(255, 207, 90, 0.055);
}

.export-device-status[data-tone="fallback"] .export-device-dot {
  background: #ffcf5a;
  box-shadow: 0 0 10px rgba(255, 207, 90, 0.42);
}

.export-native-v2 {
  margin: 0 0 14px;
  padding: 1px;
  border: 1px solid rgba(255, 207, 90, 0.34);
  border-radius: 7px;
  background: rgba(255, 207, 90, 0.055);
}

.export-native-v2[hidden] {
  display: none;
}

.export-native-v2-toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 11px;
  cursor: default;
}

.export-native-v2-toggle input {
  width: 17px;
  height: 17px;
  margin: 2px 0 0;
  accent-color: #ffcf5a;
}

.export-native-v2-copy {
  display: grid;
  gap: 3px;
}

.export-native-v2-copy strong {
  color: #ffdf88;
  font-size: 12px;
}

.export-native-v2-copy small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}

.export-native-v2-estimate {
  margin: 0 11px 11px 41px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 207, 90, 0.16);
  color: #e8dcaf;
  font-size: 11px;
  font-weight: 720;
  line-height: 1.48;
}

.export-native-v2-estimate[hidden] {
  display: none;
}

.export-native-v2-settings {
  width: calc(100% - 52px);
  margin: 0 11px 11px 41px;
  min-height: 34px;
  border: 1px solid rgba(255, 207, 90, 0.42);
  border-radius: 6px;
  background: rgba(255, 207, 90, 0.09);
  color: #ffdf88;
  font: inherit;
  font-size: 11px;
  font-weight: 760;
  cursor: pointer;
}

.export-native-v2-settings[hidden] {
  display: none;
}

.export-dialog.is-exporting .export-setting,
.export-dialog.is-exporting .export-summary,
.export-dialog.is-exporting .export-device-status,
.export-dialog.is-exporting .export-native-v2,
.export-dialog.is-exporting #exportConfirm {
  display: none;
}

.export-dialog.is-exporting {
  border-color: rgba(37, 224, 164, 0.48);
}

.export-dialog.is-export-complete {
  border-color: rgba(37, 224, 164, 0.72);
}

.export-dialog.is-export-error {
  border-color: rgba(255, 91, 111, 0.72);
}

.export-progress[hidden] {
  display: none;
}

.export-progress {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.export-progress-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.export-progress-heading strong {
  color: var(--text);
  font-size: 15px;
}

.export-progress-heading span {
  min-width: 42px;
  color: var(--accent-2);
  font: 800 13px/1 Consolas, "Courier New", monospace;
  text-align: right;
}

.export-progress-track {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 7px;
  margin-top: 12px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
}

.export-progress-track > span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent-2);
  box-shadow: 0 0 14px rgba(37, 224, 164, 0.42);
  transition: width 160ms linear;
}

.export-progress-track.is-indeterminate > span {
  width: 34% !important;
  animation: export-progress-scan 1.25s ease-in-out infinite;
}

.export-progress-detail {
  min-height: 38px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.export-stage-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
  margin: 17px 0 0;
  padding: 0;
  list-style: none;
}

.export-stage-list li {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  transition: color 180ms ease, opacity 180ms ease;
}

.export-stage-list li > span {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--panel-2);
  font: 800 10px/1 Consolas, "Courier New", monospace;
}

.export-stage-list li.active,
.export-stage-list li.complete {
  color: var(--text);
}

.export-stage-list li.active > span,
.export-stage-list li.complete > span {
  border-color: var(--accent-2);
  color: #06110d;
  background: var(--accent-2);
}

.export-stage-list li.error > span {
  border-color: #ff5b6f;
  color: #fff;
  background: #ff5b6f;
}

.export-download {
  display: grid;
  place-items: center;
  margin-top: 18px;
  min-height: 48px;
  border: 1px solid rgba(37, 224, 164, 0.72);
  box-shadow: 0 0 24px rgba(37, 224, 164, 0.18);
  text-decoration: none;
}

.export-download:focus-visible {
  outline: 3px solid rgba(37, 224, 164, 0.3);
  outline-offset: 3px;
}

.export-download[hidden] {
  display: none;
}

.export-dialog .monetization-close:disabled {
  opacity: 0.28;
  cursor: wait;
}

.monetization-overlay.is-export-minimized {
  display: block;
  padding: 0;
  pointer-events: none;
  background: transparent;
  backdrop-filter: none;
}

.export-dialog.is-export-minimized {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: min(340px, calc(100vw - 28px));
  padding: 14px;
  pointer-events: auto;
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.48);
}

.export-dialog.is-export-minimized > .eyebrow,
.export-dialog.is-export-minimized > h2,
.export-dialog.is-export-minimized .export-progress-detail,
.export-dialog.is-export-minimized .export-stage-list,
.export-dialog.is-export-minimized .export-download,
.export-dialog.is-export-minimized .monetization-close {
  display: none !important;
}

.export-dialog.is-export-minimized .export-progress {
  margin: 0;
  padding: 0 38px 0 0;
  border-top: 0;
}

.export-dialog.is-export-minimized .export-progress-heading {
  gap: 10px;
}

.export-dialog.is-export-minimized .export-progress-heading strong {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.export-dialog.is-export-minimized .export-progress-track {
  margin-top: 8px;
}

.export-dialog.is-export-minimized .export-minimize {
  top: 10px;
  right: 10px;
}

.export-dialog.is-export-minimized .export-minimize::before {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  content: "+";
}

@keyframes export-progress-scan {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(300%);
  }
}

.monetization-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.auth-dialog {
  width: min(420px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: auto;
  border-color: rgba(37, 224, 164, 0.42);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 34px rgba(37, 224, 164, 0.08);
}

.auth-dialog::-webkit-scrollbar {
  width: 5px;
}

.auth-dialog::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 42%, transparent);
}

body.auth-required {
  overflow: hidden;
}

.auth-intro {
  max-width: 34ch;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.auth-form {
  display: grid;
  gap: 9px;
  margin-top: 18px;
}

.auth-form label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.auth-form input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel-2);
}

.auth-form input:focus {
  border-color: var(--accent);
  outline: 2px solid rgba(37, 224, 164, 0.14);
}

.google-auth-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  border: 1px solid color-mix(in srgb, var(--text) 22%, var(--line));
  border-radius: 8px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel-2) 90%, var(--text) 10%);
  font-weight: 850;
}

.google-auth-button:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
}

.google-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
  border-radius: 50%;
  color: #4285f4;
  background: #fff;
  font: 900 14px/1 Arial, sans-serif;
}

.auth-separator {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  margin: 3px 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.auth-separator::before,
.auth-separator::after {
  height: 1px;
  background: var(--line);
  content: "";
}

.auth-captcha {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.auth-captcha[hidden] {
  display: none;
}

.auth-captcha-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-captcha-image {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: 72px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111820;
}

.auth-captcha-image img {
  display: block;
  width: min(250px, 100%);
  height: 72px;
  object-fit: contain;
}

.auth-captcha-image span {
  position: absolute;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.auth-confirm-field {
  display: grid;
  gap: 9px;
}

.auth-confirm-field[hidden] {
  display: none;
}

.auth-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 5px;
}

.auth-prompt {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.auth-link {
  padding: 3px;
  color: var(--accent);
  font-weight: 800;
  background: transparent;
}

.auth-link:hover {
  color: var(--text);
}

.auth-forgot-password {
  justify-self: end;
  margin-top: -5px;
  font-size: 12px;
}

.auth-forgot-password[hidden] {
  display: none;
}

.auth-message {
  min-height: 18px;
  margin: 2px 0 0;
  color: var(--accent-2);
  font-size: 12px;
}

.legal-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.legal-check[hidden] {
  display: none;
}

.legal-check input {
  width: auto;
  min-height: auto;
  margin-top: 2px;
}

.wallet-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  border: 1px solid rgba(37, 224, 164, 0.34);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--text);
  background: rgba(37, 224, 164, 0.08);
  font-size: 11px;
  font-weight: 900;
}

.wallet-pill strong {
  color: var(--accent-2);
}

.danger-button {
  min-height: 42px;
  border: 1px solid rgba(255, 88, 108, 0.46);
  border-radius: 8px;
  color: #ffb4bd;
  background: rgba(255, 68, 92, 0.08);
  font-weight: 850;
}

.danger-button:hover {
  border-color: rgba(255, 112, 128, 0.72);
  background: rgba(255, 68, 92, 0.14);
}

.legal-public-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.legal-public-links a {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.profile-drawer {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: flex;
  justify-content: flex-start;
  background: rgba(0, 0, 0, 0.46);
}

.profile-drawer[hidden] {
  display: none;
}

.rewarded-unavailable-notice {
  position: fixed;
  z-index: 120;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(370px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid rgba(255, 201, 83, 0.58);
  border-radius: 8px;
  background: rgba(24, 20, 29, 0.97);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.34);
  color: #f8f5ed;
  animation: rewarded-unavailable-in 220ms ease-out;
}

.rewarded-unavailable-notice[hidden] {
  display: none;
}

.rewarded-unavailable-notice b {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #f2bf50;
  color: #241b16;
  font-size: 18px;
  line-height: 1;
}

.rewarded-unavailable-notice div {
  display: grid;
  gap: 3px;
}

.rewarded-unavailable-notice strong {
  font-size: 13px;
}

.rewarded-unavailable-notice span {
  color: rgba(248, 245, 237, 0.72);
  font-size: 12px;
  line-height: 1.35;
}

@keyframes rewarded-unavailable-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.error-center {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 5, 8, 0.76);
  backdrop-filter: blur(8px);
}

.error-center[hidden] {
  display: none;
}

.error-center-panel {
  position: relative;
  overflow: auto;
  width: min(460px, 100%);
  max-height: calc(100dvh - 36px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  overflow-wrap: anywhere;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.52);
}

.error-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.error-code-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 28px;
  margin-right: 50px;
}

.error-code {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 1000;
}

.error-incident {
  color: var(--muted);
  font-family: Consolas, "Courier New", monospace;
  font-size: 10px;
}

.error-center-panel .eyebrow {
  margin: 18px 0 5px;
}

.error-center-panel h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.25;
}

.error-message,
.error-support-note {
  line-height: 1.5;
}

.error-message {
  margin: 10px 0 0;
  color: var(--text);
}

.error-support-note {
  margin: 8px 0 16px;
  color: var(--muted);
  font-size: 12px;
}

.error-details {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.error-details summary {
  cursor: pointer;
  padding: 4px 0;
}

.error-copy {
  width: 100%;
  min-height: 38px;
  margin-top: 8px;
  font-size: 13px;
}

.error-log {
  overflow: auto;
  max-height: 200px;
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #d8e7e2;
  background: rgba(2, 5, 7, 0.72);
  font: 11px/1.48 Consolas, "Courier New", monospace;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.error-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 8px;
  margin-top: 14px;
}

.error-actions .primary,
.error-actions .ghost {
  min-height: 42px;
  padding: 8px;
  font-size: 13px;
  white-space: normal;
}

@media (max-width: 340px) {
  .error-center { padding: 12px; }
  .error-center-panel { padding: 16px; max-height: calc(100dvh - 24px); }
  .error-actions { grid-template-columns: minmax(0, 1fr); }
}

.profile-panel {
  position: relative;
  overflow: auto;
  width: min(430px, 100%);
  height: 100%;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  box-shadow: 28px 0 80px var(--shadow);
}

.profile-panel::before {
  position: absolute;
  inset: 0 0 auto;
  height: 128px;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(37, 224, 164, 0.06) 12% 13%, transparent 13% 31%, rgba(255, 207, 90, 0.05) 31% 32%, transparent 32%),
    linear-gradient(180deg, rgba(37, 224, 164, 0.08), transparent);
  pointer-events: none;
  content: "";
}

.profile-theme-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: strict;
}

.profile-theme-decor span {
  display: none;
  position: absolute;
  will-change: transform, opacity;
}

body.theme-aurora .profile-theme-decor span {
  display: block;
  top: -32px;
  left: calc(4% + var(--decor-index) * 13%);
  width: 2px;
  height: 172px;
  background: var(--accent);
  box-shadow: 34px 42px 0 color-mix(in srgb, var(--hot) 52%, transparent);
  opacity: 0.13;
  transform-origin: top;
  animation: profileAuroraRibbon 5.8s ease-in-out infinite;
  animation-delay: calc(var(--decor-index) * -0.42s);
}

body.theme-cyber .profile-theme-decor span {
  display: block;
  top: calc(20px + var(--decor-index) * 54px);
  right: calc(-30px + var(--decor-index) * 8px);
  width: 122px;
  height: 44px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 52%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--accent-2) 38%, transparent);
  opacity: 0.18;
  transform: skewX(-24deg);
  animation: profileCyberTrace 4.6s ease-in-out infinite;
  animation-delay: calc(var(--decor-index) * -0.34s);
}

body.theme-royal .profile-theme-decor span {
  display: block;
  top: -45px;
  left: 52%;
  width: 1px;
  height: 240px;
  background: color-mix(in srgb, var(--accent-2) 42%, transparent);
  opacity: 0.15;
  --royal-angle: calc(-32deg + var(--decor-index) * 9deg);
  transform: rotate(var(--royal-angle));
  transform-origin: 50% 0;
  animation: profileRoyalFan 6.4s ease-in-out infinite;
  animation-delay: calc(var(--decor-index) * -0.25s);
}

body.theme-sakura .profile-theme-decor span {
  display: block;
  top: calc(-30px - var(--decor-index) * 18px);
  left: calc(8% + var(--decor-index) * 11%);
  width: 13px;
  height: 27px;
  background: color-mix(in srgb, var(--accent) 60%, transparent);
  clip-path: polygon(50% 0, 94% 32%, 72% 100%, 18% 82%, 0 34%);
  opacity: 0.2;
  animation: profileSakuraFall 7.2s linear infinite;
  animation-delay: calc(var(--decor-index) * -0.68s);
}

body.theme-glacier .profile-theme-decor span {
  display: block;
  right: calc(-22px + var(--decor-index) * 23px);
  bottom: -38px;
  width: 48px;
  height: 152px;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, transparent);
  clip-path: polygon(50% 0, 100% 100%, 0 82%);
  opacity: 0.13;
  transform-origin: bottom;
  animation: profileGlacierShimmer 5.4s ease-in-out infinite;
  animation-delay: calc(var(--decor-index) * -0.31s);
}

.profile-theme-decor span:nth-child(1) { --decor-index: 0; }
.profile-theme-decor span:nth-child(2) { --decor-index: 1; }
.profile-theme-decor span:nth-child(3) { --decor-index: 2; }
.profile-theme-decor span:nth-child(4) { --decor-index: 3; }
.profile-theme-decor span:nth-child(5) { --decor-index: 4; }
.profile-theme-decor span:nth-child(6) { --decor-index: 5; }
.profile-theme-decor span:nth-child(7) { --decor-index: 6; }
.profile-theme-decor span:nth-child(8) { --decor-index: 7; }

@keyframes profileAuroraRibbon {
  0%, 100% { opacity: 0.08; transform: scaleY(0.74) translateY(-8px); }
  50% { opacity: 0.24; transform: scaleY(1.08) translateY(10px); }
}

@keyframes profileCyberTrace {
  0%, 100% { opacity: 0.08; transform: translateX(18px) skewX(-24deg); }
  50% { opacity: 0.3; transform: translateX(-18px) skewX(-24deg); }
}

@keyframes profileRoyalFan {
  0%, 100% { opacity: 0.08; transform: rotate(var(--royal-angle)) scaleY(0.76); }
  50% { opacity: 0.25; transform: rotate(var(--royal-angle)) scaleY(1.06); }
}

@keyframes profileSakuraFall {
  0% { opacity: 0; transform: translate3d(0, -18px, 0) rotate(0deg); }
  18% { opacity: 0.28; }
  100% { opacity: 0; transform: translate3d(42px, 520px, 0) rotate(220deg); }
}

@keyframes profileGlacierShimmer {
  0%, 100% { opacity: 0.07; transform: scaleY(0.86) skewX(-5deg); }
  50% { opacity: 0.23; transform: scaleY(1.04) skewX(5deg); }
}

.profile-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 4;
}

.profile-hero {
  position: relative;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 14px;
  align-items: center;
  margin-right: 32px;
  min-height: 92px;
  z-index: 1;
}

.profile-signal {
  position: absolute;
  right: 0;
  bottom: 6px;
  left: 76px;
  display: flex;
  align-items: end;
  gap: 4px;
  height: 22px;
  opacity: 0.22;
  pointer-events: none;
}

.profile-signal span {
  width: 3px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
  animation: profileSignal 2.4s ease-in-out infinite;
}

.profile-signal span:nth-child(1) { height: 7px; }
.profile-signal span:nth-child(2) { height: 15px; animation-delay: -0.4s; }
.profile-signal span:nth-child(3) { height: 10px; animation-delay: -0.8s; }
.profile-signal span:nth-child(4) { height: 20px; animation-delay: -1.2s; }
.profile-signal span:nth-child(5) { height: 12px; animation-delay: -1.6s; }
.profile-signal span:nth-child(6) { height: 6px; animation-delay: -2s; }

@keyframes profileSignal {
  0%, 100% { transform: scaleY(0.72); opacity: 0.55; }
  50% { transform: scaleY(1); opacity: 1; }
}

.avatar-control {
  position: relative;
  width: 72px;
  height: 72px;
}

.avatar-button {
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(37, 224, 164, 0.45);
  border-radius: 50%;
  color: #071318;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  font-size: 20px;
  font-weight: 1000;
}

.avatar-button img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-button span {
  position: relative;
  z-index: 1;
}

.avatar-edit-mark {
  position: absolute;
  right: -5px;
  bottom: 2px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  color: #071318;
  background: var(--accent);
  box-shadow: 0 3px 12px var(--shadow);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}

.profile-identity {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.profile-identity h2 {
  overflow: hidden;
  max-width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-identity small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.profile-tabs {
  position: sticky;
  top: -22px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 15px -4px 4px;
  padding: 5px 4px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(16px);
}

.profile-tabs button {
  display: grid;
  gap: 2px;
  min-height: 46px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  background: transparent;
}

.profile-tabs button span {
  font-size: 12px;
  font-weight: 900;
}

.profile-tabs button small {
  font-size: 9px;
}

.profile-tabs button.active {
  border-bottom-color: var(--accent);
  color: var(--text);
}

.profile-view {
  position: relative;
  z-index: 1;
  display: block;
  animation: profileViewIn 180ms ease both;
}

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

@keyframes profileViewIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.profile-hero h2 {
  margin: 3px 0 7px;
  font-size: 1.25rem;
}

.profile-status {
  display: inline-flex;
  border: 1px solid rgba(255, 207, 90, 0.42);
  border-radius: 999px;
  padding: 4px 8px;
  color: var(--accent-2);
  background: rgba(255, 207, 90, 0.08);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.wallet-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 20px 0 14px;
}

.wallet-card > div,
.profile-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
}

.wallet-card > div {
  padding: 12px;
}

.wallet-card span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.wallet-card strong {
  display: block;
  margin-top: 5px;
  font-size: 1.25rem;
}

.profile-section {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
}

.profile-section[hidden] {
  display: none;
}

.profile-section label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.profile-section input,
.profile-section textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 10px;
  color: var(--text);
  background: var(--panel);
}

.identity-editor {
  gap: 8px;
}

.profile-name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px;
}

.profile-name-row .primary {
  min-width: 78px;
  padding-inline: 14px;
}

.profile-save-state {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.profile-save-state.locked {
  color: var(--accent-2);
}

.profile-account-shortcut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: var(--muted);
  background: color-mix(in srgb, var(--panel-2) 88%, transparent);
  font-size: 11px;
  font-weight: 750;
}

.profile-account-shortcut button {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid rgba(37, 224, 164, 0.35);
  border-radius: 7px;
  color: var(--text);
  background: rgba(37, 224, 164, 0.08);
  font-size: 10px;
  font-weight: 900;
}

.delete-confirm-panel {
  display: grid;
  gap: 8px;
  margin-top: 9px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 88, 108, 0.22);
}

.delete-confirm-panel[hidden] {
  display: none;
}

.delete-confirm-panel input {
  letter-spacing: 0;
  text-align: center;
  font-size: 18px;
  font-weight: 900;
}

.delete-confirm-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .profile-signal span,
  .profile-theme-decor span,
  .profile-view {
    animation: none;
  }
}

.help-mode-guide {
  margin: 2px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.help-guide-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 52px;
  padding: 8px 2px;
  color: var(--text);
  background: transparent;
  text-align: left;
}

.help-guide-toggle strong,
.help-guide-toggle small {
  display: block;
}

.help-guide-toggle strong {
  font-size: 12px;
}

.help-guide-toggle small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}

.help-guide-chevron {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--accent);
  font-size: 20px;
  transition: transform 180ms ease;
}

.help-guide-toggle.open .help-guide-chevron {
  transform: rotate(180deg);
}

.help-guide-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    max-height 220ms ease,
    opacity 160ms ease,
    transform 180ms ease;
}

.help-guide-body[hidden] {
  display: none;
}

.help-guide-body.open {
  max-height: 760px;
  opacity: 1;
  transform: translateY(0);
}

.help-guide-body > .hint {
  margin: 0 0 7px;
}

.help-guide-body details {
  border-top: 1px solid rgba(246, 244, 239, 0.09);
}

.help-guide-body summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 2px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.help-guide-body details p {
  margin: -2px 0 12px 13px;
  padding-left: 10px;
  border-left: 1px solid rgba(246, 244, 239, 0.14);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.help-mode-mark {
  width: 4px;
  height: 18px;
  border-radius: 2px;
  background: var(--muted);
}

.help-mode-mark.paste {
  background: #3ea1ff;
}

.help-mode-mark.tap {
  background: #d75959;
}

.help-mode-mark.hear {
  background: #39bd86;
}

.help-mode-mark.visual {
  background: #e0b94c;
}

.help-mode-mark.fallback {
  background: #a58ac9;
}

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

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

.drawer-options button {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--text);
  background: var(--panel);
  font-size: 12px;
  font-weight: 850;
}

.drawer-options button.active {
  border-color: rgba(37, 224, 164, 0.68);
  background: rgba(37, 224, 164, 0.12);
}

.theme-options [data-theme-option="aurora"] {
  border-color: rgba(124, 247, 212, 0.36);
}

.theme-options [data-theme-option="cyber"] {
  border-color: rgba(255, 79, 163, 0.4);
}

.theme-options [data-theme-option="royal"] {
  border-color: rgba(255, 207, 90, 0.46);
}

.theme-options [data-theme-option="sakura"] {
  border-color: rgba(255, 154, 199, 0.42);
}

.theme-options [data-theme-option="glacier"] {
  border-color: rgba(143, 233, 255, 0.42);
}

.theme-options button.locked {
  opacity: 0.45;
  cursor: not-allowed;
}

.account-center-drawer {
  justify-content: flex-end;
}

.account-center-panel {
  width: min(520px, 100%);
  border-right: 0;
  border-left: 1px solid var(--line);
  box-shadow: -28px 0 80px var(--shadow);
}

.account-center-panel > .profile-close {
  position: fixed;
  z-index: 14;
  top: 10px;
  right: 10px;
}

.account-center-drawer.developer-center-open .account-center-panel {
  width: min(1180px, calc(100% - 22px));
}

.account-center-hero {
  display: grid;
  gap: 8px;
  margin-right: 34px;
  padding: 16px;
  border: 1px solid rgba(37, 224, 164, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(37, 224, 164, 0.12), transparent 48%),
    var(--panel-2);
}

.account-center-hero h2 {
  margin: 0;
  font-size: 1.35rem;
}

.account-center-hero .hint {
  margin: 0;
}

.account-wallet-card {
  margin-top: 12px;
}

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

.plan-column-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 11px;
  background: var(--panel);
}

.plan-column-head > div {
  display: grid;
  gap: 3px;
}

.plan-kicker {
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
}

.plan-column-head strong {
  color: var(--text);
  font-size: 15px;
}

.current-plan-badge {
  border: 1px solid rgba(37, 224, 164, 0.42);
  border-radius: 999px;
  padding: 3px 5px;
  color: var(--accent);
  font-size: 7px;
  font-weight: 950;
}

.plan-column-head.current-plan {
  border-color: rgba(37, 224, 164, 0.52);
  box-shadow: inset 0 0 0 1px rgba(37, 224, 164, 0.1);
}

.feature-compare .pro-column {
  border-color: rgba(255, 207, 90, 0.44);
  background: rgba(255, 207, 90, 0.07);
}

.feature-compare .pro-column strong,
.feature-compare .pro-column .plan-kicker {
  color: var(--accent-2);
}

.feature-compare .pro-column.current-plan {
  border-color: rgba(255, 207, 90, 0.78);
  box-shadow: inset 0 0 0 1px rgba(255, 207, 90, 0.13);
}

.feature-compare .pro-column .current-plan-badge {
  border-color: rgba(255, 207, 90, 0.5);
  color: var(--accent-2);
}

.feature-comparison-table {
  display: grid;
  margin-top: 8px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.plan-details,
.store-details {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.plan-details > summary,
.store-details > summary {
  display: flex;
  align-items: center;
  min-height: 42px;
  padding: 0 12px;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  list-style: none;
}

.plan-details > summary::-webkit-details-marker,
.store-details > summary::-webkit-details-marker {
  display: none;
}

.plan-details > summary::after,
.store-details > summary::after {
  content: "+";
  margin-left: auto;
  color: var(--accent);
  font-size: 18px;
  line-height: 1;
}

.plan-details[open] > summary,
.store-details[open] > summary {
  border-bottom: 1px solid var(--line);
  color: var(--text);
}

.plan-details[open] > summary::after,
.store-details[open] > summary::after {
  content: "-";
}

.plan-details .feature-comparison-table {
  margin: 0;
  border: 0;
  border-radius: 0;
}

.store-details {
  padding: 0 12px;
}

.store-details[open] {
  padding-bottom: 12px;
}

.store-details .store-section:first-of-type {
  margin-top: 0;
}

.tutorial-button {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 84;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(37, 224, 164, 0.66);
  border-radius: 50%;
  color: #071318;
  background: var(--accent);
  box-shadow: 0 8px 28px rgba(37, 224, 164, 0.28);
  font-size: 19px;
  font-weight: 950;
}

body.tutorial-invite-open {
  overflow: hidden;
}

.tutorial-invite {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(3, 6, 9, 0.8);
  backdrop-filter: blur(10px);
}

.tutorial-invite[hidden] {
  display: none;
}

.tutorial-invite-dialog {
  position: relative;
  width: min(430px, 100%);
  overflow: hidden;
  padding: 25px;
  border: 1px solid rgba(37, 224, 164, 0.46);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.56), 0 0 32px rgba(37, 224, 164, 0.1);
}

.tutorial-invite-dialog::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  content: "";
}

.tutorial-invite-close {
  position: absolute;
  top: 14px;
  right: 14px;
}

.tutorial-invite-dialog .eyebrow {
  margin: 0 46px 10px 0;
  color: var(--accent);
}

.tutorial-invite-dialog h2 {
  max-width: 350px;
  margin: 0;
  font-size: 24px;
  line-height: 1.12;
}

.tutorial-invite-copy {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.tutorial-invite-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.tutorial-invite-choice input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.tutorial-invite-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 10px;
  margin-top: 22px;
}

.tutorial-invite-actions button {
  min-width: 0;
  min-height: 44px;
}

.tutorial-panel {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(70px, calc(env(safe-area-inset-bottom) + 54px));
  z-index: 84;
  width: min(360px, calc(100vw - 28px));
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.42);
  max-height: calc(100dvh - 24px);
  overflow: auto;
}

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

.tutorial-panel.tutorial-panel-top {
  top: max(14px, env(safe-area-inset-top));
  bottom: auto;
}

.tutorial-panel-head,
.tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tutorial-panel-head > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 950;
}

.tutorial-progress { height: 2px; margin-top: 10px; overflow: hidden; background: var(--line); }
.tutorial-progress > span { display: block; height: 100%; background: var(--accent); transition: width 180ms ease-out; }

.tutorial-panel-head button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: var(--panel-2);
  font-size: 15px;
}

.tutorial-panel h2 {
  margin: 12px 0 6px;
  font-size: 17px;
}

.tutorial-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.tutorial-actions {
  justify-content: flex-end;
  margin-top: 14px;
}

.tutorial-highlight {
  scroll-margin: 8px;
}

.tutorial-focus {
  position: fixed;
  z-index: 83;
  border: 2px solid var(--accent);
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.42);
  transition: left 150ms ease-out, top 150ms ease-out, width 150ms ease-out, height 150ms ease-out;
}
.tutorial-focus[hidden] { display: none; }

.tutorial-pointer {
  position: fixed;
  z-index: 86;
  display: none;
  width: 28px;
  height: 28px;
  place-items: center;
  transform: translateX(-50%);
  color: #071318;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--accent);
  box-shadow: none;
  font-size: 19px;
  font-weight: 950;
  line-height: 1;
  pointer-events: none;
  animation: tutorial-pointer-bob 300ms ease-out 2 alternate;
}

.tutorial-pointer.is-visible {
  display: grid;
}

@keyframes tutorial-pointer-bob {
  to { transform: translateX(-50%) translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-pointer, .tutorial-focus, .tutorial-progress > span { animation: none; transition: none; }
}

@media (max-width: 760px) {
  .tutorial-invite-dialog {
    padding: 22px 18px 18px;
  }

  .tutorial-invite-dialog h2 {
    margin-right: 34px;
    font-size: 21px;
  }

  .tutorial-panel {
    bottom: max(68px, calc(env(safe-area-inset-bottom) + 52px));
  }

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

  .store-consumption-notice {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 9px 11px;
  }

  .store-web-sync {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(62px, 0.7fr));
  align-items: center;
  min-height: 38px;
  border-bottom: 1px solid var(--line);
}

.feature-row:last-child {
  border-bottom: 0;
}

.feature-row > * {
  min-width: 0;
  padding: 8px;
}

.feature-row > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.feature-row > strong {
  align-self: stretch;
  display: grid;
  place-items: center;
  border-left: 1px solid var(--line);
  color: var(--text);
  font-size: 9px;
  text-align: center;
}

.feature-row .pro-value {
  background: rgba(255, 207, 90, 0.055);
  color: var(--accent-2);
}

.feature-row .feature-no {
  color: var(--muted);
}

.pro-plan-pitch {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  border-left: 2px solid var(--accent-2);
  padding: 8px 10px;
  background: rgba(255, 207, 90, 0.045);
}

.pro-plan-pitch strong {
  color: var(--accent-2);
  font-size: 11px;
}

.pro-plan-pitch span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.45;
}

.developer-plan-lab {
  border-color: rgba(255, 207, 90, 0.36);
}

.developer-plan-options button.active {
  border-color: rgba(255, 207, 90, 0.78);
  background: rgba(255, 207, 90, 0.13);
  color: var(--accent-2);
}

.developer-ad-toggle {
  min-height: 42px;
  background: rgba(255, 207, 90, 0.05);
}

.profile-section .developer-ad-toggle input {
  width: 16px;
  height: 16px;
  padding: 0;
  flex: 0 0 auto;
}

.developer-dashboard {
  display: grid;
}

.developer-dashboard-toolbar > div:first-child {
  display: grid;
  gap: 3px;
}

.developer-dashboard-toolbar span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.developer-period-tabs {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}

.developer-period-tabs button {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--muted);
  background: var(--panel);
  font-size: 11px;
  font-weight: 900;
}

.developer-period-tabs button.active {
  border-color: rgba(37, 224, 164, 0.72);
  color: var(--text);
  background: rgba(37, 224, 164, 0.13);
}

.developer-dashboard section {
  display: grid;
  gap: 8px;
}

.developer-dashboard h4 {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.developer-overview-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

.developer-overview-grid div {
  border: 1px solid rgba(127, 255, 212, 0.16);
  border-radius: 8px;
}

.developer-overview-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.developer-overview-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 18px;
}

.developer-chart-section {
  gap: 10px;
}

.developer-chart-head {
  gap: 10px;
  align-items: center;
}

.developer-chart-head > div:first-child {
  display: grid;
  gap: 3px;
}

.developer-chart-head span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.developer-chart-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.developer-chart-tabs button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--panel);
  font-size: 11px;
  font-weight: 900;
}

.developer-chart-tabs button.active {
  border-color: rgba(255, 207, 90, 0.74);
  color: var(--accent-2);
  background: rgba(255, 207, 90, 0.12);
}

.developer-chart-card {
  border: 1px solid rgba(127, 255, 212, 0.16);
  border-radius: 8px;
}

.developer-chart {
  display: block;
  width: 100%;
}

.developer-chart line {
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 1;
}

.developer-chart polygon {
  fill: rgba(37, 224, 164, 0.11);
}

.developer-chart polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(37, 224, 164, 0.34));
}

.developer-chart circle {
  fill: var(--accent-2);
  stroke: rgba(9, 12, 16, 0.86);
  stroke-width: 1.5;
}

.developer-chart-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}

.developer-chart-summary div {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.03);
}

.developer-chart-summary span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.developer-chart-summary strong {
  display: block;
  margin-top: 4px;
  font-size: 14px;
}

.developer-two-col {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.developer-two-col > div {
  display: grid;
  gap: 8px;
}

.developer-table-wrap {
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(9, 12, 16, 0.45);
}

.developer-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
  font-size: 11px;
}

.developer-table th,
.developer-table td {
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.developer-table th {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.developer-table tr:last-child td {
  border-bottom: 0;
}

.developer-table td:first-child {
  color: var(--text);
  font-weight: 850;
}

.developer-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 10px;
  color: var(--muted);
  font-size: 11px;
}

.account-center-tabs {
  position: sticky;
  top: -22px;
  z-index: 12;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
  margin: -22px -22px 14px;
  padding: 12px 58px 10px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: blur(16px);
}

.account-center-tabs button {
  display: grid;
  gap: 2px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 10px;
  color: var(--muted);
  background: transparent;
  text-align: left;
}

.account-center-tabs button span {
  color: inherit;
  font-size: 12px;
  font-weight: 950;
}

.account-center-tabs button small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
}

.account-center-tabs button.active {
  border-color: rgba(37, 224, 164, 0.46);
  color: var(--text);
  background: rgba(37, 224, 164, 0.1);
}

.account-center-tabs button[data-account-center-tab="store"].active {
  border-color: rgba(255, 207, 90, 0.52);
  background: rgba(255, 207, 90, 0.09);
}

.account-center-tabs button[data-account-center-tab="developer"].active {
  border-color: rgba(132, 188, 255, 0.52);
  background: rgba(132, 188, 255, 0.09);
}

.account-center-view[hidden] {
  display: none;
}

.account-center-view.active {
  animation: account-view-in 180ms ease-out both;
}

.store-link-button {
  justify-self: start;
  min-height: 36px;
  margin-top: 4px;
  border: 1px solid rgba(255, 207, 90, 0.44);
  border-radius: 7px;
  padding: 7px 12px;
  color: var(--accent-2);
  background: rgba(255, 207, 90, 0.08);
  font-size: 11px;
  font-weight: 900;
}

.store-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 2px 14px;
}

.store-header .eyebrow {
  margin: 0 0 4px;
}

.store-header h2 {
  margin: 0;
  font-size: 20px;
}

.store-secure-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(127, 255, 212, 0.3);
  border-radius: 999px;
  padding: 5px 8px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
}

.store-consumption-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 13px 14px;
  border: 1px solid rgba(37, 224, 164, 0.34);
  border-left-width: 3px;
  border-radius: 7px;
  background: rgba(37, 224, 164, 0.065);
}

.store-web-destination {
  display: grid;
  gap: 2px;
  min-width: 104px;
  padding-right: 12px;
  border-right: 1px solid rgba(37, 224, 164, 0.24);
}

.store-web-kicker {
  color: rgba(37, 224, 164, 0.78);
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0.08em;
}

.store-web-destination strong {
  color: var(--accent);
  font-size: 17px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}

.store-consumption-notice p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.store-web-sync {
  flex: 0 0 auto;
  padding: 5px 7px;
  border: 1px solid rgba(37, 224, 164, 0.28);
  border-radius: 999px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 950;
  text-align: center;
  text-transform: uppercase;
}

.store-pro-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px 20px;
  padding: 16px;
  border: 1px solid rgba(255, 207, 90, 0.5);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel-2) 91%, var(--accent-2) 9%);
}

.store-product-copy {
  min-width: 0;
}

.store-product-copy h3 {
  margin: 10px 0 5px;
  font-size: 19px;
}

.store-product-copy p,
.store-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.store-price {
  align-self: center;
  text-align: right;
}

.store-price strong {
  display: block;
  color: var(--accent-2);
  font-size: 24px;
  white-space: nowrap;
}

.store-price small {
  display: block;
  margin-top: 1px;
  color: rgba(255, 207, 90, 0.78);
  font-size: 11px;
  font-weight: 900;
}

.store-price span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.store-benefit-grid {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.store-benefit-grid span {
  position: relative;
  min-width: 0;
  padding-left: 16px;
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
}

.store-benefit-grid span::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(37, 224, 164, 0.46);
}

.store-availability-note {
  grid-column: 1 / -1;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(255, 207, 90, 0.36);
  border-radius: 7px;
  background: rgba(255, 207, 90, 0.055);
}

.store-availability-note strong {
  color: var(--accent-2);
  font-size: 11px;
}

.store-availability-note span {
  color: var(--muted);
  font-size: 9px;
  text-align: right;
}

.store-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.store-standard-section .store-section-head > span,
.store-standard-section .store-token-grid small {
  color: var(--accent);
}

.store-standard-section .store-token-grid .store-catalog-item.featured {
  border-color: rgba(37, 224, 164, 0.5);
  background: rgba(37, 224, 164, 0.07);
}

.store-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.store-section-head h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.store-section-head > span {
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.store-token-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.store-token-grid .store-catalog-item {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 82px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--text);
  background: var(--panel-2);
  text-align: left;
}

.store-token-grid .store-catalog-item.featured {
  border-color: rgba(255, 207, 90, 0.54);
  background: rgba(255, 207, 90, 0.07);
}

.store-token-grid span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
}

.store-token-grid strong {
  font-size: 17px;
  white-space: nowrap;
}

.store-catalog-price {
  display: grid;
  gap: 1px;
}

.store-token-grid .store-catalog-price small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 850;
}

.store-token-grid small {
  color: var(--accent);
  font-size: 9px;
  font-weight: 900;
}

.store-token-grid em {
  align-self: end;
  color: var(--muted);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.store-status {
  min-height: 18px;
  margin: 12px 2px 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.token-shortage-overlay {
  position: fixed;
  inset: 0;
  z-index: 145;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(4, 8, 12, 0.76);
  backdrop-filter: blur(12px);
}

.token-shortage-overlay[hidden] {
  display: none;
}

.token-shortage-dialog {
  width: min(390px, 100%);
  padding: 22px;
  border: 1px solid rgba(37, 224, 164, 0.42);
  border-radius: 8px;
  background: color-mix(in srgb, var(--panel) 94%, #081b16 6%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.48),
    0 0 32px rgba(37, 224, 164, 0.1);
}

.token-shortage-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border: 1px solid rgba(37, 224, 164, 0.5);
  border-radius: 50%;
  color: var(--accent);
  background: rgba(37, 224, 164, 0.08);
  font-size: 24px;
  font-weight: 500;
}

.token-shortage-dialog h2 {
  margin: 5px 0 8px;
  font-size: 21px;
}

.token-shortage-dialog > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.token-shortage-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  gap: 9px;
  margin-top: 20px;
}

.token-shortage-actions button {
  min-height: 44px;
}

.developer-center-view {
  max-width: 100%;
}

.developer-plan-lab {
  margin-top: 0;
}

.developer-stats {
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

.developer-stats-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 2px 0;
}

.developer-stats-heading > div {
  display: grid;
  gap: 2px;
}

.developer-stats-heading label {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.developer-stats-heading .hint {
  margin: 0;
  font-size: 9px;
}

.developer-refresh {
  flex: 0 0 auto;
  min-width: 42px;
  min-height: 42px;
  border-color: rgba(37, 224, 164, 0.34);
  color: var(--accent);
  background: rgba(37, 224, 164, 0.07);
  opacity: 1;
}

.developer-refresh.loading {
  animation: developer-refresh-spin 700ms linear infinite;
}

.developer-stats-content {
  min-width: 0;
}

.developer-dashboard {
  gap: 16px;
}

.developer-dashboard-toolbar {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.developer-timezone {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.developer-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 9px rgba(37, 224, 164, 0.58);
}

.developer-period-tabs {
  display: flex;
  flex: 1 1 auto;
  justify-content: flex-end;
  overflow-x: auto;
  scrollbar-width: none;
}

.developer-period-tabs::-webkit-scrollbar,
.developer-chart-tabs::-webkit-scrollbar {
  display: none;
}

.developer-period-tabs button {
  flex: 0 0 auto;
  min-width: 76px;
  min-height: 38px;
  padding: 7px 10px;
}

.developer-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.developer-section-heading span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.developer-overview-grid div {
  min-height: 78px;
  padding: 12px;
  background: var(--panel-2);
}

.developer-overview-grid div.revenue {
  border-color: rgba(255, 207, 90, 0.36);
}

.developer-overview-grid div.revenue strong {
  color: var(--accent-2);
}

.developer-chart-head {
  display: grid;
  grid-template-columns: minmax(120px, 0.35fr) minmax(0, 1.65fr);
}

.developer-chart-tabs {
  display: flex;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}

.developer-chart-tabs button {
  flex: 0 0 auto;
  min-width: 92px;
  min-height: 42px;
}

.developer-chart-card {
  position: relative;
  overflow: hidden;
  padding: 10px 10px 8px;
  background: rgba(9, 12, 16, 0.44);
}

.developer-chart {
  height: 220px;
  touch-action: manipulation;
}

.developer-chart .developer-chart-gridline {
  stroke: rgba(255, 255, 255, 0.08);
}

.developer-chart-axis-value,
.developer-chart-axis-label {
  fill: var(--muted);
  font-family: Inter, Arial, sans-serif;
  font-size: 9px;
  font-weight: 800;
}

.developer-chart-axis-value {
  text-anchor: end;
}

.developer-chart-axis-label.middle {
  text-anchor: middle;
}

.developer-chart-axis-label.end {
  text-anchor: end;
}

.developer-chart-hit {
  fill: transparent;
  stroke: transparent;
  pointer-events: all;
}

.developer-chart-dot {
  fill: var(--accent-2);
  stroke: rgba(9, 12, 16, 0.86);
  stroke-width: 1.5;
  pointer-events: none;
}

.developer-chart-point.active .developer-chart-dot,
.developer-chart-point:focus .developer-chart-dot {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 3;
}

.developer-chart-focus {
  position: absolute;
  top: 13px;
  right: 13px;
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 207, 90, 0.28);
  border-radius: 6px;
  background: rgba(6, 8, 12, 0.82);
  pointer-events: none;
}

.developer-chart-focus span {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.developer-chart-focus strong {
  color: var(--accent-2);
  font-size: 13px;
}

.developer-data-panel {
  overflow: hidden;
  border-top: 1px solid var(--line);
}

.developer-data-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 52px;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}

.developer-data-panel > summary::-webkit-details-marker {
  display: none;
}

.developer-data-panel > summary span {
  font-size: 12px;
  font-weight: 950;
}

.developer-data-panel > summary small {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.developer-data-panel > summary small::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text);
  font-size: 14px;
}

.developer-data-panel[open] > summary small::after {
  content: "\2212";
}

.developer-data-content {
  display: grid;
  gap: 12px;
  padding: 2px 0 14px;
}

.developer-data-content h5 {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

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

.developer-account-grid > div {
  padding: 11px;
  border-left: 2px solid rgba(37, 224, 164, 0.42);
  background: rgba(255, 255, 255, 0.025);
}

.developer-account-grid span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
}

.developer-account-grid strong {
  display: block;
  margin-top: 5px;
  font-size: 17px;
}

.developer-purchase-content {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.developer-table-wrap {
  overflow: hidden;
}

.developer-table {
  table-layout: auto;
}

.developer-table th,
.developer-table td {
  padding: 10px;
}

@keyframes account-view-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes developer-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

.legal-section details {
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.legal-section details:first-child {
  border-top: 0;
  padding-top: 0;
}

.legal-section summary {
  cursor: pointer;
  font-weight: 850;
}

.legal-section p,
.future-section p {
  margin: 6px 0 0;
}

.profile-logout-button {
  min-height: 44px;
  border-color: rgba(37, 224, 164, 0.42);
  color: var(--text);
  background: rgba(37, 224, 164, 0.07);
  font-weight: 900;
}

.profile-logout-button:hover {
  border-color: rgba(37, 224, 164, 0.72);
  background: rgba(37, 224, 164, 0.12);
}

.account-danger-zone {
  margin-top: 2px;
}

.account-danger-zone > summary {
  color: var(--muted);
  font-size: 11px;
}

.account-danger-body {
  padding-top: 8px;
}

.account-danger-body .danger-button {
  margin-top: 9px;
}

.mini {
  min-height: 28px;
  padding: 5px 8px;
  font-size: 11px;
}

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

.stats-grid div {
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 9px;
  background: var(--panel);
}

.stats-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}

.stats-grid strong {
  display: block;
  margin-top: 4px;
}

.monetization-copy {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ad-progress {
  overflow: hidden;
  height: 6px;
  margin-top: 20px;
  background: #272a33;
}

.ad-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--accent-2);
}

.ad-progress.is-loading span {
  width: 34%;
  animation: rewarded-ad-loading 1.15s ease-in-out infinite;
}

@keyframes rewarded-ad-loading {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(320%);
  }
}

.ad-counter {
  display: block;
  margin: 10px 0 18px;
  color: var(--accent-2);
  font-size: 11px;
}

.visual-mode {
  min-width: 0;
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--panel-2);
  color: var(--text);
  text-align: left;
}

.visual-mode strong,
.visual-mode span {
  display: block;
}

.visual-mode strong {
  overflow-wrap: anywhere;
  font-size: 12px;
}

.visual-mode span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.visual-mode.active {
  border-color: rgba(37, 224, 164, 0.65);
  background: rgba(37, 224, 164, 0.12);
}

.visual-mode.premium-mode.active {
  border-color: rgba(255, 207, 90, 0.72);
  background: rgba(255, 207, 90, 0.12);
}

.director-button {
  width: 100%;
  min-height: 44px;
  margin-top: 9px;
  border: 1px solid rgba(90, 167, 255, 0.58);
  border-radius: 8px;
  background: linear-gradient(110deg, rgba(90, 167, 255, 0.2), rgba(37, 224, 164, 0.18));
  color: var(--text);
  font-weight: 900;
}

.ghost,
.icon-button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}

.ghost {
  padding: 0 14px;
}

.wide {
  width: 100%;
  margin-top: 10px;
}

.icon-button {
  width: 42px;
  font-weight: 900;
}

.primary,
.secondary,
.nudge {
  flex: 1;
  padding: 0 12px;
  font-weight: 900;
}

.primary {
  background: var(--accent);
  color: #07120f;
}

.secondary {
  border: 1px solid rgba(255, 207, 90, 0.55);
  background: rgba(255, 207, 90, 0.14);
  color: var(--accent-2);
}

.nudge-row {
  align-items: center;
}

.nudge {
  min-width: 44px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  font-size: 12px;
}

button:not(:disabled):hover {
  transform: translateY(-1px);
}

.stage-wrap {
  min-height: calc(100vh - 126px);
  display: grid;
  grid-template-rows: auto minmax(560px, calc(100vh - 190px));
  gap: 12px;
}

.stage-toolbar {
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(25, 27, 33, 0.78);
}

.stage-toolbar span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.stage-toolbar strong {
  font-size: 14px;
}

.meter {
  width: min(180px, 34vw);
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--panel-2);
}

.meter span {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--hot));
  transform: scaleX(0);
  transform-origin: left center;
}

.canvas-stack {
  position: relative;
  width: min(100%, calc((100vh - 190px) * var(--preview-ratio, 0.5625)));
  max-height: calc(100vh - 190px);
  justify-self: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #08090b;
  box-shadow: 0 20px 70px var(--shadow);
  aspect-ratio: 9 / 16;
  overflow: hidden;
}

.canvas-stack canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.special-gpu-canvas {
  z-index: 0;
  visibility: hidden;
}

#clipCanvas {
  z-index: 1;
}

.welcome-preview-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  object-fit: cover;
  pointer-events: none;
}

.welcome-preview-video[hidden] { display: none; }

.canvas-stack.special-active .special-gpu-canvas {
  visibility: visible;
}

.canvas-stack.special-active.special-custom-media .special-gpu-canvas {
  visibility: hidden;
}

.text-hitbox-overlay {
  position: absolute;
  z-index: 4;
  border: 1px solid rgba(255, 207, 90, 0.86);
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255, 207, 90, 0.1), rgba(37, 224, 164, 0.06)),
    rgba(7, 8, 10, 0.16);
  box-shadow: 0 0 0 1px rgba(7, 8, 10, 0.48), 0 0 22px rgba(255, 207, 90, 0.16);
  cursor: move;
  touch-action: none;
}

.text-hitbox-overlay.dragging {
  border-color: rgba(37, 224, 164, 0.92);
  box-shadow: 0 0 0 1px rgba(7, 8, 10, 0.52), 0 0 26px rgba(37, 224, 164, 0.22);
}

.text-hitbox-label {
  position: absolute;
  left: 8px;
  top: 7px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #101114;
  background: rgba(255, 207, 90, 0.92);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.text-hitbox-confirm {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(37, 224, 164, 0.72);
  border-radius: 999px;
  padding: 0;
  color: #07100d;
  background: linear-gradient(180deg, rgba(126, 255, 214, 0.98), rgba(37, 224, 164, 0.9));
  box-shadow: 0 0 18px rgba(37, 224, 164, 0.2);
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  cursor: pointer;
}

.text-hitbox-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 22px rgba(37, 224, 164, 0.3);
}

.text-hitbox-resize {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 22px;
  height: 22px;
  border-top-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background:
    linear-gradient(135deg, transparent 0 44%, rgba(16, 17, 20, 0.75) 44% 52%, transparent 52%),
    linear-gradient(135deg, transparent 0 62%, rgba(16, 17, 20, 0.75) 62% 70%, transparent 70%),
    rgba(255, 207, 90, 0.92);
  cursor: nwse-resize;
}

audio {
  display: none;
}

.notes,
.storyboard-panel {
  padding: 18px;
}

.notes ul {
  margin: 16px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.55;
}

.notes li + li {
  margin-top: 10px;
}

.storyboard-panel {
  position: sticky;
  top: 18px;
}

.plan-status {
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--panel-2);
}

.plan-status.ready {
  border-color: rgba(37, 224, 164, 0.45);
  color: var(--accent);
}

.storyboard {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.story-empty {
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 18px 14px;
  color: var(--muted);
}

.story-empty strong,
.story-empty span {
  display: block;
}

.story-empty strong {
  color: var(--text);
  font-size: 13px;
}

.story-empty span {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
}

.story-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--panel-2);
}

.story-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--scene-color, var(--accent));
}

.story-index {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid color-mix(in srgb, var(--scene-color, var(--accent)) 58%, transparent);
  border-radius: 50%;
  color: var(--scene-color, var(--accent));
  font-size: 11px;
  font-weight: 900;
}

.story-copy {
  min-width: 0;
}

.story-copy strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.story-copy span,
.story-copy small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.3;
}

.story-copy small {
  color: var(--scene-color, var(--accent));
  text-transform: uppercase;
}

.premium-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.premium-mark {
  flex: 0 0 auto;
  color: #101114;
  background: var(--accent-2);
}

.premium-note p {
  margin: 1px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  .editor-grid {
    grid-template-columns: minmax(280px, 380px) minmax(320px, 1fr);
  }

  .notes,
  .storyboard-panel {
    grid-column: 1 / -1;
  }

  .developer-overview-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .developer-two-col,
  .developer-dashboard-toolbar,
  .developer-chart-head {
    grid-template-columns: 1fr;
  }

  .developer-chart-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .special-styles {
    grid-template-columns: 1fr;
  }

  .shell {
    padding: 14px;
  }

  .topbar,
  .editor-grid {
    display: block;
  }

  .privacy-pill {
    display: inline-block;
    margin-top: 14px;
  }

  .stage-wrap,
  .notes,
  .storyboard-panel {
    margin-top: 16px;
  }

  .storyboard-panel {
    position: static;
  }

  .stage-wrap {
    min-height: auto;
    grid-template-rows: auto auto;
  }

  .canvas-stack {
    width: 100%;
    max-height: none;
  }

  .segments {
    grid-template-columns: repeat(3, 1fr);
  }

  .timing-field,
  .toggle-grid {
    grid-template-columns: 1fr;
  }

  .listen-field .nudge-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .ratio-modes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .background-row {
    grid-template-columns: 1fr;
  }

  .account-center-drawer.developer-center-open .account-center-panel {
    width: 100%;
  }

  .developer-period-tabs,
  .developer-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .developer-table {
    font-size: 10px;
  }

  .developer-chart-tabs,
  .developer-chart-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .legal-consent-overlay {
    align-items: start;
    padding: 10px;
  }

  .legal-consent-dialog {
    max-height: calc(100vh - 20px);
    padding: 18px;
  }

  .legal-consent-dialog h2 {
    font-size: 20px;
  }
}

@media (max-width: 760px) {
  .account-center-panel {
    width: 100%;
    padding: 12px;
    border-left: 0;
  }

  .account-center-tabs {
    top: -12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: -12px -12px 12px;
    padding: 9px 52px 9px 9px;
  }

  .account-center-drawer.developer-center-open .account-center-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .account-center-tabs button {
    min-width: 0;
    min-height: 44px;
    padding: 6px 8px;
    font-size: 11px;
  }

  .account-center-tabs button small {
    display: none;
  }

  .account-center-hero {
    margin-right: 0;
    padding: 13px;
  }

  .store-header h2 {
    font-size: 18px;
  }

  .store-pro-card {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 13px;
  }

  .store-price strong {
    font-size: 21px;
  }

  .store-benefit-grid {
    grid-template-columns: 1fr;
  }

  .store-token-grid {
    gap: 6px;
  }

  .store-token-grid .store-catalog-item {
    min-height: 88px;
    padding: 10px 8px;
  }

  .developer-dashboard-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .developer-period-tabs {
    width: 100%;
    justify-content: flex-start;
    padding-bottom: 2px;
  }

  .developer-period-tabs button {
    min-width: 82px;
    min-height: 42px;
  }

  .developer-overview-grid div {
    min-height: 72px;
    padding: 10px;
  }

  .developer-overview-grid strong {
    font-size: 20px;
  }

  .developer-chart-head {
    grid-template-columns: 1fr;
  }

  .developer-chart-tabs {
    margin-right: -12px;
    padding-right: 12px;
  }

  .developer-chart-tabs button {
    min-width: 96px;
    min-height: 44px;
  }

  .developer-chart-card {
    margin: 0 -2px;
    padding: 8px 4px 7px;
  }

  .developer-chart {
    height: 190px;
  }

  .developer-chart-focus {
    top: 9px;
    right: 8px;
  }

  .developer-chart-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 0 4px;
  }

  .developer-chart-summary div {
    min-width: 0;
    padding: 7px 6px;
  }

  .developer-chart-summary span {
    font-size: 8px;
  }

  .developer-chart-summary strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
  }

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

  .developer-purchase-content,
  .developer-two-col {
    grid-template-columns: 1fr;
  }

  .developer-table-wrap {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .developer-table,
  .developer-table tbody,
  .developer-table tr,
  .developer-table td {
    display: block;
    width: 100%;
  }

  .developer-table thead {
    display: none;
  }

  .developer-table tbody {
    display: grid;
    gap: 7px;
  }

  .developer-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: rgba(9, 12, 16, 0.4);
  }

  .developer-table td {
    min-width: 0;
    padding: 0;
    border: 0;
    color: var(--text);
    font-size: 11px;
    overflow-wrap: anywhere;
  }

  .developer-table td:first-child {
    grid-column: 1 / -1;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line);
    font-size: 12px;
  }

  .developer-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
  }

  .developer-data-panel > summary {
    min-height: 56px;
  }
}

@keyframes logo-breathe {
  0%,
  100% {
    transform: rotate(-1.5deg) translateX(10px) translateY(0) scale(1);
    filter:
      drop-shadow(4px 5px 0 #050608)
      drop-shadow(0 0 12px rgba(37, 224, 164, 0.22));
  }
  48% {
    transform: rotate(-2deg) translateX(10px) translateY(-1px) scale(1.01);
    filter:
      drop-shadow(4px 5px 0 #050608)
      drop-shadow(0 0 22px rgba(246, 244, 239, 0.28))
      drop-shadow(0 0 14px rgba(37, 224, 164, 0.32));
  }
}

@keyframes metal-glint {
  0%,
  58%,
  100% {
    text-shadow:
      3px 3px 0 #050608,
      -2px 3px 0 #050608,
      0 0 12px rgba(246, 244, 239, 0.34),
      0 0 24px rgba(37, 224, 164, 0.24);
  }
  70% {
    text-shadow:
      3px 3px 0 #050608,
      -2px 3px 0 #050608,
      0 0 8px #ffffff,
      0 0 22px rgba(255, 255, 255, 0.9),
      0 0 34px rgba(37, 224, 164, 0.64);
  }
}

@keyframes corner-spark {
  0%,
  57%,
  100% {
    opacity: 0;
    transform: rotate(45deg) scale(0.4);
  }
  62% {
    opacity: 1;
    transform: rotate(45deg) scale(1.15);
  }
  67% {
    opacity: 0;
    transform: rotate(45deg) scale(0.7) translate(18px, -18px);
  }
}

@keyframes menu-flash {
  0%,
  61%,
  100% {
    opacity: 0;
    transform: translateX(0) translateY(0) rotate(12deg) scaleX(0.3);
  }
  66% {
    opacity: 0.9;
    transform: translateX(70px) translateY(42px) rotate(12deg) scaleX(0.85);
  }
  74% {
    opacity: 0;
    transform: translateX(230px) translateY(96px) rotate(12deg) scaleX(1.25);
  }
}

@keyframes settings-sweep {
  0%,
  71%,
  100% {
    left: -35%;
    opacity: 0;
  }
  76% {
    opacity: 1;
  }
  86% {
    left: 105%;
    opacity: 0;
  }
}

@keyframes tail-dive {
  0%,
  100% {
    transform: skewX(-14deg) rotate(15deg) translate(0, 0);
  }
  48% {
    transform: skewX(-14deg) rotate(12deg) translate(-4px, 3px);
  }
}

@keyframes ready-flash {
  0%,
  100% {
    border-color: var(--line);
    background: transparent;
    color: var(--text);
  }
  50% {
    border-color: rgba(37, 224, 164, 0.9);
    background: rgba(37, 224, 164, 0.28);
    color: #ffffff;
    transform: translateY(-1px);
  }
}

/* Fixed preview and horizontal editor workbench. */
body.workbench-mounted {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body.workbench-mounted .shell {
  width: 100%;
  height: 100%;
  padding: 12px;
  overflow: hidden;
}

body.workbench-mounted .workspace {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

body.workbench-mounted .workspace::after,
body.workbench-mounted .controls::before {
  display: none;
}

body.workbench-mounted .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  margin: 0 0 10px;
}

body.workbench-mounted .topbar > div:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

body.workbench-mounted .topbar .eyebrow {
  margin: 0;
}

body.workbench-mounted .wordmark {
  min-height: 54px;
  margin: 0;
  padding: 8px 44px 12px 18px;
  transform: rotate(-1.5deg);
}

body.workbench-mounted .wordmark-main {
  font-size: 40px;
}

body.workbench-mounted .wordmark-tail {
  right: 4px;
  bottom: 4px;
  font-size: 36px;
}

.editor-grid.workbench-ready {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(400px, 540px);
  grid-template-rows: minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  height: 100%;
  min-height: 0;
}

.editor-grid.workbench-ready .stage-wrap {
  grid-column: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  container-type: size;
  --stage-toolbar-space: 56px;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
}

.editor-grid.workbench-ready .stage-toolbar {
  min-width: 0;
  min-height: 46px;
  padding: 8px 12px;
}

.editor-grid.workbench-ready .stage-toolbar > div:first-child {
  min-width: 0;
}

.editor-grid.workbench-ready .stage-toolbar strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stage-live-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}

.stage-live-actions .meter {
  width: clamp(64px, 12vw, 150px);
}

.stage-preview-toggle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  border-radius: 50%;
  padding: 0 0 0 2px;
  font-size: 13px;
  line-height: 1;
}

.editor-grid.workbench-ready .canvas-stack {
  align-self: center;
  justify-self: center;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  min-height: 0;
}

@supports (width: 1cqw) {
  .editor-grid.workbench-ready .canvas-stack {
    width: min(
      100cqw,
      calc((100cqh - var(--stage-toolbar-space)) * var(--preview-ratio, 0.5625))
    );
    height: auto;
    max-height: calc(100cqh - var(--stage-toolbar-space));
    aspect-ratio: var(--preview-ratio, 0.5625);
  }
}

.workbench-dock {
  grid-column: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}

.workbench-tabs {
  position: relative;
  z-index: 2;
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-2) 94%, transparent);
  scrollbar-width: none;
}

.workbench-tabs::-webkit-scrollbar,
.workbench-viewport::-webkit-scrollbar,
.workbench-page::-webkit-scrollbar,
.visual-subviewport::-webkit-scrollbar,
.visual-pane::-webkit-scrollbar {
  display: none;
}

.workbench-tab {
  --tool-color: var(--accent);
  position: relative;
  flex: 1 0 72px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  min-width: 72px;
  height: 58px;
  border-right: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 0;
  padding: 6px 8px;
  color: var(--muted);
  background: transparent;
  transition: color 160ms ease, background 160ms ease;
}

.workbench-tab[data-workbench-tab="sync"] {
  --tool-color: #43c7ff;
}

.workbench-tab[data-workbench-tab="style"] {
  --tool-color: #ff6685;
}

.workbench-tab[data-workbench-tab="visual"] {
  --tool-color: #ffd35a;
}

.workbench-tab[data-workbench-tab="director"] {
  --tool-color: #b9a2ff;
}

.workbench-tab[data-workbench-tab="export"] {
  --tool-color: #7effd6;
}

.workbench-tab::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--tool-color);
  opacity: 0;
  transform: scaleX(0.3);
  transition: opacity 160ms ease, transform 160ms ease;
}

.workbench-tab.active {
  color: var(--text);
  background: color-mix(in srgb, var(--tool-color) 11%, transparent);
}

.workbench-tab.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.workbench-tab-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  color: var(--tool-color);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
}

.workbench-tab-label {
  max-width: 100%;
  overflow: hidden;
  font-size: 10px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workbench-viewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.workbench-track {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.workbench-page {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overscroll-behavior-y: contain;
  padding: 16px;
  opacity: 0.72;
  transition: opacity 160ms ease;
  scrollbar-width: none;
}

.workbench-page.active {
  opacity: 1;
}

.workbench-page > .field + .field {
  margin-top: 15px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding-top: 15px;
}

.workbench-page textarea {
  min-height: 94px;
  max-height: 180px;
  resize: vertical;
}

.workbench-page .settings-card,
.workbench-page .timing-card {
  box-shadow: none;
}

.director-tool-page .storyboard-panel {
  position: static;
  grid-column: auto;
  margin: 16px 0 0;
  border: 0;
  padding: 16px 0 0;
  background: transparent;
  box-shadow: none;
}

.director-tool-page .storyboard-panel::before {
  content: "";
  display: block;
  margin-bottom: 15px;
  border-top: 1px solid var(--line);
}

.export-tool-page .render-field {
  margin: 0;
}

.export-tool-page .actions {
  display: grid;
  grid-template-columns: 1fr;
}

.visual-tool-page {
  overflow: hidden;
  padding: 0;
}

.visual-workbench {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
}

.visual-subtabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 12px 8px;
  border-bottom: 1px solid var(--line);
}

.visual-subtab {
  position: relative;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--muted);
  background: var(--panel-2);
  font-size: 11px;
  font-weight: 850;
}

.visual-subtab.active {
  border-color: rgba(255, 211, 90, 0.66);
  color: #101114;
  background: #ffd35a;
}

.visual-subviewport {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.visual-subtrack {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.visual-pane {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-align: start;
  overscroll-behavior-y: contain;
  padding: 13px 14px 18px;
  scrollbar-width: none;
}

.visual-pane > * + * {
  margin-top: 12px;
}

.visual-pane .field-heading,
.visual-pane .background-video-heading,
.visual-pane .text-position-heading {
  margin-top: 0;
}

.visual-media-pane .video-preview-shell {
  position: relative;
  top: auto;
}

@media (max-width: 820px) {
  body.workbench-mounted .shell {
    padding:
      max(6px, env(safe-area-inset-top))
      max(7px, env(safe-area-inset-right))
      max(7px, env(safe-area-inset-bottom))
      max(7px, env(safe-area-inset-left));
  }

  body.workbench-mounted .workspace {
    grid-template-rows: 50px minmax(0, 1fr);
  }

  body.workbench-mounted .topbar {
    min-height: 44px;
    margin: 0;
  }

  body.workbench-mounted .topbar > div:first-child {
    gap: 0;
  }

  body.workbench-mounted .topbar .eyebrow,
  body.workbench-mounted .privacy-pill {
    display: none;
  }

  body.workbench-mounted .wordmark {
    min-height: 42px;
    padding: 6px 34px 8px 8px;
    transform: rotate(-1deg);
    animation: none;
  }

  body.workbench-mounted .wordmark::before,
  body.workbench-mounted .wordmark-main::before {
    display: none;
  }

  body.workbench-mounted .wordmark-main {
    font-size: 31px;
  }

  body.workbench-mounted .wordmark-tail {
    right: 2px;
    bottom: 3px;
    font-size: 29px;
  }

  body.workbench-mounted .topbar-actions {
    gap: 6px;
  }

  body.workbench-mounted .wallet-pill {
    min-height: 44px;
    padding: 6px 9px;
    font-size: 9px;
  }

  body.workbench-mounted .account-button {
    width: 44px;
    height: 44px;
  }

  .editor-grid.workbench-ready {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(238px, 50%) minmax(0, 1fr);
    gap: 7px;
  }

  .editor-grid.workbench-ready .stage-wrap {
    grid-column: 1;
    grid-row: 1;
    grid-template-rows: 40px minmax(0, 1fr);
    gap: 6px;
    --stage-toolbar-space: 46px;
  }

  .editor-grid.workbench-ready .stage-toolbar {
    min-height: 40px;
    padding: 5px 8px;
  }

  .editor-grid.workbench-ready .stage-toolbar span {
    font-size: 9px;
  }

  .editor-grid.workbench-ready .stage-toolbar strong {
    font-size: 11px;
  }

  .stage-live-actions {
    gap: 6px;
  }

  .stage-live-actions .meter {
    width: clamp(48px, 17vw, 78px);
    height: 6px;
  }

  .stage-preview-toggle {
    width: 44px;
    height: 44px;
    font-size: 11px;
  }

  .workbench-dock {
    grid-column: 1;
    grid-row: 2;
  }

  .workbench-tab {
    flex-basis: 68px;
    min-width: 68px;
    height: 52px;
    padding: 4px 6px;
  }

  .workbench-tab-icon {
    height: 20px;
    font-size: 15px;
  }

  .workbench-tab-label {
    font-size: 9px;
  }

  .workbench-page {
    padding: 12px;
  }

  .workbench-page > .field + .field {
    margin-top: 12px;
    padding-top: 12px;
  }

  .track-tool-page .timing-field {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .visual-motion-pane .toggle-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .visual-motion-pane .editor-toggle {
    min-width: 0;
    padding: 8px;
  }

  .visual-motion-pane .editor-toggle span {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
  }

  .visual-motion-pane .ratio-modes {
    display: flex;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: none;
  }

  .visual-motion-pane .ratio-modes button {
    flex: 0 0 62px;
  }

  .visual-media-pane .background-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .visual-media-pane .video-preview-shell {
    display: none;
  }

  .visual-text-pane .position-grid {
    width: min(100%, 250px);
    grid-template-columns: repeat(3, 44px);
  }

  .visual-text-pane .position-grid button {
    width: 44px;
    height: 44px;
  }

  .style-tool-page .segments:not(.vibe-style-cards) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .style-tool-page .vibe-style-cards {
    grid-template-columns: 1fr;
  }

  .style-tool-page .special-styles {
    display: flex;
    grid-template-columns: none;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 3px;
    scrollbar-width: none;
  }

  .style-tool-page .special-style {
    flex: 0 0 164px;
  }

  .sync-tool-page textarea {
    min-height: 82px;
    max-height: 130px;
  }

  .sync-tool-page .sync-mode-card,
  .sync-tool-page .quality-mode {
    min-height: 52px;
  }

  .listen-field .nudge-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .listen-field .nudge-row button {
    min-width: 0;
    padding-inline: 4px;
    font-size: 10px;
  }
}

@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  body.workbench-mounted .workspace {
    grid-template-rows: 44px minmax(0, 1fr);
  }

  .editor-grid.workbench-ready {
    grid-template-columns: minmax(250px, 44%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 7px;
  }

  .editor-grid.workbench-ready .stage-wrap {
    grid-column: 1;
    grid-row: 1;
  }

  .workbench-dock {
    grid-column: 2;
    grid-row: 1;
  }
}

/* Extra room for compact Android devices such as Redmi 8A. */
@media (max-width: 390px) {
  body.workbench-mounted .wordmark {
    min-height: 38px;
    padding: 5px 29px 7px 6px;
  }

  body.workbench-mounted .wordmark-main {
    font-size: 27px;
  }

  body.workbench-mounted .wordmark-tail {
    font-size: 25px;
  }

  body.workbench-mounted .topbar-actions {
    gap: 4px;
  }

  body.workbench-mounted .wallet-pill {
    min-height: 36px;
    padding: 5px 7px;
    border-radius: 8px;
    font-size: 8px;
  }

  body.workbench-mounted .account-button {
    width: 36px;
    height: 36px;
  }

  .editor-grid.workbench-ready {
    grid-template-rows: minmax(218px, 47%) minmax(0, 1fr);
  }

  .editor-grid.workbench-ready .stage-toolbar {
    min-height: 36px;
    padding: 4px 7px;
  }

  .editor-grid.workbench-ready .stage-wrap {
    grid-template-rows: 36px minmax(0, 1fr);
    --stage-toolbar-space: 42px;
  }

  .workbench-tab {
    flex-basis: 58px;
    min-width: 58px;
    height: 50px;
    padding: 4px 3px;
  }

  .workbench-tab-icon {
    font-size: 14px;
  }

  .workbench-tab-label {
    font-size: 8px;
  }

  .workbench-page {
    padding: 10px;
  }

  .workbench-page > .field + .field {
    margin-top: 10px;
    padding-top: 10px;
  }

  .tutorial-panel {
    right: 10px;
    width: min(332px, calc(100vw - 20px));
    padding: 12px;
  }

  .tutorial-panel h2 {
    margin-top: 9px;
    font-size: 16px;
  }
}
.project-draft-heading { gap: 8px; flex-wrap: wrap; }
.project-draft-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; min-width: 0; }
#projectDraftStatus { color: var(--muted); font-size: 10px; max-width: 180px; overflow-wrap: anywhere; }
#clearProjectDraft { width: 44px; height: 44px; flex: 0 0 44px; padding: 12px; }
.draft-delete-icon { display: block; width: 17px; height: 17px; background: currentColor; mask: url('./assets/ui-icons/trash-2.svg') center / contain no-repeat; }
/* Keep the drawn identity independent of the classic and compact header effects. */
.brand-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body .topbar .wordmark.brand-signature {
  position: relative;
  display: block;
  width: 154px;
  max-width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  aspect-ratio: 960 / 302;
  color: var(--text);
  transform: none;
  filter: none;
  animation: none;
}
body .topbar .wordmark.brand-signature::before,
body .topbar .wordmark.brand-signature::after { content: none; }
.brand-signature-art {
  display: block;
  width: 100%;
  height: 100%;
}
.brand-signature-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-shimmer {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  contain: paint;
  -webkit-mask: url('./assets/brand/vlyrics-wordmark-compact.svg?v=brand-joined-v7') center / contain no-repeat;
  mask: url('./assets/brand/vlyrics-wordmark-compact.svg?v=brand-joined-v7') center / contain no-repeat;
  animation: brand-material-appear 180ms ease-out both;
}
.brand-shimmer > span {
  position: absolute; inset: 0 auto 0 0; width: 300%;
  background: linear-gradient(110deg, #244f48bb, #94d9bdcc 20%, #fcfff8 35%, #728f91bb 52%, #d7eeeedd 72%, #244f48bb);
  background-size: 33.333333% 100%;
  animation: brand-material-flow 3200ms linear infinite;
}
.brand-shimmer.paused, .brand-shimmer.paused > span { animation-play-state: paused; }
.brand-shimmer:not(.paused) > span { will-change: transform; }
@keyframes brand-material-appear { from { opacity: 0; } to { opacity: .85; } }
@keyframes brand-material-flow {
  from { transform: translateX(0); }
  to { transform: translateX(-33.333333%); }
}
.app-launch-intro {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: 24px; border: 0; border-radius: 0; outline: none; box-shadow: none; background: #000000; color: #f0f3f1;
  overflow: hidden; opacity: 1; transition: opacity 320ms cubic-bezier(.4, 0, .2, 1);
}
.app-launch-intro[open] { display: grid; place-items: center; }
.app-launch-intro::backdrop { background: transparent; }
.app-launch-intro.leaving { opacity: 0; }
.app-launch-art { position: relative; width: min(82vw, 620px); max-width: 100%; aspect-ratio: 944 / 260; visibility: hidden; }
.app-launch-intro.ready .app-launch-art { visibility: visible; }
.launch-sprite { position: absolute; display: block; pointer-events: none; }
.launch-poster { opacity: 0; }
.launch-layers, .launch-flight, .launch-bird,
.launch-far-wing, .launch-head, .launch-tail-body, .launch-near-wing, .launch-word-counter { position: absolute; inset: 0; }
.launch-flight { transform-origin: 18.22034% 67.30769%; }
.launch-near-wing { transform-origin: 16.63136% 63.84615%; }
.launch-far-wing { transform-origin: 19.0678% 64.61538%; }
.launch-head { transform-origin: 14.61864% 68.46154%; }
.launch-tail-body { transform-origin: 19.0678% 64.61538%; }
.launch-line { position: absolute; left: 34.11017%; top: 55.76923%; width: 61.44068%; height: 1.35px; background: #e3e8ed; transform-origin: left center; }
.launch-lock { opacity: 0; }
.launch-word-viewport { position: absolute; left: 34.11017%; top: 15.38462%; width: 62.5%; height: 80.76923%; overflow: hidden; }
.launch-word-upper, .launch-word-lower { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; }
.launch-word-upper { top: 0; --launch-reveal-from: 50%; }
.launch-word-lower { top: 50%; --launch-reveal-from: -50%; }
.launch-word-counter { bottom: auto; height: 200%; }
.launch-word-lower .launch-word-counter { top: -100%; }
.launch-word-whole { position: absolute; inset: 0; opacity: 0; }
.app-launch-intro.ready .launch-flight { animation: launch-cached-flight 1400ms cubic-bezier(.22, .72, .2, 1) both; }
.app-launch-intro.ready .launch-bird { animation: launch-cached-bird 1400ms linear both; }
.app-launch-intro.ready .launch-lock { animation: launch-cached-lock 1400ms linear both; }
.app-launch-intro.ready .launch-near-wing { animation: launch-cached-near 1200ms ease-in-out both; }
.app-launch-intro.ready .launch-far-wing { animation: launch-cached-far 1200ms ease-in-out both; }
.app-launch-intro.ready .launch-head { animation: launch-cached-head 1200ms ease-in-out both; }
.app-launch-intro.ready .launch-tail-body { animation: launch-cached-tail 1200ms ease-in-out both; }
.app-launch-intro.ready .launch-line { animation: launch-cached-line 1700ms cubic-bezier(.22, .75, .2, 1) 650ms both; }
.app-launch-intro.ready .launch-word-counter { animation: launch-cached-counter 800ms cubic-bezier(.22, .75, .2, 1) 1150ms both; }
.app-launch-intro.ready :is(.launch-word-upper, .launch-word-lower) { animation: launch-halves-out 1950ms step-end both; }
.app-launch-intro.ready .launch-word-whole { animation: launch-whole-in 1950ms step-end both; }
.app-launch-intro.ready :is(.launch-flight, .launch-bird, .launch-lock, .launch-near-wing, .launch-far-wing, .launch-head, .launch-tail-body, .launch-line, .launch-word-counter) { will-change: transform, opacity; }
@keyframes launch-cached-flight {
  0% { transform: translate(21.18644%, 2.30769%) scale(.9) rotate(-3deg); }
  65% { transform: translate(-.4%, 0) scale(1.01) rotate(.3deg); }
  100% { transform: none; }
}
@keyframes launch-cached-near { 0% { transform: rotate(-20deg) scaleY(.82); } 23% { transform: rotate(-39deg) scaleY(.6); } 46% { transform: rotate(-17deg) scaleY(1.01); } 65% { transform: rotate(-26deg) scaleY(.78); } 84% { transform: rotate(-5deg) scaleY(.99); } 100% { transform: none; } }
@keyframes launch-cached-far { 0% { transform: rotate(17deg) scaleY(.87); } 26% { transform: rotate(40deg) scaleY(.61); } 49% { transform: rotate(17deg) scaleY(.99); } 68% { transform: rotate(25deg) scaleY(.8); } 86% { transform: rotate(4deg) scaleY(.99); } 100% { transform: none; } }
@keyframes launch-cached-head { 0% { transform: rotate(18deg); } 30% { transform: rotate(25deg); } 65% { transform: rotate(8deg); } 100% { transform: none; } }
@keyframes launch-cached-tail { 0% { transform: rotate(-4deg); } 35% { transform: rotate(3deg); } 70% { transform: rotate(-1deg); } 100% { transform: none; } }
@keyframes launch-cached-bird { 0%, 73% { opacity: 1; } 100% { opacity: 0; } }
@keyframes launch-cached-lock { 0%, 73% { opacity: 0; } 100% { opacity: 1; } }
@keyframes launch-cached-counter { from { transform: translateY(var(--launch-reveal-from)); } to { transform: translateY(0); } }
@keyframes launch-halves-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes launch-whole-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes launch-cached-line { 0% { opacity: 0; transform: scaleX(0); } 10% { opacity: .85; } 40% { opacity: .85; transform: scaleX(1); } 80% { opacity: .55; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .app-launch-intro { transition-duration: 150ms; }
  .brand-shimmer { display: none; }
  .launch-layers { display: none; }
  .launch-poster { opacity: 1; }
}
@media (max-width: 820px) {
  body .topbar .wordmark.brand-signature { width: min(138px, 38vw); }
}
.web-editor .web-editor-home {
  color: var(--muted, #aaaeb7);
  text-decoration: none;
  transition: color 160ms ease;
}

.web-editor .web-editor-home:hover,
.web-editor .web-editor-home:focus-visible {
  color: var(--text, #f4f5f7);
}

.web-editor .web-export-notice {
  margin: 8px 0 16px;
  color: var(--muted, #aaaeb7);
  font-size: 12px;
  line-height: 1.5;
}