/* Extra tools, phone polish (owner 2026-10-26, by phone): Lyric Punch, Hook
   Loop, Tempo Ramp, Smart Reframe, VS Maker should be "super smooth and easy
   on the eyes". Loaded LAST on those five pages; body carries .lt-polish.
   Same rules as the tab pages: tone not outlines, 16px cards, pill chips,
   12px buttons, one solid primary, 12px type floor, light + dark. */

html[data-lab-tool] body.lt-polish {
  --lt-canvas: var(--cf-bg, #0A0A0D);
  --lt-l1: #141418; --lt-l2: #1E1E24; --lt-l3: #2A2A32;
  --lt-ink: #FFFFFF; --lt-ink2: rgba(255,255,255,.70); --lt-ink3: rgba(255,255,255,.50);
  --lt-acc: var(--cf-accent, #3B82F6); --lt-acc-soft: rgba(59,130,246,.16);
  --lt-shadow: none;
  background: var(--lt-canvas) !important; color: var(--lt-ink) !important;
  font-family: var(--cf-font, 'Inter', -apple-system, 'Segoe UI', sans-serif) !important;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
html[data-theme="light"][data-lab-tool] body.lt-polish {
  --lt-canvas: #F7F8FB; --lt-l1: #FFFFFF; --lt-l2: #F1F3F7; --lt-l3: #E6E9F0;
  --lt-ink: #0C0E16; --lt-ink2: rgba(12,14,22,.70); --lt-ink3: rgba(12,14,22,.56);
  --lt-acc-soft: rgba(59,130,246,.12);
  --lt-shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 20px rgba(16,24,40,.06);
}
html[data-theme="light"][data-lab-tool] { background: #F7F8FB !important; color-scheme: light !important; }
html[data-lab-tool] body.lt-polish::before, html[data-lab-tool] body.lt-polish::after { display: none !important; }

/* ---------- header: round back button, centred wordmark ---------- */
html[data-lab-tool] body.lt-polish .bar {
  display: grid !important; grid-template-columns: 40px 1fr 40px; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 8px !important; min-height: 56px;
  background: var(--lt-canvas) !important; border: 0 !important; box-shadow: none !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-lab-tool] body.lt-polish .bar .back {
  order: -1; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--lt-l1) !important; box-shadow: var(--lt-shadow); color: var(--lt-ink) !important;
  font-size: 0 !important; text-decoration: none; transition: transform .12s ease;
}
html[data-lab-tool] body.lt-polish .bar .back::before {
  content: ""; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-lab-tool] body.lt-polish .bar .back:active { transform: scale(.92); }
html[data-lab-tool] body.lt-polish .bar .brand {
  justify-self: center; font: 800 16px/1.2 var(--cf-font, 'Inter', sans-serif) !important; letter-spacing: -.02em;
  color: var(--lt-ink) !important; -webkit-text-fill-color: currentColor; background: none !important;
}

/* ---------- page ---------- */
html[data-lab-tool] body.lt-polish main {
  padding: 12px max(16px, env(safe-area-inset-left, 0px)) calc(env(safe-area-inset-bottom, 0px) + 48px) max(16px, env(safe-area-inset-right, 0px)) !important;
  max-width: 900px;
}
html[data-lab-tool] body.lt-polish main > h1 {
  font: 800 28px/1.12 var(--cf-font, 'Inter', sans-serif) !important; letter-spacing: -.035em !important;
  color: var(--lt-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; margin: 4px 0 8px !important;
}
html[data-lab-tool] body.lt-polish main > .sub { font-size: 15px !important; line-height: 1.5 !important; color: var(--lt-ink2) !important; margin: 0 0 20px !important; }
html[data-lab-tool] body.lt-polish .grid { gap: 14px !important; }

/* intro tips: one calm tonal card */
html[data-lab-tool] body.lt-polish :is(.hl-flow, .tr-tip, .sr-tip, .vs-tip) {
  background: var(--lt-l1) !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--lt-shadow) !important;
  padding: 16px 48px 16px 16px !important; margin: 0 0 14px !important;
  color: var(--lt-ink2) !important; font-size: 14px !important; line-height: 1.5 !important;
}
html[data-lab-tool] body.lt-polish :is(.hl-flow, .tr-tip, .sr-tip, .vs-tip) :is(strong, b, .hl-title) { color: var(--lt-ink) !important; }
html[data-lab-tool] body.lt-polish :is(.hl-flow, .tr-tip, .sr-tip, .vs-tip) em { color: var(--lt-ink) !important; font-style: normal; font-weight: 600; }
html[data-lab-tool] body.lt-polish :is(.tr-tip, .sr-tip, .vs-tip) ul { margin: 8px 0 0 !important; padding-left: 18px !important; }
html[data-lab-tool] body.lt-polish :is(.tr-tip, .sr-tip, .vs-tip) li { font-size: 14px !important; color: var(--lt-ink2) !important; margin: 4px 0; }
html[data-lab-tool] body.lt-polish .hl-title { font-size: 15px !important; margin-bottom: 10px !important; }
html[data-lab-tool] body.lt-polish .hl-step { background: var(--lt-l2) !important; border-radius: 12px !important; padding: 12px !important; align-items: center !important; }
html[data-lab-tool] body.lt-polish .hl-num { background: var(--lt-acc) !important; width: 24px !important; height: 24px !important; font-size: 12.5px !important; }
html[data-lab-tool] body.lt-polish .hl-txt { font-size: 14px !important; color: var(--lt-ink2) !important; }
html[data-lab-tool] body.lt-polish :is(.hl-close, .tr-close, .sr-close, .vs-close, .lp-x) {
  width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 0 !important;
  background: var(--lt-l2) !important; color: var(--lt-ink2) !important; font-size: 16px !important; top: 10px !important; right: 10px !important;
}
html[data-lab-tool] body.lt-polish .vs-mini { gap: 10px !important; margin: 10px 0 !important; }
html[data-lab-tool] body.lt-polish .vs-box { border-radius: 12px !important; border: 0 !important; background: var(--lt-acc) !important; color: #fff !important; }
html[data-lab-tool] body.lt-polish .vs-box.b { background: var(--lt-l2) !important; color: var(--lt-ink) !important; }
html[data-lab-tool] body.lt-polish .vs-vs { color: var(--lt-ink) !important; }
html[data-lab-tool] body.lt-polish .lp-try {
  background: var(--lt-acc-soft) !important; border: 0 !important; border-radius: 14px !important;
  color: var(--lt-ink) !important; font-size: 14px !important; padding: 10px 10px 10px 14px !important; gap: 10px !important;
}
html[data-lab-tool] body.lt-polish .lp-dot { background: var(--lt-acc) !important; box-shadow: none !important; }
html[data-lab-tool] body.lt-polish .lp-fill {
  background: var(--lt-acc) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  font: 700 13px var(--cf-font, 'Inter', sans-serif) !important; padding: 8px 14px !important; white-space: nowrap;
}
html[data-lab-tool] body.lt-polish .lp-x { position: static !important; flex: none; }

/* step cards */
html[data-lab-tool] body.lt-polish .card {
  background: var(--lt-l1) !important; border: 0 !important; border-radius: 16px !important; box-shadow: var(--lt-shadow) !important;
  padding: 16px !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-lab-tool] body.lt-polish .card h2 {
  font: 700 15px/1.3 var(--cf-font, 'Inter', sans-serif) !important; letter-spacing: -.01em !important;
  color: var(--lt-ink) !important; -webkit-text-fill-color: currentColor !important; background: none !important; margin-bottom: 12px !important;
}
html[data-lab-tool] body.lt-polish .card label { font-size: 13px !important; color: var(--lt-ink3) !important; }

/* upload areas: soft tone + icon, no dashes */
html[data-lab-tool] body.lt-polish .drop {
  border: 1.5px solid transparent !important; border-radius: 14px !important; background: var(--lt-l2) !important;
  padding: 26px 16px 22px !important; display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .18s ease, border-color .18s ease, transform .12s ease !important;
}
html[data-lab-tool] body.lt-polish .drop::before {
  content: ""; width: 44px; height: 44px; margin-bottom: 8px; border-radius: 50%;
  background: var(--lt-acc-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B82F6' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5'/%3E%3Cpath d='M4 16v3a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-3'/%3E%3C/svg%3E") center / 22px no-repeat;
}
html[data-lab-tool] body.lt-polish .drop:active { transform: scale(.985); }
html[data-lab-tool] body.lt-polish .drop:is(.over, :hover) { border-color: var(--lt-acc) !important; background: var(--lt-acc-soft) !important; }
html[data-lab-tool] body.lt-polish .drop p { color: var(--lt-ink3) !important; font-size: 13px !important; line-height: 1.45 !important; margin: 2px 0 !important; }
html[data-lab-tool] body.lt-polish .drop .big { color: var(--lt-ink) !important; font-size: 16px !important; font-weight: 700 !important; }

/* choices: pill chips, solid when picked */
html[data-lab-tool] body.lt-polish :is(.modes, .templates) { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
html[data-lab-tool] body.lt-polish :is(.modes, .templates) button {
  flex: 1 1 auto; min-height: 40px; padding: 0 14px !important; border-radius: 999px !important; border: 0 !important;
  background: var(--lt-l2) !important; color: var(--lt-ink2) !important; box-shadow: none !important;
  font: 700 13.5px var(--cf-font, 'Inter', sans-serif) !important; transition: background .15s ease, color .15s ease, transform .12s ease !important;
}
html[data-lab-tool] body.lt-polish :is(.modes, .templates) button.active { background: var(--lt-acc) !important; color: #fff !important; }
html[data-lab-tool] body.lt-polish .pill { border-radius: 999px !important; }

/* buttons */
html[data-lab-tool] body.lt-polish button.primary {
  min-height: 50px; border-radius: 12px !important; border: 0 !important; background: var(--lt-acc) !important; background-image: none !important;
  color: #fff !important; font: 800 15px var(--cf-font, 'Inter', sans-serif) !important; box-shadow: none !important;
  transition: transform .12s ease, filter .15s ease !important;
}
html[data-lab-tool] body.lt-polish button.primary:disabled { background: var(--lt-l2) !important; color: var(--lt-ink3) !important; opacity: 1 !important; }
html[data-lab-tool] body.lt-polish :is(button.secondary, .controls button, .play-bar button) {
  min-height: 44px; border-radius: 12px !important; border: 0 !important; background: var(--lt-l2) !important;
  color: var(--lt-ink) !important; font: 700 14px var(--cf-font, 'Inter', sans-serif) !important; box-shadow: none !important;
}
html[data-lab-tool] body.lt-polish button:active:not(:disabled) { transform: scale(.97); }

/* readouts and small text */
html[data-lab-tool] body.lt-polish .stat { background: var(--lt-l2) !important; border: 0 !important; border-radius: 12px !important; }
html[data-lab-tool] body.lt-polish .stat-label { font-size: 12px !important; color: var(--lt-ink3) !important; }
html[data-lab-tool] body.lt-polish .stat-value { color: var(--lt-ink) !important; }
html[data-lab-tool] body.lt-polish .vis-wrap { background: var(--lt-l2) !important; border-radius: 14px !important; }
html[data-lab-tool] body.lt-polish .hint { font-size: 12.5px !important; line-height: 1.45 !important; color: var(--lt-ink3) !important; }
html[data-lab-tool] body.lt-polish .status { font-size: 13px !important; color: var(--lt-ink3) !important; }
html[data-lab-tool] body.lt-polish .status.err { color: #EF4444 !important; }
html[data-lab-tool] body.lt-polish .status.ok { color: #10B981 !important; }
html[data-lab-tool] body.lt-polish :is(textarea, input[type="text"], input[type="number"], select) {
  background: var(--lt-l2) !important; color: var(--lt-ink) !important; border: 1.5px solid transparent !important;
  border-radius: 12px !important; font-size: 16px !important; box-shadow: none !important;
}
html[data-lab-tool] body.lt-polish :is(textarea, input, select):focus { border-color: var(--lt-acc) !important; outline: none !important; }
html[data-lab-tool] body.lt-polish textarea::placeholder { color: var(--lt-ink3) !important; }
html[data-lab-tool] body.lt-polish input[type="range"] { accent-color: var(--lt-acc); }
html[data-lab-tool] body.lt-polish details { background: var(--lt-l2); border-radius: 12px; padding: 10px 14px; margin-top: 14px; border: 0 !important; }
html[data-lab-tool] body.lt-polish summary { font-weight: 700; font-size: 14px; color: var(--lt-ink); cursor: pointer; }
html[data-lab-tool] body.lt-polish progress::-webkit-progress-value { background: var(--lt-acc) !important; }
html[data-lab-tool] body.lt-polish .progress { border-radius: 999px !important; overflow: hidden; }
html[data-lab-tool] body.lt-polish .preview-wrap { border-radius: 14px !important; overflow: hidden; border: 0 !important; }
html[data-lab-tool] body.lt-polish :is(.ramp-vis, .motion-vis) { border-radius: 12px !important; border: 0 !important; }
html[data-theme="light"][data-lab-tool] body.lt-polish :is(.ramp-vis, .motion-vis, canvas.wave) { background: var(--lt-l2) !important; }

/* smooth entrance: sections rise in one after another */
@keyframes ltRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html[data-lab-tool] body.lt-polish main > * { animation: ltRise .42s cubic-bezier(.2, .8, .2, 1) both; }
html[data-lab-tool] body.lt-polish main > *:nth-child(2) { animation-delay: .04s; }
html[data-lab-tool] body.lt-polish main > *:nth-child(3) { animation-delay: .08s; }
html[data-lab-tool] body.lt-polish main > *:nth-child(4) { animation-delay: .12s; }
html[data-lab-tool] body.lt-polish main > *:nth-child(n+5) { animation-delay: .16s; }
html[data-lab-tool] body.lt-polish .grid > .card:nth-child(2) { animation: ltRise .42s .2s cubic-bezier(.2, .8, .2, 1) both; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html[data-lab-tool] body.lt-polish main > *, html[data-lab-tool] body.lt-polish .grid > .card { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* fixes after the first look */
html[data-lab-tool] body.lt-polish :is(.hl-close, .tr-close, .sr-close, .vs-close) { position: absolute !important; left: auto !important; }
html[data-lab-tool] body.lt-polish .lp-try :is(b, strong) { color: var(--lt-ink) !important; }
html[data-lab-tool] body.lt-polish .lp-try > span:not(.lp-dot) { flex: 1; min-width: 0; }
html[data-lab-tool] body.lt-polish :is(.lp-try, .lp-fill) { box-shadow: none !important; }