:root {
  color-scheme: dark;
  --bg: #080a12;
  --panel: rgba(255, 255, 255, 0.08);
  --panel-strong: rgba(255, 255, 255, 0.12);
  --text: #f8fafc;
  --muted: #a7b0c4;
  --line: rgba(255, 255, 255, 0.14);
  --accent: #5eead4;
  --accent-2: #f472b6;
  --accent-3: #a78bfa;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  overscroll-behavior: none;
}

/* Base dialog: prevent overflow on small screens */
dialog {
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 92px;
  overscroll-behavior-x: none;
  background:
    radial-gradient(circle at 12% 8%, rgba(94, 234, 212, 0.24), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(244, 114, 182, 0.2), transparent 30%),
    linear-gradient(135deg, #080a12 0%, #101729 48%, #111827 100%);
  color: var(--text);
}

.app-promo-bar {
  position: fixed;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: 980px;
  margin: 0 auto;
  border: 1px solid rgba(94, 234, 212, 0.32);
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(94, 234, 212, 0.16), rgba(244, 114, 182, 0.12)),
    rgba(8, 10, 18, 0.92);
  box-shadow: var(--shadow);
  padding: 12px;
  backdrop-filter: blur(18px);
}

.app-promo-bar.hidden {
  display: none;
}

.native-app .app-promo-bar {
  display: none;
}

.app-promo-bar strong,
.app-promo-bar span {
  display: block;
}

.app-promo-bar span {
  color: var(--muted);
  margin-top: 3px;
  font-size: 0.9rem;
}

.app-promo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.app-shell {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  border-right: 1px solid var(--line);
  background: rgba(8, 10, 18, 0.74);
  backdrop-filter: blur(24px);
  padding: 28px 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand-lockup {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 30px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  color: #071016;
  background: linear-gradient(135deg, #5eead4, #f472b6 58%, #facc15);
  box-shadow: 0 14px 32px rgba(94, 234, 212, 0.24);
}

.brand-mark svg {
  width: 34px;
  height: 34px;
  stroke-width: 1.8;
  fill: rgba(255, 255, 255, 0.28);
}

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

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 1.15rem;
}

.tool-nav {
  display: grid;
  gap: 8px;
}

.nav-button {
  display: grid;
  grid-template-columns: 38px 1fr auto auto;
  align-items: center;
  width: 100%;
  gap: 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  padding: 10px;
  text-align: left;
}

.nav-button:hover,
.nav-button.active {
  border-color: var(--line);
  background: var(--panel);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.09);
  color: var(--accent);
}

.nav-button strong {
  display: block;
  font-size: 0.92rem;
}

.nav-button small {
  color: var(--muted);
}

.nav-status {
  color: var(--muted);
  font-size: 0.75rem;
}

.pro-status {
  color: #061117;
  border-radius: 999px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  padding: 5px 8px;
  font-weight: 950;
}

.favorite-toggle {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  padding: 0;
}

.favorite-toggle.active {
  color: #facc15;
  background: rgba(250, 204, 21, 0.12);
}

.favorite-panel {
  margin-top: 22px;
}

.favorite-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.favorite-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  padding: 8px 10px;
  font-size: 0.82rem;
  font-weight: 800;
}

.trust-panel {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.13), rgba(167, 139, 250, 0.11));
  padding: 16px;
}

.trust-panel strong,
.trust-panel span {
  display: block;
}

.trust-panel span {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
}

.workspace {
  min-width: 0;
  padding: 28px clamp(18px, 4vw, 44px) 44px;
}

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

.mobile-brand-lockup {
  display: none;
  align-items: center;
  gap: 12px;
}

.topbar h2 {
  margin-bottom: 0;
  font-size: clamp(1.45rem, 3vw, 2.35rem);
}

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

.credit-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid rgba(94, 234, 212, 0.34);
  border-radius: 8px;
  color: #d8fffa;
  background: rgba(94, 234, 212, 0.1);
  padding: 0 12px;
  font-weight: 850;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--panel);
}

.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 28px;
  align-items: end;
  min-height: 250px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: clamp(22px, 4vw, 38px);
  background:
    linear-gradient(120deg, rgba(17, 24, 39, 0.42), rgba(8, 10, 18, 0.88)),
    linear-gradient(135deg, rgba(94, 234, 212, 0.18), rgba(244, 114, 182, 0.16), rgba(250, 204, 21, 0.12));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero-band h3 {
  max-width: 760px;
  margin-bottom: 12px;
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 0.98;
}

.hero-band p:not(.pill) {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.65;
}

.pill,
.status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border: 1px solid rgba(94, 234, 212, 0.35);
  border-radius: 999px;
  color: #d8fffa;
  background: rgba(94, 234, 212, 0.1);
  padding: 6px 11px;
  font-size: 0.8rem;
  font-weight: 800;
}

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

.hero-stat-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 16px;
}

.hero-stat-grid strong,
.hero-stat-grid span {
  display: block;
}

.hero-stat-grid strong {
  font-size: 1.5rem;
}

.hero-stat-grid span {
  color: var(--muted);
  margin-top: 4px;
  font-size: 0.84rem;
}

.converter-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(300px, 0.72fr);
  gap: 18px;
  margin-top: 18px;
}

.mobile-tool-section {
  display: none;
}

.mobile-tool-grid {
  display: grid;
  gap: 10px;
}

.mobile-tool-group {
  display: grid;
  gap: 10px;
}

.mobile-tool-group + .mobile-tool-group {
  margin-top: 16px;
}

.mobile-tool-group > p {
  margin: 0;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.native-tool-button {
  opacity: 0.78;
}

.native-tool-button .nav-icon {
  color: #f7b8dd;
}

.converter-panel,
.result-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 10, 18, 0.62);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 24px);
}

.panel-heading,
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.panel-heading h3,
.section-heading h3 {
  margin-bottom: 0;
}

.drop-zone {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 260px;
  border-radius: 22px;
  padding: 30px 26px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  background:
    /* Dashed border drawn as a single SVG so the corners stay perfect */
    linear-gradient(180deg, rgba(15,23,42,0.55), rgba(15,23,42,0.30)) padding-box,
    /* Aurora gradient ring around the dashed border */
    linear-gradient(135deg, #8e63d7 0%, #df6dc6 50%, #5eead4 100%) border-box;
  border: 1.5px dashed transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.drop-zone::before {
  /* Soft Aurora blob in the background — gives the panel the SellerFish glow */
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 70%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(142,99,215,0.32), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.drop-zone::after {
  content: "";
  position: absolute;
  inset: auto auto -30% -20%;
  width: 60%;
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, rgba(223,109,198,0.26), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
}
.drop-zone > * { position: relative; z-index: 1; }

.tool-info {
  margin: -8px 0 16px;
  color: var(--muted);
  line-height: 1.5;
}

.drop-zone:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(142,99,215,0.18), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.drop-zone.dragging {
  transform: translateY(-3px) scale(1.005);
  background:
    linear-gradient(180deg, rgba(142,99,215,0.18), rgba(223,109,198,0.12)) padding-box,
    linear-gradient(135deg, #8e63d7 0%, #df6dc6 100%) border-box;
  border-style: solid;
  box-shadow: 0 22px 48px rgba(142,99,215,0.32);
}

.drop-zone input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.drop-icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, #8e63d7 0%, #df6dc6 100%);
  box-shadow:
    0 14px 32px rgba(142,99,215,0.40),
    inset 0 1px 0 rgba(255,255,255,0.25);
  animation: dropIconFloat 4s ease-in-out infinite;
}
.drop-icon svg { width: 32px; height: 32px; }
@keyframes dropIconFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
.drop-zone.dragging .drop-icon {
  animation: dropIconPulse 0.6s ease-in-out infinite;
}
@keyframes dropIconPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

.drop-zone strong {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.3;
  background: linear-gradient(135deg, #ffffff, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.drop-zone small {
  color: var(--muted);
  margin-top: 8px;
  font-size: 0.86rem;
  letter-spacing: 0.01em;
}

.file-list {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

.file-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.06);
}

.file-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-item small {
  color: var(--muted);
}

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

.image-preview-card {
  position: relative;
  display: grid;
  gap: 7px;
  min-width: 0;
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.06);
}

.image-preview-card img {
  width: 100%;
  aspect-ratio: 1.15;
  object-fit: cover;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
}

.image-preview-card span {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  color: #041217;
  font-size: 0.78rem;
  font-weight: 900;
  background: linear-gradient(135deg, #5eead4, #f472b6);
}

.image-preview-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.tool-specific-panel {
  margin-top: 14px;
}

.workflow-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: stretch;
  border: 1px solid rgba(94, 234, 212, 0.24);
  border-radius: 8px;
  padding: 14px;
  background:
    radial-gradient(circle at 16% 10%, rgba(94, 234, 212, 0.16), transparent 32%),
    radial-gradient(circle at 90% 24%, rgba(244, 114, 182, 0.16), transparent 30%),
    rgba(255, 255, 255, 0.055);
}

.workflow-panel h4 {
  margin: 2px 0 6px;
  font-size: clamp(1rem, 2vw, 1.25rem);
}

.workflow-panel small {
  color: var(--muted);
  line-height: 1.5;
}

.workflow-pills,
.preset-row,
.signature-tabs,
.signature-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.workflow-pills {
  justify-content: flex-end;
  align-content: center;
}

.workflow-pills span,
.preset-row button,
.signature-tabs span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 11px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  font-weight: 800;
}

.preset-row button.active,
.signature-tabs span.active {
  color: #041217;
  border-color: transparent;
  background: linear-gradient(135deg, #5eead4, #f472b6);
}

.resize-controls,
.signature-card {
  display: grid;
  gap: 10px;
}

.resize-controls label,
.signature-card label {
  display: grid;
  gap: 7px;
}

.resize-controls label span,
.signature-card label span {
  color: var(--muted);
  font-size: 0.82rem;
}

.quality-meter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
}

.quality-meter i {
  grid-column: 1 / -1;
  display: block;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(90deg, #5eead4 0 70%, #f472b6 70% 92%, rgba(255, 255, 255, 0.12) 92%);
}

.signature-card {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 12px;
  background: rgba(4, 10, 20, 0.28);
}

.signature-preview {
  display: grid;
  place-items: center;
  min-height: 104px;
  border-radius: 8px;
  color: #111827;
  background: linear-gradient(135deg, #fff, #f8fafc);
  font-family: "Brush Script MT", "Segoe Script", cursive;
  font-size: clamp(2.2rem, 7vw, 4.8rem);
  line-height: 1;
}

.signature-options .dot {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
}

.signature-options .black {
  background: #020617;
}

.signature-options .blue {
  background: #2563eb;
}

.signature-options .pink {
  background: #fb7185;
}

.signature-options span:last-child {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.86rem;
}

.signature-options .dot {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}

.signature-options .dot.active-color {
  border-color: #fff;
  box-shadow: 0 0 0 2px var(--text);
  transform: scale(1.18);
}

.sig-mode-panel {
  display: grid;
  gap: 8px;
}

.signature-canvas {
  width: 100%;
  height: 130px;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #f8fafc);
  cursor: crosshair;
  touch-action: none;
  display: block;
}

.upload-sig-label {
  display: block;
  cursor: pointer;
}

.upload-sig-label input[type="file"] {
  display: none;
}

.upload-sig-area {
  min-height: 100px;
  border: 2px dashed var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  padding: 16px;
  color: var(--muted);
  font-size: 0.88rem;
  text-align: center;
  transition: border-color 0.2s;
}

.upload-sig-area:hover {
  border-color: #5eead4;
}

.upload-sig-preview {
  max-height: 100px;
  max-width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.file-item.reorderable {
  cursor: grab;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}

.file-item.reorderable:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(94, 234, 212, 0.18);
}

.file-item.dragging {
  opacity: 0.45;
  cursor: grabbing;
}

.file-item.drag-over {
  border-top: 2px solid #5eead4;
}

.drag-handle {
  display: inline-block;
  color: var(--muted);
  font-weight: 900;
  letter-spacing: -2px;
  user-select: none;
  cursor: grab;
}

.page-range-label {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.page-range-label input {
  font-family: ui-monospace, SFMono-Regular, monospace;
  letter-spacing: 0.04em;
}

.pdf-thumb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 56px;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.18);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.pdf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pdf-thumb-loading {
  font-size: 0.62rem;
  font-weight: 800;
  color: #94a3b8;
  letter-spacing: 0.08em;
}

.pdf-thumb .page-count {
  position: absolute;
  bottom: 1px;
  right: 2px;
  background: rgba(2, 6, 23, 0.78);
  color: #fff;
  font-size: 0.55rem;
  padding: 1px 4px;
  border-radius: 3px;
  font-weight: 700;
}

.sig-position-block {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.eyebrow-mini {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0;
}

.sig-position-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 96px;
  aspect-ratio: 3 / 4;
  padding: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 6px;
  border: 1px dashed rgba(255,255,255,0.18);
}

.sig-pos-cell {
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}

.sig-pos-cell:hover {
  background: rgba(94, 234, 212, 0.18);
}

.sig-pos-cell.active {
  background: linear-gradient(135deg, #5eead4, #f472b6);
  border-color: transparent;
}

/* ============================================================
   ALL TOOLS LANDING (categorized professional layout)
   ============================================================ */
.all-tools-landing {
  padding: 28px 36px 48px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.landing-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.landing-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.landing-sub {
  color: var(--muted);
  font-size: 1rem;
  margin: 0;
}

.landing-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-pro-btn,
.landing-help-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #c084fc;
  transition: transform 0.15s, background 0.15s;
}

.landing-pro-btn:hover,
.landing-help-btn:hover {
  transform: translateY(-1px);
  background: rgba(168, 85, 247, 0.22);
}

.landing-help-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--text);
}

.landing-help-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.landing-pro-btn svg,
.landing-help-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-pro-btn svg {
  fill: currentColor;
  stroke: none;
}

.landing-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.landing-avatar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-section-title {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 14px;
}

.tool-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.tool-card {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  cursor: pointer;
  text-align: left;
  color: var(--text);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s, background 0.18s;
  min-height: 200px;
  overflow: hidden;
}
/* Cursor-following spotlight — pure white per SellerFish / Linear / Vercel.
   White reads as "premium minimal" against the dark Aurora ambient; colored
   glows feel toy-like. JS partner sets --mx/--my on every pointermove. */
.tool-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,0.07), transparent 40%);
  opacity: 0;
  transition: opacity 0.32s ease;
  pointer-events: none;
}
.tool-card > * { position: relative; z-index: 1; }

.tool-card:hover:not(:disabled) {
  transform: translateY(-4px);
  border-color: rgba(142, 99, 215, 0.50);
  background: linear-gradient(160deg, rgba(142,99,215,0.10), rgba(223,109,198,0.06));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45), 0 0 36px rgba(142, 99, 215, 0.22);
}
.tool-card:hover:not(:disabled)::before { opacity: 1; }

.tool-card:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Tool icon containers — SellerFish Aurora token style.
   Each tone uses the violet→pink base shifted with one secondary hue so all
   icons feel like one family while still being individually identifiable. */
.tc-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 8px 18px rgba(0,0,0,0.25);
}
.tc-icon::after {
  /* subtle inner gloss highlight on top edge */
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 40%;
  border-radius: 15px 15px 40% 40% / 15px 15px 80% 80%;
  background: linear-gradient(180deg, rgba(255,255,255,0.18), transparent);
  pointer-events: none;
}
.tc-icon svg {
  width: 28px;
  height: 28px;
  stroke: currentColor;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.30));
  position: relative;
  z-index: 1;
}

