/* ================================================
   FileKitPro — Common Styles (extracted from common12.css)
   Only CSS used by templates/base.html, index.html, pricing.html
   ================================================ */

/* ----- CSS Variables (updated palette) ----- */
:root {
    --color-brand: #4d65ff;
    --color-brand-hover: #3d55ef;
    --color-brand-light: #6b7dff;
    --color-brand-lightest: rgba(77, 101, 255, 0.08);
    --background-gray-main: #f8f8f7;
    --background-menu-white: #ffffff;
    --text-primary: #1a1a2e;
    --text-secondary: #555770;
    --text-tertiary: #8888a0;
    --text-on-dark: #ffffff;
    --text-disabled: #9ca3af;
    --border-main: rgba(0, 0, 0, 0.08);
    --border-light: rgba(0, 0, 0, 0.05);
    --border-hover: rgba(0, 0, 0, 0.12);
    --fill-tsp-white-light: rgba(0, 0, 0, 0.04);
    --fill-tsp-white-main: rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.08);
    --Button-black: #1a1a2e;
    --text-onblack: #ffffff;
    --logo-color: #1a1a2e;
    --thumb-selected-color: #4d65ff;
    --thumb-range-color: rgba(77, 101, 255, 0.5);
    --badge-bg: rgba(77, 101, 255, 0.08);
    --badge-color: var(--color-brand);
    --badge-border: rgba(77, 101, 255, 0.2);
}

/* ----- Reset & Base ----- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--background-gray-main);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.font-serif {
    font-family: 'Georgia', 'Times New Roman', serif;
}

/* Text baseline alignment (unchanged) */
:is(h1, h2, h3, h4, h5, h6, p, .u-text-style-) {
    display: flow-root;
    user-select: text;
}
:is(h1, h2, h3, h4, h5, h6, p, .u-text-style-)::before {
    content: "";
    display: table;
    margin-bottom: calc(-0.5lh + 0.36em);
    user-select: none;
}
:is(h1, h2, h3, h4, h5, h6, p, .u-text-style-)::after {
    content: "";
    display: table;
    margin-bottom: calc(-0.5lh + 0.41em);
    user-select: none;
}

/* ----- Site Header (modern, glass) ----- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--border-light);
    transition: border-color 0.3s;
}

/* ----- Brand Button (primary) ----- */
.btn-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.875rem;
    background: var(--Button-black);
    color: var(--text-onblack);
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
}

/* ----- Pro Badge ----- */
.pro-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #1e1b4b;
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
}

/* ----- User Menu (avatar + dropdown) ----- */
.user-menu-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.user-avatar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid var(--border-main);
    background: #ffffff;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-size: 1.25rem;
    position: relative;
    outline: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.user-avatar-btn.dropdown-open {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-brand-lightest);
    box-shadow: 0 2px 12px rgba(77, 101, 255, 0.18);
}

.user-avatar-initial {
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

.user-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 280px;
    max-width: calc(100vw - 2rem);
    background: #ffffff;
    border: 1px solid var(--border-main);
    border-radius: 1rem;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 0;
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.96);
    transition: all 0.22s cubic-bezier(0.25, 0.8, 0.25, 1.2);
    pointer-events: none;
    overflow: hidden;
}

.user-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.user-dropdown::before {
    content: "";
    position: absolute;
    top: -7px;
    right: 18px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-left: 1px solid var(--border-main);
    border-top: 1px solid var(--border-main);
    transform: rotate(45deg);
    border-radius: 2px 0 0 0;
}

.user-dropdown-header {
    padding: 1rem 1.2rem 0.75rem;
    border-bottom: 1px solid var(--border-main);
}

.user-dropdown-email {
    font-size: 0.85rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    word-break: break-all;
}

.user-dropdown-email i {
    color: var(--color-brand);
    font-size: 0.95rem;
    flex-shrink: 0;
}

.user-dropdown-subscription {
    padding: 0.75rem 1.2rem;
    border-bottom: 1px solid var(--border-main);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.user-dropdown-subscription .pro-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.7rem;
}

.user-dropdown-subscription .pro-info {
    font-size: 0.7rem;
    color: #92400e;
    font-weight: 500;
    white-space: nowrap;
}

.user-dropdown-subscription .btn-upgrade-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 1rem;
    border-radius: 0.6rem;
    font-weight: 600;
    font-size: 0.78rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.25s;
    text-decoration: none;
    white-space: nowrap;
}

