:root {
  color-scheme: light;
  --bg: #f8f9fc;
  --panel: #ffffff;
  --panel-2: #f8fafc;
  --panel-soft: #f8fafc;
  --bg-page: #f8f9fc;
  --bg-card: #ffffff;
  --bg-muted: #f2f4f7;
  --text: #101828;
  --text-main: #101828;
  --text-muted: #667085;
  --muted: #667085;
  --border: #e4e7ec;
  --border-hover: #d0d5dd;
  --primary: #635bff;
  --primary-hover: #4c43dc;
  --primary-dark: #4c43dc;
  --primary-light: #f0efff;
  --primary-soft: #f0efff;
  --success: #039855;
  --success-soft: #ecfdf3;
  --warn: #dc6803;
  --warn-bg: #fffaeb;
  --warning: #dc6803;
  --warning-soft: #fffaeb;
  --danger: #e31b54;
  --danger-bg: #fff1f3;
  --danger-soft: #fff1f3;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-xl: 16px;
  --radius-3xl: 20px;
  --shadow-card: 0 18px 55px rgba(41, 36, 111, .07), 0 2px 6px rgba(16, 24, 40, .03);
}

html { background: #fff; }
html { scroll-padding-top: 90px; }
::selection { color: #fff; background: var(--primary); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [role="button"]:focus-visible { outline: 3px solid color-mix(in srgb, var(--primary) 45%, transparent); outline-offset: 3px; }
body.page-tool,
body.page-admin { min-width: 320px; color: var(--text); background: var(--bg); }
.page-tool main, .page-admin main, .page-home main { min-width: 0; }
.page-home main { overflow: hidden; }

/* Shared storefront header */
.unified-header {
  position: sticky;
  top: 0;
  z-index: 70;
  border-bottom: 1px solid rgba(228, 231, 236, .92);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(18px);
}
.unified-header .nav-shell {
  width: min(1180px, calc(100% - 40px));
  min-height: 72px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.unified-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--text);
  text-decoration: none;
}
.unified-header .brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(135deg, #7f77ff, #4c43dc);
  box-shadow: 0 8px 20px rgba(99, 91, 255, .23);
  font-size: 20px;
}
.unified-header .brand strong,
.unified-header .brand small { display: block; }
.unified-header .brand strong { font: 750 .94rem/1.1 Manrope, Inter, sans-serif; }
.unified-header .brand small { margin-top: 3px; color: #667085; font-size: .69rem; font-weight: 600; letter-spacing: .03em; }
.unified-header .site-nav { display: flex; align-items: center; gap: 5px; }
.unified-header .site-nav a {
  padding: 9px 11px;
  border-radius: 9px;
  color: #475467;
  text-decoration: none;
  font-size: .82rem;
  font-weight: 650;
}
.unified-header .site-nav a:hover,
.unified-header .site-nav a[aria-current="page"] { color: var(--primary); background: var(--primary-light); }
.unified-header .site-nav .nav-login { margin-left: 8px; border: 1px solid var(--border); color: var(--text); background: #fff; }
.unified-header .site-nav .nav-cta { margin-left: 3px; padding-inline: 16px; color: #fff; background: var(--primary); }
.unified-header .site-nav .nav-cta:hover,
.unified-header .site-nav .nav-cta[aria-current="page"] { color: #fff; background: var(--primary-hover); }
.unified-header .menu-toggle {
  display: none;
  padding: 8px 11px;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  background: #fff;
  font: 700 .8rem Inter, sans-serif;
}
.unified-header .site-nav { margin-left: auto; }
.unified-header .header-actions { display: flex; align-items: center; gap: 8px; }
.unified-header .theme-toggle {
  min-width: 78px;
  height: 38px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--panel);
  font: 700 .76rem Inter, sans-serif;
  cursor: pointer;
}
.unified-header .theme-toggle:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
.unified-header .theme-toggle [data-theme-icon] { font-size: 1rem; line-height: 1; }

/* Tool pages share the same light product surface. */
.page-video .shell,
.page-bulk .shell { width: min(1180px, calc(100% - 40px)); max-width: none; margin-inline: auto; padding: 54px 0 80px; }
.page-video header.tool-head,
.page-bulk .hero { max-width: 820px; margin: 0 0 34px; }
.page-video header.tool-head h1,
.page-bulk .hero h1 {
  margin: 12px 0 12px;
  color: var(--text);
  font: 800 clamp(2.2rem, 4.3vw, 3.55rem)/1.04 Manrope, Inter, sans-serif;
  letter-spacing: -.05em;
}
.page-video header.tool-head p,
.page-bulk .hero p { max-width: 760px; color: var(--text-muted); font-size: 1rem; line-height: 1.7; }
.page-video .panel,
.page-video .workspace,
.page-bulk .card,
.page-bulk .dropzone {
  border-color: var(--border);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-card);
}
.page-video .panel-head,
.page-bulk .card-head { border-color: var(--border); background: #fcfcfd; }
.page-video .settings-panel { top: 92px; }
.page-video .tool-footer,
.page-bulk .bulk-footer { border-color: var(--border); color: var(--text-muted); background: #fff; }

/* Image tool: retain its utility layout, align its chrome and surfaces. */
.page-image { background: var(--bg) !important; }
.page-image .unified-header { background: rgba(255, 255, 255, .94) !important; }
.page-image main > section:first-child { padding-top: 58px; }
.page-image .upload-card-3xl,
.page-image #singlePreview > div > div > div,
.page-image #multiPreview > div { border-color: var(--border) !important; border-radius: 20px !important; box-shadow: var(--shadow-card) !important; }

/* Admin uses the same header and neutral product cards. */
.page-admin .admin-sidebar {
  top: 72px;
  height: calc(100vh - 72px);
  border-color: var(--border);
  color: var(--text);
  background: #fff;
}
.page-admin .admin-topbar { top: 72px; }
.page-admin .admin-brand { display: none; color: var(--text); }
.page-admin .admin-brand small,
.page-admin .sidebar-note p { color: var(--text-muted); }
.page-admin .admin-sidebar nav a { color: #667085; }
.page-admin .admin-sidebar nav a:hover,
.page-admin .admin-sidebar nav a.active { color: var(--primary); background: var(--primary-light); }
.page-admin .sidebar-note { border-color: var(--border); background: #f8fafc; }
.page-admin .admin-hero { background: linear-gradient(135deg, #3530a3, #725cff); box-shadow: 0 24px 60px rgba(99, 91, 255, .18); }
.page-admin .admin-hero > *, .page-admin .summary-grid > * { min-width: 0; }
.page-admin .admin-hero h1 { text-wrap: balance; overflow-wrap: anywhere; }
.page-admin .admin-card { border-color: var(--border); border-radius: 18px; box-shadow: 0 12px 35px rgba(16, 24, 40, .04); }
.page-admin .admin-mobile-nav { display: none; }

/* Persistent dark appearance across the storefront, tools and admin. */
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c111d;
  --panel: #151b2b;
  --panel-2: #1b2234;
  --panel-soft: #111827;
  --bg-page: #0c111d;
  --bg-card: #151b2b;
  --bg-muted: #1b2234;
  --text: #f2f4f7;
  --text-main: #f2f4f7;
  --text-muted: #98a2b3;
  --muted: #98a2b3;
  --border: #2c3548;
  --border-hover: #475467;
  --primary-light: #292650;
  --primary-soft: #292650;
  --success-soft: #12352a;
  --warning-soft: #3b2b13;
  --danger-soft: #401d29;
  --ink: #f2f4f7;
  --line: #2c3548;
  --surface: #0c111d;
  --soft: #111827;
  --violet-soft: #292650;
  --navy: #070b14;
  background: #0c111d;
}
html[data-theme="dark"] body { color: var(--text); background: var(--bg); }
html[data-theme="dark"] .unified-header,
html[data-theme="dark"] .page-image .unified-header { border-color: var(--border); background: rgba(12, 17, 29, .94) !important; }
html[data-theme="dark"] .unified-header .brand small,
html[data-theme="dark"] .unified-header .site-nav a { color: #aab3c5; }
html[data-theme="dark"] .unified-header .site-nav a:hover,
html[data-theme="dark"] .unified-header .site-nav a[aria-current="page"] { color: #a9a4ff; background: var(--primary-light); }
html[data-theme="dark"] .unified-header .site-nav .nav-login,
html[data-theme="dark"] .unified-header .menu-toggle,
html[data-theme="dark"] .unified-header .theme-toggle { color: var(--text); border-color: var(--border); background: var(--panel); }
html[data-theme="dark"] .unified-header .site-nav .nav-cta { color: #fff; background: var(--primary); }

html[data-theme="dark"] .button.secondary,
html[data-theme="dark"] .app-window,
html[data-theme="dark"] .queue-card,
html[data-theme="dark"] .preview-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .audience-list span { color: var(--text); border-color: var(--border); background: var(--panel); }
html[data-theme="dark"] .window-top,
html[data-theme="dark"] .window-body { border-color: var(--border); background: var(--panel-2); }
html[data-theme="dark"] .feature-large,
html[data-theme="dark"] .price-card.trial-card { background: linear-gradient(155deg, #1c2135, #242044); }
html[data-theme="dark"] .mini-queue { border-color: #484183; background: rgba(12, 17, 29, .62); }
html[data-theme="dark"] .trust-row,
html[data-theme="dark"] .plan-name,
html[data-theme="dark"] .price-card li,
html[data-theme="dark"] .payment-status { color: var(--text-muted); }
html[data-theme="dark"] .payment-status { border-color: var(--border); background: var(--panel); }
html[data-theme="dark"] .feature-icon.blue,
html[data-theme="dark"] .feature-icon.green,
html[data-theme="dark"] .feature-icon.amber,
html[data-theme="dark"] .feature-icon.rose { background: var(--panel-2); }

html[data-theme="dark"] .page-video .panel,
html[data-theme="dark"] .page-video .workspace,
html[data-theme="dark"] .page-bulk .card,
html[data-theme="dark"] .page-bulk .dropzone,
html[data-theme="dark"] .page-video .tool-footer,
html[data-theme="dark"] .page-bulk .bulk-footer { color: var(--text); border-color: var(--border); background: var(--panel); }
html[data-theme="dark"] .page-video .panel-head,
html[data-theme="dark"] .page-bulk .card-head { background: var(--panel-2); }

html[data-theme="dark"] .page-image,
html[data-theme="dark"] .page-image .bg-gray-50\/50 { background: var(--bg) !important; }
html[data-theme="dark"] .page-image .bg-white { background: var(--panel) !important; }
html[data-theme="dark"] .page-image .bg-gray-50,
html[data-theme="dark"] .page-image .bg-gray-100 { background: var(--panel-2) !important; }
html[data-theme="dark"] .page-image .text-gray-800,
html[data-theme="dark"] .page-image .text-gray-700 { color: var(--text) !important; }
html[data-theme="dark"] .page-image .text-gray-600,
html[data-theme="dark"] .page-image .text-gray-500,
html[data-theme="dark"] .page-image .text-gray-400 { color: var(--text-muted) !important; }
html[data-theme="dark"] .page-image .border-gray-100,
html[data-theme="dark"] .page-image .border-gray-200,
html[data-theme="dark"] .page-image .border-gray-300 { border-color: var(--border) !important; }

html[data-theme="dark"] .page-admin .admin-sidebar,
html[data-theme="dark"] .page-admin .admin-card { color: var(--text); border-color: var(--border); background: var(--panel); }
html[data-theme="dark"] .page-admin .admin-topbar,
html[data-theme="dark"] .page-admin .sticky-save { color: var(--text); border-color: var(--border); background: rgba(21, 27, 43, .94); }
html[data-theme="dark"] .page-admin label { color: #d0d5dd; }
html[data-theme="dark"] .page-admin input:not([type="checkbox"]),
html[data-theme="dark"] .page-admin textarea,
html[data-theme="dark"] .page-admin select,
html[data-theme="dark"] .page-admin .top-actions a,
html[data-theme="dark"] .page-admin .admin-topbar button,
html[data-theme="dark"] .page-admin .data-actions button,
html[data-theme="dark"] .page-admin .sticky-save button { color: var(--text); border-color: var(--border); background: var(--panel-2); }

@media (max-width: 960px) {
  .unified-header .site-nav {
    position: absolute;
    top: 72px;
    left: 20px;
    right: 20px;
    padding: 12px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    box-shadow: 0 20px 40px rgba(16, 24, 40, .12);
  }
  .unified-header .site-nav[data-open="true"] { display: flex; }
  .unified-header .site-nav a { display: block !important; }
  .unified-header .site-nav .nav-login,
  .unified-header .site-nav .nav-cta { margin-left: 0; }
  .unified-header .menu-toggle { display: block; }
}

@media (max-width: 900px) {
  .page-admin .admin-sidebar { display: none; }
  .page-admin .admin-main { margin-left: 0; }
  .page-admin .admin-mobile-nav { position: sticky; top: 137px; z-index: 25; padding: 9px 14px; display: flex; gap: 7px; overflow-x: auto; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--panel) 94%, transparent); backdrop-filter: blur(16px); scrollbar-width: none; }
  .page-admin .admin-mobile-nav::-webkit-scrollbar { display: none; }
  .page-admin .admin-mobile-nav a { flex: 0 0 auto; padding: 8px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-muted); background: var(--panel-2); text-decoration: none; font-size: .72rem; font-weight: 750; }
  .page-admin .admin-mobile-nav a:hover { color: var(--primary); border-color: var(--primary); }
}

@media (max-width: 680px) {
  .unified-header .nav-shell { width: min(100% - 28px, 1180px); }
  .unified-header .brand small { display: none; }
  .unified-header .theme-toggle { min-width: 38px; width: 38px; padding: 0; }
  .unified-header .theme-toggle [data-theme-label] { display: none; }
  .page-video .shell,
  .page-bulk .shell { width: min(100% - 28px, 1180px); padding-block: 38px 58px; }
  .page-video header.tool-head h1,
  .page-bulk .hero h1 { font-size: 2.35rem; }
}
@media (max-width: 520px) {
  .unified-header .nav-shell { gap: 10px; }
  .unified-header .brand { gap: 9px; min-width: 0; }
  .unified-header .brand-mark { width: 38px; height: 38px; }
  .unified-header .brand strong { overflow: hidden; max-width: 150px; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
  .page-video .shell, .page-bulk .shell { width: min(calc(100% - 28px),1180px); }
  .page-video header.tool-head h1, .page-bulk .hero h1 { font-size: clamp(2rem,10vw,2.35rem); overflow-wrap: anywhere; }
  .page-video .compare-player { grid-template-columns: 1fr; aspect-ratio: 4 / 5; }
  .page-video .compare-controls { grid-template-columns: auto minmax(0,1fr) auto; gap: 9px; padding-inline: 12px; }
  .page-video .panel-head, .page-bulk .card-head { padding-inline: 16px; }
  .page-admin .admin-topbar { top: 72px; }
  .page-admin .admin-mobile-nav { top: 137px; }
  .page-admin .sticky-save { position: static; margin-top: 18px; }
}