.tc-icon.i-cyan   { background: linear-gradient(135deg, #5eead4 0%, #60a5fa 100%); color: #f0fdfa; }
.tc-icon.i-blue   { background: linear-gradient(135deg, #60a5fa 0%, #8e63d7 100%); color: #eff6ff; }
.tc-icon.i-green  { background: linear-gradient(135deg, #34d399 0%, #5eead4 100%); color: #ecfdf5; }
.tc-icon.i-orange { background: linear-gradient(135deg, #fb923c 0%, #df6dc6 100%); color: #fff7ed; }
.tc-icon.i-violet { background: linear-gradient(135deg, #8e63d7 0%, #df6dc6 100%); color: #faf5ff; }
.tc-icon.i-pink   { background: linear-gradient(135deg, #df6dc6 0%, #f472b6 100%); color: #fdf2f8; }
.tc-icon.i-rose   { background: linear-gradient(135deg, #fb7185 0%, #df6dc6 100%); color: #fff1f2; }

.tc-name {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tc-desc {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.3;
  margin-top: -8px;
}

.tc-pro,
.tc-soon,
.tc-credit {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  /* SellerFish move — credit badges use the mono face so numbers line up. */
  font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
  font-feature-settings: 'tnum';
}

.tc-pro {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.22), rgba(168, 85, 247, 0.22));
  border: 1px solid rgba(236, 72, 153, 0.45);
  color: #f9a8d4;
}

.tc-soon {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--muted);
}

.tc-credit {
  background: rgba(94, 234, 212, 0.10);
  border: 1px solid rgba(94, 234, 212, 0.32);
  color: var(--accent);
  font-weight: 700;
}

.tc-credit.hero {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(251, 146, 60, 0.18));
  border-color: rgba(244, 114, 182, 0.5);
  color: #f9a8d4;
  box-shadow: 0 4px 12px rgba(244, 114, 182, 0.15);
}

.tc-free {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.36);
  color: #34d399;
}

/* ============== Sidebar nav tier badges ============== */
.nav-status.tier-free {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: #34d399;
}
.nav-status.tier-standard {
  background: rgba(94, 234, 212, 0.10);
  border-color: rgba(94, 234, 212, 0.34);
  color: var(--accent);
}
.nav-status.tier-hero {
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.20), rgba(251, 146, 60, 0.18));
  border-color: rgba(244, 114, 182, 0.5);
  color: #f9a8d4;
}

/* ============== Onboarding number badge (overlays AI badge) ============== */
.ob-num-badge {
  position: absolute;
  top: 4%;
  left: 4%;
  width: 14%;
  max-width: 64px;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #0a0f1c;
  font-size: clamp(1.2rem, 5vw, 1.8rem);
  font-weight: 900;
  display: grid;
  place-items: center;
  z-index: 5;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45);
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

@media (max-width: 1280px) {
  .tool-card-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .tool-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 720px) {
  .all-tools-landing {
    padding: 18px 16px 32px;
    gap: 28px;
  }
  .landing-title {
    font-size: 1.6rem;
  }
  .tool-card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .tool-card {
    padding: 16px 14px 18px;
    min-height: 170px;
  }
  .tc-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
  }
  .tc-icon svg {
    width: 24px;
    height: 24px;
  }
  .tc-name {
    font-size: 0.92rem;
  }
  .tc-desc {
    font-size: 0.74rem;
  }
}

/* When landing is shown, hide the converter sections */
.workspace.landing-active .hero-band,
.workspace.landing-active .converter-layout,
.workspace.landing-active .mobile-tool-section,
.workspace.landing-active .history-section,
.workspace.landing-active .catalog-section,
.workspace.landing-active .live-section {
  display: none !important;
}

/* ============================================================
   SIGN PDF detail (referans uyumlu)
   ============================================================ */
.signpdf-layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 20px;
}

.signpdf-side {
  display: flex; flex-direction: column; gap: 16px;
}

.signpdf-side-tabs {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: rgba(255,255,255,0.04);
  padding: 5px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
}
.signpdf-side-tabs button {
  background: transparent; border: 0;
  padding: 9px 14px;
  border-radius: 8px;
  color: var(--muted);
  font-weight: 700; font-size: 0.92rem;
  cursor: pointer;
}
.signpdf-side-tabs button.active {
  background: rgba(94,234,212,0.16);
  color: #5eead4;
}

.signpdf-new-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(94,234,212,0.18), rgba(94,234,212,0.08));
  border: 1.5px solid rgba(94,234,212,0.5);
  border-radius: 12px;
  color: #5eead4;
  font-weight: 800; font-size: 0.95rem;
  cursor: pointer;
}
.signpdf-new-btn:hover { background: rgba(94,234,212,0.25); }
.signpdf-new-btn svg { width: 18px; height: 18px; }

.signpdf-saved-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 320px; overflow-y: auto;
  padding-right: 4px;
}

.signpdf-empty {
  color: var(--muted);
  font-size: 0.84rem;
  text-align: center;
  padding: 18px 12px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 10px;
}

.signpdf-saved-item {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 14px 40px 14px 14px;
  display: flex; align-items: center;
  cursor: pointer;
  min-height: 64px;
  transition: border-color 0.15s, background 0.15s;
}
.signpdf-saved-item:hover {
  border-color: rgba(94,234,212,0.4);
  background: rgba(94,234,212,0.06);
}
.signpdf-saved-item.selected {
  border-color: #5eead4;
  background: rgba(94,234,212,0.1);
}

.signpdf-saved-preview {
  flex: 1;
  display: flex; align-items: center; justify-content: flex-start;
  overflow: hidden;
}
.signpdf-saved-preview img {
  max-height: 50px; max-width: 100%;
  object-fit: contain;
}

.signpdf-saved-del {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0;
  color: var(--muted);
  font-size: 1.4rem; font-weight: 800;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 8px;
  letter-spacing: 0.05em;
}
.signpdf-saved-del:hover {
  background: rgba(239,68,68,0.18);
  color: #fb7185;
}

.signpdf-mini-label {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.signpdf-color-block { padding-top: 6px; }

.signpdf-colors {
  display: flex; gap: 12px; align-items: center;
}
.signpdf-color {
  width: 30px; height: 30px;
  border-radius: 999px;
  border: 2.5px solid rgba(255,255,255,0.12);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
}
.signpdf-color:hover { transform: scale(1.1); }
.signpdf-color.active {
  border-color: white;
  box-shadow: 0 0 0 2.5px #5eead4;
}
.signpdf-color.black { background: #020617; }
.signpdf-color.blue { background: #2563eb; }
.signpdf-color.violet { background: #8b5cf6; }
.signpdf-color.red { background: #ef4444; }
.signpdf-color.green { background: #10b981; }

.signpdf-thickness {
  display: flex; flex-direction: column; gap: 8px;
}
.signpdf-thickness-head {
  display: flex; justify-content: space-between; align-items: center;
}
.signpdf-thickness-val {
  color: white; font-weight: 800; font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.signpdf-thickness-slider {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
  outline: none;
}
.signpdf-thickness-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.signpdf-thickness-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  cursor: pointer;
  border: 0;
}

.signpdf-main {
  display: flex; flex-direction: column;
}

.signpdf-create-panel {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}

.signpdf-create-panel .eyebrow {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.74rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em;
}

.signpdf-tabs {
  display: flex; gap: 8px;
  background: rgba(255,255,255,0.04);
  padding: 5px;
  border-radius: 12px;
  width: fit-content;
}
.signpdf-tabs span {
  padding: 8px 18px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem; font-weight: 700;
  color: var(--muted);
}
.signpdf-tabs span.active {
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #041217;
}

.signpdf-save-btn {
  align-self: flex-start;
  padding: 12px 22px;
  font-size: 0.95rem;
}

@media (max-width: 900px) {
  .signpdf-layout {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MY FILES — table view file manager
   ============================================================ */
.workspace.myfiles-active .hero-band,
.workspace.myfiles-active .converter-layout,
.workspace.myfiles-active .all-tools-landing,
.workspace.myfiles-active .mobile-tool-section,
.workspace.myfiles-active .history-section,
.workspace.myfiles-active .catalog-section,
.workspace.myfiles-active .live-section {
  display: none !important;
}

.my-files-page {
  padding: 28px 36px 60px;
  display: flex; flex-direction: column; gap: 22px;
}

.mfp-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px;
}

.mfp-title {
  font-size: 2.2rem; font-weight: 900; margin: 0 0 6px;
  letter-spacing: -0.02em; color: var(--text);
}
.mfp-sub { color: var(--muted); font-size: 1rem; margin: 0; }

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

.mfp-view-btn {
  width: 42px; height: 42px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  display: grid; place-items: center;
  cursor: pointer; color: var(--muted);
  transition: all 0.15s;
}
.mfp-view-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.mfp-view-btn.active {
  background: rgba(168,85,247,0.18);
  border-color: rgba(168,85,247,0.5);
  color: #c084fc;
}
.mfp-view-btn svg { width: 18px; height: 18px; }

.mfp-new-folder {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #a855f7, #c084fc);
  color: white;
  border: 0; border-radius: 12px;
  font-weight: 800; font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(168,85,247,0.35);
  transition: transform 0.15s;
}
.mfp-new-folder:hover { transform: translateY(-1px); }
.mfp-new-folder svg { width: 16px; height: 16px; }

.mfp-search-row { display: flex; align-items: center; gap: 12px; }
.mfp-search {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 12px 18px;
}
.mfp-search:focus-within { border-color: rgba(168,85,247,0.5); }
.mfp-search svg { width: 18px; height: 18px; color: var(--muted); }
.mfp-search input {
  flex: 1; background: transparent; border: 0; outline: 0;
  color: var(--text); font-size: 0.96rem;
}
.mfp-search input::placeholder { color: var(--muted); }

.mfp-tabs {
  display: flex; gap: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding-bottom: 0;
}
.mfp-tabs button {
  background: transparent; border: 0;
  padding: 12px 20px;
  color: var(--muted);
  font-weight: 700; font-size: 0.94rem;
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1px;
}
.mfp-tabs button:hover { color: var(--text); }
.mfp-tabs button.active {
  color: #c084fc;
  border-bottom-color: #c084fc;
}

.mfp-table {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  overflow: hidden;
}

.mfp-table-head, .mfp-row {
  display: grid;
  grid-template-columns: 2.4fr 0.8fr 0.7fr 0.9fr 50px 50px;
  gap: 12px;
  align-items: center;
  padding: 14px 22px;
}
.mfp-table-head {
  font-size: 0.78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mfp-row {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 0.94rem;
  cursor: default;
  transition: background 0.12s;
}
.mfp-row:hover { background: rgba(255,255,255,0.02); }
.mfp-row:last-child { border-bottom: 0; }

.mfp-name {
  display: flex; align-items: center; gap: 14px;
  min-width: 0;
}
.mfp-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 12px; font-weight: 900;
  color: white;
  letter-spacing: 0.02em;
}
.mfp-icon.pdf { background: linear-gradient(135deg, #ef4444, #dc2626); }
.mfp-icon.img { background: linear-gradient(135deg, #06b6d4, #3b82f6); }
.mfp-icon.png { background: repeating-conic-gradient(#cbd5e1 0% 25%, #f8fafc 0% 50%) 50%/12px 12px; }
.mfp-icon.txt { background: linear-gradient(135deg, #94a3b8, #64748b); }
.mfp-icon.zip { background: linear-gradient(135deg, #f59e0b, #d97706); }
.mfp-icon.folder { background: linear-gradient(135deg, #3b82f6, #2563eb); font-size: 18px; }
.mfp-icon.other { background: linear-gradient(135deg, #a855f7, #8b5cf6); }

.mfp-fname {
  color: var(--text); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mfp-type, .mfp-size, .mfp-date {
  color: var(--muted); font-weight: 500;
}

.mfp-star, .mfp-dots {
  background: transparent; border: 0;
  cursor: pointer; padding: 6px;
  display: grid; place-items: center;
  color: var(--muted);
  border-radius: 8px;
}
.mfp-star:hover { background: rgba(255,255,255,0.06); }
.mfp-star svg { width: 20px; height: 20px; }
.mfp-star.active { color: #f59e0b; }
.mfp-star.active svg { fill: #f59e0b; }
.mfp-dots {
  font-size: 1.4rem; font-weight: 900;
  letter-spacing: 0.05em;
}
.mfp-dots:hover { background: rgba(255,255,255,0.06); color: var(--text); }

.mfp-empty {
  padding: 60px 30px;
  text-align: center;
  color: var(--muted);
}
.mfp-empty strong { display: block; color: var(--text); font-size: 1.1rem; margin-bottom: 6px; }

/* Grid view */
.mfp-table.grid-view .mfp-table-head { display: none; }
.mfp-table.grid-view .mfp-table-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  padding: 18px;
}
.mfp-table.grid-view .mfp-row {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  padding: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  transition: transform 0.15s, border-color 0.15s;
  position: relative;
}
.mfp-table.grid-view .mfp-row:hover {
  transform: translateY(-2px);
  border-color: rgba(168,85,247,0.4);
}
.mfp-table.grid-view .mfp-name {
  flex-direction: column; align-items: flex-start; gap: 10px;
  width: 100%;
}
.mfp-table.grid-view .mfp-icon { width: 56px; height: 56px; font-size: 16px; }
.mfp-table.grid-view .mfp-fname { white-space: normal; }
.mfp-table.grid-view .mfp-type { display: none; }
.mfp-table.grid-view .mfp-size, .mfp-table.grid-view .mfp-date {
  font-size: 0.78rem;
}
.mfp-table.grid-view .mfp-star, .mfp-table.grid-view .mfp-dots {
  position: absolute; top: 8px; right: 8px;
}
.mfp-table.grid-view .mfp-dots { right: 38px; }

@media (max-width: 720px) {
  .my-files-page { padding: 18px 16px 40px; }
  .mfp-title { font-size: 1.5rem; }
  .mfp-table-head { display: none; }
  .mfp-row {
    grid-template-columns: 1fr 30px 30px;
    padding: 12px 14px;
  }
  .mfp-type, .mfp-date { display: none; }
  .mfp-name { gap: 10px; }
  .mfp-icon { width: 32px; height: 32px; }
}

/* ============================================================
   JPG to PDF — premium drag-drop grid
   ============================================================ */
.img2pdf-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap; gap: 10px;
}
.img2pdf-count { color: var(--text); font-size: 0.94rem; }
.img2pdf-count strong {
  background: linear-gradient(135deg, #5eead4, #f472b6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.15rem; font-weight: 900;
}
.img2pdf-size { color: var(--muted); }
.img2pdf-clear {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid rgba(239,68,68,0.4);
  color: #fb7185;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 700; font-size: 0.84rem;
  cursor: pointer;
}
.img2pdf-clear:hover { background: rgba(239,68,68,0.1); }
.img2pdf-clear svg { width: 14px; height: 14px; }

.img2pdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.img2pdf-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: grab;
  transition: transform 0.15s, border-color 0.15s, opacity 0.15s;
}
.img2pdf-card:hover { transform: translateY(-2px); border-color: rgba(94,234,212,0.4); }
.img2pdf-card.dragging { opacity: 0.4; cursor: grabbing; }
.img2pdf-card.drag-over { border-color: #5eead4; box-shadow: 0 0 0 2px rgba(94,234,212,0.3); }

.img2pdf-thumb {
  position: relative;
  width: 100%; aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: #0f172a;
}
.img2pdf-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.img2pdf-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,0.65);
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10px; font-weight: 900;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}
.img2pdf-remove {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px;
  background: rgba(0,0,0,0.7);
  color: white;
  border: 0; border-radius: 999px;
  cursor: pointer;
  font-size: 1.1rem; font-weight: 700;
  display: grid; place-items: center;
  line-height: 1;
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.img2pdf-card:hover .img2pdf-remove { opacity: 1; }
.img2pdf-remove:hover { background: rgba(239,68,68,0.85); }

.img2pdf-check {
  position: absolute; bottom: 8px; right: 8px;
  width: 26px; height: 26px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #041217;
  border-radius: 999px;
  font-size: 14px; font-weight: 900;
  display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(94,234,212,0.4);
}

.img2pdf-name {
  color: white; font-size: 0.86rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 6px;
}
.img2pdf-meta { color: var(--muted); font-size: 0.78rem; }

@media (max-width: 720px) {
  .img2pdf-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .img2pdf-remove { opacity: 1; }
}

/* v245 — Contextual web→app card.
   Shown when a web visitor picks a high-value tool (Sign, Merge,
   Compress, OCR). Restrained palette: tinted surface + single violet
   accent + the real Google Play wordmark icon. NOT a modal, NOT a
   gradient hero. Sits inline below the Convert button. */
.web-app-cta {
  margin-top: 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(124, 58, 237, 0.10), rgba(124, 58, 237, 0.03));
  border: 1px solid rgba(167, 139, 250, 0.22);
  box-shadow: 0 8px 24px -16px rgba(124, 58, 237, 0.45);
  color: var(--text);
}
.web-app-cta__icon {
  width: 44px; height: 44px; border-radius: 10px; flex: 0 0 44px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 14px -6px rgba(124,58,237,0.45);
}
.web-app-cta__icon img { width: 44px; height: 44px; display: block; }
.web-app-cta__copy { min-width: 0; }
.web-app-cta__title {
  font-size: 0.92rem; font-weight: 700; line-height: 1.3;
  color: #fff; margin: 0;
}
.web-app-cta__sub {
  font-size: 0.78rem; line-height: 1.4;
  color: rgba(230, 233, 240, 0.72);
  margin: 2px 0 0;
}
.web-app-cta__play {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: #fff; color: #0b0f17;
  font-weight: 700; font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform 140ms ease-out, box-shadow 200ms;
  box-shadow: 0 6px 18px -8px rgba(255,255,255,0.20);
}
.web-app-cta__play:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(255,255,255,0.30); }
.web-app-cta__play:active { transform: translateY(0); }
.web-app-cta__play svg { width: 16px; height: 16px; flex: 0 0 16px; }
.web-app-cta__close {
  position: absolute;
  top: 8px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 0; background: transparent;
  color: rgba(255,255,255,0.45);
  cursor: pointer;
  font-size: 14px; line-height: 1;
  padding: 0;
}
.web-app-cta { position: relative; }
.web-app-cta__close:hover { color: #fff; background: rgba(255,255,255,0.06); }

/* Tighter mobile layout: stack content above the Play button so nothing
   wraps awkwardly on phones. */
@media (max-width: 540px) {
  .web-app-cta {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 10px 12px;
  }
  .web-app-cta__play {
    grid-column: 1 / -1;
    justify-content: center;
  }
}

/* Web only — hide if somehow rendered inside Capacitor. */
body.native-app .web-app-cta-slot { display: none !important; }

/* === Topbar credit chip + reward button === */
/* v244 — credits + rewarded-ad button are app-only. The web site is the
   marketing/free funnel: no credit system, no rewarded ads. body.native-app
   is toggled on by app.js when window.Capacitor is present (see line ~2112).
   Hiding via CSS keeps the DOM intact for the native app to consume. */
body:not(.native-app) #creditChip,
body:not(.native-app) .credit-chip,
body:not(.native-app) #rewardButton,
body:not(.native-app) .reward-cta {
  display: none !important;
}

.credit-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(94,234,212,0.18), rgba(244,114,182,0.18));
  border: 1px solid rgba(94,234,212,0.4);
  font-weight: 800;
  color: var(--text);
  min-height: 38px;
}

.credit-chip svg {
  width: 16px;
  height: 16px;
  fill: #facc15;
  stroke: #facc15;
  stroke-width: 1.2;
}

#creditText {
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.credit-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.credit-chip.low {
  background: linear-gradient(135deg, rgba(251,113,133,0.25), rgba(244,114,182,0.25));
  border-color: rgba(251,113,133,0.6);
  animation: pulseCredit 1.6s ease-in-out infinite;
}

.credit-chip.empty {
  background: linear-gradient(135deg, rgba(239,68,68,0.35), rgba(244,114,182,0.25));
  border-color: rgba(239,68,68,0.7);
}

@keyframes pulseCredit {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.reward-cta {
  position: relative;
}

.reward-cta-cooldown {
  display: inline-block;
  margin-left: 4px;
  background: rgba(0,0,0,0.35);
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.reward-cta-cooldown:empty {
  display: none;
}

.reward-cta.disabled-look {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Pro stacked with mini Info + Theme below it */
.topbar-pro-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.topbar-mini-row {
  display: inline-flex;
  gap: 0;
  justify-content: flex-end;
  align-self: flex-end;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
}
.topbar-mini-row .icon-button.mini {
  border-radius: 0 !important;
  border: none !important;
  background: transparent;
}
.topbar-mini-row .icon-button.mini + .icon-button.mini {
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}
.icon-button.mini {
  width: 30px;
  height: 30px;
  padding: 5px;
  border-radius: 8px;
}
.icon-button.mini svg {
  width: 16px;
  height: 16px;
}

/* === Web → App funnel: locked tool badge + modal === */
.nav-status.tier-applock,
.tc-credit.tier-applock {
  background: rgba(167, 139, 250, 0.15);
  color: #c4b5fd;
  font-weight: 600;
  border: 1px solid rgba(167, 139, 250, 0.25);
  letter-spacing: 0.02em;
}

/* Web Locked Modal — minimal, professional */
.web-locked-dialog {
  max-width: 380px;
  width: calc(100% - 32px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px 28px 24px;
  background: #0f1217;
  color: #e8eaed;
  text-align: center;
}
.web-locked-dialog::backdrop {
  background: rgba(8,10,18,0.78);
  backdrop-filter: blur(6px);
}
.web-locked-dialog .dialog-close-x {
  position: absolute; top: 12px; right: 12px;
  background: transparent; border: none; color: #6b7280;
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  font-size: 1.4rem; line-height: 1;
}
.web-locked-dialog .dialog-close-x:hover { color: #e8eaed; background: rgba(255,255,255,0.06); }
.web-locked-dialog .wl-phone {
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: #c4b5fd;
}
.web-locked-dialog .wl-phone svg { width: 28px; height: 28px; }
.web-locked-dialog h3 {
  font-size: 1.1rem; font-weight: 700; margin: 0 0 4px;
  color: #f9fafb; letter-spacing: -0.01em;
}
.web-locked-dialog .muted {
  color: #9ca3af; font-size: 0.875rem; margin-bottom: 20px;
}
.wl-benefits {
  list-style: none; padding: 14px 0; margin: 0 0 20px; text-align: left;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.wl-benefits li {
  padding: 8px 0; font-size: 0.875rem; color: #d1d5db;
  display: flex; align-items: center; gap: 12px;
}
.wl-benefits li svg {
  width: 16px; height: 16px; flex-shrink: 0;
  color: #a78bfa;
}
.wl-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #ffffff;
  color: #0f1217;
  text-decoration: none;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 8px;
}
.wl-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,255,255,0.12); }
.wl-cta svg { color: #0f1217; }
.wl-secondary {
  background: transparent; border: none; color: #6b7280;
  cursor: pointer; padding: 8px; font-size: 0.82rem; width: 100%;
}
.wl-secondary:hover { color: #d1d5db; }
.native-app .web-locked-dialog { display: none; }

/* Web → App: post-conversion result CTA */
.web-result-cta-v2 {
  background: #0f1217 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  text-align: center;
  padding: 22px 20px !important;
}
.web-result-cta-v2 .wrcta-phone {
  width: 44px; height: 44px;
  margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: #c4b5fd;
}
.web-result-cta-v2 .wrcta-phone svg { width: 22px; height: 22px; }
.web-result-cta-v2 strong {
  color: #f9fafb !important;
  font-size: 0.98rem;
  display: block;
  margin-bottom: 4px;
  font-weight: 600;
}
.web-result-cta-v2 small {
  color: #9ca3af !important;
  display: block;
  margin-bottom: 14px;
  font-size: 0.82rem;
}
.web-result-cta-v2 .wrcta-cta {
  background: #ffffff !important;
  color: #0f1217 !important;
  font-weight: 600;
  padding: 10px 16px !important;
  font-size: 0.86rem;
  width: 100%;
  justify-content: center;
  text-decoration: none;
  border: none;
  border-radius: 8px;
}
.web-result-cta-v2 .wrcta-cta svg { color: #0f1217 !important; }
.web-result-cta-v2 .wrcta-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
.native-app .web-result-cta-v2 { display: none !important; }

/* === Out-of-credits modal === */
.out-of-credits-dialog {
  max-width: 460px;
  border-radius: 18px;
}

.out-of-credits-dialog .dialog-header {
  text-align: center;
  margin-bottom: 14px;
}

.out-of-credits-dialog .dialog-header .eyebrow {
  color: #fb7185;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.out-of-credits-dialog .dialog-header h3 {
  margin: 6px 0;
  font-size: 1.4rem;
}

.out-of-credits-dialog .muted {
  color: var(--muted);
  font-size: 0.9rem;
}

.oc-options {
  display: grid;
  gap: 10px;
  margin: 14px 0;
}

.oc-option {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  text-align: left;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
  color: var(--text);
}

.oc-option:hover:not(:disabled):not(.oc-option-info) {
  transform: translateY(-1px);
  border-color: #5eead4;
  background: rgba(94,234,212,0.08);
}

.oc-option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.oc-option-primary {
  border-color: rgba(94,234,212,0.5);
  background: linear-gradient(135deg, rgba(94,234,212,0.12), rgba(94,234,212,0.04));
}

.oc-option-pro {
  border-color: rgba(250,204,21,0.55);
  background: linear-gradient(135deg, rgba(250,204,21,0.12), rgba(244,114,182,0.06));
}

.oc-option-info {
  cursor: default;
  opacity: 0.85;
}

.oc-icon {
  font-size: 1.8rem;
  display: grid;
  place-items: center;
}

.oc-content {
  display: grid;
  gap: 2px;
}

.oc-content strong {
  font-size: 1rem;
  font-weight: 800;
}

.oc-content small {
  font-size: 0.82rem;
  color: var(--muted);
}

.oc-cooldown {
  color: #fb7185 !important;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.oc-cooldown:empty {
  display: none;
}

.oc-price {
  color: #facc15 !important;
  font-weight: 700;
}

.oc-cta {
  font-size: 1.3rem;
  font-weight: 900;
  color: #5eead4;
  padding: 0 6px;
}

.oc-option-pro .oc-cta {
  color: #facc15;
}

@media (max-width: 680px) {
  .credit-chip {
    padding: 4px 8px;
    gap: 4px;
  }
  .credit-label {
    display: none;
  }
  #creditText {
    font-size: 1rem;
  }
  .reward-cta-text {
    display: inline;
    font-size: 0.78rem;
  }
  .reward-cta-cooldown {
    margin-left: 4px;
  }
}

/* === Get app banner (web only) === */
.get-app-banner {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  color: #0f1217;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.gab-content {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1280px;
  margin: 0 auto;
}

.gab-icon {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #c4b5fd, #a78bfa);
  color: #ffffff;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(167, 139, 250, 0.3);
}
.gab-icon svg { width: 20px; height: 20px; stroke-width: 2.2; }

.gab-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.gab-text strong {
  font-weight: 600;
  font-size: 0.88rem;
  color: #0f1217;
}

.gab-text small {
  font-size: 0.78rem;
  color: #6b7280;
}

.gab-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #0f1217;
  color: #ffffff;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s;
}
.gab-cta:hover { transform: translateY(-1px); }
.gab-cta svg { color: #ffffff; }

.gab-close {
  background: transparent;
  border: 0;
  color: #6b7280;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0 8px;
  line-height: 1;
  transition: color 0.12s;
}
.gab-close:hover { color: #0f1217; }

@media (max-width: 680px) {
  .gab-text small {
    display: none;
  }
  .gab-text strong {
    font-size: 0.86rem;
  }
}

/* === Modern onboarding === */
.modern-onboarding {
  max-width: 420px;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(160deg, #0f172a, #1e293b 60%, #0f172a);
}

.modern-onboarding form {
  padding: 24px 22px 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 540px;
}

.ob-skip-corner {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  z-index: 5;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 0.15s;
}

.ob-skip-corner:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text);
}

.modern-onboarding .onboarding-slide {
  display: none;
  flex: 1;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  animation: obFade 0.4s ease;
}

.modern-onboarding .onboarding-slide.active {
  display: flex;
}

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

.ob-illu {
  position: relative;
  width: 100%;
  height: 220px;
  display: grid;
  place-items: center;
  margin: 12px 0;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(94,234,212,0.15), rgba(244,114,182,0.15));
  overflow: hidden;
}

.ob-illu-glow {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 50%, rgba(94,234,212,0.45), transparent 60%);
  filter: blur(28px);
  z-index: 0;
  animation: pulseCredit 3s ease-in-out infinite;
}

.ob-emoji {
  font-size: 5.5rem;
  z-index: 1;
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.35));
}

.ob-mock-doc {
  position: absolute;
  right: 32px;
  bottom: 32px;
  width: 64px;
  height: 84px;
  background: #fff;
  border-radius: 6px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
  box-shadow: 0 12px 24px rgba(0,0,0,0.4);
  transform: rotate(8deg);
}

.ob-mock-line {
  height: 5px;
  background: #cbd5e1;
  border-radius: 3px;
}

.ob-mock-line.short {
  width: 60%;
}

.ob-mock-tag {
  margin-top: auto;
  background: #ef4444;
  color: #fff;
  font-size: 0.55rem;
  font-weight: 900;
  padding: 2px 5px;
  border-radius: 3px;
  align-self: flex-start;
  letter-spacing: 0.05em;
}

.ob-illu-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.ob-step {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(94,234,212,0.45);
  display: grid;
  place-items: center;
  position: relative;
  z-index: 1;
}

.ob-step span {
  position: absolute;
  top: -10px;
  left: -10px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #041217;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.78rem;
}

.ob-step small {
  font-size: 1.6rem;
}

.ob-arrow {
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 800;
  z-index: 1;
}

.ob-illu-credits {
  flex-direction: column;
  gap: 12px;
}

.ob-bonus-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #041217;
  z-index: 1;
  box-shadow: 0 8px 22px rgba(94,234,212,0.35);
}

.ob-bonus-pill strong {
  font-size: 1.6rem;
  font-weight: 900;
}

.ob-bonus-pill small {
  font-weight: 700;
}

.ob-bonus-icon {
  font-size: 1.4rem;
}

.ob-credit-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  z-index: 1;
}

.ob-credit-row span {
  font-size: 1.3rem;
  font-weight: 800;
  color: #5eead4;
}

.ob-credit-row small {
  color: var(--muted);
}

.ob-illu-pro {
  flex-direction: column;
  gap: 14px;
}

.ob-pro-badge {
  background: linear-gradient(135deg, #facc15, #f472b6);
  color: #041217;
  padding: 10px 24px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: 0.1em;
  font-size: 1rem;
  z-index: 1;
  box-shadow: 0 8px 22px rgba(250,204,21,0.4);
}

.ob-pro-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  z-index: 1;
  width: 80%;
}

.ob-pro-features div {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  font-size: 1.1rem;
}

.ob-pro-features small {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
}

.modern-onboarding .eyebrow {
  color: #5eead4;
  font-weight: 800;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 4px 0 0;
}

.modern-onboarding h3 {
  font-size: 1.42rem;
  margin: 4px 0 6px;
  line-height: 1.2;
}

.modern-onboarding > form > .onboarding-slide > p:last-of-type {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 0 8px;
}

.modern-onboarding .language-choice {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  justify-content: center;
}

.modern-onboarding .language-button {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.modern-onboarding .legacy-language-choice {
  display: none;
}

.ob-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 12px;
}

.ob-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  transition: all 0.2s;
}

.ob-dot.active {
  width: 24px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
}

.modern-onboarding .onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ob-next-btn {
  width: 100%;
  padding: 14px;
  font-size: 1rem;
  font-weight: 800;
  border-radius: 12px;
}

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

.settings-grid label:first-child {
  grid-column: span 2;
}

.settings-grid label {
  display: grid;
  gap: 7px;
}

.settings-grid span {
  color: var(--muted);
  font-size: 0.85rem;
}

input,
select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.08);
  padding: 12px 13px;
}

.action-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.primary-button,
.secondary-button,
.download-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0 16px;
  font-weight: 850;
}

.compact {
  min-height: 44px;
  padding-inline: 13px;
}

.primary-button {
  color: #061117;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  box-shadow: 0 16px 34px rgba(244, 114, 182, 0.22);
}

.secondary-button,
.download-button {
  color: var(--text);
  border-color: var(--line);
  background: var(--panel);
}

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

.share-button {
  min-height: 46px;
}

.progress-wrap {
  height: 8px;
  border-radius: 99px;
  margin-top: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.limit-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.progress-bar {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), #facc15);
  transition: width 220ms ease;
}

.result-list {
  display: grid;
  gap: 10px;
}

.result-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.07);
}

.web-result-cta {
  border-color: rgba(94, 234, 212, 0.32);
  background:
    linear-gradient(135deg, rgba(94, 234, 212, 0.11), rgba(244, 114, 182, 0.08)),
    rgba(255, 255, 255, 0.05);
}

.result-item strong {
  overflow-wrap: anywhere;
}

.result-item small,
.empty-state p {
  color: var(--muted);
}

.empty-state {
  display: grid;
  place-items: center;
  min-height: 280px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 24px;
}

.empty-state svg {
  width: 44px;
  height: 44px;
  color: var(--accent);
  margin-bottom: 12px;
}

.catalog-section {
  margin-top: 20px;
}

.history-section {
  margin-top: 20px;
}

.live-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  border: 1px solid rgba(94, 234, 212, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, 0.12), rgba(244, 114, 182, 0.08)),
    rgba(255, 255, 255, 0.05);
  padding: 18px;
}

.live-section h3 {
  margin: 0;
}

.live-section strong {
  font-size: clamp(2rem, 6vw, 3.8rem);
  line-height: 1;
}

.live-section span {
  grid-column: 1 / -1;
  color: var(--muted);
}

.pricing-section {
  margin-top: 24px;
}

.seo-section {
  margin-top: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(94, 234, 212, 0.08), rgba(244, 114, 182, 0.07)),
    rgba(255, 255, 255, 0.04);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 24px);
}

.seo-section h3 {
  max-width: 760px;
  line-height: 1.1;
}

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

.seo-grid article,
.faq-list details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
  padding: 16px;
}

.seo-grid h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.seo-grid p,
.faq-list p {
  margin: 0;
  color: var(--muted);
  line-height: 1.58;
}

.faq-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.faq-list summary {
  cursor: pointer;
  font-weight: 900;
}

.faq-list details[open] summary {
  margin-bottom: 10px;
  color: var(--accent);
}

.legal-section {
  margin-top: 24px;
}

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

.legal-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 14px;
}

.legal-grid strong,
.legal-grid span {
  display: block;
}

.legal-grid span {
  color: var(--muted);
  margin-top: 7px;
  line-height: 1.45;
}

.legal-grid a {
  display: inline-flex;
  margin-top: 12px;
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.policy-page {
  min-height: 100vh;
  padding: clamp(20px, 5vw, 56px);
}

.policy-shell {
  width: min(900px, 100%);
  margin: 0 auto;
}

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

.policy-nav a,
.policy-card a {
  color: var(--accent);
  font-weight: 900;
  text-decoration: none;
}

.policy-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(8, 10, 18, 0.66);
  box-shadow: var(--shadow);
  padding: clamp(22px, 4vw, 42px);
}

.policy-card h1 {
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1;
  margin-bottom: 12px;
}

.policy-card h2 {
  margin-top: 28px;
  margin-bottom: 8px;
}

.policy-card p,
.policy-card li {
  color: var(--muted);
  line-height: 1.7;
}

.policy-card ul {
  padding-left: 20px;
}

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

.catalog-more-button {
  margin-top: 12px;
}

.catalog-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 14px;
}

.pro-catalog-card {
  border-color: rgba(94, 234, 212, 0.35);
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.1), rgba(244, 114, 182, 0.07));
}

.catalog-card strong,
.catalog-card span {
  display: block;
}

.catalog-card em {
  position: absolute;
  top: 12px;
  right: 12px;
  border-radius: 999px;
  color: #061117;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  padding: 4px 8px;
  font-size: 0.7rem;
  font-style: normal;
  font-weight: 950;
}

.pro-modal {
  width: min(620px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(94, 234, 212, 0.12), rgba(244, 114, 182, 0.1)),
    #101729;
  box-shadow: var(--shadow);
  padding: 0;
}

.pro-modal::backdrop {
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(8px);
}

.pro-modal form {
  padding: 22px;
}

.reward-offer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(94, 234, 212, 0.38);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.14), rgba(244, 114, 182, 0.12));
  margin-bottom: 12px;
  padding: 16px;
}

.reward-offer span,
.reward-offer strong,
.reward-offer p {
  display: block;
}

.reward-offer span {
  color: var(--accent);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.reward-offer strong {
  margin-top: 5px;
  font-size: 1.15rem;
}

.reward-offer p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.reward-cooldown {
  display: none;
  margin-top: 10px;
  color: #d8fffa;
  font-size: 0.88rem;
  font-weight: 850;
}

.reward-cooldown.active {
  display: block;
}

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

.plan-grid article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 16px;
}

.plan-grid strong,
.plan-grid span {
  display: block;
}

.plan-grid strong {
  font-size: 1.25rem;
}

.plan-grid span {
  margin-top: 4px;
  color: var(--accent);
  font-weight: 850;
}

.plan-grid p {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.featured-plan {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.14), rgba(244, 114, 182, 0.13)) !important;
}

.pro-modal menu {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
}

.catalog-card span {
  color: var(--muted);
  margin-top: 6px;
  font-size: 0.86rem;
  line-height: 1.45;
}

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

.history-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 14px;
}

.history-item strong,
.history-item span,
.history-item small {
  display: block;
}

.history-item strong {
  overflow-wrap: anywhere;
}

.history-item span {
  color: var(--muted);
  margin-top: 6px;
  font-size: 0.85rem;
}

.history-item small {
  color: #f9a8d4;
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.history-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.history-actions .compact {
  min-height: 36px;
  padding-inline: 9px;
  font-size: 0.78rem;
}

.history-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.danger-button {
  border-color: rgba(248, 113, 113, 0.35);
  color: #fecaca;
}

.empty-inline {
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 16px;
}

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

.pro-feature-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.pro-feature-strip span {
  border: 1px solid rgba(94, 234, 212, 0.28);
  border-radius: 999px;
  color: #d8fffa;
  background: rgba(94, 234, 212, 0.09);
  padding: 8px 11px;
  font-size: 0.84rem;
  font-weight: 850;
}

.price-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  padding: 18px;
}

.featured-price {
  border-color: rgba(94, 234, 212, 0.46);
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.15), rgba(244, 114, 182, 0.12));
}