.user-dropdown-subscription .btn-upgrade-sm:hover {
    background: linear-gradient(135deg, #f59e0b, #b45309);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.free-plan-label {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

.user-dropdown-actions {
    padding: 0.5rem 0.6rem;
}

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: 0.6rem;
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    font-family: inherit;
    text-align: left;
    white-space: nowrap;
}

.user-dropdown-item i {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
    flex-shrink: 0;
}

.user-dropdown-item.logout-item {
    color: #e0555a;
}

.user-dropdown-item.logout-item:hover {
    background: #fef2f2;
    color: #d14343;
}

/* ----- Selection & Scrollbar ----- */
::selection {
    background: var(--color-brand);
    color: #fff;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f0f0f3;
}

::-webkit-scrollbar-thumb {
    background: #c5c5d5;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a0a0b5;
}

/* ----- Footer Link ----- */
footer a {
    transition: color 0.25s;
}

footer a:hover {
    color: var(--color-brand);
}

/* ----- Toast notification ----- */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    background: #ffffff;
    border: 1px solid var(--border-main);
    color: var(--text-primary);
    padding: 0.85rem 1.6rem;
    border-radius: 3rem;
    font-weight: 500;
    font-size: 0.9rem;
    z-index: 1000;
    transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.15);
    pointer-events: none;
}

.toast.show { transform: translateX(-50%) translateY(0); }