.plan-label {
  display: inline-flex;
  margin-bottom: 12px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
}

.price-card strong {
  display: block;
  font-size: 2.1rem;
  line-height: 1;
}

.price-card strong span {
  margin-left: 4px;
  color: var(--muted);
  font-size: 0.95rem;
}

.price-card p {
  margin: 14px 0 0;
  color: var(--muted);
  line-height: 1.5;
}

.onboarding-modal {
  width: min(760px, calc(100vw - 32px));
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 0%, rgba(94, 234, 212, 0.28), transparent 34%),
    radial-gradient(circle at 92% 18%, rgba(244, 114, 182, 0.24), transparent 30%),
    linear-gradient(135deg, rgba(94, 234, 212, 0.13), rgba(129, 140, 248, 0.11), rgba(244, 114, 182, 0.12)),
    #101729;
  box-shadow: var(--shadow);
  padding: 0;
}

.onboarding-modal::backdrop {
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(10px);
}

.onboarding-modal form {
  padding: clamp(22px, 5vw, 34px);
}

.onboarding-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.onboarding-brand strong {
  display: block;
  font-size: 1.05rem;
}

.onboarding-slide {
  display: none;
}

.onboarding-slide.active {
  display: block;
}

.onboarding-slide h3 {
  margin-bottom: 12px;
  max-width: 680px;
  font-size: clamp(2rem, 5vw, 3.15rem);
  line-height: 1;
}

.onboarding-slide p {
  max-width: 640px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.onboarding-visual {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
}

.language-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.legacy-language-choice {
  display: none;
}

.language-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.07);
  padding: 10px 13px;
  font-weight: 850;
}

.language-button span {
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  border-radius: 8px;
  color: #071018;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  font-size: 0.78rem;
}

.language-button.active {
  color: #061117;
  background: linear-gradient(135deg, #5eead4, #f472b6);
}

.onboarding-visual span {
  display: grid;
  place-items: center;
  min-width: 92px;
  min-height: 74px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 1.3rem;
  font-weight: 950;
}

.onboarding-phone {
  justify-content: center;
  min-height: 240px;
  border: 1px solid rgba(94, 234, 212, 0.22);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.82), rgba(30, 41, 59, 0.62)),
    radial-gradient(circle at 22% 20%, rgba(94, 234, 212, 0.25), transparent 34%),
    radial-gradient(circle at 78% 78%, rgba(244, 114, 182, 0.22), transparent 34%);
}