.toast.error { border-color: rgba(224, 85, 90, 0.5); background: #fff5f5; color: #b91c1c; }

.toast.success { border-color: rgba(16, 185, 129, 0.5); background: #f0fdf6; color: #065f46; }

.toast.warning { border-color: rgba(245, 158, 11, 0.5); background: #fffbeb; color: #92400e; }

/* ----- Responsive Tweaks (common) ----- */
@media screen and (max-width: 767px) {
    .user-avatar-btn {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
    .user-dropdown {
        min-width: 250px;
        right: -10px;
    }
    .user-dropdown::before {
        right: 22px;
    }
}

@media screen and (max-width: 479px) {
    .user-dropdown {
        min-width: 220px;
        right: -20px;
        border-radius: 0.85rem;
    }
    .user-dropdown::before {
        right: 32px;
    }
    .user-dropdown-header {
        padding: 0.8rem 1rem 0.6rem;
    }
    .user-dropdown-subscription {
        padding: 0.6rem 1rem;
    }
    .user-dropdown-actions {
        padding: 0.35rem 0.4rem;
    }
    .user-dropdown-item {
        padding: 0.55rem 0.65rem;
        font-size: 0.82rem;
    }
}

/* =============================================
   Tailwind Replacement Utilities
   ============================================= */

/* ----- Container widths ----- */
.max-w-2xl { max-width: 42rem; }

/* ----- Flex & Grid helpers ----- */
.flex           { display: flex; }
.flex-wrap      { flex-wrap: wrap; }
.flex-col       { flex-direction: column; }
.flex-shrink-0  { flex-shrink: 0; }
.items-center   { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-3   { gap: 0.75rem; }
.gap-4   { gap: 1rem; }
.gap-6   { gap: 1.5rem; }

/* ----- Spacing (padding & margin) ----- */
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.pt-5 { padding-top: 1.25rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-1\.5 { margin-bottom: 0.375rem; }
.mb-8 { margin-bottom: 2rem; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* ----- Typography ----- */
.text-center   { text-align: center; }
.text-sm       { font-size: 0.875rem; }
.text-2xl      { font-size: 1.5rem; }
.text-4xl      { font-size: 2.25rem; }
.font-bold     { font-weight: 700; }
.font-extrabold { font-weight: 800; }
.tracking-tight { letter-spacing: -0.025em; }
.leading-tight  { line-height: 1.25; }
.text-gray-800 { color: #1f2937; }

/* ----- Width & Height ----- */
.w-full { width: 100%; }
.w-10   { width: 2.5rem; }
.h-10   { height: 2.5rem; }
.h-full { height: 100%; }

/* ----- Positioning & z-index ----- */
.relative { position: relative; }
.z-10 { z-index: 10; }

/* ----- Overflow ----- */
.overflow-hidden { overflow: hidden; }

/* ----- Visual effects ----- */
.rounded-xl   { border-radius: 0.75rem; }
.shadow-sm    { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); }

/* ----- Interactions ----- */
.no-underline        { text-decoration: none; }

/* ----- Accessibility & misc ----- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----- Responsive overrides (mobile-first) ----- */
@media (min-width: 640px) {
    .sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
    .sm\:w-12 { width: 3rem; }
    .sm\:h-12 { height: 3rem; }
    .sm\:p-10 { padding: 2.5rem; }
}
@media (min-width: 768px) {
    .md\:flex-row { flex-direction: row; }
    .md\:text-4xl { font-size: 2.25rem; }
    .md\:text-5xl { font-size: 3rem; }
    .md\:text-6xl { font-size: 3.75rem; }
}

/* ----- Min height (hero sections) ----- */
.min-h-\[100dvh\] { min-height: 100dvh; }

/* ----- Borders ----- */
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-\[var\(--border-main\)\] { border-color: var(--border-main); }

/* ----- Interactions & transitions ----- */
.hover\:underline:hover { text-decoration: underline; }
.hover\:opacity-90:hover { opacity: 0.9; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* Skip-to-content link (a11y) — focus state overrides .sr-only */
.sr-only:focus {
    position: absolute !important;
    top: 0.5rem !important;
    left: 0.5rem !important;
    width: auto !important;
    height: auto !important;
    padding: 0.5rem 1rem !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    border: 0 !important;
    background: #000 !important;
    color: #fff !important;
    border-radius: 0.5rem !important;
    z-index: 100 !important;
    text-decoration: none;
}

/* Gradient helper for privacy hero */
.from-\[\#f8f9fc\] { --tw-gradient-from: #f8f9fc; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)); }

/* ----- Max widths ----- */
.max-w-lg { max-width: 32rem; }
.max-w-6xl { max-width: 72rem; }
.max-w-7xl { max-width: 80rem; }

/* ----- Flex ----- */
.flex-1 { flex: 1 1 0%; }

/* ----- Spacing ----- */
.mt-1\.5 { margin-top: 0.375rem; }
.mr-1\.5 { margin-right: 0.375rem; }
.pb-8  { padding-bottom: 2rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }

/* ----- Misc ----- */
.object-contain { object-fit: contain; }

/* =============================================
   STYLES FROM common12.css
   (used by templates: terms.html, privacy.html, auth.html)
   ============================================= */

/* ----- Outline Button ----- */
.btn-outline {
    background: transparent;
    color: var(--text-secondary);
    border: 1.5px solid rgba(77, 101, 255, 0.4);
    padding: 0.6rem 1.4rem;
    border-radius: 3rem;
    font-weight: 500;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.25s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-outline:hover {
    border-color: var(--color-brand);
    color: var(--color-brand);
    background: var(--color-brand-lightest);
}

/* ----- Glass Card ----- */
.glass-card {
    background: #ffffff;
    border: 1px solid var(--border-main);
    border-radius: 1.1rem;
    padding: 1.4rem;
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.glass-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-hover);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    background: #fafafd;
}

/* ----- Display helpers ----- */
.block { display: block; }
.hidden { display: none !important; }

/* ----- Positioning helpers ----- */
.absolute { position: absolute; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.pointer-events-none { pointer-events: none; }

/* ----- Typography additions ----- */
.font-light    { font-weight: 300; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.text-xs       { font-size: 0.75rem; }
.text-lg       { font-size: 1.125rem; }
.text-3xl      { font-size: 1.875rem; }
.leading-relaxed  { line-height: 1.625; }
.tracking-wide   { letter-spacing: 0.025em; }
.uppercase { text-transform: uppercase; }

/* ----- Text color additions ----- */
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-red-500 { color: #ef4444; }
.text-muted { color: var(--text-tertiary, #8888a0); }
.text-danger { color: #dc3545; }
.text-right { text-align: right; }

/* ----- Spacing additions ----- */
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.p-6  { padding: 1.5rem; }
.pt-10 { padding-top: 2.5rem; }
.py-6  { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pb-16 { padding-bottom: 4rem; }
.gap-2   { gap: 0.5rem; }

.space-y-4 > * + * { margin-top: 1rem; }

/* ----- Width & Height additions ----- */
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.h-24 { height: 6rem; }

/* ----- Visual effects additions ----- */
.rounded-2xl  { border-radius: 1rem; }

/* ----- Gradient utility additions ----- */
.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-stops)); }
.from-white { --tw-gradient-from: #fff; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)); }
.to-transparent { --tw-gradient-to: transparent; }

/* =============================================
   STYLES FROM common12.css
   (used by templates: checkout.html, profile.html, success.html)
   ============================================= */

/* ----- Modal components ----- */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    transition: opacity 0.25s;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 0.5rem;
    flex-shrink: 0;
}

.modal-title {
    font-size: 1.4rem;
    font-weight: 700;
    background: linear-gradient(135deg, #4d65ff, #6b7dff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.modal-body {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ----- Spacing additions ----- */
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }

.space-y-6 > * + * { margin-top: 1.5rem; }

/* ================================================
   DESIGN POLISH LAYER (appended, wins the cascade)
   Emil-style principles applied site-wide:
   - custom easing curves, never stock easings
   - press feedback (:active) on every pressable element
   - no `transition: all`
   - hover transforms only on hover-capable devices
   - prefers-reduced-motion respected everywhere
   `body`-prefix raises specificity so these override
   per-page inline styles that still say `transition: all`.
   ================================================ */

:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Buttons: split `transition: all` into exact props ---------- */
body .btn-primary,
body .btn-outline,
body .btn-danger-outline,
body .btn-danger-solid,
body .btn-danger,
body .btn-outline-danger,
body .btn-upgrade,
body .btn-upgrade-sm,
body .btn-pricing,
body .btn-brand,
body .btn-signup,
body .btn-back,
body .card-cta,
body .btn-ghost,
body .btn-auth,
body .sc-btn {
    transition:
        background 200ms var(--ease-out),
        border-color 200ms var(--ease-out),
        color 200ms var(--ease-out),
        box-shadow 200ms var(--ease-out),
        opacity 200ms var(--ease-out),
        transform 160ms var(--ease-out);
}

/* Press feedback — buttons feel like they listen */
body .btn-primary:active,
body .btn-outline:active,
body .btn-danger-outline:active,
body .btn-danger-solid:active,
body .btn-danger:active,
body .btn-outline-danger:active,
body .btn-upgrade:active,
body .btn-upgrade-sm:active,
body .btn-pricing:active,
body .btn-brand:active,
body .btn-signup:active,
body .btn-back:active,
body .card-cta:active,
body .btn-ghost:active,
body .btn-auth:active,
body .sc-btn:active,
body .btn-get-started:active,
body .btn-cta:active {
    transform: scale(0.97) !important;
    transition: transform 120ms var(--ease-out);
}

/* Keep disabled buttons inert */
body .btn-primary:disabled,
body .btn-outline:disabled,
body .btn-danger-outline:disabled,
body .btn-danger-solid:disabled,
body .btn-upgrade:disabled,
body .btn-danger:disabled,
body .btn-outline-danger:disabled,
body .card-cta-disabled {
    transform: none !important;
}

/* ---------- Cards, upload zones, file lists ---------- */
body .glass-card {
    transition:
        transform 200ms var(--ease-out),
        border-color 200ms var(--ease-out),
        box-shadow 300ms var(--ease-out),
        background 300ms var(--ease-out);
}
body .upload-zone {
    transition:
        border-color 250ms var(--ease-out),
        background 250ms var(--ease-out),
        box-shadow 250ms var(--ease-out);
}
body .file-list-item,
body .insert-point-row,
body .settings-card {
    transition:
        background 200ms var(--ease-out),
        border-color 200ms var(--ease-out),
        box-shadow 200ms var(--ease-out),
        transform 200ms var(--ease-out);
}

/* ---------- Mode tabs & pagination ---------- */
body .mode-tab,
body .pagination-btn,
body .tab-btn,
body .plan-switcher button,
body .format-option,
body .rotate-option {
    transition:
        background 200ms var(--ease-out),
        border-color 200ms var(--ease-out),
        color 200ms var(--ease-out),
        box-shadow 200ms var(--ease-out),
        transform 160ms var(--ease-out);
}
body .mode-tab:active,
body .pagination-btn:active,
body .tab-btn:active,
body .plan-switcher button:active,
body .format-option:active,
body .rotate-option:active {
    transform: scale(0.97);
    transition: transform 120ms var(--ease-out);
}

/* ---------- Icon buttons (move / remove / refresh) ---------- */
body .move-btn,
body .remove-btn,
body .remove-point-btn,
body .btn-icon-remove,
body .btn-sync-icon,
body .creem-error-state button,
body .auth-redirect .btn-signin {
    transition:
        background 160ms var(--ease-out),
        color 160ms var(--ease-out),
        border-color 160ms var(--ease-out),
        transform 120ms var(--ease-out);
}
body .move-btn:active,
body .remove-btn:active,
body .remove-point-btn:active,
body .btn-icon-remove:active,
body .btn-sync-icon:active,
body .creem-error-state button:active,
body .auth-redirect .btn-signin:active {
    transform: scale(0.9);
    transition: transform 100ms var(--ease-out);
}

/* ---------- Rotate options: icon box inherits option state ---------- */
body .rotate-option .icon-box {
    transition:
        background 200ms var(--ease-out),
        color 200ms var(--ease-out),
        box-shadow 200ms var(--ease-out);
}

/* ---------- Inputs & selects: border + ring only ---------- */
body input[type="text"],
body input[type="email"],
body input[type="password"],
body input[type="number"],
body select,
body .form-input,
body .swap-input,
body .auth-input {
    transition:
        border-color 200ms var(--ease-out),
        box-shadow 200ms var(--ease-out);
}

/* ---------- Strength bar ---------- */
body .strength-bar,
body .strength-weak,
body .strength-fair,
body .strength-good,
body .strength-strong {
    transition:
        width 300ms var(--ease-out),
        background 300ms var(--ease-out);
}

/* ---------- Progress bar: width only, interruptible ---------- */
body .progress-bar-fill {
    transition: width 300ms var(--ease-out);
}

/* ---------- Spinner: a faster spin makes loading feel faster ---------- */
body .spinner {
    animation-duration: 0.6s;
}

/* ---------- Toast: enter from below, exit downward, fast ---------- */
body .toast {
    transform: translateX(-50%) translateY(140%);
    transition:
        transform 300ms var(--ease-out),
        opacity 250ms var(--ease-out);
}
body .toast.show {
    transform: translateX(-50%) translateY(0);
    transition:
        transform 300ms var(--ease-out),
        opacity 250ms var(--ease-out);
}

/* ---------- Processing overlay & modals: fade in/out ---------- */
body #processingOverlay {
    transition:
        opacity 220ms var(--ease-out),
        visibility 0ms 220ms;
}
body #processingOverlay.hidden {
    display: flex !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 180ms var(--ease-out),
        visibility 0ms 180ms;
}
body #processingOverlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 220ms var(--ease-out),
        visibility 0ms 0ms;
}
body #upgradeModal,
body #pagePreviewModal,
body .modal-overlay {
    transition:
        opacity 220ms var(--ease-out),
        visibility 0ms 220ms;
}
body #upgradeModal.hidden,
body #pagePreviewModal.hidden,
body .modal-overlay.hidden {
    display: flex !important;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
        opacity 180ms var(--ease-out),
        visibility 0ms 180ms;
}
body #upgradeModal:not(.hidden),
body #pagePreviewModal:not(.hidden),
body .modal-overlay:not(.hidden) {
    opacity: 1;
    visibility: visible;
    transition:
        opacity 220ms var(--ease-out),
        visibility 0ms 0ms;
}

/* ---------- FAQ accordion, pricing toggle ---------- */
body .faq-question-btn .icon,
body .faq-question i {
    transition: transform 250ms var(--ease-out);
}
body .faq-answer {
    transition:
        max-height 300ms var(--ease-out),
        padding 300ms var(--ease-out);
}
body .toggle-indicator {
    transition:
        transform 300ms var(--ease-in-out),
        width 300ms var(--ease-in-out);
}
body .toggle-btn {
    transition: color 200ms var(--ease-out);
}
body .yearly-hint {
    transition:
        opacity 300ms var(--ease-out),
        max-height 300ms var(--ease-out),
        margin-top 300ms var(--ease-out);
}
body .pricing-card {
    transition:
        box-shadow 300ms var(--ease-out),
        transform 250ms var(--ease-out);
}
body .pricing-card:active {
    transform: scale(0.98);
    transition: transform 120ms var(--ease-out);
}
body #forgotPasswordSection {
    transition:
        max-height 300ms var(--ease-out),
        opacity 250ms var(--ease-out);
}

/* ---------- Shared auth modal: stronger entrance, press feedback ---------- */
body .modal-card {
    animation: modalIn 240ms var(--ease-out);
}
body .modal-close-btn {
    transition:
        color 160ms var(--ease-out),
        transform 120ms var(--ease-out),
        background 160ms var(--ease-out);
}
body .modal-close-btn:active {
    transform: scale(0.9);
    transition: transform 100ms var(--ease-out);
}

/* ---------- Related tools links ---------- */
body .related-tool-link {
    transition:
        background 200ms var(--ease-out),
        border-color 200ms var(--ease-out),
        box-shadow 200ms var(--ease-out),
        transform 160ms var(--ease-out);
}
body .related-tool-link:active {
    transform: scale(0.97);
    transition: transform 120ms var(--ease-out);
}

/* -------------------------------------------------
   Hover-capable devices only. Touch devices should
   not get sticky hover lifts.
   ------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    body .btn-primary:hover,
    body .btn-outline:hover,
    body .btn-danger-outline:hover,
    body .btn-danger-solid:hover,
    body .btn-danger:hover,
    body .btn-outline-danger:hover,
    body .btn-upgrade:hover,
    body .btn-upgrade-sm:hover,
    body .btn-pricing:hover,
    body .btn-brand:hover,
    body .btn-signup:hover,
    body .btn-back:hover,
    body .card-cta:hover,
    body .btn-ghost:hover,
    body .btn-auth:hover,
    body .sc-btn:hover,
    body .btn-get-started:hover {
        transform: translateY(-1px);
    }
    body .btn-primary:active,
    body .btn-outline:active,
    body .btn-danger-outline:active,
    body .btn-danger-solid:active,
    body .btn-danger:active,
    body .btn-outline-danger:active,
    body .btn-upgrade:active,
    body .btn-upgrade-sm:active,
    body .btn-pricing:active,
    body .btn-brand:active,
    body .btn-signup:active,
    body .btn-back:active,
    body .card-cta:active,
    body .btn-ghost:active,
    body .btn-auth:active,
    body .sc-btn:active,
    body .btn-get-started:active {
        transform: scale(0.97) !important;
        transition: transform 120ms var(--ease-out);
    }
    body .glass-card:hover {
        transform: translateY(-2px);
    }
    body .page-thumb:hover {
        transform: translateY(-2px);
    }
    header a[aria-label="searchnow.ai Home"]:hover {
        opacity: 0.85;
    }
}

/* -------------------------------------------------
   Touch devices — neutralize sticky hover lifts
   ------------------------------------------------- */

@media (hover: none), (pointer: coarse) {
    body .btn-primary:hover,
    body .btn-outline:hover,
    body .btn-danger-outline:hover,
    body .btn-danger-solid:hover,
    body .btn-danger:hover,
    body .btn-outline-danger:hover,
    body .btn-upgrade:hover,
    body .btn-upgrade-sm:hover,
    body .btn-pricing:hover,
    body .btn-brand:hover,
    body .btn-signup:hover,
    body .btn-back:hover,
    body .card-cta:hover,
    body .btn-ghost:hover,
    body .btn-auth:hover,
    body .sc-btn:hover,
    body .btn-get-started:hover,
    body .glass-card:hover,
    body .page-thumb:hover,
    body .related-tool-link:hover {
        transform: none;
    }
}

/* -------------------------------------------------
   Reduced motion — keep opacity/color, remove motion
   ------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    body .btn-primary:active,
    body .btn-outline:active,
    body .btn-danger-outline:active,
    body .btn-danger-solid:active,
    body .btn-upgrade:active,
    body .btn-upgrade-sm:active,
    body .btn-pricing:active,
    body .btn-brand:active,
    body .btn-signup:active,
    body .btn-get-started:active,
    body .btn-back:active,
    body .btn-ghost:active,
    body .btn-auth:active {
        transform: none !important;
    }
    body .toast {
        transform: translateX(-50%) translateY(0);
    }
}

/* ================================================
   Dark mode — follows the user's system setting.
   Flipping the shared tokens here makes every page
   (auth, checkout, pricing, privacy, profile,
   success, terms, index) render dark when the OS is
   in dark mode. Palette matches index.html's dark
   theme: canvas #0f0f0f · text #ececec/#b4b4b4/
   #8e8e8e · hairline borders rgba(255,255,255,.1).
   Page-scoped overrides in each template handle the
   surfaces that hardcode light colors.
   ================================================ */
@media (prefers-color-scheme: dark) {
    :root {
        --background-gray-main: #0f0f0f;
        --background-menu-white: #1f1f1f;
        --text-primary: #ececec;
        --text-secondary: #b4b4b4;
        --text-tertiary: #8e8e8e;
        --text-disabled: #6e6e6e;
        --border-main: rgba(255, 255, 255, 0.1);
        --border-light: rgba(255, 255, 255, 0.06);
        --border-hover: rgba(255, 255, 255, 0.22);
        --fill-tsp-white-light: rgba(255, 255, 255, 0.06);
        --fill-tsp-white-main: rgba(255, 255, 255, 0.08);
        --Button-black: #ececec;
        --text-onblack: #0f0f0f;
        --logo-color: #ececec;
    }
}