.mock-phone-card {
  display: grid;
  gap: 10px;
  width: min(320px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  padding: 22px;
  background: rgba(9, 16, 31, 0.86);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.mock-phone-card .mock-topline {
  min-width: 0;
  min-height: 0;
  place-items: start;
  border: 0;
  background: transparent;
  color: var(--accent);
  font-size: 0.82rem;
  text-transform: uppercase;
}

.mock-phone-card strong {
  font-size: 1.4rem;
  line-height: 1.1;
}

.mock-phone-card small {
  color: var(--muted);
  font-weight: 800;
}

.mock-phone-card em {
  justify-self: start;
  border: 1px solid rgba(94, 234, 212, 0.3);
  border-radius: 999px;
  padding: 8px 12px;
  color: #d8fffa;
  background: rgba(94, 234, 212, 0.1);
  font-style: normal;
  font-weight: 900;
}

.format-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.onboarding-visual svg {
  color: var(--accent);
}

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

.mini-feature-grid span {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 12px;
  color: var(--text);
  font-weight: 800;
}

.onboarding-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 26px;
}

.light {
  color-scheme: light;
  --bg: #f7fafc;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-strong: #ffffff;
  --text: #111827;
  --muted: #5d6678;
  --line: rgba(17, 24, 39, 0.14);
  --shadow: 0 24px 60px rgba(17, 24, 39, 0.12);
  background:
    radial-gradient(circle at 12% 8%, rgba(20, 184, 166, 0.18), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(244, 114, 182, 0.18), transparent 30%),
    linear-gradient(135deg, #f8fafc 0%, #eef2ff 48%, #fdf2f8 100%);
}

.light .sidebar,
.light .converter-panel,
.light .result-panel,
.light .pro-modal,
.light .onboarding-modal {
  background: rgba(255, 255, 255, 0.76);
}

.light .hero-band {
  background:
    linear-gradient(120deg, rgba(255, 255, 255, 0.84), rgba(248, 250, 252, 0.74)),
    linear-gradient(135deg, rgba(20, 184, 166, 0.22), rgba(244, 114, 182, 0.18), rgba(250, 204, 21, 0.16));
}

@media (max-width: 1100px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

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

  .hero-band,
  .converter-layout {
    grid-template-columns: 1fr;
  }

  .catalog-grid,
  .history-list,
  .pricing-grid,
  .seo-grid,
  .legal-grid,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile-only: prevent horizontal scroll without touching vertical scroll behavior */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

@media (max-width: 680px) {
  .workspace,
  .sidebar {
    padding: 18px;
    min-width: 0;
    max-width: 100%;
  }

  /* Prevent any flex/grid child from forcing horizontal overflow */
  .app-shell,
  .workspace,
  .sidebar,
  .my-files-page,
  .tool-section,
  .converter-panel,
  .result-panel,
  .topbar,
  .topbar-actions {
    min-width: 0;
    max-width: 100vw;
  }

  /* My Files horizontal tab strip — scroll inside, not body */
  .mfp-tabs,
  .mfp-head,
  .nav-status,
  .tool-card-grid {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Long words / urls don't push layout wider */
  h1, h2, h3, h4, p, small, span, strong {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body {
    padding-bottom: 0;
  }

  .app-promo-bar {
    display: none;
  }

  .app-shell {
    display: flex;
    flex-direction: column;
  }

  .workspace {
    display: flex;
    flex-direction: column;
  }

  .sidebar {
    order: 2;
  }

  .sidebar .tool-nav,
  .sidebar .favorite-panel {
    display: none;
  }

  .tool-nav,
  .settings-grid,
  .catalog-grid,
  .history-list,
  .hero-stat-grid,
  .pricing-grid,
  .seo-grid,
  .legal-grid,
  .reward-offer,
  .plan-grid,
  .mini-feature-grid {
    grid-template-columns: 1fr;
  }

  .settings-grid label:first-child {
    grid-column: auto;
  }

  .file-preview-grid,
  .workflow-panel {
    grid-template-columns: 1fr;
  }

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

  .workflow-pills {
    justify-content: flex-start;
  }

  .topbar {
    order: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 12px;
  }

  .mobile-brand-lockup {
    display: flex;
  }

  .mobile-brand-lockup .brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .mobile-brand-lockup .brand-mark svg {
    width: 30px;
    height: 30px;
  }

  .mobile-brand-lockup h2 {
    margin: 0;
    font-size: 1.25rem;
  }

  .topbar-title {
    display: none;
  }

  .topbar-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
  }

  .credit-chip,
  .compact,
  .icon-button {
    width: 100%;
    min-height: 42px;
    padding-inline: 8px;
    font-size: 0.86rem;
  }

  .credit-chip svg,
  .compact svg,
  .icon-button svg {
    width: 18px;
    height: 18px;
  }

  #rewardButton {
    grid-column: span 2;
  }

  .converter-layout {
    order: 1;
    margin-top: 10px;
  }

  .mobile-tool-section {
    display: block;
    order: 2;
    margin-top: 18px;
  }

  .history-section {
    order: 3;
  }

  .live-section {
    order: 4;
    grid-template-columns: 1fr;
  }

  .catalog-section {
    display: none;
    order: 5;
  }

  .legal-section {
    order: 6;
  }

  .seo-section {
    order: 6;
  }

  .hero-band {
    display: none;
    order: 6;
    min-height: auto;
    padding: 18px;
  }

  .mobile-tool-grid .nav-button {
    grid-template-columns: 38px minmax(0, 1fr) auto;
  }

  .mobile-tool-grid .favorite-toggle {
    display: none;
  }

  .advanced-tool-group .nav-button {
    background: rgba(255, 255, 255, 0.035);
  }

  .onboarding-modal {
    width: calc(100vw - 22px);
  }

  .onboarding-modal form {
    padding: 22px;
  }

  .onboarding-slide h3 {
    font-size: 2rem;
  }

  .onboarding-visual span {
    min-width: 76px;
    min-height: 62px;
  }

  .format-strip {
    grid-template-columns: 1fr;
  }

  .onboarding-phone {
    min-height: 210px;
  }

  .mock-phone-card .mock-topline {
    min-width: 0;
    min-height: 0;
  }

  .hero-band p:not(.pill),
  .hero-stat-grid {
    display: none;
  }

  .hero-band h3 {
    margin-bottom: 0;
  }

  .drop-zone {
    min-height: 178px;
    padding: 18px;
  }

  .converter-panel,
  .result-panel {
    padding: 16px;
  }

  .result-panel .panel-heading {
    align-items: flex-start;
  }

  .pricing-section {
    display: none;
  }

  .result-actions {
    grid-template-columns: 1fr;
  }

  /* Dialogs: fit small screens, scroll internally */
  .pro-modal,
  .onboarding-modal,
  .out-of-credits-dialog {
    width: calc(100vw - 24px);
    max-width: 100%;
    max-height: 88dvh;
    overflow-y: auto;
  }

  /* Onboarding: shrink large headings on phone */
  .onboarding-slide h3 {
    font-size: 1.65rem;
  }

  /* Out-of-credits: full-width on small screens */
  .out-of-credits-dialog {
    border-radius: 14px;
  }

  .oc-option {
    grid-template-columns: 36px 1fr auto;
    gap: 10px;
    padding: 12px;
  }
}

/* Safe area insets for notch/home-bar devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* ============== Pro modal — web "Get app" nudge strip ============== */
.pro-getapp-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
  padding: 9px 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.10), rgba(34, 211, 238, 0.10));
  border: 1px solid rgba(94, 234, 212, 0.32);
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.82rem;
  transition: background 0.15s, border-color 0.15s;
}
.pro-getapp-strip:hover {
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.18), rgba(34, 211, 238, 0.18));
  border-color: rgba(94, 234, 212, 0.6);
}
.pro-getapp-strip svg { width: 16px; height: 16px; flex-shrink: 0; }
.native-app .pro-getapp-strip { display: none !important; }

/* ============== Web → App funnel: header Get App button ============== */
.landing-getapp-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5eead4, #22d3ee);
  color: #0a0f1c;
  font-weight: 800;
  font-size: 0.86rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 14px rgba(94, 234, 212, 0.28);
  white-space: nowrap;
}
.landing-getapp-btn svg {
  width: 16px;
  height: 16px;
}
.landing-getapp-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(94, 234, 212, 0.35);
}
.native-app .landing-getapp-btn { display: none !important; }

/* Topbar Get App — minimal, professional */
.topbar-getapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  background: #ffffff;
  color: #0f1217 !important;
  font-weight: 600;
  font-size: 0.8rem;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.06);
  transition: transform 0.12s, box-shadow 0.12s;
}
.topbar-getapp:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.topbar-getapp svg { color: #0f1217; }
.native-app .topbar-getapp { display: none !important; }

/* Web: hide credit chip + reward button (no credit system on web) */
body:not(.native-app) #creditChip,
body:not(.native-app) #rewardButton { display: none !important; }

/* === Topbar redesign — minimal, refined === */
.topbar-actions {
  gap: 8px !important;
  align-items: center !important;
}

/* Credit chip — smaller, subtle */
.credit-chip {
  min-height: 32px !important;
  padding: 5px 10px !important;
  gap: 6px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}
.credit-chip svg { width: 13px !important; height: 13px !important; }
#creditText {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}
.credit-label {
  font-size: 0.7rem !important;
  font-weight: 500 !important;
  color: rgba(255,255,255,0.5) !important;
}

/* Reward CTA — leaner */
.reward-cta {
  min-height: 32px !important;
  padding: 5px 10px !important;
  gap: 5px !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
}
.reward-cta svg { width: 14px !important; height: 14px !important; }
.reward-cta-text { font-size: 0.78rem !important; font-weight: 600 !important; }
.reward-cta-cooldown {
  background: rgba(0,0,0,0.4) !important;
  padding: 1px 5px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  margin-left: 4px !important;
}

/* Pro button — smaller, refined */
.primary-button.compact#proButton {
  min-height: 32px !important;
  padding: 5px 12px !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  gap: 5px !important;
}
#proButton svg { width: 13px !important; height: 13px !important; }

/* On mobile, hide redundant landing-actions (topbar already has Pro, Info, Theme) */
@media (max-width: 720px) {
  .all-tools-landing .landing-actions { display: none !important; }
}

/* Tighter topbar on small screens — eliminate awkward gaps */
@media (max-width: 540px) {
  .topbar-actions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }
  .primary-button.compact#proButton {
    padding: 5px 10px !important;
  }
}

/* Single-row topbar: all elements 32px tall, perfectly aligned */
.icon-button.mini {
  width: 32px !important;
  height: 32px !important;
  padding: 6px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
}
.icon-button.mini svg { width: 14px !important; height: 14px !important; }
.icon-button.mini:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* === Sign PDF — Fullscreen placement modal === */
.sign-fullscreen-modal {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: #0b0f17;
  color: #e8eaed;
  position: relative;
  overflow: hidden;
}
.sign-fullscreen-modal::backdrop { background: rgba(0,0,0,0.92); }
.sign-fullscreen-modal[open] { display: flex; flex-direction: column; }
.sfm-header {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #141b27;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  gap: 12px;
  z-index: 20;
}
.sfm-icon-btn {
  background: transparent;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfm-icon-btn:hover { background: rgba(255,255,255,0.06); color: #fff; }
.sfm-icon-btn svg { width: 20px; height: 20px; }
.sfm-title { flex: 1; text-align: center; }
.sfm-title strong { display: block; font-size: 0.95rem; font-weight: 600; }
.sfm-title small { display: block; color: #9ca3af; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.sfm-confirm {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, #34d399, #10b981);
  color: #022c22;
  border: none;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.sfm-confirm:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(16,185,129,0.4); }
.sfm-confirm svg { width: 16px; height: 16px; }
.sfm-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 0;
}
.sfm-canvas-wrap {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 16px;
}
.sfm-canvas-wrap canvas {
  background: #fff;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  display: block;
}
.sfm-sig {
  position: absolute;
  cursor: grab;
  padding: 8px 12px;
  background: rgba(255,255,255,0.95);
  border: 2px dashed rgba(167, 139, 250, 0.6);
  border-radius: 8px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  z-index: 5;
  transition: box-shadow 0.15s;
}
.sfm-sig:hover { box-shadow: 0 4px 16px rgba(167, 139, 250, 0.4); }
.sfm-sig.dragging { cursor: grabbing; box-shadow: 0 8px 24px rgba(167, 139, 250, 0.6); border-style: solid; }
.sfm-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,0.7);
  color: #fff;
  padding: 12px 18px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  z-index: 10;
}
/* CRITICAL: ensure [hidden] actually hides the element — without this rule
   our display:flex above overrides the user-agent's [hidden] { display: none } */
.sfm-loading[hidden] { display: none !important; }
.sfm-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sfmSpin 0.7s linear infinite;
}
@keyframes sfmSpin { to { transform: rotate(360deg); } }
.sfm-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  transition: background 0.15s;
}
.sfm-nav:hover { background: rgba(255,255,255,0.2); }
.sfm-nav:disabled { opacity: 0.3; cursor: not-allowed; }
.sfm-nav.prev { left: 16px; }
.sfm-nav.next { right: 16px; }
.sfm-nav svg { width: 22px; height: 22px; }
.sfm-footer {
  flex: 0 0 auto;
  height: auto;
  max-height: 44vh;
  overflow-y: auto;
  padding: 10px 16px;
  background: #141b27;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: #9ca3af;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  z-index: 20;
  box-sizing: border-box;
}
/* Collapsed: slim bar so the signature can be dropped anywhere (incl. bottom) */
.sign-fullscreen-modal.sfm-panel-collapsed .sfm-footer > *:not(.sfm-panel-toggle) {
  display: none !important;
}
.sfm-panel-toggle {
  align-self: flex-end;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: #cbd5e1;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  order: -1;
}
.sfm-panel-toggle:hover { background: rgba(255,255,255,0.12); color: #fff; }
.sfm-size-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
}
.sfm-size-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #d1d5db;
  min-width: 40px;
}
.sfm-size-slider {
  flex: 1;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.sfm-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #a78bfa;
  cursor: pointer;
  border: 2px solid #0b0f17;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.sfm-size-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #a78bfa;
  cursor: pointer;
  border: 2px solid #0b0f17;
}
.sfm-size-val {
  font-size: 0.78rem;
  font-weight: 700;
  color: #a78bfa;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
  text-align: right;
}
/* Clear size controls: preset buttons + ± steppers */
.sfm-size-presets {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  max-width: 480px;
  margin-bottom: 4px;
}
.sfm-size-presets [data-sfm-size] {
  flex: 1;
  min-width: 64px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: #e5e7eb;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.sfm-size-presets [data-sfm-size]:hover { background: rgba(255,255,255,0.12); }
.sfm-size-presets [data-sfm-size].active {
  background: #7c3aed;
  border-color: #a78bfa;
  color: #fff;
}
.sfm-size-step {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sfm-size-step:hover { background: rgba(255,255,255,0.16); }
.sfm-size-step:active { transform: scale(0.94); }

@media (max-width: 540px) {
  .sfm-nav { width: 40px; height: 40px; }
  .sfm-confirm span { display: none; }
  .sfm-confirm { padding: 8px 12px; }
  .sfm-size-presets [data-sfm-size] { min-width: 56px; padding: 10px 6px; }
  .sfm-size-step { width: 44px; height: 44px; }
}

/* Fullscreen open button on small preview */
.signpdf-fullscreen-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.signpdf-fullscreen-btn:hover {
  border-color: rgba(167, 139, 250, 0.5);
  background: rgba(167, 139, 250, 0.08);
}
.signpdf-fullscreen-btn svg { width: 14px; height: 14px; }

/* === PDF Sign — DocuSign-style refinements === */
.sig-name-row {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 12px;
  margin-bottom: 14px;
}
.sig-name-row label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sig-name-row label > span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.sig-name-row label > span em {
  color: #ef4444;
  font-style: normal;
  margin-left: 2px;
}
.sig-name-row input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  font-size: 0.92rem;
  transition: border-color 0.12s, box-shadow 0.12s;
}
.sig-name-row input:focus {
  outline: none;
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.15);
}
.sig-initials-field input { text-align: center; font-weight: 700; letter-spacing: 0.1em; }

.sig-style-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin: 4px 0 8px;
}
.sig-style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.sig-style-card {
  border: 1.5px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sig-style-card:hover {
  border-color: rgba(167, 139, 250, 0.5);
  transform: translateY(-1px);
}
.sig-style-card.active {
  border-color: #a78bfa;
  background: rgba(167, 139, 250, 0.08);
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.12);
}
.sig-style-preview {
  font-size: 1.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.1;
}

.sig-legal {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border-radius: 8px;
  margin: 0;
}

@media (max-width: 540px) {
  .sig-name-row { grid-template-columns: 1fr; }
  .sig-style-grid { grid-template-columns: 1fr; }
}

/* "Next action" highlight — pulses a button to guide the user to the next step */
.next-action {
  position: relative;
  animation: nextActionPulse 1.4s ease-in-out infinite;
}
@keyframes nextActionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.45); }
  50%      { box-shadow: 0 0 0 12px rgba(16, 185, 129, 0); }
}

/* Required input nudge — flashes the field when convert is clicked while empty */
.input-needed {
  animation: inputNudge 0.5s ease-in-out 3;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25) !important;
}
@keyframes inputNudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
@media (max-width: 540px) {
  .topbar-getapp span { display: none; }
  .topbar-getapp { padding: 7px 9px; }
}

/* Hidden in mobile (already running app) and small screens to save room */
@media (max-width: 540px) {
  .landing-getapp-btn span { display: none; }
  .landing-getapp-btn { padding: 8px 10px; }
}

/* Mobile: hide duplicate landing-actions buttons — main topbar already has them.
   Avoids the confusing "white play triangle" + theme/info gap on small screens. */
@media (max-width: 768px) {
  .landing-head .landing-actions { display: none !important; }

  /* Compact topbar on mobile — no big gaps, no confusing icon-only buttons */
  .topbar-actions {
    gap: 6px !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
  }

  /* Get App: keep label on mobile so it's not just a confusing triangle */
  .topbar-getapp span { display: inline !important; font-size: 0.75rem; }
  .topbar-getapp { padding: 6px 10px !important; font-size: 0.75rem !important; }
  .topbar-getapp svg { width: 11px; height: 11px; }

  /* Pro stack: tighter on mobile */
  .topbar-pro-stack {
    gap: 3px !important;
    align-items: flex-end !important;
  }
  .topbar-mini-row {
    gap: 0 !important;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    overflow: hidden;
  }
  .topbar-mini-row .icon-button.mini {
    width: 28px !important; height: 28px !important;
    border-radius: 0 !important;
    border: none !important;
  }
  .topbar-mini-row .icon-button.mini + .icon-button.mini {
    border-left: 1px solid rgba(255,255,255,0.06) !important;
  }
  .topbar-mini-row .icon-button.mini svg { width: 14px; height: 14px; }

  /* Pro pill smaller on mobile */
  .primary-button.compact#proButton {
    min-height: 28px !important;
    padding: 4px 10px !important;
    font-size: 0.78rem !important;
  }
  #proButton svg { width: 11px !important; height: 11px !important; }
}

/* ============== Promo bar v2 — premium funnel banner ============== */
.app-promo-bar .app-promo-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #0a0f1c;
}
.app-promo-bar .app-promo-icon svg { width: 22px; height: 22px; }
.app-promo-bar .app-promo-text {
  flex: 1;
  min-width: 0;
}

/* ============== Quick Upload card (top of landing) ============== */
.quick-upload {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  margin-bottom: 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(94, 234, 212, 0.14), rgba(244, 114, 182, 0.12));
  border: 1.5px solid rgba(94, 234, 212, 0.36);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.quick-upload::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 0% 50%, rgba(94, 234, 212, 0.18), transparent 60%);
  pointer-events: none;
}
.quick-upload:hover {
  transform: translateY(-2px);
  border-color: rgba(94, 234, 212, 0.7);
  box-shadow: 0 14px 32px rgba(94, 234, 212, 0.18);
}
.quick-upload:active {
  transform: scale(0.99);
}
.qu-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #0a0f1c;
  position: relative;
  z-index: 1;
}
.qu-icon svg { width: 30px; height: 30px; }
.qu-text {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.qu-text strong {
  display: block;
  color: #fff;
  font-size: 1.08rem;
  font-weight: 800;
  margin-bottom: 3px;
}
.qu-text small {
  color: var(--muted);
  font-size: 0.86rem;
  display: block;
  line-height: 1.35;
}
.qu-arrow {
  font-size: 1.6rem;
  color: var(--accent);
  font-weight: 800;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .quick-upload {
    padding: 16px;
    gap: 12px;
    margin-bottom: 18px;
  }
  .qu-icon { width: 48px; height: 48px; }
  .qu-icon svg { width: 26px; height: 26px; }
  .qu-text strong { font-size: 1rem; }
  .qu-text small { font-size: 0.8rem; }
}

/* ============== Converter back button ============== */
.converter-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  margin-bottom: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-weight: 700;
  font-size: 0.88rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.converter-back svg {
  width: 16px;
  height: 16px;
}
.converter-back:hover {
  background: rgba(94, 234, 212, 0.12);
  border-color: rgba(94, 234, 212, 0.4);
  color: var(--accent);
}
.converter-back:active {
  transform: scale(0.97);
}

/* ============== Mobile: bigger, more obvious dropZone & flow ============== */
@media (max-width: 768px) {
  .converter-back {
    width: 100%;
    justify-content: center;
    padding: 12px;
    font-size: 0.95rem;
  }
  .drop-zone {
    min-height: 220px !important;
    padding: 28px 20px !important;
    border: 2px dashed rgba(94, 234, 212, 0.42) !important;
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.06), rgba(244, 114, 182, 0.06)) !important;
    border-radius: 18px !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
    cursor: pointer;
    position: relative;
  }
  .drop-zone .drop-icon svg {
    width: 56px !important;
    height: 56px !important;
    stroke: var(--accent) !important;
  }
  .drop-zone strong {
    font-size: 1.15rem !important;
    color: #fff !important;
    line-height: 1.3;
  }
  .drop-zone small {
    font-size: 0.86rem !important;
    color: var(--muted) !important;
  }
  .drop-zone:active {
    transform: scale(0.98);
  }
  /* Pulse hint when no files yet */
  .drop-zone:not(.has-files)::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 18px;
    border: 2px solid rgba(94, 234, 212, 0.6);
    animation: dzPulse 2.4s ease-in-out infinite;
    pointer-events: none;
  }
}

@keyframes dzPulse {
  0%, 100% { opacity: 0; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.012); }
}

/* Brief glow when user lands on converter — shows them WHERE to drop files */
.drop-zone.dz-flash {
  animation: dzFlash 1.2s ease-out;
}
@keyframes dzFlash {
  0% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.7); }
  60% { box-shadow: 0 0 0 22px rgba(94, 234, 212, 0); }
  100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
}

/* ============== Toast notifications ============== */
.bc-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 20, 34, 0.96);
  color: #fff;
  border: 1px solid rgba(94, 234, 212, 0.32);
  border-radius: 14px;
  padding: 13px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(14px);
  max-width: min(480px, calc(100vw - 32px));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 9999;
  text-align: center;
  line-height: 1.4;
}
.bc-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* ============== Inline saved-row inside result cards ============== */
.result-saved-row {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.10);
  border: 1px solid rgba(16, 185, 129, 0.32);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.result-saved-msg {
  color: #5eead4;
  font-size: 0.86rem;
  font-weight: 700;
  flex: 1 1 auto;
  min-width: 0;
}
.result-saved-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.result-saved-btn {
  background: rgba(94, 234, 212, 0.14);
  border: 1px solid rgba(94, 234, 212, 0.4);
  color: #5eead4;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.result-saved-btn:hover {
  background: rgba(94, 234, 212, 0.24);
}

/* ============== Mobile: ensure tool cards always have visible frames ============== */
@media (max-width: 768px) {
  .tool-card,
  .result-item {
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    border-radius: 14px;
  }
  .tool-card:not(.coming-soon):active {
    transform: scale(0.98);
  }
}

/* ============== Pro Modal v2 — premium pricing ============== */
.pro-modal-v2 {
  width: min(440px, calc(100vw - 24px));
  max-height: 92dvh;
  border-radius: 22px;
  padding: 0;
  border: 1px solid rgba(167,139,250,0.2);
  background:
    radial-gradient(circle at 10% 0%, rgba(167,139,250,0.18), transparent 40%),
    radial-gradient(circle at 90% 100%, rgba(244,114,182,0.14), transparent 45%),
    #0f1422;
}
.pro-modal-v2 form {
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.pro-close-corner {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 10;
}
.pro-close-corner:hover { background: rgba(255,255,255,0.12); color: #fff; }

.pro-hero { text-align: center; padding-top: 6px; }
.pro-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(244,114,182,0.18));
  border: 1px solid rgba(167,139,250,0.4);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  margin-bottom: 10px;
}
.pro-star { color: #facc15; font-size: 0.85rem; }
.pro-headline {
  margin: 0 0 6px;
  font-size: 1.5rem;
  line-height: 1.18;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(135deg, #fff, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
}
.pro-subhead {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.reward-offer-compact {
  margin: 4px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(94,234,212,0.06);
  border: 1px solid rgba(94,234,212,0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.reward-offer-compact > div { flex: 1; min-width: 0; }
.reward-offer-compact span,
.reward-offer-compact strong,
.reward-offer-compact small { display: block; }
.reward-offer-compact span {
  color: var(--accent);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.reward-offer-compact strong {
  margin-top: 2px;
  font-size: 0.92rem;
  color: #fff;
}
.reward-btn-compact {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid rgba(94,234,212,0.4);
  background: rgba(94,234,212,0.12);
  color: var(--accent);
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  white-space: nowrap;
}
.reward-btn-compact:hover { background: rgba(94,234,212,0.2); }

.pro-features-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 2px;
}
.pro-feat {
  text-align: center;
  padding: 8px 4px;
  border-radius: 9px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 0.72rem;
  font-weight: 800;
  color: #cbd5e1;
}
.pro-feat span { display: block; margin-top: 2px; font-size: 0.66rem; color: var(--muted); }

.pro-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 2px;
}
.pro-plan-card {
  position: relative;
  padding: 16px 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.1);
  cursor: pointer;
  text-align: left;
  color: #fff;
  font-family: inherit;
  transition: transform 0.15s, border-color 0.15s, background 0.15s;
}
.pro-plan-card:hover {
  transform: translateY(-2px);
  border-color: rgba(167,139,250,0.5);
}
.pro-plan-card.featured {
  background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(244,114,182,0.16));
  border-color: rgba(167,139,250,0.6);
  box-shadow: 0 12px 28px rgba(167,139,250,0.18);
}
.pro-plan-save {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #facc15, #fb923c);
  color: #1a1610;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}
/* Free-trial banner above both pricing cards (replaces per-card badge so it
   doesn't collide with SAVE 50% and so users see trial applies to either plan) */
/* Monthly "3 days free" card — teal-accent featured treatment so it sits
   alongside the violet-accent annual without one overpowering the other. */
.pro-plan-card.featured-trial {
  background: linear-gradient(135deg, rgba(94,234,212,0.16), rgba(96,165,250,0.14));
  border-color: rgba(94,234,212,0.55);
  box-shadow: 0 12px 28px rgba(94,234,212,0.20);
}
.pro-plan-card.featured-trial .pro-plan-name { color: #5eead4; }
.pro-plan-trial-pill {
  position: absolute;
  top: -9px;
  right: 10px;
  padding: 3px 9px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5eead4, #60a5fa);
  color: #0a0f1c;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(94,234,212,0.35);
  white-space: nowrap;
}

.pro-trial-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 10px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(94,234,212,0.16), rgba(96,165,250,0.16));
  border: 1px solid rgba(94,234,212,0.35);
  color: #5eead4;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: center;
}
.pro-trial-banner-icon { font-size: 1rem; }
.pro-trial-banner-text { color: #ecfdf5; }
.pro-plan-name {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.pro-plan-card.featured .pro-plan-name { color: #f472b6; }
.pro-plan-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.pro-price-big {
  font-size: 1.55rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.02em;
}
.pro-price-period {
  font-size: 0.78rem;
  color: var(--muted);
  font-weight: 700;
}
.pro-plan-equiv {
  margin-top: 6px;
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.3;
}

.pro-trust-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  padding: 8px 0 2px;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 700;
}
.pro-trust-row > span { display: inline-flex; align-items: center; gap: 4px; }

.pro-bottom-actions {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding-top: 4px;
}
.pro-link-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  text-decoration: underline;
  text-decoration-color: rgba(167,139,250,0.4);
  text-underline-offset: 3px;
}
.pro-link-btn:hover { color: #fff; background: rgba(255,255,255,0.04); }

@media (max-width: 480px) {
  .pro-modal-v2 form { padding: 20px 16px 16px; }
  .pro-headline { font-size: 1.25rem; }
  .pro-features-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ============== Onboarding v4 — Image-based marketing slides ============== */
.ob-v4 {
  width: min(380px, calc(100vw - 24px));
  max-height: 92dvh;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
  background: #0a0f1c;
}
.ob-v4 form {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.ob-v4 .ob-skip-corner {
  position: absolute;
  top: 12px;
  right: 14px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  border: none;
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 30;
}
.ob-v4 .ob-skip-corner:hover { background: rgba(0,0,0,0.65); }

/* Onboarding prev/next arrows */
.ob-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  z-index: 31;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
.ob-arrow:hover { background: rgba(0,0,0,0.7); }
.ob-arrow:active { transform: translateY(-50%) scale(0.92); }
.ob-arrow.hidden { opacity: 0; pointer-events: none; }
.ob-arrow-prev { left: 10px; }
.ob-arrow-next { right: 10px; }
@media (max-width: 480px) {
  .ob-arrow { width: 40px; height: 40px; font-size: 1.4rem; }
  .ob-arrow-prev { left: 6px; }
  .ob-arrow-next { right: 6px; }
}

/* v4 modal — anchor Next button at bottom, lock image frame size so the
   Next button doesn't jump up or down between slides regardless of whether
   the slide has language buttons / CTA / nothing below the image. */
.ob-v4 > form {
  display: flex;
  flex-direction: column;
  min-height: min(680px, 92dvh);
}

.ob-v4 .onboarding-slide {
  display: none;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.ob-v4 .onboarding-slide.active {
  display: flex;
  animation: ob4FadeUp 0.34s ease-out;
}
@keyframes ob4FadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fixed-shape image frame — every slide gets the SAME illustration footprint
   so the Continue button lives in the same place every time. */
.ob-image-frame {
  width: 100%;
  background: #0a0f1c;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  max-height: 48dvh;
  flex: 0 0 auto;
}
.ob-image-frame img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
}

/* Dots + Continue are pinned to the bottom area — auto-margin pushes them down. */
.ob-v4 .ob-dots { margin-top: auto; }

/* Make sure the modal itself scrolls if content exceeds the screen */
.ob-v4 {
  max-height: 95dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.ob-v4 .language-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 18px 4px;
}
.ob-v4 .language-button {
  padding: 11px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.92rem;
}
.ob-v4 .language-button:hover {
  background: rgba(94,234,212,0.10);
  border-color: var(--accent);
}

.ob-v4 .ob-cta-try {
  margin: 14px 18px 0;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #0a0f1c;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(244,114,182,0.28);
}
.ob-v4 .ob-cta-try:hover { transform: translateY(-1px); }

.ob-v4 .ob-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 12px 0 6px;
}
.ob-v4 .ob-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: width 0.2s, background 0.2s;
}
.ob-v4 .ob-dot.active {
  width: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, #5eead4, #f472b6);
}

.ob-v4 .onboarding-actions {
  padding: 0 18px 16px;
}
.ob-v4 .ob-next-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 800;
  font-size: 0.98rem;
  cursor: pointer;
}
.ob-v4 .ob-next-btn:hover { background: rgba(255,255,255,0.14); }

@media (max-width: 480px) {
  .ob-image-frame { aspect-ratio: 1 / 1; max-height: 42dvh; }
}

/* ============================================================
   Auth modal + account menu (Aurora theme)
   ============================================================ */
.auth-modal {
  width: min(420px, calc(100vw - 24px));
  max-height: 92dvh;
  border: none;
  border-radius: 26px;
  padding: 0;
  background: linear-gradient(165deg, #0a0f1c 0%, #131b30 50%, #0a0f1c 100%);
  color: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  /* v245 — was overflow:hidden, which clipped the submit CTA on short
     viewports (mobile landscape, small Android with browser chrome eating
     vertical space). Move the scroll to the form so the rounded modal
     corners stay but no content is ever cut off.
     v246 — DO NOT set display here. <dialog> defaults to display:none
     when closed and display:block when open(). Setting display:flex
     unconditionally renders the modal as a regular block in the page
     even when .open is false ("Tekrar hoş geldin sayfa en altta
     görünüyor" bug). Scope to [open] below instead. */
  overflow: hidden;
}
/* v246 — only style as flex when the dialog is actually open via
   showModal(). Keeps native open/closed visibility logic intact. */
.auth-modal[open] {
  display: flex;
  flex-direction: column;
}
.auth-modal::backdrop {
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.85), rgba(0,0,0,0.94));
  backdrop-filter: blur(10px);
}
.auth-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px 28px;
  margin: 0;
  /* v245 — scroll lives here so the "Sign in / Create account" CTA never
     gets clipped at the viewport bottom on small phones. min-height:0
     lets flex children actually shrink so the scroll engages. */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* v245 — the primary CTA must always be reachable. Never compress it
   under the social/email/password block above. */
.auth-form .auth-cta { flex-shrink: 0; }
.auth-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.auth-hero { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; text-align: center; }
.auth-orb {
  width: 64px; height: 64px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(94,234,212,0.6), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(244,114,182,0.6), transparent 60%),
    linear-gradient(135deg, #1e293b, #0f172a);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 14px 38px rgba(94,234,212,0.30);
}
.auth-orb span { font-size: 32px; }
.auth-title {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ffffff, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-sub { margin: 0; font-size: 0.88rem; color: rgba(255,255,255,0.7); line-height: 1.45; }

.auth-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
.auth-field > span {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.auth-field input {
  appearance: none;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-size: 0.96rem;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  box-sizing: border-box;
}
.auth-field input:focus {
  border-color: hsl(var(--violet, 268 56% 62%));
  background: hsl(var(--violet, 268 56% 62%) / 0.06);
  box-shadow: 0 0 0 3px hsl(var(--violet, 268 56% 62%) / 0.20);
}
.auth-error {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.30);
  color: #fca5a5;
  font-size: 0.85rem;
  font-weight: 600;
}
.auth-notice {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(94,234,212,0.10);
  border: 1px solid rgba(94,234,212,0.30);
  color: #5eead4;
  font-size: 0.85rem;
  font-weight: 600;
}

.auth-cta {
  position: relative;
  margin-top: 6px;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #0a0f1c;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 32px rgba(244,114,182,0.32);
  overflow: hidden;
}
.auth-cta:disabled { opacity: 0.6; cursor: progress; }
.auth-cta::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: translateX(-100%);
  animation: obShine 2.6s ease-in-out infinite;
}

.auth-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin-top: 4px;
  font-size: 0.84rem;
}
.auth-link {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font: inherit;
  padding: 4px 6px;
  border-radius: 6px;
}
.auth-link strong { color: #5eead4; font-weight: 700; }
.auth-link:hover { color: #fff; background: rgba(255,255,255,0.06); }
.auth-link-sep { color: rgba(255,255,255,0.3); }

.auth-legal {
  margin: 4px 0 0;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  line-height: 1.5;
}

/* Header auth trigger + dropdown menu */
/* Account pill — Aurora gradient outline + label so the profile action stands
   out next to the Pro CTA and "Sign in" is obvious without hovering for tooltip. */
.account-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(142,99,215,0.55);
  background: linear-gradient(135deg, rgba(94,234,212,0.18), rgba(142,99,215,0.22), rgba(223,109,198,0.18));
  color: #ffffff;
  font: 700 0.88rem/1 var(--font-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
  z-index: 5;
  box-shadow: 0 6px 20px rgba(142, 99, 215, 0.20);
  flex-shrink: 0;
}
.account-pill .auth-icon-anon {
  width: 18px;
  height: 18px;
  display: block;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.account-pill-label {
  display: inline-block;
  letter-spacing: 0.01em;
}
.account-pill:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, rgba(94,234,212,0.22), rgba(142,99,215,0.22), rgba(223,109,198,0.22));
  border-color: rgba(223,109,198,0.65);
}
/* When signed in we hide the icon+label and show a clean avatar circle. JS sets
   data-signed-in on the pill so we can swap modes purely via CSS. */
.account-pill[data-signed-in="true"] {
  padding: 0;
  width: 38px; height: 38px;
  border: none;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(142, 99, 215, 0.32);
}
.account-pill[data-signed-in="true"] .auth-icon-anon,
.account-pill[data-signed-in="true"] .account-pill-label {
  display: none;
}

/* On phones we have very little horizontal room — collapse the pill to an
   icon-only chip so it stays visible and tappable next to the Pro button. */
@media (max-width: 540px) {
  .account-pill {
    height: 36px;
    width: 36px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .account-pill .account-pill-label { display: none; }
  .account-pill .auth-icon-anon { width: 20px; height: 20px; }
}

.auth-trigger {
  position: relative;
  overflow: hidden;
}
/* When the user is signed in we hide the anon icon and grow the avatar to fully
   cover the button so it reads as a clean circular profile chip, not a small
   floating bubble. */
.auth-trigger .auth-icon-anon { width: 18px; height: 18px; }
.auth-avatar {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: linear-gradient(135deg, #5eead4 0%, #8e63d7 50%, #df6dc6 100%);
  color: #0a0f1c;
  font-weight: 900;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.auth-menu {
  position: absolute;
  top: 60px;
  right: 12px;
  z-index: 80;
  width: 260px;
  padding: 8px;
  border-radius: 16px;
  background: rgba(15,23,42,0.96);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  backdrop-filter: blur(10px);
}
.auth-menu-head {
  display: flex; gap: 12px; align-items: center;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  margin-bottom: 6px;
}
.auth-menu-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #0a0f1c;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.auth-menu-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.auth-menu-info strong {
  font-size: 0.86rem; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auth-menu-pro {
  font-size: 0.72rem;
  font-weight: 800;
  background: linear-gradient(90deg, #5eead4, #f472b6);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-menu-item {
  display: block;
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.85);
  text-align: left;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.auth-menu-item:hover { background: rgba(255,255,255,0.06); color: #fff; }

/* ============================================================
   Onboarding v6 — 5 dedicated slides, each with its own layout
   ============================================================ */
.ob-v6 {
  --ob-aurora: linear-gradient(135deg, #8e63d7 0%, #df6dc6 100%);
  --ob-aurora-soft: linear-gradient(135deg, rgba(142,99,215,0.20), rgba(223,109,198,0.20));
}
.ob-v6 {
  width: min(440px, calc(100vw - 24px));
  max-width: 460px;
  max-height: 92dvh;
  border-radius: 28px;
  padding: 0;
  border: none;
  overflow: hidden;
  background: linear-gradient(165deg, #0a0f1c 0%, #111827 50%, #0a0f1c 100%);
  color: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  position: relative;
}
.ob-v6::backdrop {
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.85), rgba(0,0,0,0.94));
  backdrop-filter: blur(10px);
}
.ob-v6 > form {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Let the form grow to the modal's content height — but cap it at the modal's
     max-height (92dvh) so the body scrolls instead of clipping the orb/CTA. */
  min-height: 0;
  max-height: 92dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  margin: 0;
}
/* Desktop: give the modal a bit more breathing room so the pricing comparison
   doesn't feel cramped and the pro CTA isn't visually cropped. */
@media (min-width: 768px) {
  .ob-v6 {
    width: min(520px, calc(100vw - 48px));
    max-width: 540px;
    border-radius: 32px;
  }
  .ob-v6 > form {
    /* Reserve enough vertical room for orb + content + CTA on a typical
       1080p laptop viewport. */
    min-height: min(620px, 88dvh);
  }
}

.ob-v6 .ob-skip-corner {
  position: absolute;
  top: 14px; right: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 30;
  letter-spacing: 0.04em;
}
.ob-v6 .ob-skip-corner:hover { color: #fff; background: rgba(255,255,255,0.14); }

.ob-v6 .ob-arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 25;
  display: flex; align-items: center; justify-content: center;
}
.ob-v6 .ob-arrow:hover { background: rgba(255,255,255,0.18); }
.ob-v6 .ob-arrow-prev { left: 10px; }
.ob-v6 .ob-arrow-next { right: 10px; }
.ob-v6 .ob-arrow.hidden { display: none; }

.ob-v6 .onboarding-slide {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.ob-v6 .onboarding-slide.active {
  display: flex;
  animation: ob6FadeUp 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ob6FadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ob-v6 .ob-eyebrow {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ob-aurora);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0 0 8px;
}
.ob-v6 .ob-text {
  padding: 20px 26px 6px;
  text-align: center;
}
.ob-v6 .ob-text.ob-text-tight { padding-top: 4px; }
.ob-v6 .ob-text h3 {
  margin: 0 0 10px;
  font-size: 1.46rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.18;
  background: linear-gradient(135deg, #ffffff, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ob-v6 .ob-text p,
.ob-v6 .ob-text .ob-sub {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.74);
}

.ob-v6 .ob-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 18px 0 10px;
  margin-top: auto;
}
.ob-v6 .ob-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: width 0.22s, background 0.22s;
}
.ob-v6 .ob-dot.active {
  width: 26px;
  border-radius: 4px;
  background: var(--ob-aurora);
}

.ob-v6 .onboarding-actions { padding: 0 22px 20px; }
.ob-v6 .ob-next-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.ob-v6 .ob-next-btn:hover { background: rgba(255,255,255,0.14); }

.ob-v6 .ob-cta-try {
  margin: 14px 22px 0;
  padding: 16px;
  border-radius: 14px;
  border: none;
  background: var(--ob-aurora);
  color: #ffffff;
  font-weight: 900;
  font-size: 1.04rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 36px rgba(142,99,215,0.40);
  position: relative;
  overflow: hidden;
}
.ob-v6 .ob-cta-try::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: translateX(-100%);
  animation: obShine 2.6s ease-in-out infinite;
}
@keyframes obShine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* -----------------------------------------------------------
   SLIDE 0 — Aurora brand mark (replaces the bunny orb)
   Inherits SellerFish-family vibe: violet → pink gradient,
   floating blurred blobs, faint grid overlay, clean wordmark.
   ----------------------------------------------------------- */
.ob-slide-lang { justify-content: flex-start; }
.ob-lang-hero {
  position: relative;
  padding: 44px 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  overflow: hidden;
}
.ob-aurora-stage {
  position: absolute;
  inset: -20px 0 -20px;
  pointer-events: none;
  overflow: hidden;
}
.ob-aurora-blob {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
}
.ob-aurora-blob-a {
  top: -60px; left: -40px;
  background: #8e63d7;
  animation: obAuroraA 12s ease-in-out infinite;
}
.ob-aurora-blob-b {
  top: -20px; right: -50px;
  background: #df6dc6;
  animation: obAuroraB 14s ease-in-out infinite;
}
.ob-aurora-blob-c {
  bottom: -80px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 160px;
  background: #5eead4;
  opacity: 0.30;
  animation: obAuroraC 16s ease-in-out infinite;
}
@keyframes obAuroraA {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(30px, 20px) scale(1.08); }
}
@keyframes obAuroraB {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-25px, 15px) scale(1.05); }
}
@keyframes obAuroraC {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50%      { transform: translateX(-46%) scale(1.10); }
}
.ob-aurora-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
}
.ob-brand-mark {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  animation: obBrandIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes obBrandIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ob-brand-glyph {
  width: 64px; height: 64px;
  filter: drop-shadow(0 12px 32px rgba(142,99,215,0.55));
  animation: obBrandFloat 5s ease-in-out infinite;
}
@keyframes obBrandFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.ob-brand-word {
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  background: linear-gradient(135deg, #ffffff 0%, #df6dc6 60%, #8e63d7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ob-brand-tag {
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,0.55);
}

.ob-lang-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 22px 8px;
}
.ob-lang-grid > :nth-child(5) { grid-column: 1 / -1; }
.ob-v6 .language-button {
  padding: 13px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.94rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ob-v6 .language-button .ob-flag { font-size: 1.2rem; line-height: 1; }
.ob-v6 .language-button:hover {
  transform: translateY(-1px);
  background: rgba(94,234,212,0.12);
  border-color: var(--accent);
}
.ob-v6 .language-button.active {
  background: linear-gradient(135deg, rgba(94,234,212,0.20), rgba(244,114,182,0.20));
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(94,234,212,0.30) inset;
}

/* -----------------------------------------------------------
   SLIDE 1 — Hero: animated signature on document
   ----------------------------------------------------------- */
.ob-hero-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 8;
  max-height: 44dvh;
  flex: 0 0 auto;
  padding: 18px 18px 0;
  box-sizing: border-box;
  overflow: hidden;
}
.ob-hero-bg-blob {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.45;
  z-index: 0;
}
.ob-hero-bg-blob-a { top: -40px; left: -30px; background: #5eead4; animation: obBlobA 7s ease-in-out infinite; }
.ob-hero-bg-blob-b { bottom: -50px; right: -40px; background: #f472b6; animation: obBlobB 8s ease-in-out infinite; }
@keyframes obBlobA { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(20px, 15px); } }
@keyframes obBlobB { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-25px, -10px); } }
.ob-hero-svg { position: relative; width: 100%; height: 100%; z-index: 1; }
.ob-hero-stroke {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: obHeroDraw 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
@keyframes obHeroDraw { to { stroke-dashoffset: 0; } }
.ob-hero-pen {
  transform-origin: center;
  animation: obHeroPen 1.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s forwards;
}
@keyframes obHeroPen {
  0%   { transform: translate(-150px, -10px); opacity: 0; }
  15%  { opacity: 1; }
  85%  { transform: translate(0, 0); opacity: 1; }
  100% { transform: translate(20px, -16px); opacity: 0; }
}
.ob-spark { animation: obSpark 1.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.ob-spark-2 { animation-delay: 0.5s; }
.ob-spark-3 { animation-delay: 1.0s; }
@keyframes obSpark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1.3); }
}
.ob-doc-back {
  animation: obDocBackFloat 4.5s ease-in-out infinite;
  transform-box: fill-box;
}
@keyframes obDocBackFloat {
  0%, 100% { transform: translate(64px, 36px) rotate(-6deg); }
  50%      { transform: translate(60px, 32px) rotate(-7deg); }
}

/* -----------------------------------------------------------
   SLIDE 2 — Tools marquee
   ----------------------------------------------------------- */
.ob-tools-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 7;
  max-height: 38dvh;
  overflow: hidden;
  padding: 24px 0 8px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.ob-tools-row { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.ob-tools-track {
  display: flex;
  gap: 10px;
  width: max-content;
  will-change: transform;
}
.ob-tools-row-a .ob-tools-track { animation: obToolsScrollA 28s linear infinite; }
.ob-tools-row-b .ob-tools-track { animation: obToolsScrollB 32s linear infinite; }
.ob-tools-row-c .ob-tools-track { animation: obToolsScrollA 36s linear infinite; }
@keyframes obToolsScrollA {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes obToolsScrollB {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.ob-toolpill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(94,234,212,0.10), rgba(244,114,182,0.10));
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}
.ob-toolpill b { font-size: 1.1rem; font-weight: normal; }
.ob-tools-fade {
  position: absolute;
  top: 0; bottom: 0;
  width: 40px;
  pointer-events: none;
  z-index: 2;
}
.ob-tools-fade-l { left: 0; background: linear-gradient(90deg, #0a0f1c, transparent); }
.ob-tools-fade-r { right: 0; background: linear-gradient(-90deg, #0a0f1c, transparent); }

/* -----------------------------------------------------------
   SLIDE 3 — Privacy phone + shield
   ----------------------------------------------------------- */
.ob-priv-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 7;
  max-height: 42dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
}
.ob-priv-phone {
  position: relative;
  width: 150px; height: 230px;
  border-radius: 24px;
  background: linear-gradient(170deg, #1e293b, #0f172a);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  overflow: hidden;
}
.ob-priv-phone-screen {
  position: absolute;
  inset: 10px;
  border-radius: 16px;
  background: linear-gradient(135deg, #0a0f1c, #111827);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ob-priv-phone-notch {
  position: absolute;
  top: 6px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 6px;
  border-radius: 4px;
  background: #000;
}
.ob-priv-phone-home {
  position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 48px; height: 4px;
  border-radius: 2px;
  background: rgba(255,255,255,0.2);
}
.ob-priv-shield {
  width: 76px; height: 84px;
  animation: obShieldPulse 2.2s ease-in-out infinite;
  z-index: 2;
}
.ob-priv-shield svg { width: 100%; height: 100%; }
@keyframes obShieldPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(94,234,212,0)); }
  50%      { transform: scale(1.08); filter: drop-shadow(0 0 16px rgba(94,234,212,0.7)); }
}
.ob-priv-file {
  position: absolute;
  font-size: 28px;
  opacity: 0;
}
.ob-priv-file-1 { top: 30px; left: 26px; animation: obPrivFile 3.5s ease-in-out infinite; }
.ob-priv-file-2 { top: 30px; right: 26px; animation: obPrivFile 3.5s ease-in-out 0.6s infinite; }
.ob-priv-file-3 { bottom: 36px; left: 50%; transform: translateX(-50%); animation: obPrivFile 3.5s ease-in-out 1.2s infinite; }
@keyframes obPrivFile {
  0%, 100% { opacity: 0; transform: translateY(0) scale(0.8); }
  30%, 70% { opacity: 1; transform: translateY(0) scale(1); }
}
.ob-priv-cloud {
  position: absolute;
  top: 20px; right: 14px;
  width: 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ob-priv-cloud svg { width: 56px; height: 42px; }
.ob-priv-cloud-label {
  font-size: 0.66rem;
  font-weight: 800;
  color: #ef4444;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------
   SLIDE 4 — Pro pricing comparison (HTML cards, no SVG text)
   ----------------------------------------------------------- */
.ob-pro-stage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 24px 22px 6px;
}
.ob-pro-card {
  position: relative;
  border-radius: 18px;
  padding: 18px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.ob-pro-card-free { background: rgba(255,255,255,0.04); }
.ob-pro-card-pro {
  background: linear-gradient(160deg, rgba(94,234,212,0.18), rgba(244,114,182,0.18));
  border: 1px solid rgba(94,234,212,0.45);
  box-shadow: 0 16px 36px rgba(244,114,182,0.18);
}
.ob-pro-best {
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #0a0f1c;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ob-pro-card-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ob-pro-card-name {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
}
.ob-pro-card-pro .ob-pro-card-name { color: #fff; }
.ob-pro-card-trial {
  padding: 3px 7px;
  border-radius: 6px;
  background: rgba(15,23,42,0.5);
  color: #5eead4;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.ob-pro-card-price { display: flex; align-items: baseline; gap: 2px; }
.ob-pro-card-amount {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #fff;
}
.ob-pro-card-period { font-size: 0.84rem; color: rgba(255,255,255,0.6); font-weight: 600; }
.ob-pro-card-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
}
.ob-pro-card-list li { display: flex; gap: 6px; align-items: flex-start; line-height: 1.35; }
.ob-pro-card-list li::first-letter { color: #5eead4; font-weight: 900; }

@media (max-width: 380px) {
  .ob-pro-stage { gap: 8px; padding: 22px 16px 6px; }
  .ob-pro-card { padding: 16px 11px 14px; }
  .ob-pro-card-amount { font-size: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ob-v6 *,
  .ob-v6 *::before,
  .ob-v6 *::after {
    animation: none !important;
    transition: none !important;
  }
  .ob-hero-stroke { stroke-dashoffset: 0; }
  .ob-priv-file { opacity: 1; }
}

/* ============================================================
   Onboarding v5 — animated SVG illustrations (LEGACY, replaced by v6)
   ============================================================ */
.ob-v5 {
  width: min(440px, calc(100vw - 24px));
  max-width: 460px;
  max-height: 96dvh;
  border-radius: 26px;
  padding: 0;
  border: none;
  overflow: hidden;
  background: linear-gradient(165deg, #0a0f1c 0%, #111827 50%, #0a0f1c 100%);
  color: #fff;
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
}
.ob-v5::backdrop {
  background: radial-gradient(ellipse at center, rgba(15,23,42,0.85), rgba(0,0,0,0.92));
  backdrop-filter: blur(10px);
}
.ob-v5 > form {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: min(640px, 88dvh);
  padding: 0;
  margin: 0;
}
.ob-v5 .ob-skip-corner {
  position: absolute;
  top: 14px;
  right: 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 999px;
  z-index: 30;
  letter-spacing: 0.04em;
}
.ob-v5 .ob-skip-corner:hover { color: #fff; background: rgba(255,255,255,0.12); }
.ob-v5 .ob-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 25;
  display: flex; align-items: center; justify-content: center;
}
.ob-v5 .ob-arrow:hover { background: rgba(255,255,255,0.16); }
.ob-v5 .ob-arrow-prev { left: 10px; }
.ob-v5 .ob-arrow-next { right: 10px; }
.ob-v5 .ob-arrow.hidden { display: none; }

.ob-v5 .onboarding-slide {
  display: none;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.ob-v5 .onboarding-slide.active {
  display: flex;
  animation: ob5FadeUp 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes ob5FadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ob-v5 .ob-illu {
  width: 100%;
  aspect-ratio: 9 / 7;
  max-height: 44dvh;
  background: transparent;
  flex: 0 0 auto;
  padding: 14px 18px 0;
  box-sizing: border-box;
}
.ob-v5 .ob-illu svg { width: 100%; height: 100%; display: block; }

.ob-v5 .ob-text {
  padding: 18px 22px 4px;
  text-align: center;
}
.ob-v5 .ob-text h3 {
  margin: 0 0 8px;
  font-size: 1.36rem;
  font-weight: 900;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #ffffff, #cbd5e1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ob-v5 .ob-text p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.72);
}

.ob-v5 .language-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 14px 22px 4px;
}
.ob-v5 .language-button {
  padding: 10px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font-size: 0.88rem;
  transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ob-v5 .language-button:hover {
  transform: translateY(-1px);
  background: rgba(94,234,212,0.12);
  border-color: var(--accent);
}
.ob-v5 .language-button.active {
  background: linear-gradient(135deg, rgba(94,234,212,0.20), rgba(244,114,182,0.20));
  border-color: var(--accent);
}

.ob-v5 .ob-cta-try {
  margin: 12px 22px 0;
  padding: 14px;
  border-radius: 14px;
  border: none;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #0a0f1c;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 32px rgba(244,114,182,0.32);
}
.ob-v5 .ob-cta-try:hover { transform: translateY(-1px); }

.ob-v5 .ob-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 16px 0 8px;
  margin-top: auto;
}
.ob-v5 .ob-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: width 0.2s, background 0.2s;
}
.ob-v5 .ob-dot.active {
  width: 24px;
  border-radius: 4px;
  background: linear-gradient(90deg, #5eead4, #f472b6);
}

.ob-v5 .onboarding-actions { padding: 0 22px 20px; }
.ob-v5 .ob-next-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.ob-v5 .ob-next-btn:hover { background: rgba(255,255,255,0.14); }

/* --- Slide animations --- */
/* Slide 0 — signature stroke draws across, then pen lifts; sparkles twinkle */
.ob-illu-sign .ob-sign-stroke {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: obDraw 1.6s ease-out 0.2s forwards;
}
.ob-illu-sign .ob-sign-pen {
  animation: obPenMove 1.6s ease-out 0.2s forwards;
  transform-origin: center;
}
@keyframes obDraw { to { stroke-dashoffset: 0; } }
@keyframes obPenMove {
  0%   { transform: translate(-118px, -2px) rotate(0deg); }
  60%  { transform: translate(0, 0) rotate(0deg); }
  85%  { transform: translate(0, 0) rotate(0deg); }
  100% { transform: translate(2px, -10px) rotate(10deg); }
}
.ob-spark {
  animation: obSparkle 1.6s ease-in-out infinite;
  transform-origin: center;
}
.ob-spark-2 { animation-delay: 0.8s; }
@keyframes obSparkle {
  0%, 100% { opacity: 0; transform: scale(0.6); }
  50%      { opacity: 1; transform: scale(1.2); }
}

/* Slide 1 — tool tiles cascade in */
.ob-illu-tools .ob-tile {
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  transform-origin: center;
  transform-box: fill-box;
  animation: obTileIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(var(--i, 0) * 0.06s + 0.1s);
}
@keyframes obTileIn {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Slide 2 — lock pulses; cloud-X stays crossed out */
.ob-illu-privacy .ob-lock {
  animation: obLockPulse 1.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes obLockPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.10); }
}

/* Slide 3 — Pro card subtle floating + sparkle burst */
.ob-illu-pro .ob-procard-pro {
  animation: obFloat 3.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes obFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.ob-illu-pro .ob-spark-burst circle {
  animation: obSparkle 1.4s ease-in-out infinite;
}
.ob-illu-pro .ob-spark-burst circle:nth-child(2) { animation-delay: 0.5s; }
.ob-illu-pro .ob-spark-burst circle:nth-child(3) { animation-delay: 1s; }

@media (max-width: 480px) {
  .ob-v5 .ob-illu { max-height: 38dvh; }
  .ob-v5 .ob-text h3 { font-size: 1.22rem; }
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  .ob-v5 .onboarding-slide.active,
  .ob-illu-sign .ob-sign-stroke,
  .ob-illu-sign .ob-sign-pen,
  .ob-spark,
  .ob-illu-tools .ob-tile,
  .ob-illu-privacy .ob-lock,
  .ob-illu-pro .ob-procard-pro,
  .ob-illu-pro .ob-spark-burst circle {
    animation: none !important;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}

/* ============== Onboarding v3 — Hero SVG slides (legacy, no longer used in v4) ============== */
.ob-v3 {
  width: min(440px, calc(100vw - 24px));
  max-height: 92dvh;
  border-radius: 22px;
  padding: 0;
  overflow: hidden;
}
.ob-v3 form {
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}
.ob-v3 .ob-skip-corner {
  position: absolute;
  top: 14px;
  right: 16px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
  z-index: 10;
}
.ob-v3 .ob-skip-corner:hover { color: #fff; background: rgba(255,255,255,0.06); }

.ob-v3 .onboarding-slide {
  display: none;
  flex-direction: column;
  gap: 10px;
}
.ob-v3 .onboarding-slide.active {
  display: flex;
  animation: obFadeUp 0.36s ease-out;
}
@keyframes obFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ob-hero-illu {
  width: 100%;
  aspect-ratio: 360/240;
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 20%, rgba(94,234,212,0.20), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(244,114,182,0.18), transparent 50%),
    linear-gradient(135deg, rgba(15,23,42,0.85), rgba(30,41,59,0.85));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 4px;
}
.ob-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Animated signature stroke */
.ob-sig-stroke {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: obSigDraw 1.6s ease-out 0.3s forwards;
}
@keyframes obSigDraw {
  to { stroke-dashoffset: 0; }
}
.onboarding-slide.active .ob-sig-stroke {
  animation: obSigDraw 1.6s ease-out 0.3s forwards;
}

.ob-v3 .eyebrow {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 800;
}
.ob-v3 h3 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.18;
  font-weight: 800;
  color: #fff;
}
.ob-v3 .onboarding-slide > p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.ob-v3 .language-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.ob-v3 .language-button {
  padding: 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  font-size: 0.92rem;
}
.ob-v3 .language-button:hover {
  background: rgba(94,234,212,0.10);
  border-color: var(--accent);
}

.ob-cta-try {
  margin-top: 6px;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #5eead4, #f472b6);
  color: #0a0f1c;
  font-weight: 900;
  font-size: 1rem;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(244,114,182,0.28);
  transition: transform 0.15s;
}
.ob-cta-try:hover { transform: translateY(-1px); }
.ob-cta-try:active { transform: translateY(0); }

.ob-v3 .ob-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 4px;
}
.ob-v3 .ob-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transition: width 0.2s, background 0.2s;
}
.ob-v3 .ob-dot.active {
  width: 22px;
  border-radius: 4px;
  background: linear-gradient(90deg, #5eead4, #f472b6);
}

.ob-v3 .onboarding-actions {
  margin-top: 4px;
}
.ob-v3 .ob-next-btn {
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.08);
  color: #fff;
  font-weight: 800;
  font-size: 0.98rem;
  cursor: pointer;
  transition: background 0.15s;
}
.ob-v3 .ob-next-btn:hover { background: rgba(255,255,255,0.14); }

@media (max-width: 480px) {
  .ob-v3 form { padding: 22px 18px 18px; }
  .ob-v3 h3 { font-size: 1.32rem; }
}

/* Pulse attention — drawn to Continue button after language pick */
.pulse-attention {
  animation: pulseAttention 1s ease-in-out 3;
  position: relative;
  z-index: 10;
}
@keyframes pulseAttention {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.7); }
  50%      { transform: scale(1.06); box-shadow: 0 0 0 18px rgba(94, 234, 212, 0); }
}

/* === Topbar final layout — Pro on same row as Credits, info+theme floating below Pro === */
.topbar-actions {
  align-items: flex-start !important;
}
.topbar-pro-stack {
  align-items: flex-end !important;
}
.topbar-pro-stack #proButton {
  align-self: flex-end;
}
.topbar-mini-row {
  margin-top: 2px !important;
  gap: 0 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  display: inline-flex !important;
}
.topbar-mini-row .icon-button.mini {
  border-radius: 0 !important;
  border: none !important;
  background: transparent !important;
  width: 28px !important;
  height: 28px !important;
}
.topbar-mini-row .icon-button.mini + .icon-button.mini {
  border-left: 1px solid rgba(255,255,255,0.06) !important;
}

/* === Aurora promo bar — premium animated gradient === */
.app-promo-aurora {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f0a1f 0%, #1a0d2e 50%, #2d1b3d 100%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 32px rgba(94,234,212,0.08), 0 4px 16px rgba(244,114,182,0.06);
  animation: auroraSubtleFloat 8s ease-in-out infinite;
}
.aurora-glow {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(94,234,212,0.35) 0%, transparent 35%),
    radial-gradient(circle at 70% 60%, rgba(244,114,182,0.30) 0%, transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(168,85,247,0.28) 0%, transparent 35%);
  filter: blur(40px);
  animation: auroraSwirl 14s ease-in-out infinite;
  z-index: 0;
}
.app-promo-aurora > * {
  position: relative;
  z-index: 1;
}
.app-promo-aurora .app-promo-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
}
.app-promo-aurora .app-promo-text {
  flex: 1;
  min-width: 0;
}
.app-promo-aurora .app-promo-text strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-promo-aurora .app-promo-text span {
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.app-promo-aurora .app-promo-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.aurora-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #5eead4 0%, #a855f7 50%, #f472b6 100%);
  background-size: 200% 200%;
  color: #0a0f1c !important;
  font-weight: 800;
  font-size: 0.82rem;
  padding: 9px 16px;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(168,85,247,0.35);
  animation: auroraShimmer 4s ease-in-out infinite, auroraPulse 2.4s ease-in-out infinite;
  transition: transform 0.18s ease;
  white-space: nowrap;
}
.aurora-cta:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px rgba(168,85,247,0.5);
}
.aurora-cta svg { color: #0a0f1c; }
.app-promo-aurora .promo-close {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
}
.app-promo-aurora .promo-close:hover {
  color: #fff;
  background: rgba(255,255,255,0.1);
}

@keyframes auroraSwirl {
  0%, 100% { transform: rotate(0deg) scale(1); }
  33% { transform: rotate(120deg) scale(1.1); }
  66% { transform: rotate(240deg) scale(0.95); }
}
@keyframes auroraShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes auroraPulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(168,85,247,0.35); }
  50%      { box-shadow: 0 4px 22px rgba(168,85,247,0.55), 0 0 0 4px rgba(168,85,247,0.08); }
}
@keyframes auroraSubtleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* Mobile */
@media (max-width: 540px) {
  .app-promo-aurora { padding: 10px 12px; gap: 10px; border-radius: 14px; }
  .app-promo-aurora .app-promo-icon { width: 36px; height: 36px; }
  .app-promo-aurora .app-promo-text strong { font-size: 0.82rem; }
  .app-promo-aurora .app-promo-text span { font-size: 0.7rem; }
  .aurora-cta { padding: 8px 12px; font-size: 0.75rem; }
  .aurora-cta span { display: none; } /* Mobile: just icon */
}


/* Cloud-synced file badge in My Files */
.mfp-cloud-badge{
  margin-left:8px;display:inline-flex;align-items:center;justify-content:center;
  font-size:0.78rem;line-height:1;color:#a78bfa;
  background:rgba(167,139,250,0.14);border:1px solid rgba(167,139,250,0.35);
  border-radius:6px;padding:2px 6px;vertical-align:middle;flex:0 0 auto;
}

/* Professional file action menu (My Files ⋮) */
.mfp-menu{
  position:fixed;z-index:9999;min-width:190px;padding:6px;
  background:#11151f;border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,0.5);
  opacity:0;transform:translateY(-4px) scale(.98);
  transition:opacity .12s ease,transform .12s ease;
}
.mfp-menu.open{opacity:1;transform:translateY(0) scale(1);}
.mfp-menu-item{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:0;background:transparent;cursor:pointer;
  color:#e5e7eb;font-size:0.86rem;font-weight:500;border-radius:8px;
  text-align:left;transition:background .12s ease;
}
.mfp-menu-item svg{width:17px;height:17px;flex:0 0 auto;opacity:.85;}
.mfp-menu-item:hover{background:rgba(255,255,255,0.07);}
.mfp-menu-item.danger{color:#f87171;}
.mfp-menu-item.danger:hover{background:rgba(248,113,113,0.12);}

.mfp-rename-backdrop{
  position:fixed;inset:0;z-index:10000;display:flex;
  align-items:center;justify-content:center;
  background:rgba(3,6,12,0.62);backdrop-filter:blur(2px);padding:20px;
}
.mfp-rename-card{
  width:100%;max-width:420px;background:#11151f;
  border:1px solid rgba(255,255,255,0.10);border-radius:16px;
  padding:22px;box-shadow:0 24px 60px rgba(0,0,0,0.55);
}
.mfp-rename-card h3{margin:0 0 14px;font-size:1.02rem;color:#fff;font-weight:600;}
.mfp-rename-input{
  width:100%;box-sizing:border-box;padding:11px 13px;
  background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.14);
  border-radius:10px;color:#fff;font-size:0.92rem;outline:none;
}
.mfp-rename-input:focus{border-color:#a78bfa;background:rgba(167,139,250,0.08);}
.mfp-rename-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px;}
.mfp-rename-actions button{
  padding:9px 18px;border-radius:10px;font-size:0.86rem;font-weight:600;cursor:pointer;
}
.mfp-rename-cancel{
  background:transparent;border:1px solid rgba(255,255,255,0.16);color:#cbd5e1;
}
.mfp-rename-cancel:hover{background:rgba(255,255,255,0.06);}
.mfp-rename-ok{background:#7c3aed;border:1px solid #a78bfa;color:#fff;}
.mfp-rename-ok:hover{background:#8b5cf6;}

/* Language switcher (desktop web nav) */
.bc-lang-wrap{position:relative;display:inline-flex;}
.bc-lang-btn{display:inline-flex;align-items:center;gap:6px;}
.bc-lang-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:9998;min-width:160px;
  padding:6px;background:#11151f;border:1px solid rgba(255,255,255,0.10);
  border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,0.5);
}
.bc-lang-menu button{
  display:block;width:100%;text-align:left;padding:9px 12px;border:0;
  background:transparent;color:#e5e7eb;font-size:0.86rem;font-weight:500;
  border-radius:8px;cursor:pointer;transition:background .12s ease;
}
.bc-lang-menu button:hover{background:rgba(255,255,255,0.07);}

/* Secondary big CTA in the web-limit modal (distinct from the Pro primary) */
.wl-cta-alt{
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.18);
  color:#e5e7eb;margin-top:10px;
}
.wl-cta-alt:hover{background:rgba(255,255,255,0.12);}

/* Delete account (Settings) — subtle but discoverable destructive action */
.stp-delete-account{
  display:block;width:100%;margin:14px 0 0;padding:11px 14px;
  background:transparent;border:1px solid rgba(248,113,113,0.35);
  color:#f87171;border-radius:12px;font-size:0.86rem;font-weight:600;
  cursor:pointer;transition:background .14s ease,border-color .14s ease;
}
.stp-delete-account:hover{background:rgba(248,113,113,0.10);border-color:rgba(248,113,113,0.6);}

/* ===== Web daily-limit modal (professional redesign) ===== */
.wlm-modal{border:0;background:transparent;padding:0;max-width:none;overflow:visible}
.wlm-modal::backdrop{background:rgba(3,6,12,.72);backdrop-filter:blur(4px)}
.wlm-card{
  position:relative;width:min(440px,92vw);box-sizing:border-box;
  background:linear-gradient(180deg,#141925,#0e121b);
  border:1px solid rgba(255,255,255,.10);border-radius:22px;
  padding:34px 28px 24px;color:#e8eaf0;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  font-family:inherit;text-align:center;
}
.wlm-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;display:flex;
  align-items:center;justify-content:center;border:0;border-radius:50%;
  background:rgba(255,255,255,.06);color:#9aa3b2;cursor:pointer
}
.wlm-close:hover{background:rgba(255,255,255,.12);color:#fff}
.wlm-close svg{width:16px;height:16px}
.wlm-badge{
  width:60px;height:60px;margin:0 auto 16px;border-radius:18px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;
  box-shadow:0 10px 24px rgba(124,58,237,.45)
}
.wlm-badge svg{width:30px;height:30px}
.wlm-title{margin:0 0 8px;font-size:1.28rem;font-weight:750;color:#fff;line-height:1.25}
.wlm-sub{margin:0 0 22px;font-size:.92rem;line-height:1.55;color:#aab2c0}
.wlm-opt{
  display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;
  text-align:left;text-decoration:none;cursor:pointer;
  padding:15px 16px;border-radius:14px;margin-bottom:12px;
  border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);
  color:#e8eaf0;transition:transform .12s ease,border-color .12s,background .12s
}
.wlm-opt:hover{transform:translateY(-1px);background:rgba(255,255,255,.07)}
.wlm-opt-pro{
  border-color:rgba(167,139,250,.55);
  background:linear-gradient(180deg,rgba(124,58,237,.22),rgba(124,58,237,.10))
}
.wlm-opt-pro:hover{background:linear-gradient(180deg,rgba(124,58,237,.30),rgba(124,58,237,.14))}
.wlm-opt-ic{
  flex:0 0 auto;width:42px;height:42px;border-radius:11px;display:flex;
  align-items:center;justify-content:center;background:rgba(255,255,255,.08);color:#c4b5fd
}
.wlm-opt-pro .wlm-opt-ic{background:rgba(167,139,250,.22);color:#ddd2ff}
.wlm-opt-ic svg{width:20px;height:20px}
.wlm-opt-tx{flex:1;display:flex;flex-direction:column;gap:3px}
.wlm-opt-tx strong{font-size:.98rem;font-weight:700;color:#fff}
.wlm-opt-tx small{font-size:.8rem;line-height:1.45;color:#9aa3b2}
.wlm-opt-arrow{flex:0 0 auto;font-size:1.4rem;color:#6b7280;line-height:1}
.wlm-later{
  display:block;width:100%;margin-top:6px;padding:11px;border:0;background:transparent;
  color:#7e8696;font-size:.86rem;cursor:pointer;border-radius:10px
}
.wlm-later:hover{color:#aab2c0;background:rgba(255,255,255,.04)}

/* Post-conversion attention pulse on the downloads/outputs panel (~3s) */
@keyframes resultReadyPulse{
  0%{box-shadow:0 0 0 0 rgba(124,58,237,.55);border-color:rgba(167,139,250,.85)}
  60%{box-shadow:0 0 0 14px rgba(124,58,237,0);border-color:rgba(167,139,250,.55)}
  100%{box-shadow:0 0 0 0 rgba(124,58,237,0);border-color:inherit}
}
.result-panel.result-ready-flash{
  border-radius:16px;
  animation:resultReadyPulse 0.9s ease-out 3;
  outline:2px solid rgba(167,139,250,.85);
  outline-offset:3px;
  box-shadow:0 0 0 4px rgba(124,58,237,.18), 0 14px 40px rgba(124,58,237,.30);
}
@keyframes resultReadyPulse{
  0%{box-shadow:0 0 0 0 rgba(124,58,237,.55), 0 14px 40px rgba(124,58,237,.30);}
  70%{box-shadow:0 0 0 14px rgba(124,58,237,0), 0 14px 40px rgba(124,58,237,.30);}
  100%{box-shadow:0 0 0 0 rgba(124,58,237,0), 0 14px 40px rgba(124,58,237,.30);}
}

/* ===== SFM signature tabs: Type / Draw / Image ===== */
.sfm-sig-tabs{display:flex;gap:6px;margin-bottom:10px}
.sfm-sig-tabs button{
  flex:1;padding:8px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#cbd5e1;font-size:.82rem;font-weight:600;cursor:pointer;
}
.sfm-sig-tabs button.active{background:#7c3aed;border-color:#a78bfa;color:#fff}
.sfm-draw-canvas{
  width:100%;height:150px;background:#fff;border-radius:10px;
  border:1px solid rgba(255,255,255,.18);touch-action:none;cursor:crosshair;display:block;
}
.sfm-draw-row{display:flex;align-items:center;gap:10px;margin-top:10px}
.sfm-draw-clear{
  margin-left:auto;padding:7px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.18);
  background:transparent;color:#cbd5e1;font-size:.8rem;font-weight:600;cursor:pointer;
}
.sfm-draw-clear:hover{background:rgba(255,255,255,.08)}
.sfm-img-pick{
  display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:10px;
  border:1px dashed rgba(255,255,255,.28);background:rgba(255,255,255,.04);
  color:#e5e7eb;font-size:.86rem;font-weight:600;cursor:pointer;
}
.sfm-img-pick:hover{background:rgba(255,255,255,.08);border-color:#a78bfa}
.sfm-img-name{margin-left:12px;font-size:.8rem;color:#9aa3b2}

/* ===== v217 Add-signature modal (competitor-grade) ===== */
.sfm-add-sig{
  display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border:0;border-radius:11px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:700;font-size:.9rem;
  cursor:pointer;box-shadow:0 8px 22px rgba(124,58,237,.4);
}
.sfm-add-sig:hover{transform:translateY(-1px)}
.sig-dialog{border:0;background:transparent;padding:0;max-width:none;overflow:visible}
.sig-dialog::backdrop{background:rgba(3,6,12,.72);backdrop-filter:blur(4px)}
.sig-dialog-card{
  width:min(680px,94vw);box-sizing:border-box;background:#fff;color:#0b0f17;
  border-radius:18px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.55);
  font-family:inherit;
}
.sig-dialog-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid #eef0f4;
}
.sig-dialog-head strong{font-size:1.12rem;font-weight:750;color:#11151f}
.sig-dialog-x{width:34px;height:34px;border:0;background:#f3f4f6;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:#5b6472;cursor:pointer}
.sig-dialog-x:hover{background:#e7e9ee;color:#11151f}
.sig-dialog-x svg{width:16px;height:16px}
.sig-dialog-tabs{display:flex;gap:8px;padding:16px 22px 0}
.sig-dialog-tabs button{
  flex:1;padding:10px;border:1px solid #e3e6ec;background:#f7f8fa;border-radius:10px;
  color:#5b6472;font-size:.9rem;font-weight:600;cursor:pointer;
}
.sig-dialog-tabs button.active{background:#7c3aed;border-color:#7c3aed;color:#fff}
.sig-dialog-body{padding:18px 22px}
.sig-draw-colors{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.sig-draw-colors .sfm-c{box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.sig-draw-colors .sfm-draw-clear{
  margin-left:auto;padding:7px 16px;border:1px solid #d7dbe2;background:#fff;border-radius:8px;
  color:#5b6472;font-weight:600;font-size:.82rem;cursor:pointer;
}
.sig-draw-colors .sfm-draw-clear:hover{background:#f3f4f6}
.sig-draw-canvas{
  width:100%;height:220px;display:block;background:#fff;border:2px dashed #d3d8e0;
  border-radius:12px;touch-action:none;cursor:crosshair;
}
.sig-draw-hint{text-align:center;color:#aab1bd;font-size:.85rem;margin-top:8px}
.sig-img-drop{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:38px 20px;
  border:2px dashed #d3d8e0;border-radius:12px;color:#5b6472;cursor:pointer;text-align:center;
}
.sig-img-drop:hover{border-color:#7c3aed;background:#faf8ff}
.sig-img-drop small{color:#9aa1ad;font-size:.8rem}
.sig-type-input{
  width:100%;box-sizing:border-box;padding:14px 16px;font-size:1.6rem;
  border:1px solid #d7dbe2;border-radius:10px;outline:none;color:#11151f;margin-bottom:12px;
  font-family:'Caveat',cursive;
}
.sig-type-input:focus{border-color:#7c3aed}
.sig-dialog-body .sfm-sign-fonts button{color:#11151f;background:#f3f4f6;border-color:#e3e6ec}
.sig-dialog-body .sfm-sign-fonts button.active{background:#7c3aed;color:#fff;border-color:#7c3aed}
.sig-dialog-foot{
  display:flex;justify-content:flex-end;gap:12px;padding:16px 22px;border-top:1px solid #eef0f4;background:#fafbfc;
}
.sig-btn-ghost{padding:11px 22px;border:1px solid #d7dbe2;background:#fff;border-radius:10px;
  color:#5b6472;font-weight:600;cursor:pointer}
.sig-btn-ghost:hover{background:#f3f4f6}
.sig-btn-primary{padding:11px 28px;border:0;border-radius:10px;
  background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;font-weight:700;cursor:pointer}
.sig-btn-primary:hover{transform:translateY(-1px)}

/* Corner resize handles on the placed signature */
.sfm-sig-selectable{outline:1.5px solid rgba(124,58,237,.7)}
.sfm-handle{
  position:absolute;width:14px;height:14px;background:#fff;border:2px solid #7c3aed;
  border-radius:50%;z-index:5;
}
.sfm-handle-nw{top:-7px;left:-7px;cursor:nwse-resize}
.sfm-handle-ne{top:-7px;right:-7px;cursor:nesw-resize}
.sfm-handle-se{bottom:-7px;right:-7px;cursor:nwse-resize}
.sfm-handle-sw{bottom:-7px;left:-7px;cursor:nesw-resize}

/* Fix: signature color swatches must render as proper circles inside the
   white Add-signature dialog (Draw row + Type panel). */
.sig-dialog .sfm-c{
  width:24px;height:24px;border-radius:50%;cursor:pointer;
  border:2px solid transparent;box-shadow:0 0 0 1px rgba(0,0,0,.25);
  display:inline-block;flex:0 0 auto;
}
.sig-dialog .sfm-c.active{border-color:#7c3aed;transform:scale(1.12)}
.sig-dialog .sfm-c-black{background:#111}
.sig-dialog .sfm-c-blue{background:#2563eb}
.sig-dialog .sfm-c-violet{background:#7c3aed}
.sig-dialog .sfm-c-red{background:#dc2626}

/* Web tarafında reklam-izle-kredi-kazan akışı yok; kredi rozetleri ve üst
   kredi göstergesi yanıltıcı. Sadece native app (body.native-app) gösterir. */
body:not(.native-app) .tc-credit,
body:not(.native-app) .nav-credit,
body:not(.native-app) #creditChip { display: none !important; }

/* Post-convert soft nudge: "loved it? get the free app" */
.web-app-nudge {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  z-index: 9998; max-width: 460px; width: calc(100vw - 32px);
  background: linear-gradient(180deg, #141925, #0e121b);
  border: 1px solid rgba(167,139,250,0.35);
  border-radius: 18px; padding: 18px 18px 16px; color: #e8eaf0;
  box-shadow: 0 22px 60px rgba(0,0,0,0.55);
  display: flex; gap: 14px; align-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  font-family: inherit;
}
.web-app-nudge.show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.web-app-nudge .nudge-ic {
  width: 42px; height: 42px; flex: 0 0 auto; border-radius: 12px;
  background: linear-gradient(135deg,#7c3aed,#a855f7);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(124,58,237,0.4);
}
.web-app-nudge .nudge-ic svg { width: 22px; height: 22px; color: #fff; }
.web-app-nudge .nudge-tx { flex: 1; line-height: 1.4; }
.web-app-nudge .nudge-tx strong { display: block; font-size: 0.96rem; font-weight: 700; color: #fff; }
.web-app-nudge .nudge-tx small { display: block; font-size: 0.8rem; color: #aab2c0; margin-top: 2px; }
.web-app-nudge .nudge-cta {
  background: #7c3aed; border: 0; color: #fff; font-weight: 600;
  padding: 9px 14px; border-radius: 10px; cursor: pointer; text-decoration: none;
  font-size: 0.85rem; white-space: nowrap;
}
.web-app-nudge .nudge-cta:hover { background: #8b5cf6; }
.web-app-nudge .nudge-close {
  background: transparent; border: 0; color: #7e8696; cursor: pointer;
  font-size: 1.2rem; padding: 4px 8px; align-self: flex-start;
}
.web-app-nudge .nudge-close:hover { color: #cbd5e1; }
@media (max-width: 540px) {
  .web-app-nudge { flex-wrap: wrap; padding: 14px; }
  .web-app-nudge .nudge-cta { width: 100%; text-align: center; padding: 11px; }
}

/* v224 — Social sign-in (Google / Apple) buttons in the auth modal */
.auth-social { margin: 4px 0 14px; display: flex; flex-direction: column; gap: 10px; }
.auth-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 14px; border-radius: 11px;
  background: #fff; color: #1f1f1f; border: 1px solid rgba(0,0,0,0.10);
  font-size: 0.92rem; font-weight: 600; cursor: pointer; font-family: inherit;
  transition: transform .12s ease, background .15s, box-shadow .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.auth-social-btn:hover { background: #f6f7fb; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.12); }
.auth-social-btn:active { transform: translateY(0); }
.auth-social-btn[disabled] { opacity: .6; cursor: wait; }
.auth-social-apple { background: #111; color: #fff; border-color: #000; }
.auth-social-apple:hover { background: #232323; }
/* v1.0.41 — hide Apple Sign In on Android (App Store policy only applies
   to iOS). On iOS and web we DO show it; web users can use Apple OAuth
   via Supabase redirect, iOS users get the native sheet via bunny-ios.js. */
body.platform-android .hide-on-android { display: none !important; }

/* v1.0.41 — Tab-style mode switcher at top of auth modal. All three
   options (Sign in / Sign up / Forgot) visible at once, no scrolling to
   find them. */
.auth-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin: 0 0 14px;
}
.auth-tab {
  flex: 1;
  padding: 9px 6px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: rgba(230, 233, 240, 0.55);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms, color 160ms, transform 120ms;
  white-space: nowrap;
}
.auth-tab:hover { color: rgba(230, 233, 240, 0.85); }
.auth-tab:active { transform: scale(0.97); }
.auth-tab.is-active {
  background: rgba(124, 58, 237, 0.18);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.32) inset;
}

/* v1.0.41 — CSS-based mode hiding for verify mode. More robust than
   toggling el.hidden in JS (which had race conditions). When the form's
   data-mode is "verify", ONLY the .auth-verify section is shown plus the
   close button. Tabs, social, fields, CTA, links, legal — all hidden. */
.auth-form[data-mode="verify"] .auth-tabs,
.auth-form[data-mode="verify"] .auth-social,
.auth-form[data-mode="verify"] .auth-fields,
.auth-form[data-mode="verify"] #authSubmit,
.auth-form[data-mode="verify"] .auth-links,
.auth-form[data-mode="verify"] .auth-legal,
.auth-form[data-mode="verify"] .auth-title,
.auth-form[data-mode="verify"] .auth-sub {
  display: none !important;
}

/* Apple/Google logo icons in auth buttons. Slight inset so PNG isn't
   awkwardly tight against the button edge. */
.auth-social-icon {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  display: block;
  object-fit: contain;
}
.auth-social-icon-apple { /* keeps black-on-black readable */ }

/* v1.0.41 — Dedicated email-verification screen. Replaces the inline OTP
   field that was crammed under the password input. Single-purpose layout
   with a big code input and clear "Skip" affordance below. */
.auth-verify {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 6px 4px 4px;
  text-align: center;
}
.auth-verify[hidden] { display: none !important; }
.auth-verify-badge {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(124, 58, 237, 0.14);
  color: #a78bfa;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.25), 0 6px 22px -10px rgba(124, 58, 237, 0.5);
  margin-bottom: 2px;
}
.auth-verify-title {
  font-size: 1.35rem; font-weight: 800;
  margin: 0;
  color: #fff;
  letter-spacing: -0.01em;
}
.auth-verify-sub {
  font-size: 0.92rem;
  color: rgba(230, 233, 240, 0.72);
  margin: 0 0 6px;
  line-height: 1.5;
  max-width: 320px;
}
.auth-verify-sub strong {
  display: block;
  color: #e6e9f0;
  font-weight: 700;
  margin-top: 2px;
  font-size: 0.95rem;
  word-break: break-all;
}
.auth-verify-input {
  width: 100%;
  max-width: 260px;
  padding: 14px 18px;
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: 0.42em;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  color: #fff;
  outline: none;
  transition: border-color 160ms, background 160ms, box-shadow 200ms;
}
.auth-verify-input::placeholder {
  color: rgba(255, 255, 255, 0.18);
  letter-spacing: 0.42em;
}
.auth-verify-input:focus {
  border-color: rgba(167, 139, 250, 0.6);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.20);
}
.auth-verify-error {
  width: 100%;
  font-size: 0.85rem;
  color: #fca5a5;
  background: rgba(248, 113, 113, 0.10);
  border: 1px solid rgba(248, 113, 113, 0.28);
  border-radius: 10px;
  padding: 9px 12px;
  margin: -2px 0 -4px;
}
.auth-verify-cta {
  width: 100%;
  max-width: 280px;
  margin-top: 4px;
}
.auth-verify-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
}
.auth-verify-foot .auth-link {
  font-size: 0.86rem;
  padding: 6px 4px;
}
.auth-verify-note {
  font-size: 0.78rem;
  color: rgba(230, 233, 240, 0.55);
  margin: 4px 0 0;
  max-width: 320px;
  line-height: 1.45;
}
.auth-sep {
  display: flex; align-items: center; gap: 12px; color: #8b93a3;
  font-size: 0.78rem; margin: 4px 0 -2px; text-transform: uppercase; letter-spacing: 0.08em;
}
.auth-sep::before, .auth-sep::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.10);
}
/* Hide OAuth in the native app (WebView OAuth flow is complex; use email there) */
body.native-app .auth-social { display: none; }

/* ============================================================================
   v225 — Onboarding-v2 design language polish across Auth modal + Credit chip
   + Reward CTA. Aurora violet→pink accents, refined inputs, smoother motion.
   ========================================================================= */

/* ---- Auth modal: refined inputs ---- */
.auth-field input {
  padding: 13px 16px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  font-size: 0.96rem !important;
  transition: border-color 200ms cubic-bezier(.22,1,.36,1),
              background 200ms,
              box-shadow 200ms !important;
}
.auth-field input::placeholder { color: rgba(255,255,255,0.30); }
.auth-field input:hover { border-color: rgba(167,139,250,0.30) !important; }
.auth-field input:focus {
  border-color: rgba(167,139,250,0.70) !important;
  background: rgba(124,58,237,0.06) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18) !important;
}
.auth-field > span {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding-left: 2px;
}

/* ---- Auth modal: CTA in onboarding-v2 violet→purple gradient ---- */
.auth-cta {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 14px 22px !important;
  box-shadow: 0 14px 28px -10px rgba(124,58,237,0.65) !important;
  letter-spacing: 0 !important;
  transition: transform 120ms ease-out, box-shadow 200ms !important;
}
.auth-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -10px rgba(124,58,237,0.80) !important;
}
.auth-cta:active { transform: scale(0.98); }
.auth-cta::after { display: none !important; } /* drop the cyan shine */

/* ---- Auth modal: social button (Google) — onboarding v2 style ---- */
.auth-social-btn {
  padding: 12px 14px !important;
  border-radius: 11px !important;
  background: #fff !important;
  color: #1f1f1f !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08) !important;
  transition: transform 140ms cubic-bezier(.22,1,.36,1),
              box-shadow 200ms, background 160ms !important;
}
.auth-social-btn:hover {
  background: #f6f7fb !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.16) !important;
}

/* ---- Auth modal: "or" separator polish ---- */
.auth-sep {
  font-size: 0.7rem !important;
  letter-spacing: 0.14em !important;
  color: rgba(255,255,255,0.40) !important;
  margin: 6px 0 !important;
}

/* ---- Auth modal: title gradient + sub spacing ---- */
.auth-title {
  background: linear-gradient(135deg, #fff, #c4b5fd) !important;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  letter-spacing: -0.02em !important;
  font-weight: 800 !important;
}

/* ---- Auth modal: forgot/no-account link cluster ---- */
.auth-modal a, .auth-modal .auth-link {
  color: #a855f7 !important;
  font-weight: 600 !important;
  transition: color 160ms !important;
}
.auth-modal a:hover, .auth-modal .auth-link:hover { color: #c4b5fd !important; }

/* ============================================================================
   Credit chip + Reward CTA — Aurora glow border, gradient credit number.
   ========================================================================= */
.credit-chip {
  position: relative !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.20) !important;
  border-radius: 10px !important;
  transition: border-color 200ms, background 160ms, transform 120ms !important;
}
.credit-chip:hover {
  border-color: rgba(167,139,250,0.50) !important;
  background: rgba(124,58,237,0.08) !important;
}
.credit-chip svg {
  color: #a855f7 !important;
  filter: drop-shadow(0 0 6px rgba(124,58,237,0.55));
}
#creditText {
  color: #fff !important;
  font-weight: 800 !important;
  font-size: 0.95rem !important;
  text-shadow: 0 0 8px rgba(124,58,237,0.55);
}

/* Reward CTA — soft aurora glow on hover, lightning trophy in v2 accent */
.reward-cta {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.20) !important;
  border-radius: 10px !important;
  transition: border-color 200ms, background 160ms,
              transform 120ms, box-shadow 240ms !important;
}
.reward-cta:hover {
  border-color: rgba(167,139,250,0.55) !important;
  background: rgba(124,58,237,0.10) !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(124,58,237,0.45) !important;
}
.reward-cta:active { transform: translateY(0) scale(0.98); }
.reward-cta svg { color: #a855f7 !important; }
.reward-cta-text {
  color: #fff !important;
  font-weight: 700 !important;
}
.reward-cta-cooldown {
  background: rgba(124,58,237,0.18) !important;
  border: 1px solid rgba(167,139,250,0.30) !important;
  color: #c4b5fd !important;
  border-radius: 99px !important;
}

/* Subtle pulse on the credit chip when only 1 credit remains */
.credit-chip.is-low {
  border-color: rgba(248,113,113,0.45) !important;
  animation: creditLowPulse 2.4s ease-in-out infinite;
}
.credit-chip.is-low #creditText {
  color: #fca5a5 !important;
  text-shadow: 0 0 8px rgba(248,113,113,0.55);
}
@keyframes creditLowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0.0); }
  50%      { box-shadow: 0 0 0 4px rgba(248,113,113,0.10); }
}

@media (prefers-reduced-motion: reduce) {
  .credit-chip.is-low { animation: none !important; }
  .auth-cta, .auth-social-btn, .reward-cta { transition: none !important; }
}

/* ============================================================================
   v228 — Tool option panel polish: aurora-tinted card, refined inputs/selects,
   v2 gradient on active preset/pill, smoother buttons.
   ========================================================================= */

/* ---- Tool-specific panel card ---- */
.workflow-panel,
.tool-specific-panel {
  background: linear-gradient(160deg, rgba(124,58,237,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px solid rgba(167,139,250,0.18) !important;
  border-radius: 16px !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.4),
    0 20px 50px -28px rgba(124,58,237,0.45),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
  position: relative;
  overflow: hidden;
}
.workflow-panel::before,
.tool-specific-panel::before {
  content: "";
  position: absolute; top: -40%; right: -20%;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(168,85,247,0.18), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
}
.workflow-panel > *,
.tool-specific-panel > * { position: relative; z-index: 1; }

.workflow-panel .eyebrow,
.tool-specific-panel .eyebrow {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  color: #c4b5fd !important;
  text-transform: uppercase !important;
}
.workflow-panel h4,
.tool-specific-panel h4 {
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  background: linear-gradient(135deg, #fff, #c4b5fd) !important;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}

/* ---- Mini pill (compress level, etc.) — Aurora ---- */
.mini-pill {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.22) !important;
  border-radius: 999px !important;
  padding: 9px 18px !important;
  color: var(--text) !important;
  font: inherit !important;
  font-weight: 600 !important;
  font-size: 0.88rem !important;
  cursor: pointer !important;
  transition: transform 140ms cubic-bezier(.22,1,.36,1),
              border-color 200ms, background 160ms, box-shadow 240ms !important;
}
.mini-pill:hover {
  border-color: rgba(167,139,250,0.55) !important;
  background: rgba(124,58,237,0.10) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px -10px rgba(124,58,237,0.50) !important;
}
.mini-pill:active { transform: translateY(0) scale(0.97); }
.mini-pill.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 24px -8px rgba(124,58,237,0.65) !important;
}

/* ---- Existing .preset-row + workflow-pills + signature-tabs polish ---- */
.preset-row button,
.workflow-pills span,
.signature-tabs span {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.22) !important;
  border-radius: 999px !important;
  padding: 9px 16px !important;
  font-weight: 600 !important;
  transition: transform 140ms cubic-bezier(.22,1,.36,1),
              border-color 200ms, background 160ms !important;
}
.preset-row button:hover,
.workflow-pills span:hover,
.signature-tabs span:hover {
  border-color: rgba(167,139,250,0.55) !important;
  background: rgba(124,58,237,0.10) !important;
  transform: translateY(-1px);
}
.preset-row button.active,
.workflow-pills span.active,
.signature-tabs span.active {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px -8px rgba(124,58,237,0.65) !important;
}

/* ---- Form inputs + selects (settings-grid + resize-controls + signature-card) ---- */
.settings-grid input,
.settings-grid select,
.resize-controls input,
.resize-controls select,
.signature-card input,
.signature-card select,
.tool-specific-panel input,
.tool-specific-panel select,
.workflow-panel input,
.workflow-panel select {
  padding: 11px 14px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--text) !important;
  font-size: 0.92rem !important;
  font-family: inherit !important;
  transition: border-color 200ms, background 200ms, box-shadow 200ms !important;
  outline: none;
}
.settings-grid input:hover,
.settings-grid select:hover,
.resize-controls input:hover,
.signature-card input:hover { border-color: rgba(167,139,250,0.35) !important; }
.settings-grid input:focus,
.settings-grid select:focus,
.resize-controls input:focus,
.resize-controls select:focus,
.signature-card input:focus,
.signature-card select:focus,
.tool-specific-panel input:focus,
.tool-specific-panel select:focus,
.workflow-panel input:focus,
.workflow-panel select:focus {
  border-color: rgba(167,139,250,0.70) !important;
  background: rgba(124,58,237,0.06) !important;
  box-shadow: 0 0 0 3px rgba(124,58,237,0.18) !important;
}

/* Native select arrow tint */
.settings-grid select,
.resize-controls select,
.signature-card select,
.tool-specific-panel select,
.workflow-panel select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23a78bfa' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><path d='M2 2l4 4 4-4'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  background-size: 11px !important;
  padding-right: 32px !important;
}

/* ---- Field labels (uppercase muted) ---- */
.settings-grid label > span,
.resize-controls label > span,
.signature-card label > span,
.tool-specific-panel label > span,
.workflow-panel label > span {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em !important;
  color: rgba(255,255,255,0.50) !important;
  text-transform: uppercase !important;
}

/* ---- Primary button (Dönüştür) — Aurora gradient ---- */
.primary-button {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 13px 22px !important;
  border: 0 !important;
  box-shadow: 0 14px 28px -10px rgba(124,58,237,0.65) !important;
  transition: transform 120ms ease-out, box-shadow 200ms !important;
}
.primary-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -10px rgba(124,58,237,0.85) !important;
}
.primary-button:active:not(:disabled) { transform: scale(0.98); }
.primary-button:disabled {
  opacity: 0.45;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

/* ---- Secondary button (Temizle) — ghost violet ---- */
.secondary-button {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(167,139,250,0.22) !important;
  color: var(--text) !important;
  border-radius: 999px !important;
  padding: 12px 22px !important;
  font-weight: 600 !important;
  transition: transform 120ms, border-color 200ms, background 160ms !important;
}
.secondary-button:hover {
  border-color: rgba(167,139,250,0.55) !important;
  background: rgba(124,58,237,0.10) !important;
  transform: translateY(-1px);
}
.secondary-button:active { transform: translateY(0) scale(0.98); }

/* ---- Download button (after conversion) — solid Aurora ---- */
.download-button {
  background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
  color: #fff !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  border: 0 !important;
  box-shadow: 0 14px 28px -10px rgba(124,58,237,0.65) !important;
  transition: transform 120ms, box-shadow 200ms !important;
}
.download-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px -10px rgba(124,58,237,0.85) !important;
}

@media (prefers-reduced-motion: reduce) {
  .mini-pill, .preset-row button, .workflow-pills span, .signature-tabs span,
  .primary-button, .secondary-button, .download-button {
    transition: none !important;
  }
}

/* ============================================================================
   v229 — Auth modal: allow internal scrolling so "Forgot password?" + "No
   account? Sign up" never get clipped on shorter viewports. Tighter padding,
   centered link cluster, scoped scroll on the form (not the dialog) so the
   close button stays pinned.
   ========================================================================= */
.auth-modal {
  overflow: visible !important;
  max-height: 94dvh !important;
}
.auth-form {
  max-height: 94dvh;
  overflow-y: auto;
  padding: 28px 24px 22px !important;
  gap: 14px !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(167,139,250,0.30) transparent;
}
/* v245 — primary CTA pinned to the bottom of the form. Even when the form
   scrolls on short viewports (Android Chrome with the URL bar pushing the
   visual viewport down to ~500–540px), "Giriş yap" / "Hesap oluştur" is
   never the thing that gets cut. The radial fade behind it keeps the
   handoff to the scrolling content soft. */
.auth-form .auth-cta {
  position: sticky;
  bottom: 0;
  margin-top: 4px;
  z-index: 2;
  flex-shrink: 0;
  /* extend the modal's background tint a few px above the button so
     content scrolling underneath doesn't bleed into the CTA edge */
  box-shadow: 0 -16px 18px -10px rgba(10,15,28,0.90);
}
.auth-form::-webkit-scrollbar { width: 6px; }
.auth-form::-webkit-scrollbar-thumb {
  background: rgba(167,139,250,0.30);
  border-radius: 99px;
}
.auth-form::-webkit-scrollbar-track { background: transparent; }

/* Links cluster: centered, wraps on narrow screens, never collides with CTA */
.auth-links {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px !important;
  margin-top: 4px;
  padding-top: 4px;
}
.auth-link {
  background: transparent !important;
  border: 0 !important;
  font: inherit !important;
  font-size: 0.86rem !important;
  color: #a855f7 !important;
  cursor: pointer;
  padding: 6px 8px !important;
  border-radius: 8px;
  transition: color 160ms, background 160ms !important;
}
.auth-link strong { color: #c4b5fd !important; font-weight: 700 !important; }
.auth-link:hover { color: #c4b5fd !important; background: rgba(124,58,237,0.08) !important; }
.auth-link-sep { color: rgba(255,255,255,0.25) !important; font-size: 0.86rem; }

/* Legal note tighter */
.auth-legal {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.45) !important;
  text-align: center;
  line-height: 1.4;
  margin-top: 4px;
}