@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* Responsive chat video preview (fixes mobile width) */
.chat-preview-hover-wrap video,
.concept3-main-preview video,
.concept3-main-preview .chat-preview-hover-wrap video,
#concept3MainPreview video,
#concept3ChatMessages video {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 0.5rem;
    background: #000;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .chat-preview-hover-wrap video,
    .concept3-main-preview video,
    .concept3-main-preview .chat-preview-hover-wrap video,
    #concept3MainPreview video,
    #concept3ChatMessages video {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        border-radius: 0.5rem;
    }
}

@media (max-width: 480px) {
    .chat-preview-hover-wrap video,
    .concept3-main-preview video,
    .concept3-main-preview .chat-preview-hover-wrap video,
    #concept3MainPreview video,
    #concept3ChatMessages video {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        border-radius: 0.5rem;
    }
}
/* Chat media preview hover overlay */
.chat-preview-hover-wrap {
    position: relative;
    display: inline-block;
}
.chat-preview-hover-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    border-radius: 0.5rem;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    z-index: 2;
    transition: opacity 0.18s;
}
.chat-preview-hover-wrap:hover .chat-preview-hover-overlay {
    display: flex;
    opacity: 1;
}
/* CRITICAL OVERRIDE: Force mobile menu toggle visible - must be at the very top */
/* This rule MUST come first to override any display: none rule that exists */
.mobile-menu-toggle,
#mobileMenuToggle,
button.mobile-menu-toggle,
.nav-links .mobile-menu-toggle,
button#mobileMenuToggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 9999 !important;
}

/* Page Transition Animations */
@keyframes pulse {
    0%, 100% { 
        opacity: 1; 
        transform: scale(1); 
    }
    50% { 
        opacity: 0.5; 
        transform: scale(1.2); 
    }
}

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

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* -- Hybrid background canvases (WebGL + Particles) ----------- */
#fileshotGLCanvas,
#fileshotParticles {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
#fileshotGLCanvas  { z-index: 0; }
#fileshotParticles { z-index: 1; }

/* Ensure all page content layers above the canvases */
header, nav, .navbar, main, footer,
.auth-modal-overlay,
#fileshot-sticky-bottom-ad-host {
    position: relative;
    z-index: 2;
}

/* When hybrid BG is active, disable old body noise textures
   and make key surfaces glassmorphic so the animated
   background shows through. */
body.has-hybrid-bg::before,
body.has-hybrid-bg::after {
    display: none !important;
}

body.has-hybrid-bg .navbar {
    background-color: rgba(21, 22, 24, 0.72) !important;
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

body.has-hybrid-bg .upload-box {
    background-color: rgba(12, 13, 16, 0.55) !important;
    opacity: 1;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-color: rgba(250, 106, 42, 0.12);
}

body.has-hybrid-bg .content-card {
    background-color: rgba(21, 22, 24, 0.6) !important;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* -- Light theme: hide dark WebGL canvas & adapt glassmorphic surfaces -- */
.light-theme #fileshotGLCanvas {
    display: none !important;
}
.light-theme #fileshotParticles {
    opacity: 0.3;
}
.light-theme body.has-hybrid-bg .navbar {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
}
.light-theme body.has-hybrid-bg .upload-box {
    background-color: rgba(255, 247, 242, 0.88) !important;
    backdrop-filter: blur(20px) saturate(1.2);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    border-color: rgba(250, 106, 42, 0.2) !important;
}
.light-theme body.has-hybrid-bg .content-card {
    background-color: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(16px) saturate(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
}
/* ------------------------------------------------------------- */

body {
    animation: fadeIn 0.3s ease-out;
}

body.page-transitioning {
    animation: fadeOut 0.2s ease-in;
}

.main-content {
    animation: fadeIn 0.4s ease-out;
}

.content-card {
    background-color: var(--bg-primary);
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 2rem;
    animation: fadeIn 0.3s ease-out;
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

/* Blog post images - mobile responsive */
.content-card img,
#postContent img,
article img,
.content-card article img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: 1.5rem auto;
    border-radius: 0.75rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

/* Override any inline styles that might set fixed widths */
.content-card img[style*="width"],
#postContent img[style*="width"],
article img[style*="width"] {
    max-width: 100% !important;
    width: auto !important;
}

/* Ensure images don't overflow on mobile */
@media (max-width: 768px) {
    .content-card img,
    #postContent img,
    article img,
    .content-card article img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        margin: 1rem auto;
        border-radius: 0.5rem;
        box-sizing: border-box;
    }
    
    .content-card {
        padding: 1.5rem;
        overflow-x: hidden;
    }
    
    #postContent {
        overflow-x: hidden;
        word-wrap: break-word;
        max-width: 100%;
    }
    
    /* Override any fixed pixel widths on mobile */
    .content-card img[style*="width"],
    #postContent img[style*="width"],
    article img[style*="width"] {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 480px) {
    .content-card img,
    #postContent img,
    article img,
    .content-card article img {
        margin: 0.75rem auto;
        border-radius: 0.5rem;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .content-card {
        padding: 1rem;
    }
}

.status-heading {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.success-heading {
    color: #4ade80;
}

.inline-warning-label {
    color: var(--accent-primary);
    font-weight: 600;
}

.upload-icon {
    font-size: 0;
    margin-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.upload-icon img {
    width: 4rem; /* Doubled from 2rem (was too small) */
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.35));
}

.caret-icon,
.mobile-menu-arrow,
.settings-toggle-icon {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    margin-left: 0.35rem;
}

.nav-dropdown-toggle[aria-expanded="true"] .caret-icon,
.mobile-menu-toggle-section.open .mobile-menu-arrow svg,
.settings-collapsible.open .settings-toggle-icon svg {
    transform: rotate(180deg);
}

/* Navigation dropdown menu */
.nav-dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--bg-secondary, #1a1a1a);
    border: 1px solid var(--border-color, #333);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 180px;
    padding: 0.5rem 0;
    padding-top: 1rem;
    margin-top: 0;
    display: none;
    z-index: 1000;
    backdrop-filter: blur(10px);
}

.nav-dropdown:hover .dropdown-menu,
.dropdown-trigger:focus + .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-secondary, #aaa);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: var(--bg-tertiary, rgba(255, 255, 255, 0.05));
    color: var(--text-primary, #fff);
}

@media (max-width: 768px) {
    .content-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .content-card {
        padding: 1rem;
        margin-bottom: 1rem;
        border-radius: 0.75rem;
    }
}

.security-callout {
    border: 1px solid rgba(247, 150, 58, 0.2);
}

.security-list {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-secondary);
}

.security-list li {
    display: flex;
    align-items: flex-start;
}

.security-list li::before {
    content: '\25C6';
    color: var(--accent-primary);
    margin-right: 0.5rem;
    font-size: 1rem;
    line-height: 1.4;
}

/* Comparison Table Styles */
.comparison-section {
    overflow-x: auto;
    padding: 2rem 1rem;
}

.comparison-table-wrapper {
    overflow-x: auto;
    margin: 1.5rem 0;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-primary);
    font-family: 'Play', sans-serif;
    font-size: 0.95rem;
    min-width: 900px;
}

.comparison-table thead {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

.comparison-table th {
    padding: 1rem 0.75rem;
    text-align: left;
    font-weight: 700;
    color: var(--text-primary);
    white-space: nowrap;
    border-right: 1px solid var(--border-color);
}

.comparison-table th:first-child {
    padding-left: 1rem;
    min-width: 200px;
}

.comparison-table th:last-child {
    border-right: none;
}

.comparison-table .highlight-col {
    background: rgba(247, 150, 58, 0.1) !important;
    border-left: 3px solid var(--accent-primary);
    border-right: 3px solid var(--accent-primary);
    font-weight: 700;
}

.comparison-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.comparison-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.comparison-table tbody tr:hover {
    background: rgba(247, 150, 58, 0.08);
    transform: scale(1.005);
}

.comparison-table tbody tr:last-child {
    border-bottom: none;
}

.comparison-table td {
    padding: 1rem 0.75rem;
    color: var(--text-primary);
    border-right: 1px solid var(--border-color);
    vertical-align: middle;
}

.comparison-table td:first-child {
    padding-left: 1rem;
    font-weight: 600;
}

.comparison-table td:last-child {
    border-right: none;
}

.comparison-table td.highlight-col {
    background: rgba(247, 150, 58, 0.05);
    font-weight: 600;
}

.check-mark,
.cross-mark {
    font-weight: 700;
    font-size: 1rem;
    margin-right: 0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.check-mark::before {
    content: '?';
    color: var(--accent-primary);
}

.cross-mark::before {
    content: '?';
    color: #ef4444;
}

/* Mobile Comparison Cards - Hidden on desktop by default */
.comparison-cards-mobile {
    display: none;
}

/* Ensure mobile cards stay hidden on desktop */
@media (min-width: 769px) {
    .comparison-cards-mobile {
        display: none !important;
    }
    .comparison-table-wrapper {
        display: block !important;
    }
}

.comparison-card-mobile {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.comparison-feature-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-family: 'Play', sans-serif;
}

.comparison-vs-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    gap: 0.5rem;
}

.comparison-vs-item:last-child {
    border-bottom: none;
}

.comparison-vs-item.highlight-item {
    background: rgba(247, 150, 58, 0.1);
    border-left: 3px solid var(--accent-primary);
    border-radius: 0.25rem;
    font-weight: 600;
}

.comparison-service {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 100px;
    font-size: 0.9rem;
}

.comparison-vs-item.highlight-item .comparison-service {
    color: var(--accent-primary);
    font-weight: 700;
}

.comparison-vs-item span:not(.comparison-service):not(.check-mark):not(.cross-mark) {
    flex: 1;
    text-align: right;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.comparison-vs-item.highlight-item span:not(.comparison-service):not(.check-mark):not(.cross-mark) {
    color: var(--text-primary);
    font-weight: 600;
}

/* Responsive Comparison Table */
@media (max-width: 1024px) {
    .comparison-table {
        font-size: 0.85rem;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem 0.5rem;
    }
    
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        padding-left: 0.75rem;
        min-width: 160px;
    }
}

@media (max-width: 768px) {
    .comparison-section {
        padding: 1.5rem 0.5rem;
        overflow-x: visible;
    }

    /* Hide desktop table on mobile */
    .comparison-table-wrapper {
        display: none;
    }

    /* Show mobile cards on mobile */
    .comparison-cards-mobile {
        display: block;
    }

    .comparison-card-mobile {
        padding: 1rem;
    }

    .comparison-feature-title {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }

    .comparison-vs-item {
        padding: 0.6rem 0.4rem;
        font-size: 0.85rem;
    }

    .comparison-service {
        min-width: 80px;
        font-size: 0.85rem;
    }

    .comparison-vs-item span:not(.comparison-service):not(.check-mark):not(.cross-mark) {
        font-size: 0.85rem;
    }

    /* Improved scroll indicator hint */
    .comparison-table-wrapper::before {
        content: 'Scroll horizontally';
        position: absolute;
        top: 0.75rem;
        right: 1rem;
        font-size: 0.75rem;
        color: var(--accent-primary);
        background: var(--bg-primary);
        padding: 0.25rem 0.5rem;
        border-radius: 1rem;
        border: 1px solid var(--border-color);
        z-index: 1;
        pointer-events: none;
        font-family: 'Play', sans-serif;
        font-weight: 500;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
    
    .comparison-table {
        font-size: 0.75rem;
        min-width: 600px;
        width: 100%;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 0.5rem 0.3rem;
        white-space: nowrap;
    }
    
    .comparison-table th:first-child,
    .comparison-table td:first-child {
        padding-left: 0.5rem;
        min-width: 140px;
        position: sticky;
        left: 0;
        background: var(--bg-primary);
        z-index: 2;
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.15);
        border-right: 2px solid var(--accent-primary);
    }

    .comparison-table thead th:first-child {
        background: var(--bg-secondary);
        z-index: 3;
        box-shadow: 3px 0 6px rgba(0, 0, 0, 0.15), inset 0 -2px 0 var(--border-color);
    }

    /* Ensure proper layering */
    .comparison-table thead th:first-child {
        position: sticky;
        left: 0;
        z-index: 4;
    }
    
    .comparison-table th:not(:first-child),
    .comparison-table td:not(:first-child) {
        min-width: 70px;
        max-width: 80px;
        text-align: center;
    }
    
    .check-mark,
    .cross-mark {
        font-size: 0.85rem;
        margin-right: 0.2rem;
    }
    
    /* Hide scroll hint after scrolling */
    .comparison-table-wrapper.scrolled::before {
        display: none;
    }
}

.section-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(247, 150, 58, 0.12);
    color: var(--accent-primary);
}

.zero-knowledge-section {
    margin-top: 4rem;
    background: radial-gradient(circle at top right, rgba(247, 150, 58, 0.15), transparent 45%), var(--bg-primary);
}

.zero-knowledge-header {
    text-align: left;
    max-width: 800px;
}

.zero-knowledge-header h2 {
    margin: 1rem 0 0.75rem;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
}

.zero-knowledge-header p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.zero-knowledge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.zero-knowledge-card {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1.5rem;
    background: rgba(15, 23, 42, 0.6);
}

.zero-knowledge-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.zero-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.zero-steps li {
    border-left: 3px solid rgba(247, 150, 58, 0.4);
    padding-left: 1rem;
}

.step-title {
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.35rem;
}

.zero-steps p {
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
}

.zero-benefits {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    color: var(--text-secondary);
}

.zero-benefits strong {
    color: var(--text-primary);
    display: block;
    margin-bottom: 0.2rem;
}

.zero-proof-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}

.zero-proof-card,
.zero-callout {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 1rem;
    padding: 1.25rem;
    background: rgba(15, 23, 42, 0.7);
}

.zero-proof-card ul {
    margin: 0;
    padding-left: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.zero-callout h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.zero-callout p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Light mode: Make text in zero-knowledge cards readable (black text) */
:root .zero-knowledge-card p,
:root .zero-steps p,
:root .zero-benefits,
:root .zero-proof-card ul,
:root .zero-callout p {
    color: #1f1f1f;
}

/* Dark mode: Keep gray text */
.dark-theme .zero-knowledge-card p,
.dark-theme .zero-steps p,
.dark-theme .zero-benefits,
.dark-theme .zero-proof-card ul,
.dark-theme .zero-callout p {
    color: var(--text-secondary);
}

.video-section {
    text-align: center;
}

.video-section h2 {
    margin-bottom: 0.5rem;
}

.video-subtitle {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.feature-video {
    max-width: 100%;
    border-radius: 0.75rem;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-color);
    background: #000;
}

@media (max-width: 480px) {
    .comparison-section h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .comparison-section p {
        font-size: 0.9rem;
        margin-bottom: 1.5rem;
    }

    .comparison-table {
        font-size: 0.75rem;
        min-width: 520px;
    }

    .comparison-table th,
    .comparison-table td {
        padding: 0.4rem 0.25rem;
    }

    .comparison-table th:first-child,
    .comparison-table td:first-child {
        min-width: 110px;
        padding-left: 0.4rem;
        font-size: 0.75rem;
        font-weight: 600;
    }

    .comparison-table th:not(:first-child),
    .comparison-table td:not(:first-child) {
        min-width: 60px;
        max-width: 70px;
        text-align: center;
    }

    .comparison-table th:not(:first-child) {
        font-size: 0.75rem;
        padding: 0.45rem 0.25rem;
    }

    .check-mark,
    .cross-mark {
        font-size: 0.8rem;
        margin-right: 0.2rem;
    }

    .comparison-table-wrapper {
        margin: 1rem -0.5rem 0.5rem;
        padding: 0 0.25rem;
    }

    /* Hide scroll hint on very small screens to save space */
    .comparison-table-wrapper::before {
        display: none;
    }
}

.usecase-section {
    margin-top: 4rem;
}

.usecase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
}

.usecase-grid h3 {
    margin-bottom: 0.6rem;
}

.usecase-card {
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.03);
    box-shadow: var(--shadow-sm);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.usecase-card ul {
    margin-left: 1.25rem;
    color: var(--text-secondary);
}

.usecase-card a {
    color: var(--accent-primary);
    text-decoration: none;
}

.usecase-card a:hover {
    text-decoration: underline;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

.contact-grid a {
    color: var(--accent-primary);
    text-decoration: none;
}

.chatbot {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.chatbot-messages {
    max-height: 400px;
    min-height: 300px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chatbot-suggestions {
    display: none;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chatbot-suggestion-btn {
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.chatbot-suggestion-btn:hover {
    background: linear-gradient(to bottom, #ff6a2a, #d92f00);
    border-color: var(--accent-primary);
    color: #fff;
    box-shadow: none;
}

.chatbot-message {
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    line-height: 1.4;
    font-size: 0.95rem;
}

.chatbot-message.bot {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.chatbot-message.bot a {
    color: var(--accent-primary);
    text-decoration: underline;
    font-weight: 500;
}

.chatbot-message.bot a:hover {
    text-decoration: none;
    opacity: 0.9;
}

.chatbot-message.user {
    background: var(--accent-primary);
    color: #fff;
    align-self: flex-end;
}

.chatbot-message.typing {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    font-style: italic;
    animation: typing 1.4s infinite;
}

@keyframes typing {
    0%, 60%, 100% { opacity: 0.5; }
    30% { opacity: 1; }
}

.chatbot-input {
    display: flex;
    gap: 0.5rem;
}

.chatbot-input input {
    flex: 1;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    padding: 0.65rem 1rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.affiliate-card {
    display: none;
}

.affiliate-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.affiliate-header p {
    color: var(--text-secondary);
    margin-top: 0.25rem;
    font-size: 0.95rem;
}

.affiliate-badge {
    background-color: rgba(247, 150, 58, 0.12);
    color: var(--accent-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.affiliate-link {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.affiliate-link input {
    flex: 1;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
}

.affiliate-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1rem;
}

.affiliate-stat {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Subtle shadow for nested containers */
.content-card .affiliate-stat,
.content-card .content-card,
.content-card .metric-card,
.content-card .benefit-card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.affiliate-stat strong {
    display: block;
    font-size: 1.5rem;
    color: var(--accent-primary);
}

.affiliate-stat span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.affiliate-hero h1 {
    margin-bottom: 0.4rem;
}

.affiliate-hero p {
    max-width: 760px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.metric-card {
    background: var(--bg-secondary);
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.metric-card strong {
    display: block;
    font-size: 1.2rem;
    color: var(--accent-primary);
}

.metric-icon {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    display: inline-flex;
    align-items: center;
}

.metric-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
}

.icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

.icon-inline svg {
    width: 1.1rem;
    height: 1.1rem;
    display: block;
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.affiliate-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.affiliate-step {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
    padding: 1rem;
    border-radius: 0.9rem;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    opacity: 0.96;
}

.affiliate-step-icon {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 150, 58, 0.10);
    color: var(--accent-primary);
}

.affiliate-step-icon svg {
    width: 20px;
    height: 20px;
}

.affiliate-step-title {
    font-weight: 700;
    margin-bottom: 0.15rem;
    color: var(--text-primary);
}

.affiliate-step-text {
    color: var(--text-secondary);
    line-height: 1.55;
    font-size: 0.95rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem;
}

.benefit-card {
    background: var(--bg-secondary);
    border-radius: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--border-color);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.affiliate-video {
    margin-top: 1.25rem;
    display: grid;
    gap: 0.6rem;
}

.affiliate-video-shell {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.affiliate-video-shell video {
    width: 100%;
    height: 100%;
    display: block;
    background: #000;
    object-fit: cover;
}

.affiliate-video-caption {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.testimonial-card {
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.10), rgba(255, 107, 74, 0.06));
    color: var(--text-primary);
    border: 1px solid rgba(247, 150, 58, 0.18);
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

body.dark-theme .testimonial-card {
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.18), rgba(16, 24, 40, 0.7));
    color: #fff7f2;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.testimonial-card p {
    font-size: 1.1rem;
}

.testimonial-author {
    margin-top: 1rem;
    font-weight: 600;
}

.faq-list {
    display: grid;
    gap: 1rem;
}

.faq-item {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem 1.2rem;
    background: var(--bg-secondary);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

/* FAQ as <details> */
.faq-item summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--text-primary);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: '?';
    color: var(--text-secondary);
    font-weight: 700;
    transition: transform 0.18s ease;
}
.faq-item[open] summary::after { transform: rotate(180deg); }
.faq-item[open] summary { color: var(--accent-primary); }
.faq-answer {
    margin-top: 0.65rem;
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.faq-item h3 {
    margin-bottom: 0.35rem;
    font-size: 1.05rem;
}

.affiliate-cta {
    text-align: center;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
}

/* CSS Variables for Theming */
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');

/* Dark values are the default fallback - ensures correct rendering even when the
   dark-theme class fails to apply (restrictive browsers, JS quirks, webview limits).
   Dark is the identity of FileShot; it should appear correctly with zero class setup. */
:root {
    color-scheme: dark;
    --page-bg: #0c0d10;
    --bg-primary: #151618;
    --bg-secondary: rgba(31, 32, 36, 0.6);
    --bg-tertiary: #27292f;
    --text-primary: #f5f6f7;
    --text-secondary: #c9cbd1;
    --text-tertiary: #9fa3ad;
    --border-color: rgba(46, 48, 56, 0.25);
    --accent-primary: #fa6a2a;
    /* Back-compat alias used by some inline styles (e.g., upload result buttons). */
    --primary-color: var(--accent-primary);
    --accent-hover: #ff8258;
    --accent-secondary: #3f434c;

    /* Button (orange) tokens */
    --btn-orange-top: #f7963a;
    --btn-orange-bottom: #e07b28;
    --btn-orange-top-hover: #ff9833;
    --btn-orange-bottom-hover: #cc6d1f;
    --btn-orange-radius: 0.45rem;
    --btn-orange-shadow: 0 4px 12px rgba(247, 150, 58, 0.18);
    --btn-orange-shadow-hover: 0 6px 16px rgba(247, 150, 58, 0.22);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --backdrop-blur: blur(4px);
}

/* Light theme - applied when user explicitly selects light mode. */
.light-theme {
    color-scheme: light;
    --page-bg: #fff0e6;
    --bg-primary: #ffffff;
    --bg-secondary: rgba(255, 247, 242, 0.6);
    --bg-tertiary: #ffe8dc;
    --text-primary: #1f1f1f;
    --text-secondary: #6b6b6b;
    --text-tertiary: #9ca3af;
    --border-color: rgba(242, 211, 197, 0.25);
    --accent-primary: #f7963a;
    --primary-color: var(--accent-primary);
    --accent-hover: #ff9833;
    --accent-secondary: #ff8a57;
    --btn-orange-top: #f7963a;
    --btn-orange-bottom: #e07b28;
    --btn-orange-top-hover: #ff9833;
    --btn-orange-bottom-hover: #cc6d1f;
    /* Reduced glow on light backgrounds. */
    --btn-orange-shadow: 0 4px 10px rgba(247, 150, 58, 0.15);
    --btn-orange-shadow-hover: 0 6px 14px rgba(247, 150, 58, 0.20);
    --backdrop-blur: blur(4px);
}

.dark-theme {
    color-scheme: dark;
    --page-bg: #0c0d10;
    --bg-primary: #151618;
    --bg-secondary: rgba(31, 32, 36, 0.6);
    --bg-tertiary: #27292f;
    --text-primary: #f5f6f7;
    --text-secondary: #c9cbd1;
    --text-tertiary: #9fa3ad;
    --border-color: rgba(46, 48, 56, 0.25);
    --accent-primary: #fa6a2a;
    --primary-color: var(--accent-primary);
    --accent-hover: #ff8258;
    --accent-secondary: #3f434c;

    /* Dark theme: keep the orange buttons in the same darker family (not the lighter accent). */
    --btn-orange-top: #f7963a;
    --btn-orange-bottom: #e07b28;
    --btn-orange-top-hover: #ff9833;
    --btn-orange-bottom-hover: #cc6d1f;
    /* Dark theme: keep the glow controlled (too much reads as "blurry"). */
    --btn-orange-shadow: 0 4px 12px rgba(247, 150, 58, 0.12);
    --btn-orange-shadow-hover: 0 6px 16px rgba(247, 150, 58, 0.14);
    --backdrop-blur: blur(4px);
}

/* --------------------------------------------------------------------------
   Concept 3 mobile gutters (downloads page)
   The right-side padding has been getting clobbered intermittently on mobile.
   This CSS is keyed off renderConcept3Page setting data-layout="concept3".
   -------------------------------------------------------------------------- */
/* Downloads page: on MOBILE only, remove the global vertical padding that creates a big gap
   below the sticky navbar. Desktop should keep the normal site spacing. */
@media (max-width: 768px) {
    body.concept3-downloads .main-content {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* Downloads page: if an announcement/affiliate banner is present for any reason,
   ensure it doesn't reserve space or stack with the sticky navbar. */
body.concept3-downloads .announcement-bar {
    display: none !important;
}

/* Extra safety: if the layout attribute is ever lost, keep gutters via body class. */
body.concept3-downloads #downloadBox {
    box-sizing: border-box !important;
    padding-top: clamp(1rem, 3vw, 2rem) !important;
    padding-bottom: clamp(1rem, 3vw, 2rem) !important;
    padding-left: clamp(1rem, 3vw, 2rem) !important;
    padding-right: clamp(1rem, 3vw, 2rem) !important;
}


/* IMPORTANT: Put gutters INSIDE the Concept 3 container rather than on #downloadBox.
   Some mobile WebViews/UA CSS patterns behave like 100vw for inner content, and outer
   padding then causes right-edge clipping (looks like "no right padding"). */
#downloadBox[data-layout="concept3"],
body.concept3-downloads #downloadBox {
    box-sizing: border-box !important;
    padding: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Mobile: go full-bleed for the Concept 3 download page content.
   This avoids persistent asymmetric gutters and increases preview size. */
@media (max-width: 640px) {
    #downloadBox[data-layout="concept3"] {
        padding: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fallback gutters when the data-layout attribute is missing for any reason */
    body.concept3-downloads #downloadBox {
        padding: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Apply glass morphism to all containers using bg-secondary */
[style*="background: var(--bg-secondary)"],
[style*="background-color: var(--bg-secondary)"],
.comparison-table thead,
.modal-content,
.file-card,
.pricing-card,
.benefit-card,
.metric-card,
.usecase-card,
.affiliate-card,
.faq-item,
.affiliate-cta {
    backdrop-filter: var(--backdrop-blur);
    -webkit-backdrop-filter: var(--backdrop-blur);
}

body {
    font-family: 'Play', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--page-bg);
    color: var(--text-primary);
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Play', sans-serif;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark radials are default (matches dark :root defaults). */
    background:
        radial-gradient(circle at 20% 80%, rgba(247, 150, 58, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 106, 42, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(39, 41, 47, 0.06) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

.light-theme body::before {
    background:
        radial-gradient(circle at 20% 80%, rgba(255, 106, 42, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(247, 150, 58, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 232, 220, 0.04) 0%, transparent 50%);
}

.dark-theme body::before {
    background:
        radial-gradient(circle at 20% 80%, rgba(247, 150, 58, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 106, 42, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(39, 41, 47, 0.06) 0%, transparent 50%);
}

body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dark dot pattern is default (matches dark :root defaults). */
    background-image:
        radial-gradient(circle at 1px 1px, rgba(247, 150, 58, 0.2) 1px, transparent 0);
    background-size: 20px 20px;
    opacity: 0.4;
    pointer-events: none;
    z-index: -1;
}

.light-theme body::after {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 106, 42, 0.15) 1px, transparent 0);
    opacity: 0.3;
}

.dark-theme body::after {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(247, 150, 58, 0.2) 1px, transparent 0);
    opacity: 0.4;
}

/* Noise texture background - no animations needed */

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
}

/* Navbar */
.navbar {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.55rem 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 110;
    box-shadow: var(--shadow-sm);
    transition: padding 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(8px);
}
.navbar.shrunk {
    padding: 0.4rem 0;
    box-shadow: var(--shadow-md);
}

@media (max-width: 768px) {
    .navbar {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        transform: translateZ(0);
    }
    .navbar.shrunk {
        padding: 0.35rem 0;
        box-shadow: var(--shadow-md);
        transform: translateY(-4px);
    }
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (min-width: 768px) {
    .navbar .container {
        flex-wrap: nowrap;
    }
}

.nav-brand {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    color: inherit;
}

/* Logo size reduced by ~40% for all headers */
.logo-image {
    height: 22px !important;
    width: auto !important;
    display: block;
    transition: height 0.2s ease;
}
.navbar.shrunk .logo-image {
    height: 18px;
}

.logo-text {
    font-family: 'Oxanium', sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    letter-spacing: 0.05em;
    -webkit-text-stroke: 0.5px #000000;
}

.logo-text-group {
    display: none;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.logo-emoji {
    font-size: 1.8rem;
    font-style: normal;
}

.logo-file {
    font-family: 'Oxanium', sans-serif;
    font-weight: 600;
    color: #ffffff;
    -webkit-text-stroke: 0.5px #000000;
}

.logo-shot {
    font-family: 'Oxanium', sans-serif;
    font-weight: 600;
    color: #fa3800;
    -webkit-text-stroke: 0.5px #000000;
}

.logo-dot {
    font-family: 'Oxanium', sans-serif;
    font-weight: 600;
    font-size: 1.8rem;
    color: #000000;
    -webkit-text-stroke: 0.5px #000000;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
    flex-wrap: wrap;
    flex: 1;
    justify-content: flex-end;
    margin-left: auto;
}

.nav-links .theme-toggle {
    order: 1;
    margin-left: 0;
}

/* CRITICAL: Force mobile menu toggle to be visible - must come before any display: none rules */
.mobile-menu-toggle,
#mobileMenuToggle,
button.mobile-menu-toggle,
.nav-links .mobile-menu-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.nav-links .mobile-menu-toggle {
    order: 2;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
}

/* New Menu Button and Dropdown */
.nav-menu-btn {
    order: 1;
}

/* Desktop Menu Button - Hidden on mobile, visible on desktop */
.nav-menu-btn-desktop {
    display: none;
}

@media (min-width: 769px) {
    .nav-menu-btn-desktop {
        display: flex;
    }
}

/* Desktop Menu Dropdown - Hidden by default, shown when open */
.nav-menu-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    z-index: 120;
    display: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    overflow: hidden;
}

/* Show dropdown when open */
.nav-menu-dropdown.open {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: all;
    padding: 0.5rem 0;
}

/* Hide desktop dropdown on mobile */
@media (max-width: 768px) {
    .nav-menu-dropdown-desktop {
        display: none;
    }
}

.nav-menu-dropdown-content {
    display: none;
    flex-direction: column;
}

.nav-menu-dropdown.open .nav-menu-dropdown-content {
    display: flex;
}

.nav-menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: all 0.2s ease;
    font-size: 0.95rem;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: 'Play', sans-serif;
}

.nav-menu-item:hover {
    background: var(--bg-secondary);
    color: var(--accent-primary);
}

.nav-menu-item-toggle {
    cursor: pointer;
}

.nav-menu-caret {
    transition: transform 0.2s ease;
    margin-left: auto;
    color: var(--text-secondary);
}

.nav-menu-item-toggle.open .nav-menu-caret {
    transform: rotate(90deg);
}

.nav-menu-submenu {
    display: none;
    padding-left: 1.5rem;
    background: var(--bg-secondary);
}

.nav-menu-submenu.open {
    display: block;
}

.nav-menu-submenu a {
    display: block;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.nav-menu-submenu a:hover {
    background: var(--bg-primary);
    color: var(--accent-primary);
}

/* Mobile Menu Toggle - Visible on both mobile and desktop */
/* CRITICAL: This must override any display: none rule that might exist */
/* REMOVED display: none - button should be visible on all screen sizes */
.mobile-menu-toggle,
#mobileMenuToggle,
button.mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    justify-content: center;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}

/* Ensure mobile menu toggle is visible on desktop - FORCE IT */
@media (min-width: 769px) {
    .mobile-menu-toggle,
    #mobileMenuToggle,
    button.mobile-menu-toggle,
    .nav-links .mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 10 !important;
        width: 32px !important;
        height: 32px !important;
    }
    
    .nav-links {
        display: flex !important;
    }
}

.nav-link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s, text-shadow 0.2s;
    font-family: 'Play', sans-serif;
    font-weight: 500;
    order: 0;
}

.nav-link.active {
    color: var(--accent-primary);
}

.nav-link:hover {
    color: var(--text-primary);
    text-shadow: 0 0 12px rgba(247, 150, 58, 0.25);
}

.theme-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

.theme-toggle svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: currentColor;
    transition: transform 0.2s;
    opacity: 0.9;
}

/* Mobile: Increase SVG icon size inside theme toggle */
@media (max-width: 768px) {
    .theme-toggle svg,
    #themeToggle svg,
    button.theme-toggle svg {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
    }
}

.theme-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* Buttons */
.btn-primary,
.btn-secondary,
.btn-account,
.btn-danger {
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Play', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
    min-height: 40px; /* Touch-friendly minimum */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .btn-primary,
    .btn-secondary,
    .btn-account,
    .btn-danger {
        padding: 0.5rem 1.1rem;
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .btn-primary,
    .btn-secondary,
    .btn-account,
    .btn-danger {
        padding: 0.5rem 0.9rem;
        font-size: 0.9rem;
    }
    
    /* Full width buttons only in specific contexts */
    .upload-actions-row .btn-primary,
    .upload-actions-row .btn-secondary,
    .result-actions .btn-primary,
    .result-actions .btn-secondary {
        width: 100%;
    }
    
    /* Navbar buttons should not be full width */
    .navbar .btn-account,
    .navbar .btn-primary,
    .banner-actions .btn-primary,
    .btn-compact {
        width: auto;
        min-width: auto;
    }
}

/* FIX: Remove display: none from .mobile-menu-toggle if it exists */
.mobile-menu-toggle {
    display: flex !important;
}

.btn-primary {
    background: linear-gradient(to bottom, var(--btn-orange-top), var(--btn-orange-bottom));
    color: white;
    box-shadow: var(--btn-orange-shadow);
    opacity: 1;
    border-radius: var(--btn-orange-radius);
}

/* Upload CTA: keep it prominent, but reduce the "glow" compared to global primary buttons */
.upload-actions-row .btn-primary.btn-upload {
    box-shadow: 0 10px 22px rgba(247, 150, 58, 0.18);
}
.upload-actions-row .btn-primary.btn-upload:hover {
    box-shadow: 0 12px 26px rgba(247, 150, 58, 0.22);
}

.btn-primary:hover {
    background: linear-gradient(to bottom, var(--btn-orange-top-hover), var(--btn-orange-bottom-hover));
    transform: translateY(-1px);
    box-shadow: var(--btn-orange-shadow-hover, var(--btn-orange-shadow));
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    box-shadow: none;
}

.btn-secondary:hover {
    background: linear-gradient(to bottom, rgba(255, 106, 42, 0.15), rgba(217, 47, 0, 0.2));
    box-shadow: none;
}

.btn-account {
    background: linear-gradient(to bottom, var(--btn-orange-top), var(--btn-orange-bottom));
    color: #fff;
    border: none;
    order: 3;
    box-shadow: var(--btn-orange-shadow);
    opacity: 1;
    border-radius: var(--btn-orange-radius);
}

.btn-account:hover {
    background: linear-gradient(to bottom, var(--btn-orange-top-hover), var(--btn-orange-bottom-hover));
    transform: translateY(-1px);
    box-shadow: var(--btn-orange-shadow-hover, var(--btn-orange-shadow));
}

.btn-danger {
    background: linear-gradient(to bottom, #ff5555, #c02a2a);
    color: #fff;
    border: none;
    box-shadow: none;
    opacity: 0.95;
}

.btn-danger:hover {
    background: linear-gradient(to bottom, #ff6a6a, #b02020);
    transform: translateY(-1px);
    box-shadow: none;
}

.btn-google {
    padding: 0.5rem 1.25rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Play', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: rgba(255,255,255,.06);
    color: var(--text-primary);
    width: 100%;
    gap: 0.75rem;
}

.btn-google:hover {
    background: rgba(255,255,255,.10);
    border-color: rgba(255,255,255,.22);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

.btn-google:active {
    background: rgba(255,255,255,.08);
    transform: translateY(0);
}

/* Light theme: restore standard white Google button */
.light-theme .btn-google {
    background: #fff;
    color: #3c4043;
    border-color: #dadce0;
}
.light-theme .btn-google:hover {
    background: #f8f9fa;
    border-color: #c4c7c5;
    box-shadow: 0 1px 3px rgba(60,64,67,.3);
}

.btn-google .google-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-github {
    padding: 0.5rem 1.25rem;
    border: 1px solid #30363d;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    font-family: 'Play', sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background: #24292e;
    color: #ffffff;
    width: 100%;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.btn-github:hover {
    background: #2f363d;
    border-color: #484f58;
    transform: translateY(-1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.btn-github:active {
    background: #1b1f23;
    transform: translateY(0);
}

.btn-github .github-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.auth-divider {
    display: flex;
    align-items: center;
    margin: 1rem 0;
    text-align: center;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.auth-divider span {
    padding: 0 1rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-large {
    padding: 0.75rem 1.75rem;
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .btn-large {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .btn-large {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
        width: 100%;
    }
}

.btn-copy {
    padding: 0.5rem 1rem;
    background-color: transparent;
    border: 1px solid var(--accent-primary);
    border-radius: 0.5rem;
    cursor: pointer;
    color: var(--accent-primary);
    text-decoration: none !important;
    box-shadow: none;
}

.btn-copy:hover {
    background: linear-gradient(to bottom, rgba(255, 106, 42, 0.15), rgba(217, 47, 0, 0.2));
    box-shadow: none;
}

.nav-dropdown {
    position: relative;
    order: 1;
}

.nav-dropdown-toggle {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-family: 'Play', sans-serif;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: background-color 0.2s, color 0.2s;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

.nav-dropdown-toggle:hover {
    background-color: rgba(247, 150, 58, 0.1);
    color: var(--accent-primary);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
    padding: 0.75rem 0;
    min-width: 190px;
    flex-direction: column;
    z-index: 120;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, max-height 0.2s ease, padding 0.2s ease;
    pointer-events: none;
    display: flex;
}

/* Keep dropdown open when hovering over the container, button, or menu */
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu,
.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 500px;
    pointer-events: all;
}

/* Add a small invisible bridge to prevent hover loss when moving from button to menu */
.nav-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 0.5rem;
    background: transparent;
    z-index: 121;
    pointer-events: none;
}

/* On desktop, show dropdown when hovering over the bridge area too */
@media (min-width: 769px) {
    .nav-dropdown:hover::after {
        pointer-events: all;
    }
}

.nav-dropdown-menu a {
    padding: 0.5rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.95rem;
}

.nav-dropdown-menu a:hover {
    background-color: var(--bg-secondary);
}

.nav-dropdown.open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    max-height: 500px;
    pointer-events: all;
}

.nav-dropdown-menu:hover {
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* Mobile Menu Toggle Button - Spans inside the button */
.mobile-menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Menu - Hidden by default, shown when open (works for both desktop and mobile) */
.mobile-menu {
    display: none;
    position: fixed;
    top: 68px;
    right: 1rem; /* Default position - will be adjusted by JavaScript */
    left: auto;
    width: auto;
    min-width: 280px;
    max-width: 400px;
    /* Opaque dropdown surface (no glass). */
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    z-index: 1000;
    max-height: calc(100vh - 100px);
    overflow-x: visible;
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-10px) scale(0.99);
    transform-origin: top right;
    transition: opacity 0.18s ease, transform 0.18s ease;
    will-change: transform, opacity;
}

/* Dark theme: keep it opaque; the variables already adapt. */
.dark-theme .mobile-menu {
    background: var(--bg-primary);
    border-color: var(--border-color);
}

/* Small "pointer" to visually anchor the menu to the hamburger button */
.mobile-menu::before {
    content: '';
    position: absolute;
    top: -7px;
    right: var(--mobile-menu-pointer-right, 22px);
    width: 14px;
    height: 14px;
    background: inherit;
    border-left: 1px solid var(--border-color);
    border-top: 1px solid var(--border-color);
    transform: rotate(45deg);
    box-sizing: border-box;
    pointer-events: none;
}

/* Mobile menu visible when open (both mobile and desktop) */
.mobile-menu.open {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Back-compat: some older pages toggle `.active` instead of `.open` */
.mobile-menu.active {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* On small mobile screens, make menu full-width for better usability */
@media (max-width: 480px) {
    .mobile-menu {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    /* Full-width panels don't need a pointer */
    .mobile-menu::before {
        display: none;
    }
}

.mobile-menu-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
}

.mobile-menu-link:hover {
    background: var(--bg-secondary);
    border-color: rgba(148, 163, 184, 0.18);
}

.mobile-menu-button {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    transition: background-color 0.2s, border-color 0.2s;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.mobile-menu-button:hover {
    background: var(--bg-secondary);
    border-color: rgba(148, 163, 184, 0.18);
}

.mobile-menu-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.mobile-menu-header {
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mobile-menu-toggle-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.2s;
}

.mobile-menu-toggle-section:hover {
    background: var(--bg-secondary);
}

/* Rotate the chevron when the Tools section is open */
.mobile-menu-toggle-section.open .mobile-menu-arrow svg {
    transform: rotate(180deg);
}

.mobile-menu-arrow {
    font-size: 0.75rem;
    transition: transform 0.2s ease;
    color: var(--text-secondary);
}

.mobile-menu-content {
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
}

/* Hide desktop nav elements on all screen sizes - we use hamburger menu everywhere now */
/* CRITICAL: These must be hidden on ALL pages and ALL screen sizes */
.nav-link-desktop,
.nav-dropdown-desktop,
.btn-account-desktop,
a.nav-link-desktop,
div.nav-dropdown-desktop,
button.btn-account-desktop,
.nav-links .nav-link-desktop,
.nav-links .nav-dropdown-desktop,
.nav-links .btn-account-desktop,
.navbar .nav-link-desktop,
.navbar .nav-dropdown-desktop,
.navbar .btn-account-desktop,
.navbar .container .nav-links .nav-link-desktop,
.navbar .container .nav-links .nav-dropdown-desktop,
.navbar .container .nav-links .btn-account-desktop,
body .nav-link-desktop,
body .nav-dropdown-desktop,
body .btn-account-desktop,
html body .nav-link-desktop,
html body .nav-dropdown-desktop,
html body .btn-account-desktop {
    display: none !important;
    visibility: hidden !important;
}

@media (max-width: 768px) {
    
    .navbar {
        overflow: visible !important;
    }
    .navbar .container {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        overflow: visible !important;
    }
    .nav-brand {
        flex: 0 0 auto;
        margin-bottom: 0;
    }
    .nav-links {
        width: auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: nowrap;
        overflow: visible !important;
    }
    .nav-links .theme-toggle {
        order: 2; /* Position between Tools and Login on mobile too */
    }
    /* Ensure mobile menu toggle is visible on mobile */
    .nav-links .mobile-menu-toggle,
    .nav-links #mobileMenuToggle,
    .nav-links button.mobile-menu-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 32px !important;
        height: 32px !important;
    }
    .nav-dropdown {
        position: relative;
    }
    .nav-dropdown-menu {
        position: fixed !important; /* Use fixed positioning to escape navbar container */
        top: auto !important;
        bottom: auto !important;
        right: 1rem !important;
        left: auto !important;
        width: 220px;
        max-width: calc(100vw - 2rem);
        box-shadow: var(--shadow-lg);
        transform: none;
        border: 1px solid var(--border-color);
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        z-index: 10000 !important; /* Higher z-index for mobile */
    }
    
    .nav-dropdown.open .nav-dropdown-menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: all !important;
        position: fixed !important; /* Fixed positioning to pop out */
    }
    
    .nav-dropdown.open {
        z-index: 10001; /* Ensure parent has high z-index when open */
    }
    
    /* Calculate dropdown position dynamically via JavaScript */
    .nav-dropdown-menu.positioned {
        position: fixed !important;
    }
    
    .nav-dropdown-toggle {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    
    .btn-account {
        padding: 0.4rem 0.8rem;
        font-size: 0.9rem;
        border-radius: 0.5rem;
    }
}

.btn-link {
    background: none;
    border: none;
    color: var(--accent-secondary);
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

/* Home-page P2P CTA: make it look intentional (brand accent), without changing all .btn-link uses */
.p2p-cta-link {
    color: var(--accent-primary);
    text-decoration: none;
}

.p2p-cta-link:hover {
    color: var(--accent-primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.p2p-cta-link:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 3px;
    border-radius: 6px;
}

.share-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    flex: 1;
}

.share-buttons > span:first-child {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-right: 0.5rem;
    flex: 0 0 auto;
}

.share-label {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.share-buttons a {
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: var(--bg-secondary);
}

.share-buttons a:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border-color: var(--accent-primary);
    background: rgba(247, 150, 58, 0.1);
    transition: background-color 0.2s, border-color 0.2s;
}

.share-buttons a:hover {
    background-color: rgba(247, 150, 58, 0.08);
    border-color: var(--accent-primary);
}

@media (max-width: 768px) {
    .share-actions-row {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
    }
    
    .share-buttons {
        gap: 0.5rem;
        flex-wrap: wrap !important;
        width: 100% !important;
        justify-content: center !important;
        overflow: visible !important;
    }
    
    .share-buttons > span:first-child {
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 0.5rem !important;
    }
    
    .share-buttons a {
        padding: 0.5rem 0.75rem !important;
        min-width: auto !important;
        flex: 1 1 auto !important;
        justify-content: center !important;
        max-width: calc(50% - 0.25rem) !important;
    }

    .share-buttons .share-label {
        display: inline !important;
        font-size: 0.8rem !important;
    }
    
    .share-buttons a .share-icon {
        font-size: 1rem;
        width: 1.2rem;
        height: 1.2rem;
        margin: 0;
    }
}

@media (max-width: 480px) {
    .share-buttons {
        gap: 0.4rem;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    
    .share-buttons a {
        padding: 0.5rem 0.6rem !important;
        min-width: auto !important;
        flex: 1 1 calc(50% - 0.2rem) !important;
        justify-content: center !important;
        max-width: calc(50% - 0.2rem) !important;
    }

    .share-buttons .share-label {
        display: inline !important;
        font-size: 0.75rem !important;
    }
    
    .share-buttons a .share-icon {
        font-size: 0.9rem;
        width: 1.1rem;
        height: 1.1rem;
        margin: 0;
    }
}

/* Mobile share buttons in upload modal - show above QR/Embed */
@media (max-width: 768px) {
    .share-buttons-mobile-wrapper {
        display: block !important;
    }
    
    .share-buttons-mobile {
        display: flex !important;
        flex-direction: row !important;
        gap: 0.5rem !important;
        align-items: center !important;
        justify-content: center !important;
        margin-bottom: 0.75rem !important;
    }
    
    .share-buttons-mobile a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 0.5rem !important;
        background: var(--bg-secondary) !important;
        border: 1px solid var(--border-color) !important;
        cursor: pointer !important;
        transition: all 0.2s !important;
    }
    
    .share-buttons-mobile a:hover {
        background: var(--bg-primary) !important;
        transform: translateY(-2px) !important;
    }
    
    /* Hide desktop share buttons on mobile */
    .share-buttons:not(.share-buttons-mobile) {
        display: none !important;
    }
}

/* Desktop - hide mobile share buttons */
@media (min-width: 769px) {
    .share-buttons-mobile-wrapper {
        display: none !important;
    }
}

.share-icon {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: #fff;
}

.share-icon-x { background-color: #000; }
.share-icon-facebook { background-color: #1877f2; }
.share-icon-whatsapp { background-color: #25d366; }
.share-icon-email { background-color: #f97316; }

.account-menu {
    position: absolute;
    background: rgba(10,10,12,.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,.11);
    border-radius: var(--r16);
    box-shadow: 0 20px 56px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.06) inset;
    padding: 8px 6px;
    display: none;
    flex-direction: column;
    z-index: 200;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}

.account-menu::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    height: 12px;
}

.account-menu a,
.account-menu button {
    padding: 8px 12px;
    background: none;
    border: none;
    text-align: left;
    font-family: var(--font, 'Play', sans-serif);
    font-size: 0.85rem;
    color: var(--t2);
    cursor: pointer;
    border-radius: var(--r8);
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

.account-menu a:hover,
.account-menu button:hover {
    color: var(--t1);
    background: rgba(255,255,255,.07);
}

.account-menu[style*="display: flex"] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Main Content */
.main-content {
    min-height: calc(100vh - 200px);
    padding: 3rem 0;
    position: relative;
    z-index: 1;
}

/* Content area frosted mask overlay - DARK THEME ONLY */
.dark-theme .main-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    background: 
        radial-gradient(ellipse 100% 40% at 50% 0%, rgba(247, 150, 58, 0.05) 0%, transparent 70%),
        linear-gradient(180deg, 
            rgba(12, 13, 16, 0.7) 0%,
            rgba(12, 13, 16, 0.5) 20%,
            rgba(12, 13, 16, 0.5) 80%,
            rgba(12, 13, 16, 0.7) 100%);
    z-index: -1;
    pointer-events: none;
}

.hero-section {
    text-align: center;
    margin-bottom: 3rem;
}

@media (max-width: 768px) {
    .hero-section {
        margin-bottom: 2rem;
    }
    
    .hero-title {
        font-size: 2rem !important;
    }
    
    .hero-subtitle {
        font-size: 1rem !important;
    }
}

@media (max-width: 480px) {
    .hero-section {
        margin-bottom: 1.5rem;
    }
    
    .hero-title {
        font-size: 1.75rem !important;
    }
    
    .hero-subtitle {
        font-size: 0.9rem !important;
    }
}

.announcement-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 0.5rem 0;
    background: linear-gradient(120deg, rgba(247, 150, 58, 0.15), rgba(255, 217, 199, 0.35));
    border-bottom: 1px solid rgba(247, 150, 58, 0.25);
    backdrop-filter: blur(8px);
    margin-top: 0;
    margin-bottom: 0;
    transform: translateY(0);
    transition: top 0.2s ease;
    border-top: none;
}

.banner-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.banner-text {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    color: var(--text-primary);
}

.banner-text p {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9rem;
}

.banner-icon {
    font-size: 1.5rem;
}

.banner-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.btn-compact {
    padding: 0.45rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.banner-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--text-secondary);
    cursor: pointer;
}

@media (max-width: 768px) {
    .announcement-bar {
        top: 0;
    }
    
    .banner-content {
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
    .banner-text {
        flex: 1;
        min-width: 0;
    }
    .banner-text > div {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .banner-text strong {
        white-space: nowrap;
    }
    .banner-text p {
        margin: 0;
        white-space: nowrap;
    }
    .banner-actions {
        flex-shrink: 0;
        margin-left: 0.5rem;
    }
}

.hero-title {
    font-size: 3rem;
    font-weight: 800;
    font-family: 'Play', sans-serif;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    font-family: 'Play', sans-serif;
    max-width: 640px;
    margin: 0 auto 1.5rem;
}

.hero-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.85rem;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}
/* Upload Section */
.upload-section {
    max-width: 800px;
    margin: 0 auto 4rem;
}

/* Ensure a consistent vertical gap between the dropzone card and subsequent content (converter intro, options, etc.) */
.upload-section > .upload-box {
    margin-bottom: 1.15rem;
}

@media (max-width: 768px) {
    .upload-section {
        margin: 0 auto 3rem;
    }
}

@media (max-width: 480px) {
    .upload-section {
        margin: 0 auto 2rem;
    }
}

.tool-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    background: var(--bg-secondary);
    padding: 0.4rem;
    border-radius: 0.5rem;
    margin-top: 1.5rem;
}

.tool-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-family: 'Play', sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s;
}

.tool-tab.active {
    background: var(--bg-primary);
    box-shadow: inset 0 0 0 1px var(--border-color);
    color: var(--text-primary);
}

/* Mobile: Make tabs more compact */
@media (max-width: 768px) {
    .tool-tabs {
        padding: 0.25rem;
        gap: 0.25rem;
        margin-top: 1rem;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        flex-wrap: nowrap; /* Horizontal scroll instead of wrapping */
    }
    
    .tool-tab {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
        flex: 0 0 auto; /* Don't grow, use content width */
        min-width: fit-content;
        white-space: nowrap;
    }
    
    /* Hide scrollbar but keep functionality */
    .tool-tabs::-webkit-scrollbar {
        height: 3px;
    }
    
    .tool-tabs::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .tool-tabs::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 2px;
    }
}

.tool-panel {
    display: none;
    margin-top: 1.5rem;
}

.tool-panel.active {
    display: block;
}

.panel-subtitle {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
}

.tool-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.file-input {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    color: var(--text-secondary);
}

.file-input input {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    font-size: 1rem;
    cursor: pointer;
}

.split-inputs {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.split-inputs label {
    flex: 1;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.split-inputs input {
    padding: 0.65rem;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.tool-status {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.tool-form textarea {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    padding: 0.65rem 0.9rem;
    background: var(--bg-primary);
    font-family: 'Play', sans-serif;
    resize: vertical;
}

.checkbox-inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
}

/* PDF Toolbar */
.pdf-toolbar {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pdf-toolbar-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem;
    border-right: 1px solid var(--border-color);
}

.toolbar-group:last-child {
    border-right: none;
}

.toolbar-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 0.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.toolbar-btn:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
}

.toolbar-btn.active {
    background: linear-gradient(to bottom, #ff6a2a, #d92f00);
    color: white;
    border-color: var(--accent-primary);
    box-shadow: none;
}

.toolbar-btn svg {
    width: 16px;
    height: 16px;
}

.toolbar-select,
.toolbar-input {
    height: 32px;
    padding: 0 0.625rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
    font-family: 'Play', sans-serif;
    transition: border-color 0.15s;
}

.toolbar-select:focus,
.toolbar-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(247, 150, 58, 0.1);
}

.toolbar-select {
    min-width: 100px;
    cursor: pointer;
}

.toolbar-select-small {
    min-width: 70px;
    width: 70px;
}

.toolbar-input {
    width: 70px;
    text-align: center;
}

.toolbar-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'Play', sans-serif;
    white-space: nowrap;
    margin-right: 0.25rem;
}

.toolbar-color {
    width: 32px;
    height: 32px;
    padding: 2px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: border-color 0.15s;
    flex-shrink: 0;
}

.toolbar-color:hover {
    border-color: var(--accent-primary);
}

.toolbar-color::-webkit-color-swatch-wrapper {
    padding: 0;
    border-radius: 0.25rem;
}

.toolbar-color::-webkit-color-swatch {
    border: none;
    border-radius: 0.25rem;
}

.toolbar-slider {
    width: 80px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg-tertiary);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.toolbar-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toolbar-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent-primary);
    cursor: pointer;
    border: 2px solid var(--bg-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toolbar-value {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'Play', sans-serif;
    min-width: 40px;
    text-align: center;
}

.pdf-toolbar-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.pdf-toolbar-hint .hint-icon {
    font-size: 1rem;
}

.pdf-toolbar-hint .hint-text {
    line-height: 1.4;
}

/* Responsive toolbar */
@media (max-width: 768px) {
    .pdf-toolbar {
        padding: 0.5rem;
        gap: 0.5rem;
        margin-bottom: 0.75rem;
    }

    /* Each toolbar row is its own horizontal scroller (exactly two rows) */
    .pdf-toolbar-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--border-color) transparent;
        scroll-behavior: smooth;
        padding-bottom: 2px;
    }

    .pdf-toolbar-row::-webkit-scrollbar {
        height: 4px;
    }

    .pdf-toolbar-row::-webkit-scrollbar-track {
        background: transparent;
    }

    .pdf-toolbar-row::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 2px;
    }
    
    .toolbar-group {
        border-right: 1px solid var(--border-color);
        border-bottom: none;
        padding: 0.25rem 0.5rem;
        flex-wrap: nowrap;
        gap: 0.4rem;
        flex-shrink: 0;
        min-width: fit-content;
    }
    
    .toolbar-group:last-child {
        border-right: none;
        padding-right: 0;
    }
    
    .toolbar-btn {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    
    /* Make highlight preview chip more compact on mobile */
    .highlight-preview-chip {
        min-width: auto;
        padding: 0.1rem 0.4rem;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
    
    .highlight-preview-chip .chip-swatch {
        width: 1.5rem;
        height: 0.75rem;
    }
    
    .highlight-preview-chip .chip-label {
        font-size: 0.75rem;
    }
    
    /* Improve color inputs on mobile */
    .toolbar-color {
        width: 32px;
        height: 32px;
        flex-shrink: 0;
    }
    
    /* Make slider more touch-friendly */
    .toolbar-slider {
        flex: 1;
        min-width: 80px;
    }
    
    /* Stack color controls better on mobile */
    .toolbar-group .toolbar-label {
        font-size: 0.85rem;
    }
    
    /* Text formatting group on mobile - keep compact */
    #textFormattingGroup {
        flex-wrap: nowrap;
        gap: 0.3rem;
    }
    
    #textFormattingGroup .toolbar-btn {
        flex-shrink: 0;
    }
    
    #textFormattingGroup .toolbar-select {
        min-width: 70px;
        font-size: 0.75rem;
        padding: 0.25rem 0.4rem;
    }
    
    /* Draw size group - keep compact */
    #drawSizeGroup {
        flex-wrap: nowrap;
        gap: 0.3rem;
    }
    
    #drawSizeGroup .toolbar-slider {
        min-width: 60px;
        max-width: 80px;
    }
}

.pdf-preview-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 0;
    align-items: stretch;
    width: 100%;
}

.pdf-preview-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    background: var(--bg-primary);
    padding: 1rem;
}

/* Mobile preview improvements */
@media (max-width: 768px) {
    #pdfPreviewWrapper {
        margin-top: 0.5rem !important;
    }

    .pdf-preview-grid {
        gap: 1.5rem;
        padding: 0.5rem;
    }
    
    .pdf-preview-page {
        padding: 0.75rem;
        border-radius: 0.75rem;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom;
    }
    
    .pdf-page-stage {
        width: 100%;
        overflow: visible;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x pan-y pinch-zoom;
        transform-origin: top left;
    }
    
    .pdf-canvas {
        max-width: 100%;
        height: auto;
        touch-action: pan-x pan-y pinch-zoom;
    }
    
    /* Enable native pinch-to-zoom on mobile */
    .pdf-preview-container {
        touch-action: pan-x pan-y pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 480px) {
    .pdf-preview-grid {
        gap: 1rem;
        padding: 0.25rem;
    }
    
    .pdf-preview-page {
        padding: 0.5rem;
    }
}

.pdf-page-stage {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

.pdf-canvas {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.75rem;
    /* Maintain aspect ratio - prevent stretching */
    object-fit: contain;
    max-width: 100%;
}

.pdf-field-layer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 10;
}

.pdf-field-input {
    position: absolute;
    border: 1px solid var(--accent-primary);
    border-radius: 0.4rem;
    font-family: 'Play', sans-serif;
    font-size: 0.9rem;
    box-sizing: border-box;
    padding: 0.05rem 0.15rem;
    background-color: rgba(255,255,255,0.9);
    color: var(--text-primary);
    pointer-events: auto;
}

/* Native checkboxes/radios get visually shifted by padding/border.
   Make them fill the widget rect and remove inner padding so they center properly. */
.pdf-field-input[type="checkbox"],
.pdf-field-input[type="radio"] {
    padding: 0;
    margin: 0;
    border-radius: 0.25rem;
    width: 100%;
    height: 100%;
}

.pdf-field-input:focus {
    outline: 2px solid var(--accent-primary);
}

.pdf-edit-layer {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
}

.pdf-text-input-overlay {
    position: absolute;
    z-index: 15;
}

.pdf-inline-text-input {
    background: transparent;
    border: 1px solid var(--accent-primary);
    border-radius: 0.35rem;
    padding: 0.2rem 0.45rem;
    font-family: 'Play', sans-serif;
    font-size: 0.95rem;
    color: var(--text-primary);
    caret-color: var(--accent-primary);
    outline: none;
    box-shadow: none;
    min-width: 160px;
    min-height: 2rem;
    line-height: 1.1;
    max-width: min(70vw, 420px);
    backdrop-filter: none;
    transition: outline-color 0.2s ease, border-color 0.2s ease;
}

@media (max-width: 768px) {
    .pdf-inline-text-input {
        min-width: 140px;
        max-width: min(80vw, 340px);
    }
}

.pdf-inline-text-input::placeholder {
    color: rgba(100, 116, 139, 0.8);
}

.dark-theme .pdf-inline-text-input {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.pdf-inline-text-input:focus {
    border-color: var(--accent-hover, var(--accent-primary));
}

.pdf-help-tip-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    padding: 0.35rem 0.6rem;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
}

.pdf-help-tip-btn:hover {
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.pdf-help-tooltip {
    position: absolute;
    margin-top: 0.5rem;
    left: 0;
    right: 0;
    max-width: 720px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.75rem 0.9rem;
    border-radius: 0.75rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    z-index: 50;
}

.pdf-toolbar-hint {
    position: relative;
    gap: 0.75rem;
}

/* Modern scrollbar for upload results overflow - invisible by default, appears on hover */
#uploadResultsOverflow {
    border: none !important;
    scrollbar-width: none; /* Firefox - hide scrollbar */
    -ms-overflow-style: none; /* IE and Edge - hide scrollbar */
}

/* Webkit browsers - hide scrollbar by default */
#uploadResultsOverflow::-webkit-scrollbar {
    width: 8px;
}

#uploadResultsOverflow::-webkit-scrollbar-track {
    background: transparent;
}

#uploadResultsOverflow::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 10px;
    transition: background 0.2s ease;
}

/* Show scrollbar thumb on hover only */
#uploadResultsOverflow:hover::-webkit-scrollbar-thumb {
    background: rgba(239, 68, 68, 0.2);
}

#uploadResultsOverflow:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(239, 68, 68, 0.4);
}

/* Upload result box styling */
.upload-result-box {
    margin-bottom: 1.5rem;
}

.upload-result-box:last-child {
    margin-bottom: 0;
}

.pdf-selection-overlay {
    position: absolute;
    border: 1px dashed var(--accent-primary);
    border-radius: 0.35rem;
    background: rgba(255, 255, 0, 0.25);
    pointer-events: none;
    z-index: 12;
    mix-blend-mode: multiply;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.pdf-selection-overlay.is-ellipse {
    border-radius: 999px;
}

.pdf-arrow-preview {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 11;
}

.pdf-arrow-preview line,
.pdf-arrow-preview polygon {
    stroke: var(--accent-primary);
    fill: var(--accent-primary);
    opacity: 0.9;
}

.pdf-image-overlay {
    position: absolute;
    pointer-events: none;
    border: 2px solid var(--accent-secondary);
    border-radius: 0.4rem;
    z-index: 14;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.1);
}

.pdf-image-overlay img {
    width: 100%;
    height: 100%;
    object-fit: fill !important; /* Stretch to fill, don't maintain aspect ratio */
    opacity: 0.9;
    display: block;
}

.highlight-preview-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    font-size: 0.75rem;
    color: var(--text-secondary);
    min-width: 90px;
    justify-content: space-between;
}

.highlight-preview-chip .chip-swatch {
    width: 2.25rem;
    height: 0.9rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 0, 0.5);
    box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.1);
}

.highlight-preview-chip .chip-label {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Hide preview chip on mobile - opacity slider already shows the value */
@media (max-width: 768px) {
    .highlight-preview-chip {
        display: none;
    }
}

.pdf-page-stage {
    position: relative;
}

.tool-preview {
    margin-top: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    background: var(--bg-secondary);
}

.tool-preview img,
.tool-preview video,
.tool-preview canvas {
    max-width: 100%;
    border-radius: 0.75rem;
}

.tool-preview-list {
    list-style: none;
    color: var(--text-secondary);
}

.tool-preview-item {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    padding: 0.35rem 0;
}

.upload-box,
.content-card,
.pricing-card,
.result-success,
.download-box,
.stat-card {
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.upload-box:hover,
.content-card:hover,
.pricing-card:hover,
.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15);
}

.files-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 1.25rem;
}

.file-card {
    padding: 1.25rem;
    border-radius: 1rem;
    position: relative;
    overflow: hidden;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.file-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.file-thumb {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(247, 150, 58, 0.12);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

.file-thumb-lock {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(247, 150, 58, 0.12);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.file-thumb-lock svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.file-card-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
    word-break: break-word;
}

.file-card-subtitle {
    margin: 0.2rem 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.file-card-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(247, 150, 58, 0.12);
    color: var(--accent-primary);
}

.file-card-badge.expired {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.file-card-badge.scheduled {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.file-meta {
    margin-top: 1rem;
    display: grid;
    gap: 0.4rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.file-meta span {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.file-meta strong {
    font-weight: 600;
    color: var(--text-primary);
}

.file-meta em {
    font-style: normal;
}

.file-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.file-actions .btn-secondary,
.file-actions .btn-danger {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: 140px;
    text-align: center;
    font-size: 0.9rem;
}

.file-actions a.btn-secondary {
    text-align: center;
}

.upload-box,
.content-card,
.pricing-card,
.result-success,
.download-box,
.stat-card {
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.upload-box:hover,
.content-card:hover,
.pricing-card:hover,
.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 60px rgba(15, 23, 42, 0.15);
}

.upload-box {
    background-color: var(--bg-primary);
    border: 3px dashed var(--border-color);
    border-radius: 1rem;
    padding: 5rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

/* Files Gallery Styles */
.files-gallery {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

.files-gallery h2 {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    letter-spacing: -0.02em;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
    width: 100%;
}

.gallery-file-card {
    position: relative;
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
}

.gallery-file-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-primary);
}

.gallery-file-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-primary), rgba(247, 150, 58, 0.5));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-file-card:hover::before {
    opacity: 1;
}

.gallery-file-checkbox {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 10;
    opacity: 0.9;
}

.gallery-file-checkbox:hover {
    opacity: 1;
}

.gallery-file-checkbox input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    accent-color: var(--accent-primary);
    transform: scale(1.2);
}

.gallery-checkbox-label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 9;
}

.gallery-file-card:hover .gallery-file-checkbox {
    opacity: 1;
}

.gallery-file-preview {
    width: 100%;
    height: 200px;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.gallery-preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-preview-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.08), rgba(255, 107, 74, 0.12));
    position: relative;
    transition: background 0.3s ease;
}

.gallery-file-card:hover .gallery-preview-placeholder {
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.12), rgba(255, 107, 74, 0.18));
}

.gallery-preview-placeholder .file-icon {
    font-size: 3.5rem;
    opacity: 0.7;
    transition: transform 0.3s ease, opacity 0.3s ease;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.gallery-preview-placeholder .file-icon-svg {
    width: 3rem;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-primary);
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.gallery-preview-placeholder .file-icon-svg svg {
    width: 100%;
    height: 100%;
}

.gallery-file-card:hover .gallery-preview-placeholder .file-icon,
.gallery-file-card:hover .gallery-preview-placeholder .file-icon-svg {
    transform: scale(1.1);
    opacity: 0.9;
}

.gallery-zk-badge {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.gallery-file-info {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.gallery-file-name {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.gallery-file-meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
}

.gallery-file-actions {
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.gallery-download-btn {
    width: 100%;
    padding: 0.875rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.gallery-download-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.gallery-download-btn:hover::before {
    width: 300px;
    height: 300px;
}

.gallery-download-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(247, 150, 58, 0.3);
}

.btn-small {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.gallery-error-card {
    opacity: 0.7;
}

.gallery-error-card .gallery-file-name {
    color: var(--text-secondary);
}

/* Responsive Gallery Grid - 4 columns on large screens */
@media (min-width: 1400px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
    }
}

@media (min-width: 1024px) and (max-width: 1399px) {
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem;
    }
}

@media (max-width: 767px) {
    .files-gallery {
        padding: 1.5rem 1rem;
    }
    
    .files-gallery h2 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .gallery-file-preview {
        height: 180px;
    }
}

@media (max-width: 480px) {
    .files-gallery {
        padding: 1rem 0.75rem;
    }
    
    .files-gallery h2 {
        font-size: 1.25rem;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .gallery-file-preview {
        height: 150px;
    }
    
    .gallery-file-info {
        padding: 0.75rem;
    }
    
    .gallery-file-name {
        font-size: 0.875rem;
    }
    
    .gallery-file-meta {
        font-size: 0.8rem;
    }
    
    .gallery-file-actions {
        padding: 0 0.75rem 0.75rem 0.75rem;
    }
    
    .gallery-download-btn {
        padding: 0.625rem;
        font-size: 0.85rem;
    }
}

.upload-box:hover {
    border-color: var(--accent-primary);
    background-color: var(--bg-secondary);
}

.upload-box.dragover {
    border-color: var(--accent-primary);
    background-color: var(--bg-secondary);
    transform: scale(1.02);
}

.upload-icon {
    font-size: 0;
    margin-bottom: 1rem;
}

.upload-box h2 {
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.upload-hint {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

/* Converter page helpers */
.tool-intro-card {
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    background: var(--bg-primary);
    box-shadow: var(--shadow-md);
    padding: 1.1rem 1.1rem 0.9rem 1.1rem;
    margin: 0 0 1.15rem 0;
}

.tool-title {
    margin: 0 0 0.35rem 0;
    font-size: 1.65rem;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.tool-subtitle {
    margin: 0 0 0.9rem 0;
    color: var(--text-secondary);
    line-height: 1.45;
}

.converter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: -0.5rem 0 1rem 0;
}

.converter-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.2;
}

.converter-how {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0.25rem 0 1.1rem 0;
}

.converter-how-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.9rem;
}

.converter-step-num {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 150, 58, 0.12);
    color: var(--accent-primary);
    font-weight: 700;
    flex-shrink: 0;
}

.converter-details {
    margin-top: 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    background: var(--bg-secondary);
    overflow: hidden;
}

.converter-details summary {
    cursor: pointer;
    padding: 0.75rem 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    list-style: none;
}

.converter-details summary::-webkit-details-marker {
    display: none;
}

.converter-details summary::after {
    content: '?';
    float: right;
    color: var(--text-secondary);
}

.converter-details[open] summary::after {
    content: '?';
}

.converter-details-body {
    padding: 0.85rem 0.9rem 0.95rem 0.9rem;
    border-top: 1px solid var(--border-color);
}

.converter-details-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.converter-details-title {
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.converter-details-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.35;
}

.converter-details-note {
    margin-top: 0.85rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

@media (max-width: 768px) {
    .converter-how {
        grid-template-columns: 1fr;
    }
    .converter-details-grid {
        grid-template-columns: 1fr;
    }
}

.upload-options {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    padding: 1rem;
    margin-top: 1.5rem;
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Upload Concept 11 (live): tighter, flatter card + subtle accent wash */
.upload-options.upload-options-concept11 {
    padding: 0.9rem;
    margin-top: 1.05rem;
    border-radius: 1rem;
    box-shadow: none;
    position: relative;
}

.upload-options.upload-options-concept11::before {
    /* User requested: no gradient/overlay wash on this container. */
    content: none;
    background: none;
    opacity: 0;
}

.upload-options.upload-options-concept11 > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .upload-options {
        padding: 1.5rem;
        gap: 1.25rem;
    }

    .upload-options.upload-options-concept11 {
        padding: 1.1rem;
        gap: 0.9rem;
    }
}

@media (max-width: 480px) {
    .upload-options {
        padding: 1rem;
        gap: 1rem;
    }
}

/* Option Sections */
.options-sections {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.option-section-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.option-section {
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem;
    background-color: var(--bg-secondary);
}

.option-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-icon {
    font-size: 1.1rem;
}

@media (max-width: 1024px) {
    .option-section-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .options-sections {
        gap: 1.5rem;
    }

    .option-section {
        padding: 1.25rem;
    }

    .option-section-title {
        font-size: 0.95rem;
        margin-bottom: 1rem;
    }

    .option-section-row {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    /* Improve grid layout on tablet */
    .option-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .option-card.wide {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .options-sections {
        gap: 1rem;
    }

    .option-section {
        padding: 1rem;
        border-radius: 0.5rem;
    }

    .option-section-title {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    /* Single column on very small screens */
    .option-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .option-card.wide {
        grid-column: span 1;
    }

    /* Improve touch targets */
    .option-card {
        min-height: 80px;
        padding: 0.75rem;
    }

    .option-card select,
    .option-card input {
        font-size: 0.9rem;
        padding: 0.6rem;
    }
}

/* Multiple file upload results */
.uploaded-files-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.uploaded-file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

.uploaded-file-item .file-name {
    flex: 1;
    font-weight: 500;
    color: var(--text-primary);
    word-break: break-word;
}

.uploaded-file-item .file-size {
    color: var(--text-secondary);
    font-size: 0.85rem;
    white-space: nowrap;
}

.uploaded-file-item .file-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: background-color 0.2s;
}

.uploaded-file-item .file-link:hover {
    background: rgba(247, 150, 58, 0.1);
}

@media (max-width: 768px) {
    .uploaded-files-list {
        gap: 0.5rem;
    }

    .uploaded-file-item {
        padding: 0.6rem;
        font-size: 0.85rem;
        gap: 0.5rem;
    }
}

@media (max-width: 480px) {
    .uploaded-file-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        padding: 0.5rem;
    }

    .uploaded-file-item .file-link {
        align-self: flex-end;
    }
}

.upload-options-header-compact {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

@media (min-width: 769px) {
    .upload-options-header-compact {
        margin-bottom: 0.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
}

.upload-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.upload-options-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.upload-plan-pill-compact {
    background: rgba(139, 90, 43, 0.15);
    border: 1px solid rgba(247, 150, 58, 0.4);
    color: var(--text-primary);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    font-size: 0.85rem;
    white-space: nowrap;
    display: inline-block;
}

.selected-files-panel-compact {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.selected-files-title-compact {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-btn-compact {
    background: none;
    border: none;
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.25rem 0.5rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.2s;
}

.link-btn-compact:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* Selected-files 'Change' button: make it a real button (requested). */
.change-files-btn {
    border: 1px solid var(--border-color);
    background: rgba(0, 0, 0, 0.18);
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
    font-size: 0.8rem;
    padding: 0.35rem 0.65rem;
    border-radius: 0.65rem;
    line-height: 1.1;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.05s ease;
}

.change-files-btn:hover {
    border-color: rgba(255, 122, 0, 0.55);
    background: rgba(255, 122, 0, 0.10);
}

.change-files-btn:active {
    transform: translateY(1px);
}

.change-files-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.options-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.options-grid-compact.primary-options {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
}

.options-grid-compact.secondary-options {
    margin-top: 1rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    align-items: stretch;
}

.paid-access-wide {
    grid-column: span 3;
}

.upload-options.upload-authenticated .options-grid-compact.secondary-options {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.upload-options.upload-authenticated .options-grid-compact.secondary-options .paid-access-wide {
    grid-column: span 2;
}

.upload-options.upload-authenticated .options-grid-compact.secondary-options #customLinkGroup {
    grid-column: span 1;
}

.settings-inline-note {
    display: none;
    margin-top: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* For Creator/Pro plans, adjust grid to 2 rows cleanly */
@media (min-width: 769px) {
    .options-grid-compact.secondary-options {
        grid-template-columns: repeat(3, 1fr);
    }
    
    /* Make paid access and login hint both 1 column wide on desktop to fit in 2 rows */
    .options-grid-compact.secondary-options .paid-access-wide {
        grid-column: span 1;
    }
    
    .options-grid-compact.secondary-options .login-hint-compact:not([style*="display: none"]) {
        grid-column: span 1;
    }
    
    /* When custom link is visible (Pro tier), adjust layout */
    .options-grid-compact.secondary-options #customLinkGroup:not([style*="display: none"]) {
        grid-column: span 1;
    }
}

.login-hint-wide {
    grid-column: span 2;
}

.login-buttons-compact {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: center;
}

.login-buttons-compact .btn-compact {
    flex: 1;
    padding: 0.625rem 1rem;
    font-size: 0.9rem;
    border-radius: 0.5rem;
    font-weight: 600;
    transition: all 0.2s;
}

.login-buttons-compact .btn-compact:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.login-hint-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-hint-compact > span {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .paid-access-wide,
    .login-hint-wide {
        grid-column: span 1;
    }
}

.option-item-compact {
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Zero Knowledge Encryption Toggle - Always visible */
.zke-toggle-section {
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
}

/* Desktop: Add subtle margins to inner containers */
@media (min-width: 769px) {
    .zke-toggle-section {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    .settings-collapsible {
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    
    .settings-collapsible-content {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
    
    .options-grid-compact {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
    }
}

.zke-password-group {
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Ensure the absolutely-positioned Show/Copy icon buttons are contained
   within the password input wrapper, not the nearest document ancestor. */
.zke-password-wrap {
    position: relative;
}

.zke-password-group input[type="password"],
.zke-password-group input[type="text"]#zkePassword {
    font-family: monospace;
    letter-spacing: 0.05em;
    /* Always use CSS-variable colours; prevents browsers from overriding
       with a white fill (incl. autofill / color-scheme heuristics). */
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    -webkit-text-fill-color: var(--text-primary) !important;
}

/* Beat browser autofill injection (Chromium, Safari) on the ZKE password field. */
.zke-password-group input[type="password"]:-webkit-autofill,
.zke-password-group input[type="text"]#zkePassword:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 60px var(--bg-primary) inset !important;
    -webkit-text-fill-color: var(--text-primary) !important;
    caret-color: var(--text-primary) !important;
}

@media (max-width: 768px) {
    .zke-password-group {
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .zke-password-group > div {
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .zke-password-group input[type="password"],
    .zke-password-group input[type="text"]#zkePassword {
        width: 100% !important;
        flex: 1 1 auto !important;
        padding-left: 2.5rem !important;
        padding-right: 4.5rem !important;
        min-height: 2.75rem !important;
        box-sizing: border-box !important;
    }
    
    /* Ensure buttons stay inside container */
    .zke-password-group .password-toggle-btn {
        left: 0.5rem !important;
        width: 1.5rem !important;
        height: 1.5rem !important;
        padding: 0.25rem !important;
    }
    
    .zke-password-group .password-copy-btn {
        right: 0.5rem !important;
        padding: 0.4rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 1.75rem !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
    }
}

.zke-password-group #generateZkePassword {
    flex-shrink: 0;
}

.password-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    font-size: 1.1rem;
    transition: opacity 0.2s;
}

.password-toggle-btn:hover {
    opacity: 0.7;
}

.zke-toggle-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
}

.zke-toggle-label input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--accent-primary);
}

.zke-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.zke-toggle-text strong {
    color: var(--text-primary);
    font-size: 1rem;
}

.zke-toggle-text small {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Settings Section */
.settings-section {
    margin-bottom: 1.5rem;
}

.settings-title {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.plan-info-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.plan-info-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid #10b981;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-primary);
}

.info-icon {
    font-size: 1rem;
    color: #10b981;
}

.info-text {
    flex: 1;
}

.settings-content {
    margin-top: 0;
}


.settings-toggle-btn {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: 'Play', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.2s;
}

.settings-toggle-btn:hover {
    background: var(--bg-primary);
    border-color: var(--accent-primary);
}

.settings-toggle-icon {
    transition: transform 0.2s;
    color: var(--text-secondary);
}

.settings-collapsible.open .settings-toggle-icon {
    transform: rotate(180deg);
}

.settings-collapsible-content {
    margin-top: 1rem;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Desktop improvements for upload options */
@media (min-width: 769px) {
    .upload-options {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        padding: 2rem;
        border-radius: 1rem;
        gap: 1.5rem;
    }
    
    .upload-options-header-compact {
        margin-bottom: 0.5rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid var(--border-color);
    }
    
    .upload-options-title {
        font-size: 1.35rem;
        font-weight: 700;
    }
    
    .upload-plan-pill-compact {
        font-size: 0.85rem;
        padding: 0.4rem 0.9rem;
    }
    
    .options-grid-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 1.25rem;
        max-width: 100%;
    }
    
    .options-grid-compact.primary-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 1.25rem;
    }
    
    .options-grid-compact.secondary-options {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
    
    .option-item-compact {
        padding: 1.5rem;
    }
    
    .option-item-compact {
        min-width: 0;
        gap: 0.5rem;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 0.85rem;
        padding: 1rem;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    .option-item-compact label {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.25rem;
    }
    
    .option-item-compact select,
    .option-item-compact input[type="number"],
    .option-item-compact input[type="password"],
    .option-item-compact input[type="datetime-local"],
    .option-item-compact input[type="text"] {
        font-size: 0.95rem;
        padding: 0.75rem;
        border: 1.5px solid var(--border-color);
        border-radius: 0.5rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    
    .option-item-compact select:focus,
    .option-item-compact input:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 3px rgba(247, 150, 58, 0.1);
    }
    
    .checkbox-row-compact {
        gap: 0.75rem;
    }
    
    .checkbox-row-compact span {
        font-size: 0.95rem;
        font-weight: 600;
    }
    
    .option-help-compact {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-top: 0.5rem;
        padding-left: 1.75rem;
    }
    
    .custom-link-input-compact {
        padding: 0.75rem;
        border: 1.5px solid var(--border-color);
        border-radius: 0.5rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    
    .custom-link-input-compact:focus-within {
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 3px rgba(247, 150, 58, 0.1);
    }
    
    .custom-link-input-compact span {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .custom-link-input-compact input {
        font-size: 0.95rem;
    }
    
    .login-hint-compact span {
        font-size: 0.9rem;
        font-weight: 500;
    }
    
    .login-buttons-compact {
        gap: 0.75rem;
    }
    
    .link-btn-compact {
        font-size: 0.9rem;
        padding: 0.4rem 0.75rem;
    }
    
    .selected-files-panel-compact {
        padding: 1rem 1.25rem;
        border-radius: 0.75rem;
        margin-bottom: 1rem;
    }
    
    .selected-files-title-compact {
        font-size: 0.95rem;
        font-weight: 600;
    }
    
    .upload-actions-row {
        margin-top: 1rem;
        padding-top: 1.5rem;
        border-top: 1px solid var(--border-color);
    }
    
    .btn-upload {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        display: block;
        padding: 1rem 2rem;
        font-size: 1.05rem;
        font-weight: 600;
    }
}

.option-item-compact {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.option-item-compact label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
}

.option-item-compact select,
.option-item-compact input[type="number"],
.option-item-compact input[type="password"],
.option-item-compact input[type="datetime-local"],
.option-item-compact input[type="text"] {
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
}

.option-item-compact.checkbox-compact {
    grid-column: span 1;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .option-item-compact.checkbox-compact {
        grid-column: span 2;
    }
}

.checkbox-row-compact {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-row-compact input[type="checkbox"] {
    width: auto;
    margin: 0;
    cursor: pointer;
}

.checkbox-row-compact span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

.option-help-compact {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    line-height: 1.4;
}

.custom-link-input-compact {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--border-color);
    border-radius: 0.4rem;
    padding: 0.5rem;
    background: var(--bg-secondary);
}

.custom-link-input-compact span {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.custom-link-input-compact input {
    border: none;
    background: transparent;
    padding: 0;
    flex: 1;
    font-size: 0.85rem;
}

.login-hint-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-hint-compact span {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.login-buttons-compact {
    display: flex;
    gap: 0.5rem;
}

@media (max-width: 768px) {
    .options-grid-compact.primary-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .options-grid-compact.secondary-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .options-grid-compact {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .option-item-compact.checkbox-compact {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .upload-options {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    
    .options-grid-compact,
    .options-grid-compact.primary-options,
    .options-grid-compact.secondary-options {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .option-item-compact.checkbox-compact,
    .login-hint-compact {
        grid-column: span 1;
    }
    
    .login-hint-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    .upload-options-header {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .upload-options-header h3 {
        font-size: 1.25rem;
    }
    
    .upload-plan-pill {
        font-size: 0.85rem;
        padding: 0.5rem 0.75rem;
    }
}

.options-eyebrow {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent-primary);
    margin-bottom: 0.25rem;
}

.options-subtext {
    color: var(--text-secondary);
    margin-top: 0.4rem;
    max-width: 520px;
}

.upload-plan-pill {
    background: rgba(247, 150, 58, 0.12);
    border: 1px solid rgba(247, 150, 58, 0.35);
    color: var(--accent-primary);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.selected-files-panel {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.selected-files-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.selected-files-eyebrow {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin: 0 0 0.2rem 0;
}

.selected-files-title {
    margin: 0;
    font-size: 1.1rem;
}

.selected-files-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.selected-files-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
    padding-bottom: 0.25rem;
}

.selected-files-list li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.selected-files-list span {
    color: var(--text-tertiary);
    font-size: 0.85rem;
}

.selected-files-list .more-files {
    color: var(--text-secondary);
    font-style: italic;
    justify-content: flex-start;
}

@media (max-width: 768px) {
    .selected-files-panel {
        padding: 0.85rem 1rem;
    }
    
    .selected-files-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .selected-files-title {
        font-size: 1rem;
    }
    
    .selected-files-list li {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .selected-files-panel {
        padding: 0.75rem;
    }
    
    .selected-files-title {
        font-size: 0.95rem;
    }
    
    .selected-files-list li {
        font-size: 0.85rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

.option-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-top: 0.5rem;
}

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

@media (max-width: 768px) {
    .option-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    /* Stack sections vertically on mobile */
    .options-sections {
        gap: 1.25rem;
    }

    .option-section {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .option-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

.option-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 120px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.option-card:hover {
    border-color: rgba(247, 150, 58, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.option-card.wide {
    grid-column: span 3;
}

@media (max-width: 1024px) {
    .option-card.wide {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .option-card.wide {
        grid-column: span 2;
    }
}

@media (max-width: 480px) {
    .option-card.wide {
        grid-column: span 2;
    }
}

.option-card label {
    font-weight: 600;
    color: var(--text-primary);
}

.option-card small {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.option-card select,
.option-card input[type="password"],
.option-card input[type="text"],
.option-card input[type="number"],
.option-card input[type="datetime-local"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 768px) {
    .option-card {
        padding: 0.75rem;
        min-height: 100px;
        gap: 0.5rem;
    }
    
    .option-card select,
    .option-card input[type="password"],
    .option-card input[type="text"],
    .option-card input[type="number"],
    .option-card input[type="datetime-local"] {
        padding: 0.6rem;
        font-size: 0.9rem;
    }
    
    .option-card label {
        font-size: 0.9rem;
    }
    
    .option-card small {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .option-card {
        padding: 0.6rem;
        min-height: 90px;
        gap: 0.4rem;
    }
    
    .option-card select,
    .option-card input[type="password"],
    .option-card input[type="text"],
    .option-card input[type="number"],
    .option-card input[type="datetime-local"] {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
    
    .option-card label {
        font-size: 0.85rem;
    }
    
    .option-card small {
        font-size: 0.75rem;
    }
}

.option-card select:focus,
.option-card input[type="password"]:focus,
.option-card input[type="text"]:focus,
.option-card input[type="number"]:focus,
.option-card input[type="datetime-local"]:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(247, 150, 58, 0.15);
    outline: none;
}

.checkbox-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.checkbox-row input[type="checkbox"] {
    margin-top: 0.35rem;
}

.option-help {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-secondary);
    line-height: 1.4;
    font-size: 0.9rem;
}

.upload-actions-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
    .upload-actions-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .upload-actions-row {
        gap: 0.75rem;
        padding-top: 1rem;
    }
}

.upload-login-hint {
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    flex: 1;
    min-width: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .upload-login-hint {
        min-width: 100%;
        padding: 0.875rem 1rem;
    }
}

@media (max-width: 480px) {
    .upload-login-hint {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
}

.hint-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .hint-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .hint-actions .link-btn,
    .hint-actions .btn-primary {
        width: 100%;
        text-align: center;
        padding: 0.65rem 1rem;
    }
}

.link-btn {
    border: none;
    background: none;
    color: var(--accent-primary);
    font-weight: 600;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

.link-btn:hover {
    color: #ff7440;
}

.post-upload-login-hint {
    margin-top: 1rem;
    border: 1px dashed var(--border-color);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    background: rgba(247, 150, 58, 0.06);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.post-upload-login-hint strong {
    color: var(--text-primary);
}

.post-upload-login-hint p {
    color: var(--text-secondary);
    margin: 0;
}

.option-group {
    margin-bottom: 0;
}

.option-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.option-group select,
.option-group input[type="password"],
.option-group input[type="text"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
}

.custom-link-input {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.custom-link-input span {
    color: var(--text-secondary);
}

.custom-link-input input {
    flex: 1;
}

.btn-upload {
    min-width: 200px;
}

.upload-progress {
    background-color: var(--bg-primary);
    border-radius: 1rem;
    padding: 1rem 1.25rem;
    margin: 0.75rem auto 0;
    max-width: 1000px;
    box-shadow: var(--shadow-md);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

/* When the ring layout is present, hide the legacy horizontal bar (app.js still updates it). */
.upload-progress .progress-bar {
    display: none;
}

/* Progress Concept 3 (live): ring isolated on the left spanning both rows */
.upload-progress-layout {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: start;
}

.upload-progress-side {
    grid-row: 1 / span 3;
    display: flex;
    justify-content: center;
}

.upload-progress-ring {
    width: 86px;
    height: 86px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.16);
    display: grid;
    place-items: center;
    position: relative;
}

.upload-progress-ring-svg {
    width: 72px;
    height: 72px;
    transform: rotate(-90deg);
    display: block;
}

.upload-progress-ring-track {
    fill: none;
    stroke: rgba(255,255,255,0.10);
    stroke-width: 4;
}

.upload-progress-ring-value {
    fill: none;
    stroke: var(--accent-primary);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    filter: drop-shadow(0 10px 14px rgba(250,56,0,0.12));
}

.upload-progress-ring-label {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.upload-progress-main {
    min-width: 0;
}

.upload-progress-divider {
    height: 1px;
    margin: 0.35rem 0 0.55rem;
    background: linear-gradient(90deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05), rgba(255,255,255,0.12));
    border-radius: 999px;
}

.progress-bar {
    width: 100%;
    height: 0.65rem;
    background-color: var(--bg-tertiary);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0;
}

.progress-fill {
    height: 100%;
    background-color: var(--accent-primary);
    transition: width 0.3s;
    width: 0%;
}

.progress-text {
    text-align: center;
    color: var(--text-secondary);
}

/* Upload progress: move filename/percent line above the bar */
.upload-progress-top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0.45rem;
}

.upload-progress-top .progress-text {
    text-align: left;
    flex: 1 1 auto;
    min-width: 220px;
}

/* Keep the filename/chunk line to one row and truncate on narrow screens. */
#progressText {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-progress-meta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 0.6rem;
    row-gap: 0.35rem;
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.upload-progress-meta-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
    overflow: hidden;
}

.upload-progress-meta-left .upload-meta-item {
    min-width: 0;
    white-space: nowrap;
}

.upload-progress-meta-left .upload-meta-item .upload-meta-label {
    white-space: nowrap;
}

.upload-progress-meta-left .upload-meta-item span[id] {
    display: inline-block;
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

@media (max-width: 520px) {
    /* Keep ring integrated on the left (do NOT stack it above). */
    .upload-progress-layout {
        grid-template-columns: 76px 1fr;
        gap: 10px;
        align-items: start;
    }
    .upload-progress-side {
        grid-row: 1 / span 3;
        justify-content: center;
    }
    .upload-progress-ring {
        width: 72px;
        height: 72px;
    }
    .upload-progress-ring-svg {
        width: 60px;
        height: 60px;
    }
    .upload-progress-ring-label {
        width: 54px;
        height: 54px;
        font-size: 0.95rem;
    }

    /* Tighten meta so Progress + Cancel stay on one line. */
    .upload-progress-meta {
        column-gap: 0.5rem;
    }

    .upload-progress-meta-left {
        gap: 0.35rem;
    }

    /* Hide lower-priority meta on very small screens. */
    .upload-progress-meta-left .upload-meta-queue,
    .upload-progress-meta-left .upload-meta-avg,
    .upload-progress-meta-left .upload-meta-sep.sep-1,
    .upload-progress-meta-left .upload-meta-sep.sep-2 {
        display: none;
    }

    /* Hide Progress text on mobile - only show Remaining */
    .upload-progress-meta-left .upload-meta-progress,
    .upload-progress-meta-left .upload-meta-sep:not(.sep-1):not(.sep-2) {
        display: none;
    }

    /* Reduce bottom padding in progress container */
    .upload-progress {
        padding-bottom: 0.6rem;
    }
}

.upload-meta-item {
    white-space: nowrap;
}

.upload-meta-label {
    opacity: 0.85;
}

.upload-meta-sep {
    opacity: 0.6;
}

.upload-cancel-btn {
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 0.5rem;
    cursor: pointer;
    line-height: 1.2;
}

.upload-cancel-btn:hover {
    border-color: var(--accent-primary);
}

.upload-cancel-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.upload-result {
    background-color: var(--bg-primary);
    border-radius: 1rem;
    padding: 2rem;
    margin-top: 1rem;
    box-shadow: var(--shadow-md);
}

.result-success h3 {
    color: #10b981;
    margin-bottom: 1rem;
}

.result-link {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.result-link input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    min-width: 0;
}

/* Tool upload modal: keep the URL input and Copy button perfectly aligned */
#toolUploadModal .result-link {
    align-items: stretch;
}

#toolUploadModal .result-link input,
#toolUploadModal #toolCopyBtn {
    height: 44px;
    box-sizing: border-box;
}

#toolUploadModal #toolCopyBtn {
    padding: 0 1rem;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    background: linear-gradient(to bottom, var(--btn-orange-top), var(--btn-orange-bottom)) !important;
    border: none !important;
    color: #ffffff !important;
}

#toolUploadModal #toolUploadBtn {
    background: linear-gradient(to bottom, var(--btn-orange-top), var(--btn-orange-bottom)) !important;
    border: none !important;
}

/* Upload modal/result: make Copy button visible in light mode and match the input height */
.upload-result-box .result-link input,
.upload-result-box .result-link .btn-secondary {
    height: 44px;
    box-sizing: border-box;
}

.upload-result-box .result-link .btn-secondary {
    /* Slight fill so the outline button isn't "invisible" on light backgrounds */
    background: linear-gradient(to bottom, rgba(247, 150, 58, 0.10), rgba(247, 150, 58, 0.06));
}

.dark-theme .upload-result-box .result-link .btn-secondary {
    background: linear-gradient(to bottom, rgba(250, 106, 42, 0.14), rgba(250, 106, 42, 0.10));
}

.copy-button-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Upload result (compact bar): ensure Copy button matches the 32px URL field.
   Global .btn-primary sets min-height: 40px, which can make the button protrude. */
.upload-result .link-row #copyBtn {
    height: 32px !important;
    min-height: 32px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    border: 1px solid var(--border-color) !important;
    border-left: 0 !important;
}

.copy-tooltip {
    position: absolute;
    top: -35px;
    right: 0;
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 10;
    pointer-events: none;
}

.copy-tooltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--bg-tertiary);
}

/* Sell info tooltip */
.sell-info-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.sell-info-btn {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.20);
    color: var(--t2);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.sell-info-btn:hover {
    background: rgba(255,255,255,0.18);
    border-color: rgba(255,255,255,0.35);
}
.sell-info-tooltip {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(100% + 8px);
    width: 260px;
    background: var(--bg-tertiary, #1e2130);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.75rem;
    line-height: 1.55;
    color: var(--t1);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45);
    z-index: 200;
    pointer-events: auto;
    text-align: left;
    white-space: normal;
}
.sell-info-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-tertiary, #1e2130);
}
.sell-info-tooltip a {
    color: var(--ah, #7c6eff);
    text-decoration: none;
}
.sell-info-tooltip a:hover {
    text-decoration: underline;
}
.sell-desc-textarea {
    width: 100%;
    padding: 7px 9px;
    border-radius: var(--r8, 8px);
    border: 1px solid var(--bdr, rgba(255,255,255,0.12));
    background: rgba(0,0,0,0.22);
    color: var(--t1);
    font-size: 0.72rem;
    font-family: inherit;
    resize: vertical;
    min-height: 52px;
    max-height: 120px;
    line-height: 1.45;
    box-sizing: border-box;
    outline: none;
}
.sell-desc-textarea:focus {
    border-color: var(--ah, #7c6eff);
}
.sell-desc-textarea::placeholder {
    color: var(--t2);
    opacity: 0.7;
}

/* Tool result actions */
.result-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Result actions in share row */
.share-actions-row .result-actions {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

/* On mobile, stack QR and Embed buttons vertically and center them */
@media (max-width: 768px) {
    .share-actions-row {
        justify-content: center;
    }
    
    .share-actions-row .result-actions {
        flex-direction: column;
        width: 100%;
        margin-top: 1rem;
    }
}

.result-actions .btn-copy {
    flex: 1;
    min-width: 120px;
}

.result-info {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.embed-modal-content {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.embed-subtitle {
    color: var(--text-secondary);
    margin: 0;
}

.embed-code-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#embedCode {
    width: 100%;
    min-height: 140px;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-family: 'Courier New', monospace;
    font-size: 0.9rem;
    padding: 0.75rem;
    resize: vertical;
}

.embed-note {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* Features */
.features-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin: 4rem 0;
}

.feature-card {
    background-color: var(--bg-primary);
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
    box-shadow: var(--shadow-md);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    margin-bottom: 0.5rem;
}

.feature-card p {
    color: var(--text-secondary);
}

/* Visual highlight rows */
.visual-proof-section {
    padding: 2.5rem;
    background: var(--bg-primary);
    border-radius: 1.5rem;
    box-shadow: var(--shadow-lg);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.visual-proof-header {
    text-align: center;
    max-width: 780px;
    margin: 0 auto 3rem;
}

.visual-proof-header h2 {
    font-size: 2.25rem;
    margin-bottom: 0.75rem;
}

.visual-proof-header p {
    color: var(--text-secondary);
    margin: 0;
}

.visual-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
}

.visual-feature-grid {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.visual-feature-row {
    display: flex;
    align-items: center;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid var(--border-color);
}

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

.visual-feature-row:nth-child(even) {
    flex-direction: row-reverse;
}

.visual-feature-media img {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: block;
}

.visual-feature-copy h3 {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}

.visual-feature-copy p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 0.75rem;
}

@media (max-width: 900px) {
    .visual-feature-row,
    .visual-feature-row:nth-child(even) {
        flex-direction: column;
    }

    .visual-feature-copy {
        text-align: center;
    }

    .visual-feature-media img {
        max-width: 320px;
    }
}

/* Pricing */
.pricing-section {
    margin-top: 4rem;
}

@media (max-width: 768px) {
    .pricing-section {
        margin-top: 3rem;
    }
}

@media (max-width: 480px) {
    .pricing-section {
        margin-top: 2rem;
    }
}

.pricing-section h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
}

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

/* Tablet: 2x2 grid for pricing */
@media (max-width: 1100px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Homepage 4-column pricing grid */
#homePricingGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

#homePricingGrid .pricing-card {
    min-height: auto;
    padding: 1.5rem;
}

/* Tablet: 2x2 grid */
@media (max-width: 1100px) {
    #homePricingGrid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Mobile: Stack pricing cards vertically */
@media (max-width: 768px) {
    .pricing-grid {
        grid-template-columns: 1fr !important;
    }
    
    #homePricingGrid {
        grid-template-columns: 1fr !important;
    }
    
    .pricing-card.featured {
        transform: none !important;
    }
    
    .pricing-card.featured:hover {
        transform: translateY(-2px) !important;
    }
}

.pricing-card {
    background-color: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem;
    position: relative;
    box-shadow: var(--shadow-md);
    opacity: 0.92;
    backdrop-filter: blur(10px);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.pricing-card.featured {
    border: 2px solid var(--accent-primary);
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(247, 150, 58, 0.25);
    position: relative;
}

.pricing-card.featured::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.2), rgba(255, 107, 74, 0.2));
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pricing-card.featured:hover::before {
    opacity: 1;
}

.pricing-card.featured:hover {
    transform: scale(1.08);
    box-shadow: 0 16px 40px rgba(247, 150, 58, 0.3);
}

.badge {
    position: absolute;
    top: -0.75rem;
    right: 1rem;
    background: linear-gradient(135deg, #ff6a2a, #d92f00);
    color: white;
    padding: 0.35rem 0.9rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(247, 150, 58, 0.4);
    animation: pulse 2s ease-in-out infinite;
    z-index: 10;
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 12px rgba(247, 150, 58, 0.4);
    }
    50% {
        box-shadow: 0 4px 16px rgba(247, 150, 58, 0.6);
    }
}

.pricing-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.price {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.price > span:not(.new-price) {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.price .new-price {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1;
}

.price .old-price {
    text-decoration: line-through;
    color: var(--text-secondary);
    font-weight: 500;
}

.trial-note {
    font-size: 0.95rem;
    color: var(--accent-primary);
    font-weight: 600;
    margin-top: -1rem;
    margin-bottom: 1rem;
}

.pricing-features {
    list-style: none;
    margin-bottom: 2rem;
    text-align: left;
}

.pricing-features li {
    padding: 0.7rem 0;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    opacity: 1;
}

.pricing-features li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pricing-features li:before {
    content: "\2713\00a0";
    color: var(--accent-primary);
    font-weight: bold;
    margin-right: 0.5rem;
}

.pricing-card button {
    width: 100%;
}

/* Download Page */
.download-section {
    max-width: 600px;
    margin: 0 auto;
}

/* Full width for gallery - it's outside download-section */
.files-gallery {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

/* Ensure container doesn't constrain gallery */
.container:has(.files-gallery) {
    max-width: 100%;
    padding: 0;
}

.download-box {
    background-color: var(--bg-primary);
    border-radius: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: var(--shadow-lg);
    opacity: 0.92;
    backdrop-filter: blur(10px);
}

.download-icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.5rem;
    background: rgba(15, 23, 42, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: var(--accent-primary);
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.1);
}

.download-icon-svg {
    width: 65%;
    height: 65%;
}

.file-info {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
}

.file-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.file-info-item:last-child {
    border-bottom: none;
}

.file-info-label {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.file-info-value {
    color: var(--text-primary);
    font-weight: 500;
}

.file-status-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    margin: 1rem 0;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.status-badge-icon {
    width: 1rem;
    height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.status-badge-icon svg {
    width: 100%;
    height: 100%;
}

.status-badge-success {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: rgb(34, 197, 94);
}

.status-badge-success .status-badge-icon {
    color: rgb(34, 197, 94);
}

/* Animated checkmark SVG */
.animated-checkmark {
    width: 100%;
    height: 100%;
}

.animated-checkmark .checkmark-circle {
    stroke: currentColor;
}

.animated-checkmark .checkmark-check {
    stroke: currentColor;
}

.status-badge-warning {
    background: rgba(250, 204, 21, 0.1);
    border-color: rgba(250, 204, 21, 0.3);
    color: rgb(250, 204, 21);
}

.status-badge-warning .status-badge-icon {
    color: rgb(250, 204, 21);
}

.status-badge-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: rgb(59, 130, 246);
}

.status-badge-info .status-badge-icon {
    color: rgb(59, 130, 246);
}

.status-badge-active {
    background: rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.3);
    color: rgb(34, 197, 94);
}

.status-badge-active .status-badge-icon {
    color: rgb(34, 197, 94);
}

.zke-notice {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(247, 150, 58, 0.05);
    border: 1px solid rgba(247, 150, 58, 0.2);
    border-radius: 0.5rem;
}

.zke-notice svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.file-info p {
    margin: 0.5rem 0;
    color: var(--text-secondary);
}

.input-field {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.status-log {
    font-family: 'Play', sans-serif;
}

.status-log #statusLogEntries {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
}

.status-log #statusLogEntries::-webkit-scrollbar {
    width: 6px;
}

.status-log #statusLogEntries::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: 3px;
}

.status-log #statusLogEntries::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
}

.status-log #statusLogEntries::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

.error-message {
    background-color: #fee2e2;
    color: #991b1b;
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.dark-theme .error-message {
    background-color: #7f1d1d;
    color: #fecaca;
}

.ad-container {
    margin: 2rem 0;
    text-align: center;
}

/* Admin Panel */
.admin-title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background-color: var(--bg-primary);
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-shadow: var(--shadow-md);
}

.stat-card h3 {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
}

.stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-primary);
}

.admin-tabs {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border-color);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.tab-btn {
    padding: 1rem 2rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.2s;
    margin-bottom: -2px;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .admin-tabs {
        gap: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    .tab-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

.tab-btn:hover {
    color: var(--text-primary);
}

.tab-btn.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.admin-tab-content {
    display: none;
}

.admin-tab-content.active {
    display: block;
}

.admin-table-container {
    background-color: var(--bg-primary);
    border-radius: 0.5rem;
    overflow-x: auto;
    box-shadow: var(--shadow-md);
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th {
    background-color: var(--bg-secondary);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 2px solid var(--border-color);
}

.admin-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.admin-table tr:hover {
    background-color: var(--bg-secondary);
}

.admin-info-block {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.85rem;
    padding: 1.25rem;
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    overflow-x: auto;
}

.admin-info-block pre {
    margin: 0;
    background: transparent;
    color: inherit;
    white-space: pre-wrap;
}

/* Modal */
.modal {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: var(--bg-primary);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
    box-shadow: var(--shadow-lg);
    position: relative;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-secondary);
    line-height: 1;
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-content h2 {
    margin-bottom: 1.5rem;
}

.modal-content form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.modal-content input {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 1rem;
}

.affiliate-optin {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(247, 150, 58, 0.2);
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.05) 0%, rgba(247, 150, 58, 0.02) 100%);
    font-size: 0.9rem;
    position: relative;
    transition: all 0.3s ease;
}

.affiliate-optin:hover {
    border-color: rgba(247, 150, 58, 0.3);
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.08) 0%, rgba(247, 150, 58, 0.04) 100%);
    box-shadow: 0 2px 8px rgba(247, 150, 58, 0.1);
}

.affiliate-optin label {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
}

.affiliate-optin label:hover {
    color: var(--accent-primary);
}

.affiliate-optin input[type="checkbox"] {
    margin-top: 0.2rem;
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--accent-primary);
    flex-shrink: 0;
}

.affiliate-optin input[type="checkbox"]:checked {
    accent-color: var(--accent-primary);
}

.affiliate-optin span {
    flex: 1;
    line-height: 1.5;
}

.affiliate-optin small {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 0.25rem;
    padding-left: 2rem;
}

/* Dark theme adjustments for affiliate opt-in */
.dark-theme .affiliate-optin {
    border-color: rgba(247, 150, 58, 0.25);
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.08) 0%, rgba(247, 150, 58, 0.03) 100%);
}

.dark-theme .affiliate-optin:hover {
    border-color: rgba(247, 150, 58, 0.35);
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.12) 0%, rgba(247, 150, 58, 0.05) 100%);
}

.qr-modal-content {
    max-width: 520px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.qr-modal-content::-webkit-scrollbar {
    width: 6px;
}

.qr-modal-content::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.qr-modal-content::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 3px;
}

.qr-modal-subtitle {
    color: var(--text-secondary);
    margin-top: -0.5rem;
}

.qr-preview-wrapper {
    position: relative;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border: 1px solid var(--border-color);
    padding: 1rem;
    text-align: center;
}

.qr-preview-wrapper img {
    max-width: 280px;
    margin: 0 auto;
    display: block;
}

.qr-preview-status {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: 0.5rem;
}

.qr-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.qr-options label {
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.25rem;
}

.qr-options select,
.qr-options input[type="color"],
.qr-options input[type="range"] {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    padding: 0.4rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.qr-custom-colors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.qr-tier-note {
    font-size: 0.9rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.75rem;
    border-radius: 0.5rem;
}

.qr-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.qr-actions .btn-secondary,
.qr-actions .btn-primary {
    flex: 1;
}

.auth-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.auth-main-tabs {
    display: flex;
    gap: 0.75rem;
    background: var(--bg-secondary);
    padding: 0.35rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}

.auth-main-tab {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
}

.auth-main-tab.active {
    background: var(--bg-primary);
    color: var(--text-primary);
    box-shadow: inset 0 0 0 1px var(--border-color);
}

.auth-panel {
    display: none;
}

.auth-panel.active {
    display: block;
}

.auth-switch {
    margin-top: 1rem;
    text-align: center;
    color: var(--text-secondary);
}

.auth-switch a {
    color: var(--accent-primary);
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* Footer */
.footer {
    background-color: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    padding: 2rem 0;
    text-align: center;
    color: var(--text-secondary);
}

.footer p {
    margin: 0.5rem 0;
}

.footer-dev {
    font-size: 0.875rem;
}

.footer-dev a {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-dev a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

.footer-links {
    font-size: 0.875rem;
    margin-top: 1rem;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.footer-links a:hover {
    color: var(--text-primary);
    text-decoration: underline;
}
.footer-links .pill {
    background: rgba(250,56,0,0.12);
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(250,56,0,0.2);
}

/* Comprehensive Footer Grid */
.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    text-align: left;
    margin-bottom: 2rem;
}

.footer-column h4 {
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-column li {
    margin-bottom: 0.5rem;
}

.footer-column a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.footer-column a:hover {
    color: var(--accent-primary);
}

.footer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 1.5rem;
}

.footer-badges .trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.footer-badges .trust-badge svg {
    color: var(--accent-primary);
}

.footer-copyright {
    font-size: 0.875rem;
    margin: 0;
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .footer-column:last-child {
        grid-column: span 2;
    }
    
    .footer-badges {
        gap: 1rem;
    }
    
    .footer-badges .trust-badge {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-column:last-child {
        grid-column: span 1;
    }
}

/* Trust Badges Container */
.trust-badges-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.trust-badge-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--text-primary);
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.trust-badge-link:hover {
    background: var(--bg-tertiary);
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.trust-badge-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-badge-icon svg {
    width: 100%;
    height: 100%;
}

.trust-badge-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* SSL Badge Specific */
.trust-badge-ssl {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.1), rgba(69, 160, 73, 0.1));
    border-color: rgba(76, 175, 80, 0.3);
}

.trust-badge-ssl:hover {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(69, 160, 73, 0.15));
    border-color: rgba(76, 175, 80, 0.5);
}

.trust-badge-ssl .trust-badge-icon svg {
    color: #4CAF50;
}

/* Trustpilot Badge Specific */
.trust-badge-trustpilot {
    background: rgba(0, 182, 122, 0.1);
    border-color: rgba(0, 182, 122, 0.3);
}

.trust-badge-trustpilot:hover {
    background: rgba(0, 182, 122, 0.15);
    border-color: rgba(0, 182, 122, 0.5);
}

/* Compliance Badge Specific */
.trust-badge-compliance {
    background: rgba(33, 150, 243, 0.1);
    border-color: rgba(33, 150, 243, 0.3);
}

.trust-badge-compliance:hover {
    background: rgba(33, 150, 243, 0.15);
    border-color: rgba(33, 150, 243, 0.5);
}

.trust-badge-compliance .trust-badge-icon svg {
    color: #2196F3;
}

/* Mobile Responsive for Trust Badges */
@media (max-width: 768px) {
    .trust-badges-container {
        gap: 1rem;
    }
    
    .trust-badge-link {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
}

@media (max-width: 480px) {
    .trust-badges-container {
        gap: 0.75rem;
        flex-direction: column;
    }
    
    .trust-badge-link {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
}

/* Responsive */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2rem;
    }
    
    /* Mobile navigation - inline layout */
    .navbar .container {
        flex-wrap: nowrap;
        gap: 0.75rem;
        align-items: center;
    }
    
    .nav-brand {
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    .logo-image {
        height: 32px;
    }
    
    .nav-links {
        flex: 1 1 auto;
        justify-content: flex-end;
        gap: calc(0.5rem + 25px);
        flex-wrap: nowrap;
    }
    
    .nav-links button,
    .nav-links a {
        font-size: 0.9rem;
        padding: 0.5rem 1rem;
    }
    
    .theme-toggle {
        font-size: 1.2rem;
        padding: 0.4rem;
    }
    
    .logo-text,
    .logo-text-group {
        font-size: 1.5rem;
    }
    
    .logo-emoji {
        font-size: 1.5rem;
    }
    
    .logo-dot {
        font-size: 1.5rem;
    }
    
    .pricing-card.featured {
        transform: none;
    }
    
    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .announcement-bar {
        top: 0;
    }
    
    .logo-image { height: 30px; }
    .nav-links { gap: 0.4rem; }
    .nav-links .nav-link, .nav-links .nav-dropdown-toggle { font-size: 0.95rem; }
    .theme-toggle { font-size: 1rem; }
}



@media (max-width: 480px) {
    .logo-image { height: 30px; }
    .nav-links { gap: 0.4rem; }
    .nav-links .nav-link, .nav-links .nav-dropdown-toggle { font-size: 0.95rem; }
    .theme-toggle { font-size: 1rem; }
}

/* FINAL OVERRIDE: Force mobile menu toggle to be visible on ALL screen sizes */
.mobile-menu-toggle,
#mobileMenuToggle,
button.mobile-menu-toggle,
button#mobileMenuToggle,
.nav-links .mobile-menu-toggle,
.nav-links button.mobile-menu-toggle,
.nav-links #mobileMenuToggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 999 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
}

/* Force nav-links to be visible on desktop */
@media (min-width: 769px) {
    .nav-links {
        display: flex !important;
        visibility: visible !important;
    }
    
    .nav-links .mobile-menu-toggle,
    .nav-links #mobileMenuToggle,
    .nav-links button.mobile-menu-toggle,
    button.mobile-menu-toggle,
    #mobileMenuToggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        position: relative !important;
        z-index: 9999 !important;
    }
}

/* ABSOLUTE FINAL OVERRIDE - Must be at the very end */
/* This rule MUST override everything - using maximum specificity */
@media (min-width: 768px) {
    html body .navbar .container .nav-links .mobile-menu-toggle,
    html body .navbar .container .nav-links #mobileMenuToggle,
    html body .navbar .container .nav-links button.mobile-menu-toggle,
    html body .navbar .container .nav-links button#mobileMenuToggle,
    html body .navbar .nav-links .mobile-menu-toggle,
    html body .navbar .nav-links #mobileMenuToggle,
    html body .nav-links .mobile-menu-toggle,
    html body .nav-links #mobileMenuToggle,
    html body .mobile-menu-toggle,
    html body #mobileMenuToggle,
    html body button.mobile-menu-toggle,
    html body button#mobileMenuToggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
        position: relative !important;
        z-index: 9999 !important;
    }
    
    /* Also ensure nav-links is visible */
    html body .navbar .container .nav-links,
    html body .navbar .nav-links,
    html body .nav-links {
        display: flex !important;
        visibility: visible !important;
    }
}

/* ULTIMATE OVERRIDE - Must override user agent stylesheet */
button.mobile-menu-toggle,
button#mobileMenuToggle,
.mobile-menu-toggle,
#mobileMenuToggle {
    display: flex !important;
}

@media (min-width: 768px) {
    button.mobile-menu-toggle,
    button#mobileMenuToggle,
    .mobile-menu-toggle,
    #mobileMenuToggle,
    .nav-links button.mobile-menu-toggle,
    .nav-links button#mobileMenuToggle,
    .nav-links .mobile-menu-toggle,
    .nav-links #mobileMenuToggle {
        display: flex !important;
    }
}

/* Compact Upload Options - Responsive */
@media (max-width: 768px) {
    .top-features-row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }
    .feature-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .custom-page-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .custom-page-options {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .custom-page-options textarea,
    .custom-page-options input[type="file"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .options-grid-compact {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .login-hint {
        grid-column: span 2 !important;
    }
}

@media (max-width: 480px) {
    .top-features-row {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
        padding: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .feature-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .custom-page-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0.75rem !important;
        box-sizing: border-box !important;
    }
    .custom-page-toggle {
        flex-wrap: wrap !important;
    }
    .custom-page-toggle label {
        font-size: 0.85rem !important;
        word-break: break-word !important;
    }
    .custom-page-options {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0.75rem 0 !important;
    }
    .custom-page-options textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.85rem !important;
        padding: 0.6rem !important;
    }
    .custom-page-options input[type="file"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.8rem !important;
        padding: 0.5rem !important;
    }
    .custom-page-options label {
        font-size: 0.85rem !important;
    }
}

@media (max-width: 480px) {
    .options-grid-compact {
        grid-template-columns: 1fr !important;
    }
    .login-hint {
        grid-column: span 1 !important;
    }
    
    /* Fix ZKE password input overlapping elements on mobile */
    #zkePassword {
        padding-left: 2.75rem !important;
        padding-right: 4.5rem !important;
    }
    .password-toggle-btn {
        width: 1.25rem !important;
        height: 1.25rem !important;
        left: 0.5rem !important;
    }
    .password-copy-btn {
        padding: 0.25rem 0.35rem !important;
        font-size: 0.55rem !important;
        right: 0.5rem !important;
    }
    
    /* Fix file names overflow on mobile */
    #selectedFilesTitle {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
    #selectedFilesList li span:first-child {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
}

/* Custom Page (Concept 10b) - Responsive */
@media (max-width: 968px) {
    .content-layout {
        grid-template-columns: 1fr !important;
    }
    .banner-title {
        font-size: 1.5rem !important;
    }
    .banner-header {
        flex-direction: column !important;
        gap: 1rem !important;
    }
}

/* Download Page Banner - Desktop: Download button on top, Scan+Share below (each 50% width of Download) */
@media (min-width: 769px) {
    .banner-actions {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    .banner-actions > .btn-primary {
        width: 220px !important;
        max-width: 100% !important;
        flex: none !important;
    }

    /* Container for Scan + Share buttons - same width as Download button */
    .banner-actions > div {
        display: flex !important;
        gap: 0.5rem !important;
        width: 220px !important;
        max-width: 100% !important;
    }

    .banner-actions .banner-virus-scan,
    .banner-actions .btn-secondary {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }
}

/* Download Page Banner - Mobile Responsive */
@media (max-width: 768px) {
    .banner-section {
        padding: 1.5rem 1rem !important;
    }
    .banner-header {
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: center !important;
    }
    .banner-title {
        font-size: 1.25rem !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .banner-actions {
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }
    .banner-actions > .btn-primary {
        width: 100% !important;
        max-width: 280px !important;
        justify-content: center !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.95rem !important;
    }
    /* Container for Scan + Share on mobile */
    .banner-actions > div {
        display: flex !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 280px !important;
    }
    .banner-virus-scan,
    .banner-actions .btn-secondary {
        flex: 1 !important;
        width: auto !important;
        max-width: none !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
    }
    .banner-section {
        padding: 1.5rem 1rem !important;
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    .banner-content {
        max-width: 100% !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* Override: Keep buttons inline on mobile, not stacked */
    .banner-actions {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 0.5rem !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .banner-actions .btn-primary {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }
    .banner-actions .banner-virus-scan,
    .banner-actions .btn-secondary {
        width: calc(50% - 0.25rem) !important;
        max-width: calc(50% - 0.25rem) !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .banner-actions * {
        box-sizing: border-box !important;
    }
}

@media (max-width: 480px) {
    .banner-section {
        padding: 1rem 0.75rem !important;
    }
    .banner-content {
        padding: 0 !important;
    }
    .banner-actions {
        gap: 0.5rem !important;
        padding: 0 !important;
        flex-wrap: wrap !important;
    }
    .banner-actions .btn-primary {
        width: 100% !important;
        max-width: 100% !important;
        padding: 1rem 1.25rem !important;
        font-size: 0.95rem !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        flex: 1 1 100% !important;
    }
    .banner-virus-scan,
    .banner-actions .btn-secondary {
        width: calc(50% - 0.25rem) !important;
        max-width: calc(50% - 0.25rem) !important;
        padding: 0.5rem 0.75rem !important;
        font-size: 0.85rem !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        flex: 0 1 calc(50% - 0.25rem) !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* Tier Badge in Mobile Menu */
.tier-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.tier-badge.free {
    background: rgba(128, 128, 128, 0.15);
    color: var(--text-secondary);
}

.tier-badge.lite {
    background: rgba(80, 160, 255, 0.15);
    color: #60a8e8;
}

.tier-badge.premium {
    background: rgba(247, 150, 58, 0.15);
    color: var(--accent-primary);
}

/* Mobile styles for download all buttons on downloads.html */
@media (max-width: 768px) {
    #downloadAllBtn,
    #downloadSelectedBtn,
    #selectAllBtn,
    #selectNoneBtn {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
    }
}

/* Additional mobile styles for share buttons in upload modal */
@media (max-width: 768px) {
    .share-buttons[id*="shareButtons"] {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .share-buttons[id*="shareButtons"] a {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        min-height: 44px !important;
        padding: 0.75rem 1rem !important;
    }
    
    .share-buttons[id*="shareButtons"] .share-label {
        display: inline !important;
        visibility: visible !important;
    }
}

@media (max-width: 480px) {
    .share-buttons[id*="shareButtons"] {
        gap: 0.4rem !important;
    }
    
    .share-buttons[id*="shareButtons"] a {
        min-height: 40px !important;
        padding: 0.6rem 0.8rem !important;
        font-size: 0.9rem !important;
    }
}

.tier-badge.pro,
.tier-badge.creator {
    background: linear-gradient(135deg, rgba(247, 150, 58, 0.2), rgba(255, 140, 90, 0.2));
    color: var(--accent-primary);
}

/* Media Carousel Thumbnails */
.media-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    transition: all 0.2s;
}

.media-thumbnail:hover {
    opacity: 0.8;
}

.media-thumbnail.active {
    border-color: var(--accent-primary) !important;
}

/* Feature Tool Cards - Homepage */
.feature-tool-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* FINAL: Theme toggle icon size fix for mobile */
@media (max-width: 768px) {
    .theme-toggle svg,
    button.theme-toggle svg,
    #themeToggle svg {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
    }
}
.feature-tool-card:hover h4 {
    color: var(--accent-primary);
}

/* =========================================================
   FINAL OVERRIDE: Header control buttons (Theme + Hamburger)
   Goal: match the "contained" look from theme-toggle-concepts
   - Consistent container shape
   - No orange "active" state
   - Theme toggle only swaps icons (handled by app.js)
   ========================================================= */

/* Theme toggle: transparent icon-only by default (no border/background). */
html body .navbar .container .nav-links .theme-toggle,
html body .navbar .container .nav-links #themeToggle,
html body .navbar .container .nav-links button#themeToggle {
    width: 44px !important;
    height: 40px !important;
    min-width: 44px !important;
    min-height: 40px !important;
    max-width: 44px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border-radius: 0.75rem !important;
    background: transparent !important;
    border: 1px solid transparent !important; /* keep layout stable, but visually borderless */
    color: var(--text-secondary) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

html body .navbar .container .nav-links .theme-toggle:hover,
html body .navbar .container .nav-links #themeToggle:hover,
html body .navbar .container .nav-links button#themeToggle:hover,
html body .navbar .container .nav-links .theme-toggle:active,
html body .navbar .container .nav-links #themeToggle:active,
html body .navbar .container .nav-links button#themeToggle:active {
    transform: translateY(-1px);
    color: var(--text-primary) !important;
    background: rgba(148, 163, 184, 0.10) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

html body .navbar .container .nav-links .theme-toggle:focus-visible,
html body .navbar .container .nav-links #themeToggle:focus-visible,
html body .navbar .container .nav-links button#themeToggle:focus-visible {
    outline: none !important;
    background: rgba(148, 163, 184, 0.10) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.22) !important;
}

/* Hamburger: keep the contained pill always visible */
html body .navbar .container .nav-links .mobile-menu-toggle,
html body .navbar .container .nav-links #mobileMenuToggle,
html body .navbar .container .nav-links button#mobileMenuToggle {
    width: 44px !important;
    height: 40px !important;
    min-width: 44px !important;
    min-height: 40px !important;
    max-width: 44px !important;
    max-height: 40px !important;
    padding: 0 !important;
    border-radius: 0.75rem !important;
    border: 1px solid rgba(148, 163, 184, 0.22) !important;
    background: rgba(148, 163, 184, 0.10) !important;
    color: var(--text-secondary) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

html body .navbar .container .nav-links .mobile-menu-toggle:hover,
html body .navbar .container .nav-links #mobileMenuToggle:hover,
html body .navbar .container .nav-links button#mobileMenuToggle:hover {
    transform: translateY(-1px);
    color: var(--text-primary) !important;
}

html body .navbar .container .nav-links .mobile-menu-toggle:focus-visible,
html body .navbar .container .nav-links #mobileMenuToggle:focus-visible,
html body .navbar .container .nav-links button#mobileMenuToggle:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.22) !important;
}

/* Hamburger needs stacked bars inside the same container */
html body .navbar .container .nav-links .mobile-menu-toggle,
html body .navbar .container .nav-links #mobileMenuToggle,
html body .navbar .container .nav-links button#mobileMenuToggle {
    flex-direction: column !important;
    gap: 4px !important;
}

html body .navbar .container .nav-links .mobile-menu-toggle span,
html body .navbar .container .nav-links #mobileMenuToggle span,
html body .navbar .container .nav-links button#mobileMenuToggle span {
    width: 20px !important;
    height: 2px !important;
    background: currentColor !important;
    border-radius: 2px !important;
    opacity: 0.9;
}

/* =====================================================================
   CLOUDFLARE-STYLE TRAFFIC WIDGET (HOME)
   ===================================================================== */
.cf-traffic-section {
    max-width: 1100px;
    margin: 0 auto 4rem;
}

.cf-traffic-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    padding: 1.5rem;
    overflow: hidden;
}

.cf-traffic-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.cf-traffic-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.cf-traffic-logo {
    width: 34px;
    height: 34px;
    color: rgba(255, 255, 255, 0.88);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: 0.75rem;
    padding: 6px;
    box-sizing: border-box;
}

.cf-traffic-title {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    line-height: 1.1;
}

.cf-traffic-subtitle {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 0.15rem;
}

.cf-traffic-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 178, 74, 0.25);
    background: rgba(255, 178, 74, 0.08);
    color: rgba(255, 214, 158, 0.95);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
}

.cf-traffic-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffb24a;
    box-shadow: 0 0 0 4px rgba(255, 178, 74, 0.15);
}

/* Inline row: Uploads card + sparkline graph side by side */
.cf-traffic-row {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1rem;
}

.cf-traffic-row .cf-metric-uploads {
    flex: 0 0 auto;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cf-traffic-row .cf-traffic-chart {
    flex: 1;
    margin-bottom: 0;
}

.cf-traffic-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.cf-metric {
    padding: 0.9rem 0.95rem;
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
}

.cf-metric-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.35rem;
}

.cf-metric-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.cf-metric-value {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.cf-metric-pct {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.cf-metric-pct.is-up {
    color: #86efac;
}

/* ===================================================================
   TOOL PAGE ENHANCEMENTS — March 2026 overhaul
   Modernizes content-card, upload-box, tool-tabs, and form controls
   for a consistent, polished look across all tool pages.
   =================================================================== */

/* -- Tool hero refinement -- */
.tool-page-hero { text-align: center; padding: 5rem 0 2.5rem; max-width: 780px; margin: 0 auto; }
.tool-page-hero .pill { margin-bottom: .75rem; }
.tool-page-hero h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); font-weight: 800; color: var(--text-primary); margin: 0 0 .75rem; line-height: 1.15; letter-spacing: -.02em; }
.tool-page-hero h1 span { color: var(--accent-primary); }
.tool-page-hero p { font-size: 1rem; color: var(--text-secondary); max-width: 580px; margin: 0 auto; line-height: 1.65; }

/* -- Content card: remove bouncy hover (bad for interactive tool content) -- */
.tool-page .content-card { 
    background: rgba(255,255,255,.03); 
    border: 1px solid rgba(250,56,0,.08); 
    border-radius: 1rem; 
    padding: 1.75rem; 
    margin-bottom: 1.5rem; 
    backdrop-filter: blur(12px); 
    opacity: 1;
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    transition: border-color .2s;
}
.tool-page .content-card:hover { transform: none; box-shadow: 0 4px 24px rgba(0,0,0,.12); border-color: rgba(250,56,0,.15); }
.tool-page .content-card h2 { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1rem; }

/* -- Upload box: modern dashed border with glow -- */
.tool-page .upload-box {
    background: rgba(255,255,255,.02);
    border: 2px dashed rgba(250,56,0,.2);
    border-radius: 1rem;
    padding: 3rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .25s, background .25s, box-shadow .25s;
    opacity: 1;
    backdrop-filter: blur(12px);
    position: relative;
}
.tool-page .upload-box:hover {
    border-color: rgba(250,56,0,.45);
    background: rgba(250,56,0,.03);
    box-shadow: 0 0 0 4px rgba(250,56,0,.06);
    transform: none;
}
.tool-page .upload-box.dragover {
    border-color: var(--accent-primary);
    background: rgba(250,56,0,.06);
    box-shadow: 0 0 0 6px rgba(250,56,0,.1);
    transform: none;
}
.tool-page .upload-box h2 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .35rem; }
.tool-page .upload-box p, .tool-page .upload-box .upload-hint { font-size: .88rem; color: var(--text-secondary); margin: 0; }

/* -- Tool tabs: pill-style with orange active -- */
.tool-page .tool-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    background: rgba(255,255,255,.03);
    padding: .35rem;
    border-radius: .75rem;
    border: 1px solid rgba(250,56,0,.06);
    margin: 1rem 0 1.25rem;
}
.tool-page .tool-tab {
    flex: 1;
    border: none;
    background: transparent;
    padding: .6rem .85rem;
    border-radius: .5rem;
    font-weight: 600;
    font-family: 'Play', sans-serif;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all .18s;
    font-size: .82rem;
    white-space: nowrap;
}
.tool-page .tool-tab:hover { color: var(--text-primary); background: rgba(250,56,0,.04); }
.tool-page .tool-tab.active {
    background: var(--accent-primary);
    color: #fff;
    box-shadow: 0 2px 10px rgba(250,56,0,.25);
}

/* -- Form controls: styled inputs, selects, checkboxes -- */
.tool-page input[type="text"],
.tool-page input[type="number"],
.tool-page input[type="password"],
.tool-page input[type="url"],
.tool-page input[type="email"],
.tool-page select,
.tool-page textarea {
    padding: .65rem .9rem;
    border-radius: .6rem;
    border: 1px solid rgba(250,56,0,.12);
    background: rgba(255,255,255,.04);
    color: var(--text-primary);
    font-size: .88rem;
    font-family: 'Play', sans-serif;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
    box-sizing: border-box;
}
.tool-page input:focus,
.tool-page select:focus,
.tool-page textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(250,56,0,.08);
}
.tool-page select { cursor: pointer; appearance: auto; }

/* Checkbox refinement */
.tool-page .checkbox-inline { display: flex; align-items: center; gap: .5rem; color: var(--text-secondary); font-size: .85rem; }
.tool-page .checkbox-inline input[type="checkbox"] { accent-color: var(--accent-primary); width: 16px; height: 16px; cursor: pointer; }

/* -- Action buttons inside tools -- */
.tool-page .btn-primary,
.tool-page .tool-form .btn-primary {
    background: var(--accent-primary);
    color: #fff;
    border: none;
    padding: .7rem 1.5rem;
    border-radius: .6rem;
    font-weight: 700;
    font-size: .88rem;
    cursor: pointer;
    transition: background .2s, box-shadow .2s;
    font-family: 'Play', sans-serif;
}
.tool-page .btn-primary:hover { background: var(--accent-hover); box-shadow: 0 4px 16px rgba(250,56,0,.3); }

/* -- Tool status messages -- */
.tool-page .tool-status { font-size: .85rem; color: var(--text-secondary); margin-top: .75rem; padding: .6rem .8rem; border-radius: .5rem; background: rgba(255,255,255,.02); border: 1px solid rgba(250,56,0,.06); }

/* -- Tool feature/info cards (tips, about, etc.) -- */
.tool-page .tool-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin: 1.5rem 0; }
.tool-page .tool-info-card {
  background: rgba(255,255,255,.04);
  border-radius: var(--r16, 1rem);
  padding: 1.4rem;
  border: 1px solid rgba(250,56,0,.13);
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tool-page .tool-info-card:hover {
  border-color: rgba(250,56,0,.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.tool-page .tool-info-card svg {
  display: inline-flex;
  background: rgba(250,106,42,.1);
  padding: 7px;
  border-radius: var(--r8, .5rem);
  width: 38px;
  height: 38px;
  margin-bottom: .65rem;
  flex-shrink: 0;
}
.tool-page .tool-info-card strong { display: block; font-size: .95rem; font-weight: 800; color: var(--t1, #fff); margin-bottom: .35rem; }
.tool-page .tool-info-card h3 { font-size: .95rem; font-weight: 800; color: var(--t1, #fff); margin: 0 0 .35rem; }
.tool-page .tool-info-card p { font-size: .85rem; color: var(--t2, #aaa); margin: 0; line-height: 1.55; }

/* -- Export / action button row -- */
.tool-page .tool-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0; }
.tool-page .tool-action-btn {
    flex: 1;
    min-width: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-radius: .6rem;
    border: 1px solid rgba(250,56,0,.2);
    background: rgba(250,56,0,.04);
    color: var(--accent-primary);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
    transition: all .18s;
    font-family: 'Play', sans-serif;
    text-decoration: none;
}
.tool-page .tool-action-btn:hover { border-color: var(--accent-primary); background: rgba(250,56,0,.08); box-shadow: 0 2px 12px rgba(250,56,0,.15); }
.tool-page .tool-action-btn svg { width: 16px; height: 16px; }

/* -- PDF toolbar refinement -- */
.tool-page .pdf-toolbar {
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(250,56,0,.08);
    border-radius: .75rem;
    padding: .75rem;
    box-shadow: 0 2px 12px rgba(0,0,0,.1);
}
.tool-page .toolbar-btn { border: 1px solid rgba(250,56,0,.1); background: rgba(255,255,255,.03); border-radius: .4rem; transition: border-color .18s, background .18s; }
.tool-page .toolbar-btn:hover { border-color: rgba(250,56,0,.3); background: rgba(250,56,0,.05); }
.tool-page .toolbar-group { border-right-color: rgba(250,56,0,.08); }

/* -- Progress bar -- */
.tool-page .tool-progress { height: 6px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; margin: .5rem 0; }
.tool-page .tool-progress-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent-primary), #f59e0b); transition: width .3s ease; }

/* -- Section divider -- */
.tool-page .tool-divider { border: none; border-top: 1px solid rgba(250,56,0,.06); margin: 1.5rem 0; }

/* -- Export options card -- */
.tool-page .export-card { background: rgba(255,255,255,.03); border: 1px solid rgba(250,56,0,.08); border-radius: .75rem; padding: 1.25rem; margin: 1rem 0; }
.tool-page .export-card h3 { font-size: .95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .75rem; }
.tool-page .export-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (max-width: 560px) { .tool-page .export-grid { grid-template-columns: 1fr; } }

/* -- Responsive adjustments -- */
@media (max-width: 768px) {
    .tool-page-hero { padding: 3.5rem 0 1.5rem; }
    .tool-page .content-card { padding: 1.25rem; }
    .tool-page .upload-box { padding: 2rem 1.25rem; }
    .tool-page .tool-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
    .tool-page .tool-tab { flex: 0 0 auto; min-width: fit-content; }
}
@media (max-width: 480px) {
    .tool-page .content-card { padding: 1rem; }
    .tool-page .tool-actions { flex-direction: column; }
}

.cf-metric-pct.is-down {
    color: #fca5a5;
}

.cf-metric-pct.is-flat {
    color: rgba(148, 163, 184, 0.9);
}

.cf-traffic-chart {
    border-radius: 1rem;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    padding: 0.75rem;
}

#cfTrafficSparkline {
    width: 100%;
    height: 120px;
    display: block;
}

.cf-traffic-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.cf-traffic-note {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

#cfTrafficWidget.is-error .cf-traffic-live {
    border-color: rgba(148, 163, 184, 0.22);
    background: rgba(148, 163, 184, 0.10);
    color: var(--text-secondary);
}

#cfTrafficWidget.is-error .cf-traffic-live-dot {
    background: rgba(148, 163, 184, 0.8);
    box-shadow: none;
}

@media (max-width: 980px) {
    .cf-traffic-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .cf-traffic-row {
        flex-direction: column;
    }
    .cf-traffic-row .cf-metric-uploads {
        min-width: unset;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .cf-traffic-card {
        padding: 1.1rem;
    }
    .cf-traffic-metrics {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   HOMEPAGE: Feature Inventory Console (Guides/Features section)
   NOTE: Markup lives in `index.html` and these classnames are currently
   unique to the homepage.
   ===================================================================== */

.feature-inventory-preview {
    padding: 2.75rem 0;
}

.feature-workspace {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.feature-sidebar {
    position: sticky;
    top: 6.25rem;
}

.feature-nav {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.feature-nav-item {
    width: 100%;
    appearance: none;
    border: 1px solid var(--border-color);
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
    color: var(--text-primary);
    border-radius: 1rem;
    padding: 0.85rem 0.9rem;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.feature-nav-item:hover {
    transform: translateY(-1px);
    border-color: rgba(247, 150, 58, 0.55);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.feature-nav-item.is-active {
    border-color: var(--accent-primary);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2);
}

.feature-nav-icon {
    width: 38px;
    height: 38px;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 150, 58, 0.12);
    color: var(--accent-primary);
    flex-shrink: 0;
}

.feature-nav-icon svg {
    width: 20px;
    height: 20px;
}

.feature-nav-label {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    min-width: 0;
}

.feature-nav-label strong {
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.feature-nav-status {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.12);
    color: rgba(134, 239, 172, 0.95);
    white-space: nowrap;
}

.feature-panels {
    min-width: 0;
}

.feature-panel {
    display: none;
}

.feature-panel.is-active {
    display: block;
    animation: fileshotFeaturePanelIn 0.16s ease-out;
}

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

/* Tools panel cards */
.tools-panel-head {
    margin-bottom: 0.75rem;
}

.feature-panel-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
}

.feature-panel-chip.status-live {
    border-color: rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.12);
    color: rgba(134, 239, 172, 0.95);
}

.tool-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tool-preview-card {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tool-card-media {
    background: rgba(15, 23, 42, 0.16);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.tool-card-media img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.tool-card-media--statpack {
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: center;
}

.tool-stat-card {
    border-radius: 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.08);
    padding: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tool-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(247, 150, 58, 0.12);
    color: var(--accent-primary);
}

.tool-card-body {
    padding: 0.95rem 1rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.tool-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.86rem;
}

.tool-card-meta span:first-child {
    font-weight: 750;
    color: var(--text-primary);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 800;
    border: 1px solid rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.12);
    color: rgba(134, 239, 172, 0.95);
    white-space: nowrap;
}

.status-pill--creator {
    border-color: rgba(247, 150, 58, 0.35);
    background: rgba(247, 150, 58, 0.12);
    color: rgba(255, 180, 160, 0.98);
}

.tool-card-actions {
    margin-top: auto;
}

.tool-card-actions a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 750;
}

.tool-card-actions a:hover {
    text-decoration: underline;
}

/* Feature panels (extension/desktop/vault/more) */
.feature-panel-layout {
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    background: linear-gradient(145deg, var(--bg-primary), var(--bg-secondary));
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    padding: 1.25rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.1rem;
}

.feature-panel-media {
    min-width: 0;
}

.feature-panel-media-frame {
    border-radius: 1.1rem;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.15);
}

.feature-panel-media-frame img,
.feature-panel-media-frame video {
    width: 100%;
    height: auto;
    display: block;
}

.feature-panel-media-frame--video {
    background: rgba(0, 0, 0, 0.2);
}

.feature-panel-media-frame.is-scrollable {
    max-height: 360px;
    overflow: auto;
}

.feature-panel-content {
    min-width: 0;
}

.feature-panel-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.7rem;
}

.feature-panel-content h4 {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: -0.02em;
}

.feature-panel-content p {
    margin: 0.5rem 0 0;
    color: var(--text-secondary);
}

.feature-panel-content ul {
    margin: 0.85rem 0 0;
    padding-left: 1.1rem;
    color: var(--text-secondary);
    display: grid;
    gap: 0.35rem;
}

.feature-panel-actions {
    margin-top: 1rem;
    display: grid;
    gap: 0.35rem;
}

.feature-panel-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 800;
}

.feature-panel-link:hover {
    text-decoration: underline;
}

.feature-panel-note {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.feature-panel-media-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.feature-panel-data-card {
    border-radius: 1rem;
    border: 1px solid rgba(148, 163, 184, 0.18);
    background: rgba(148, 163, 184, 0.08);
    padding: 0.85rem;
}

.feature-panel-data-card header {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
}

.feature-panel-data-card strong {
    display: block;
    margin-top: 0.3rem;
    font-size: 1.05rem;
}

.feature-panel-data-meta {
    margin-top: 0.55rem;
    display: flex;
    gap: 0.55rem;
    flex-wrap: wrap;
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.feature-panel-media-links {
    margin-top: 0.95rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feature-video-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.38rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.08);
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 750;
    font-size: 0.82rem;
}

.feature-video-link:hover {
    border-color: rgba(247, 150, 58, 0.5);
}

@media (min-width: 980px) {
    .feature-panel-layout {
        grid-template-columns: 1.05fr 0.95fr;
        align-items: center;
    }
}

@media (max-width: 980px) {
    .feature-workspace {
        grid-template-columns: 1fr;
    }

    .feature-sidebar {
        position: static;
    }

    .tool-preview-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .feature-inventory-preview {
        padding: 2.1rem 0;
    }
    .feature-nav-item {
        padding: 0.75rem 0.8rem;
    }
    .tool-card-media--statpack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------
   Safety net: prevent embeds/ads from exploding layout in this area.
   --------------------------------------------------------------------- */

.feature-inventory-preview iframe,
.feature-inventory-preview img,
.feature-inventory-preview video,
.feature-inventory-preview embed,
.feature-inventory-preview object,
.guide-carousel iframe,
.guide-carousel img,
.guide-carousel video {
    max-width: 100%;
}

.feature-panel-media-frame,
.tool-card-media {
    overflow: hidden;
}

/* ===== Bottom CTA Section ===== */
.bottom-cta-section {
    position: relative;
    padding: 4.5rem 1.5rem 3.5rem;
    text-align: center;
    overflow: hidden;
}

.bottom-cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 700px;
    height: 350px;
    background: radial-gradient(ellipse, rgba(247, 150, 58, 0.10) 0%, transparent 68%);
    pointer-events: none;
    z-index: 0;
}

.bottom-cta-inner {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.bottom-cta-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.55rem;
    margin-bottom: 2rem;
}

.cta-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(247, 150, 58, 0.28);
    background: rgba(247, 150, 58, 0.07);
    color: var(--accent-primary, #fa3800);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    white-space: nowrap;
}

.bottom-cta-heading {
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    font-weight: 800;
    color: var(--text-primary, #fff);
    margin: 0 0 0.8rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.bottom-cta-sub {
    color: var(--text-secondary, #aaa);
    font-size: 1.05rem;
    margin: 0 0 2.2rem;
    line-height: 1.65;
}

.bottom-cta-btn {
    padding: 0.9rem 3rem !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.015em;
    box-shadow: 0 0 32px rgba(247, 150, 58, 0.22), 0 4px 14px rgba(247, 150, 58, 0.18) !important;
}

.bottom-cta-btn:hover {
    box-shadow: 0 0 44px rgba(247, 150, 58, 0.36), 0 6px 20px rgba(247, 150, 58, 0.26) !important;
}

.bottom-cta-pricing-link {
    margin-top: 1.1rem;
}

.bottom-cta-pricing-link a {
    color: var(--text-secondary, #888);
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.2s;
}

.bottom-cta-pricing-link a:hover {
    color: var(--accent-primary, #fa3800);
}

/* ===== Learn More Accordion ===== */
.learn-more-details {
    max-width: 900px;
    margin: 0 auto 2rem;
    padding: 0 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.learn-more-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 1.15rem 0;
    color: var(--text-secondary, #888);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    list-style: none;
    user-select: none;
    transition: color 0.2s;
}

.learn-more-summary::-webkit-details-marker { display: none; }
.learn-more-summary::marker { display: none; }

.learn-more-summary::after {
    content: '\203A';
    font-size: 1.4rem;
    line-height: 1;
    display: inline-block;
    transform: rotate(90deg);
    transition: transform 0.25s ease;
    color: var(--text-secondary, #666);
    margin-left: 0.5rem;
}

.learn-more-details[open] .learn-more-summary::after {
    transform: rotate(270deg);
}

.learn-more-details[open] .learn-more-summary,
.learn-more-summary:hover {
    color: var(--text-primary, #fff);
}

@media (max-width: 600px) {
    .bottom-cta-section {
        padding: 3rem 1.25rem 2.5rem;
    }
    .bottom-cta-btn {
        width: 100%;
        justify-content: center;
    }
    .bottom-cta-badges {
        gap: 0.4rem;
    }
}

/* --------------------------------------------------------------
   CONCEPT 5 DESIGN SYSTEM — appended 2026-02-28
   All classes prefixed or scoped to concept5 tokens.
   Uses different var names (--bg, --t1, --a) from legacy vars
   (--bg-primary, --text-primary) — zero conflict.
   -------------------------------------------------------------- */

/* -- TOKENS --------------------------------- */
:root{
  --bg:#07080d;--bg2:#0d0f17;
  --sur:rgba(255,255,255,.038);--sur2:rgba(255,255,255,.065);
  --bdr:rgba(255,255,255,.07);--bdr2:rgba(255,255,255,.14);
  --t1:#eef0f7;--t2:#8a8faa;--t3:#454966;
  --a:#f7963a;--ah:#ff9833;
  --aglow:rgba(247,150,58,.16);--aglow2:rgba(247,150,58,.30);
  --grad:linear-gradient(135deg,#ffaa44 0%,#f7963a 55%,#df7e2a 100%);
  --gradh:linear-gradient(135deg,#ffb855 0%,#ffa040 55%,#e88a35 100%);
  --r4:4px;--r8:8px;--r12:12px;--r16:16px;--r24:24px;--r99:9999px;
  --font:'Plus Jakarta Sans',-apple-system,sans-serif;
  --mono:'SFMono-Regular',Consolas,monospace;
}
[data-theme="light"], html.light-theme{
  --bg:#fdf8f5;--bg2:#f5ece7;
  --sur:rgba(250,56,0,.04);--sur2:rgba(250,56,0,.08);
  --bdr:rgba(200,70,10,.12);--bdr2:rgba(200,70,10,.24);
  --t1:#0d0f17;--t2:#4a4f6a;--t3:#9095b0;
}
/* -- LIGHT THEME CARD SHADOWS -------------- */
html.light-theme .fc,
html.light-theme .uz,
html.light-theme .content-card,
html.light-theme .how-grid,
html.light-theme .spec-tbl,
html.light-theme #uploadOpts{
  box-shadow:0 2px 14px rgba(0,0,0,.07),0 0 0 1px rgba(200,70,10,.07);
}
html.light-theme .fc:hover{
  box-shadow:0 8px 32px rgba(0,0,0,.12),0 0 0 1px rgba(200,70,10,.14)!important;
}
html.light-theme .uz:hover{
  box-shadow:0 0 50px var(--aglow),0 12px 40px rgba(0,0,0,.14),0 0 0 1px rgba(200,70,10,.14)!important;
}
html.light-theme .p2p-status-row{background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.1)!important}
html.light-theme .p2p-link-row input{background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.12)!important}
html.light-theme .p2p-link-row button{background:rgba(0,0,0,.06)!important;border-color:rgba(0,0,0,.12)!important;color:var(--t1)!important}
html.light-theme #p2pCard #p2pChatInput{background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.12)!important}
html.light-theme #p2pCard #p2pReconnectBtn,html.light-theme #p2pCard #p2pNewLinkBtn{background:rgba(0,0,0,.05)!important;border-color:rgba(0,0,0,.12)!important;color:var(--t1)!important}
html.light-theme #p2pCard #p2pChatSendBtn{background:rgba(0,0,0,.06)!important;border-color:rgba(0,0,0,.12)!important;color:var(--t1)!important}

/* -- LIVE BG CANVASES ----------------------- */
#fileshotGLCanvas,#fileshotParticles{
  position:fixed;inset:0;width:100%;height:100%;
  pointer-events:none;
}
#fileshotGLCanvas{z-index:0}
#fileshotParticles{z-index:1}

/* -- LAYOUT -------------------------------- */
.page{position:relative;z-index:2}
body:has(#nav) main{padding-top:80px}
body:has(#nav) main > section.sec:first-child{padding-top:1rem!important}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:22px}

/* -- GLASS --------------------------------- */
.glass{background:var(--sur);border:1px solid var(--bdr);backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6)}
#uploadOptions{border-radius:var(--r16);overflow:hidden}

/* -- BUTTONS ------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:var(--r99);font-family:var(--font);font-weight:700;cursor:pointer;letter-spacing:-.01em;text-decoration:none;transition:transform .15s,box-shadow .2s,background .18s,border-color .18s}
.btn:active{transform:scale(.96)!important}
.btn-pri{background:var(--grad);color:#fff;border:none;box-shadow:0 4px 20px var(--aglow)}
.btn-pri:hover{background:var(--gradh);box-shadow:0 4px 32px var(--aglow2);transform:translateY(-2px)}
.btn-sec{background:rgba(255,255,255,.08);color:var(--t1);border:1px solid var(--bdr);backdrop-filter:blur(6px)}
.btn-sec:hover{background:rgba(255,255,255,.14);border-color:var(--a);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--t2);border:1px solid var(--bdr)}
.btn-ghost:hover{background:var(--sur2);border-color:var(--bdr2);color:var(--t1)}
.btn-acc{background:rgba(250,56,0,.08);color:var(--ah);border:1px solid rgba(250,56,0,.24)}
.btn-acc:hover{background:rgba(250,56,0,.15);border-color:rgba(250,56,0,.45)}
.btn-sm{padding:6px 14px;font-size:.8rem}
.btn-md{padding:10px 22px;font-size:.88rem}
.btn-lg{padding:13px 32px;font-size:.95rem}

/* -- ICON BTN ------------------------------ */
.ibtn{width:32px;height:32px;border-radius:var(--r8);display:inline-flex;align-items:center;justify-content:center;background:var(--sur);border:1px solid var(--bdr);color:var(--t2);cursor:pointer;transition:color .15s,border-color .15s,background .15s;flex-shrink:0}
.ibtn:hover{color:var(--t1);border-color:var(--bdr2);background:var(--sur2)}
.ibtn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;pointer-events:none}
.ibtn-del{border-color:rgba(220,38,38,.28)!important;color:#ef4444!important;background:rgba(220,38,38,.07)!important}
.ibtn-del:hover{border-color:rgba(220,38,38,.55)!important;background:rgba(220,38,38,.16)!important}

/* -- TOGGLE SWITCH ------------------------- */
.sw{position:relative;width:36px;height:20px;flex-shrink:0;display:inline-block}
.sw input{opacity:0;width:0;height:0;position:absolute}
.sw-t{position:absolute;inset:0;border-radius:var(--r99);background:rgba(255,255,255,.09);border:1px solid var(--bdr);transition:background .2s,border-color .2s}
.sw input:checked~.sw-t{background:var(--a);border-color:var(--a)}
.sw-k{position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.sw input:checked~.sw-k{transform:translateX(16px)}

/* -- PILL LABEL ---------------------------- */
.pill{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;border-radius:var(--r99);background:rgba(250,56,0,.07);border:1px solid rgba(250,56,0,.18);font-size: 0.75rem;font-weight:700;color:var(--ah);letter-spacing:.06em;text-transform:uppercase}

/* -- SECTION ------------------------------- */
.sec{padding-block:56px}
.sec-h2{font-size:clamp(1.7rem,3.8vw,2.8rem);font-weight:800;letter-spacing:-.04em;line-height:1.08;margin-top:14px;margin-bottom:12px}
.sec-p{font-size:1rem;color:var(--t2);line-height:1.65;letter-spacing:-.01em}
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--bdr),transparent);max-width:760px;margin-inline:auto}

/* -- SCROLL REVEAL ------------------------- */
.rv{opacity:0;transform:translateY(20px);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.07s}.rv.d2{transition-delay:.14s}.rv.d3{transition-delay:.21s}

/* -- NAV ------------------------------------ */
#nav{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:200;width:calc(100% - 36px);max-width:1080px;border-radius:var(--r99);border:none;box-shadow:0 8px 28px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06)}
.nav-in{display:flex;align-items:center;height:44px;padding-inline:15px;gap:6px}
.nav-logo{display:flex;align-items:center;gap:9px;font-weight:800;font-size:.97rem;letter-spacing:-.03em;margin-right:auto}
.nav-logo img{height:22px;width:auto;display:block;object-fit:contain}
.logo-sq{width:23px;height:23px;border-radius:6px;background:var(--grad);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 0 12px var(--aglow)}
.logo-sq svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2}
.nav-lnk{padding:6px 12px;font-size:.85rem;font-weight:500;color:var(--t2);border-radius:var(--r99);transition:color .15s,background .15s;text-decoration:none}
.nav-lnk:hover{color:var(--t1);background:var(--sur2)}
.nav-actions{display:flex;align-items:center;gap:8px;margin-left:6px}
.theme-btn{width:34px;height:34px;border-radius:var(--r99);display:flex;align-items:center;justify-content:center;background:var(--sur);border:1px solid var(--bdr);cursor:pointer;transition:background .15s,border-color .15s}
.theme-btn:hover{background:var(--sur2);border-color:var(--bdr2)}
.theme-btn svg{width:15px;height:15px;stroke:var(--t2);fill:none;stroke-width:2}
.ham{display:none;flex-direction:column;gap:5px;width:32px;height:32px;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:4px}
.ham span{display:block;width:18px;height:2px;background:var(--t2);border-radius:2px;transition:transform .22s,opacity .22s}
.ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham.open span:nth-child(2){opacity:0}
.ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
#drawer{display:none;position:fixed;top:68px;left:18px;right:18px;z-index:199;border-radius:var(--r16);padding:12px;flex-direction:column;gap:4px;max-height:calc(100vh - 82px);overflow-y:auto}
#drawer.open{display:flex}
#drawer .nav-lnk{padding:10px 14px;border-radius:var(--r12);font-size:.9rem}
#drawer .dr-section{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--bdr);margin-top:4px;padding-top:4px}
#drawer .dr-section-toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;font-size:.9rem;font-weight:600;color:var(--t2);border-radius:var(--r12);cursor:pointer;background:none;border:none;width:100%;font-family:var(--font);text-align:left;transition:color .15s,background .15s}
#drawer .dr-section-toggle:hover{color:var(--t1);background:var(--sur2)}
#drawer .dr-section-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .22s;flex-shrink:0}
#drawer .dr-section-toggle.open svg{transform:rotate(180deg)}
#drawer .dr-sub{display:none;flex-direction:column;gap:0;padding:0 6px 6px}
#drawer .dr-sub.open{display:flex}
#drawer .dr-sub a{padding:8px 12px;font-size:.82rem;color:var(--t2);border-radius:var(--r8);display:flex;align-items:center;gap:9px;transition:color .15s,background .15s}
#drawer .dr-sub a:hover{color:var(--t1);background:var(--sur2)}
#drawer .dr-sub a svg{width:13px;height:13px;stroke:var(--ah);fill:none;stroke-width:1.7;flex-shrink:0}
#drawer .dr-login{margin-top:4px;padding-top:4px;border-top:1px solid var(--bdr)}
#drawer .dr-login-btn{width:100%;padding:11px 14px;text-align:left;font-size:.9rem;font-weight:600;color:var(--t2);border-radius:var(--r12);background:none;border:none;cursor:pointer;font-family:var(--font);transition:color .15s,background .15s}
#drawer .dr-login-btn:hover{color:var(--t1);background:var(--sur2)}
.nav-dd{position:relative}
.nav-dd-btn{padding:6px 12px;font-size:.85rem;font-weight:500;color:var(--t2);border-radius:var(--r99);transition:color .15s,background .15s;cursor:pointer;display:flex;align-items:center;gap:4px;background:none;border:none;font-family:var(--font)}
.nav-dd-btn:hover,.nav-dd:hover .nav-dd-btn{color:var(--t1);background:var(--sur2)}
.nav-dd-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .18s}
.nav-dd:hover .nav-dd-btn svg{transform:rotate(180deg)}
.nav-dd-menu{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:rgba(10,10,12,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.11);border-radius:var(--r16);padding:8px 6px;min-width:210px;z-index:300;box-shadow:0 20px 56px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.06) inset}
.nav-dd:hover .nav-dd-menu{display:flex;flex-direction:column;gap:1px}
.nav-dd-item{padding:8px 12px;font-size:.82rem;color:var(--t2);border-radius:var(--r8);transition:color .15s,background .15s;display:flex;align-items:center;gap:9px;text-decoration:none}
.nav-dd-item:hover{color:var(--t1);background:rgba(255,255,255,.07)}
.nav-dd-item svg{width:13px;height:13px;stroke:var(--ah);fill:none;stroke-width:1.7;flex-shrink:0}
@media(max-width:680px){.nav-links-d,.nav-cta-d,.nav-dd{display:none!important}.ham{display:flex}}

/* -- HERO ----------------------------------- */
.hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:80px;padding-bottom:56px}
.hero-eye{margin-bottom:22px}
.hero-dot{width:6px;height:6px;border-radius:50%;background:var(--a);box-shadow:0 0 8px var(--a);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.7)}}
.hero-h1{font-size:clamp(1.9rem,4.4vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1.05;max-width:720px;margin-bottom:16px;color:var(--t1)}
.hero-h1 em{font-style:normal;color:var(--ah)}
.hero-sub{font-size:clamp(.95rem,2vw,1.1rem);color:var(--t2);max-width:440px;line-height:1.65;margin-bottom:20px}

/* -- P2P TOGGLE ---------------------------- */
.mode-bar{display:flex;align-items:center;gap:2px;padding:4px;border-radius:var(--r99);background:rgba(255,255,255,.05);border:1px solid var(--bdr);margin-bottom:18px}
.mode-btn{padding:7px 18px;border-radius:var(--r99);font-size:.8rem;font-weight:700;color:var(--t2);background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:6px;transition:color .15s,background .15s;letter-spacing:-.01em}
.mode-btn.active{background:var(--sur2);color:var(--t1);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mode-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* -- CARD WRAPPER -------------------------- */
.card-wrap{width:100%;max-width:640px;position:relative}

/* -- UPLOAD CARD ---------------------------- */
#uploadCard{width:100%}
.uz{border-radius:var(--r24);padding:66px 42px 57px;cursor:pointer;position:relative;overflow:hidden;transition:transform .5s cubic-bezier(.23,1,.32,1),box-shadow .35s,border-color .25s;will-change:transform;transform:scale(1)}
.uz:hover{transform:scale(1.025);box-shadow:0 0 50px var(--aglow),0 28px 70px rgba(0,0,0,.5)}
.uz-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(250,56,0,.12) 0%,transparent 60%);opacity:0;transition:opacity .3s}
.uz:hover .uz-glow{opacity:1}
.uz-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px}
.uz-ic{width:82px;height:82px;border-radius:50%;background:rgba(250,56,0,.08);border:1.5px solid rgba(250,56,0,.18);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;transition:background .3s,border-color .3s,box-shadow .3s}
.uz:hover .uz-ic{background:rgba(250,106,42,.18);border-color:rgba(250,106,42,.5);box-shadow:0 0 24px var(--aglow)}
.uz-ic svg{width:32px;height:32px;stroke:var(--ah);fill:none;stroke-width:1.8;position:relative;z-index:1}
.uz:hover .uz-ic svg{animation:bounce .5s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes bounce{0%{transform:translateY(0)}50%{transform:translateY(-7px)}100%{transform:translateY(0)}}
.ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(250,106,42,0);opacity:0;pointer-events:none}
.uz:hover .ring-1{animation:ring-out 1.7s ease-out 0s infinite}
.uz:hover .ring-2{animation:ring-out 1.7s ease-out .42s infinite}
.uz:hover .ring-3{animation:ring-out 1.7s ease-out .84s infinite}
@keyframes ring-out{0%{transform:scale(1);opacity:.75;border-color:rgba(250,106,42,.6)}100%{transform:scale(3);opacity:0;border-color:rgba(250,106,42,0)}}
.uz-title{font-size:1.08rem;font-weight:700;letter-spacing:-.03em}
.uz-sub{font-size:.85rem;color:var(--t3);letter-spacing:-.01em}
.uz-enc{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:var(--r99);background:rgba(255,255,255,.03);border:1px solid var(--bdr);font-size: 0.75rem;font-weight:700;color:var(--t2);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.uz-enc svg{width:11px;height:11px;stroke:var(--ah);fill:none;stroke-width:2.2}

/* -- UPLOAD OPTS --------------------------- */
#uploadOpts{width:100%;border-radius:var(--r24);overflow:hidden;margin-top:0}
.tabs{display:flex;border-bottom:1px solid var(--bdr);background:rgba(255,255,255,.02)}
.tab{flex:1;padding:10px;font-size:.8rem;font-weight:700;color:var(--t2);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;letter-spacing:-.01em}
.tab.on{color:var(--t1);border-bottom-color:var(--ah)}
.pane{display:none;padding:14px}
.pane.on{display:block}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.opt-cell{background:rgba(255,255,255,.03);border:1px solid var(--bdr);border-radius:var(--r12);padding:11px;display:flex;flex-direction:column;gap:5px}
.opt-cell label{font-size: 0.75rem;color:var(--t2);font-weight:600}
.opt-cell input,.opt-cell select{width:100%;padding:6px 9px;border-radius:var(--r8);border:1px solid var(--bdr);background:rgba(0,0,0,.22);color:var(--t1);font-family:var(--font);font-size:.8rem;transition:border-color .15s}
.opt-cell input:focus,.opt-cell select:focus{outline:none;border-color:rgba(250,106,42,.45)}
.tog-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tog-row label{font-size:.82rem;font-weight:600;color:var(--t1)}
.feat-locked{opacity:.45;cursor:pointer}.feat-locked *{pointer-events:none}
@media(max-width:480px){#zkePasswordGroup{flex-basis:100%!important;order:3}}
@media(max-width:480px){#basicPriceItem .tog-row{gap:3px;flex-wrap:wrap}#basicPriceItem #paidAccessPriceInline{max-width:none!important;margin:2px 0 0!important;flex-basis:100%}}
.pw-row{display:flex;gap:5px;margin-top:7px;align-items:center;flex-wrap:nowrap}
.pw-row input{flex:1;min-width:0}
.pw-copy{padding:4px 9px;border-radius:var(--r8);border:1px solid var(--bdr);background:rgba(255,255,255,.04);color:var(--t2);font-size: 0.75rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0}
.pw-gen{padding:5px 9px;border-radius:var(--r8);border:1px solid var(--bdr);background:rgba(255,255,255,.04);color:var(--t2);font-size: 0.75rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.pw-gen:hover{color:var(--t1);border-color:var(--bdr2)}
.fbar{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:var(--r12);background:rgba(250,56,0,.07);border:1px solid rgba(250,56,0,.18);margin-bottom:10px}
.fbar svg{width:13px;height:13px;stroke:var(--ah);fill:none;stroke-width:2;flex-shrink:0}
.fbar .fn{font-size:.83rem;font-weight:700;color:var(--ah);flex:1}
.fbar .fs{font-size:.78rem;color:var(--t2)}
.adv-row{display:flex;align-items:center;gap:8px;padding:9px 11px;border-radius:var(--r12);background:rgba(255,255,255,.025);border:1px solid var(--bdr);cursor:pointer;margin-bottom:7px;transition:border-color .15s}
.adv-row.open{border-radius:var(--r12) var(--r12) 0 0;margin-bottom:0;border-bottom-color:transparent}
.adv-row:hover{border-color:var(--bdr2)}
.adv-row:last-child{margin-bottom:0}
.adv-row svg{width:13px;height:13px;stroke:var(--ah);fill:none;stroke-width:2;flex-shrink:0}
.adv-row span{font-size:.8rem;font-weight:600;color:var(--t1);flex:1}
.pro-tag{padding:2px 7px;border-radius:var(--r99);background:var(--a);color:#fff;font-size: 0.75rem;font-weight:800;letter-spacing:.04em}
.adv-row .pro-tag{flex:0 0 auto}
.act-row{display:flex;gap:7px;margin-top:3px}
.act-row .btn{flex:1;padding:10px;font-size:.86rem}
.btn-chg{padding:10px 14px;font-size:.8rem;font-weight:600;border-radius:var(--r99);border:1px solid var(--bdr);background:transparent;color:var(--t2);cursor:pointer;transition:border-color .15s,color .15s;white-space:nowrap}
.btn-chg:hover{border-color:var(--bdr2);color:var(--t1)}

/* -- P2P CARD -------------------------------- */
#p2pCard{width:100%;display:none;border-radius:var(--r24);padding:28px 24px}
.p2p-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.p2p-icon{width:42px;height:42px;border-radius:50%;background:rgba(250,56,0,.1);border:1.5px solid rgba(250,56,0,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.p2p-icon svg{width:19px;height:19px;stroke:var(--ah);fill:none;stroke-width:2}
.p2p-title{font-size:1rem;font-weight:800;letter-spacing:-.03em}
.p2p-sub{font-size:.78rem;color:var(--t2);margin-top:1px}
.p2p-beta{padding:2px 8px;border-radius:var(--r99);background:rgba(250,56,0,.1);border:1px solid rgba(250,56,0,.25);font-size: 0.75rem;font-weight:800;color:var(--ah);letter-spacing:.05em;margin-left:auto}
.p2p-drop{border:1.5px dashed rgba(250,56,0,.25);border-radius:var(--r16);padding:32px 28px;text-align:center;cursor:pointer;margin-bottom:14px;position:relative;overflow:hidden;transform:scale(1);will-change:transform;transition:transform .5s cubic-bezier(.23,1,.32,1),box-shadow .35s,border-color .25s,background .25s}
.p2p-drop:hover{transform:scale(1.018);box-shadow:0 0 40px var(--aglow),0 16px 48px rgba(0,0,0,.35);border-color:rgba(250,106,42,.55)}
.p2p-drop-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(250,56,0,.12) 0%,transparent 60%);opacity:0;transition:opacity .3s}
.p2p-drop:hover .p2p-drop-glow{opacity:1}
.p2p-drop-in{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px}
.p2p-drop-ic{width:68px;height:68px;border-radius:50%;background:rgba(250,56,0,.08);border:1.5px solid rgba(250,56,0,.18);display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0;transition:background .3s,border-color .3s,box-shadow .3s}
.p2p-drop:hover .p2p-drop-ic{background:rgba(250,106,42,.18);border-color:rgba(250,106,42,.5);box-shadow:0 0 24px var(--aglow)}
.p2p-drop-ic svg{width:26px;height:26px;stroke:var(--ah);fill:none;stroke-width:1.8;position:relative;z-index:1}
.p2p-drop:hover .p2p-drop-ic svg{animation:bounce .5s cubic-bezier(.34,1.56,.64,1) forwards}
.p2p-drop:hover .ring-1{animation:ring-out 1.7s ease-out 0s infinite}
.p2p-drop:hover .ring-2{animation:ring-out 1.7s ease-out .42s infinite}
.p2p-drop:hover .ring-3{animation:ring-out 1.7s ease-out .84s infinite}
.p2p-drop-title{font-size:.95rem;font-weight:700;letter-spacing:-.02em;margin-bottom:3px}
.p2p-drop-sub{font-size:.78rem;color:var(--t2)}
.p2p-status-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r8);background:rgba(255,255,255,.03);border:1px solid var(--bdr);margin-bottom:12px;font-size:.78rem;color:var(--t2)}
.p2p-dot{width:7px;height:7px;border-radius:50%;background:var(--t3);flex-shrink:0}
.p2p-dot.live{background:#22c55e;box-shadow:0 0 7px rgba(34,197,94,.6);animation:pulse 2s infinite}
#p2pChatMessages{text-align:left}
.p2p-chat-bubble{padding:5px 8px;border-radius:var(--r8);border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);margin-bottom:5px}
.p2p-chat-meta{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:2px}
.p2p-chat-name{font-size: 0.75rem;font-weight:700;color:var(--ah)}
.p2p-chat-meta span:last-child{font-size: 0.75rem;color:var(--t3)}
.p2p-chat-text{font-size:.78rem;color:var(--t1);word-break:break-word;line-height:1.4}
.p2p-link-row{display:flex;gap:0;margin-bottom:14px}
.p2p-link-row input{flex:1;padding:8px 11px;font-size:.76rem;font-family:var(--mono);background:rgba(0,0,0,.25);border:1px solid var(--bdr);border-right:0;border-radius:var(--r8) 0 0 var(--r8);color:var(--t1);min-width:0}
.p2p-link-row button{padding:8px 14px;font-size:.8rem;font-weight:700;background:var(--sur2);border:1px solid var(--bdr);border-radius:0 var(--r8) var(--r8) 0;color:var(--t1);cursor:pointer;white-space:nowrap;transition:background .15s}
.p2p-link-row button:hover{background:rgba(255,255,255,.1)}

/* -- RESULT PANEL --------------------------- */
#resultPanel{width:100%;border-radius:var(--r24);padding:20px;display:none;border:1.5px solid rgba(250,56,0,.24);background:linear-gradient(150deg,rgba(250,56,0,.07) 0%,transparent 55%)}
#resultPanel.show{display:block}
.res-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.res-chk{width:30px;height:30px;border-radius:50%;background:rgba(34,197,94,.13);border:1.5px solid rgba(34,197,94,.32);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.res-chk svg{width:14px;height:14px;stroke:#22c55e;fill:none;stroke-width:2.5}
.res-title{font-size:.9rem;font-weight:700;letter-spacing:-.02em}
.res-meta{font-size:.75rem;color:var(--t2);margin-top:1px}
.link-bar{display:flex;margin-bottom:10px}
.link-bar input{flex:1;padding:8px 11px;font-size:.75rem;font-family:var(--mono);background:rgba(0,0,0,.28);border:1px solid var(--bdr);border-right:0;border-radius:var(--r8) 0 0 var(--r8);color:var(--t1);min-width:0}
.link-bar button{padding:8px 15px;font-size:.79rem;font-weight:700;background:var(--grad);border:none;color:#fff;border-radius:0 var(--r8) var(--r8) 0;cursor:pointer;white-space:nowrap;transition:background .18s,box-shadow .18s}
.link-bar button:hover{background:var(--gradh);box-shadow:0 0 16px var(--aglow)}
.pw-res{display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r8);background:rgba(255,255,255,.03);border:1px solid var(--bdr);margin-bottom:10px;max-width:420px;margin-inline:auto}
.pw-res span{font-size: 0.75rem;color:var(--t2);white-space:nowrap}
.pw-res input{flex:1;min-width:0;padding:0;background:none;border:none;color:var(--t1);font-family:var(--mono);font-size:.76rem}
.pw-res input:focus{outline:none}
.share-pw-combined{display:flex;flex-direction:column;align-items:stretch;padding-bottom:6px}.share-pw-combined #zkePasswordContainerResult{flex-shrink:0}.share-pw-combined #zkePasswordContainerResult .pw-res{margin-bottom:0;margin-inline:0;max-width:none}@media(min-width:768px){.share-pw-combined{flex-direction:row;align-items:center;gap:10px;flex-wrap:nowrap}.share-pw-combined #zkePasswordContainerResult{flex:1;min-width:0;overflow:hidden}.share-pw-combined #zkePasswordContainerResult .pw-res{width:100%}.share-pw-combined .share-row{margin-bottom:0;justify-content:flex-start;flex-wrap:nowrap;flex:0 0 auto}}
.share-row{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-bottom:10px;justify-content:center}
.share-lbl{font-size: 0.75rem;color:var(--t3);white-space:nowrap;margin-right:2px}
.share-sep{width:1px;height:18px;background:var(--bdr);margin-inline:3px;flex-shrink:0}
.res-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding-top:9px;border-top:1px solid var(--bdr)}
.res-foot span{font-size: 0.75rem;color:var(--t2)}

/* -- FEATURES ------------------------------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
@media(max-width:820px){.feat-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.feat-grid{grid-template-columns:1fr}}
/* Feature tabs — mobile only */
.ftabs-wrap{display:none}
.feat-tab-panel{display:none}
@media(max-width:600px){.feat-grid-full{display:none!important}.ftabs-wrap{display:flex;justify-content:center;margin-bottom:24px}.ftabs{display:flex;background:var(--sur);border-radius:var(--r99);padding:3px;border:1px solid var(--bdr)}.ftab{padding:8px 20px;border-radius:var(--r99);border:none;background:transparent;color:var(--t2);font-size:.83rem;font-weight:700;cursor:pointer;font-family:var(--font);transition:background .18s,color .18s;letter-spacing:-.01em}.ftab.active{background:var(--a);color:#fff}.feat-tab-panel.active{display:grid;grid-template-columns:1fr;gap:13px}}
.fc{border-radius:var(--r16);padding:26px 22px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s}
.fc:hover{transform:translateY(-4px);box-shadow:0 16px 44px rgba(0,0,0,.4)}
.fc:hover{border-color:rgba(250,56,0,.2)!important}
.fc-icon{width:40px;height:40px;border-radius:var(--r8);background:rgba(250,56,0,.08);border:1px solid rgba(250,56,0,.17);display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .25s,box-shadow .25s}
.fc:hover .fc-icon{background:rgba(250,106,42,.18);box-shadow:0 0 16px var(--aglow)}
.fc-icon svg{width:18px;height:18px;stroke:var(--ah);fill:none;stroke-width:1.8}
.fc-h3{font-size:.95rem;font-weight:700;letter-spacing:-.03em;margin-bottom:7px;color:var(--t1)}
a.fc{color:inherit;text-decoration:none}
.fc-p{font-size:.84rem;color:var(--t2);line-height:1.58;letter-spacing:-.01em}
.fc-badge{display:inline-block;margin-top:10px;padding:2px 8px;border-radius:var(--r99);background:rgba(250,56,0,.09);border:1px solid rgba(250,56,0,.2);font-size: 0.75rem;font-weight:700;color:var(--ah);letter-spacing:.05em;text-transform:uppercase}

/* -- HOW IT WORKS --------------------------- */
.how-grid{display:grid;grid-template-columns:repeat(3,1fr);border-radius:var(--r16);overflow:hidden;border:1px solid var(--bdr)}
@media(max-width:600px){.how-grid{grid-template-columns:1fr}}
.step{padding:32px 26px;background:var(--sur);transition:background .25s}
.step:hover{background:var(--sur2)}
.step+.step{border-left:1px solid var(--bdr)}
@media(max-width:600px){.step+.step{border-left:0;border-top:1px solid var(--bdr)}}
.step-n{font-size:3rem;font-weight:800;color:rgba(250,106,42,.2);line-height:1;margin-bottom:16px;display:block;user-select:none;letter-spacing:-.05em}
.step-h{font-size:.97rem;font-weight:700;letter-spacing:-.03em;margin-bottom:7px}
.step-p{font-size:.84rem;color:var(--t2);line-height:1.58}

/* -- PRICING -------------------------------- */
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:48px}
@media(max-width:950px){.price-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.price-grid{grid-template-columns:1fr;max-width:340px;margin-inline:auto}}
.pc{border-radius:var(--r16);padding:24px 20px;display:flex;flex-direction:column;transition:transform .28s,box-shadow .28s}
.pc:hover{transform:translateY(-5px);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.pc.pop{background:linear-gradient(150deg,rgba(250,56,0,.1) 0%,rgba(250,106,42,.04) 50%,transparent 100%);border:1.5px solid rgba(250,56,0,.28)!important;box-shadow:0 0 36px rgba(250,56,0,.09)}
.pc-pop-chip{display:inline-block;padding:2px 10px;background:var(--grad);border-radius:var(--r99);font-size: 0.75rem;font-weight:800;color:#fff;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 3px 10px var(--aglow2);margin-bottom:12px;white-space:nowrap}
.pc-tier{font-size: 0.75rem;font-weight:800;color:var(--t2);letter-spacing:.07em;text-transform:uppercase;margin-bottom:14px}
.pc.pop .pc-tier{color:var(--ah)}
.pc-amt{display:flex;align-items:flex-end;gap:2px;margin-bottom:3px}
.pc-cur{font-size:1.05rem;font-weight:700;color:var(--t1);margin-bottom:3px}
.pc-num{font-size:2.6rem;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--t1)}
.pc-per{font-size:.78rem;color:var(--t2);margin-bottom:16px}
.pc-div{height:1px;background:var(--bdr);margin-block:16px}
.pc-ul{list-style:none;display:flex;flex-direction:column;gap:9px;flex:1;margin-bottom:20px}
.pc-ul li{display:flex;align-items:flex-start;gap:7px;font-size:.8rem;color:var(--t2);line-height:1.38}
.pc-ul li svg{width:13px;height:13px;stroke:var(--ah);fill:none;stroke-width:2.2;flex-shrink:0;margin-top:1px}
.pc-ul li strong{color:var(--t1);font-weight:700}
.pc-ul li.dim{color:var(--t3)}
.pc-ul li.dim svg{stroke:var(--t3)}

/* -- SECURITY SECTION ----------------------- */
.sec-panel{border-radius:var(--r24);padding:50px 46px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;border:1px solid rgba(250,56,0,.13);background:linear-gradient(135deg,rgba(250,56,0,.06) 0%,transparent 60%)}
@media(max-width:700px){.sec-panel{grid-template-columns:1fr;padding:32px 22px;gap:26px}}
.spec-tbl{display:flex;flex-direction:column;gap:9px}
.spec-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:var(--r8);background:rgba(255,255,255,.025);border:1px solid var(--bdr)}
.spec-k{font-size:.79rem;color:var(--t2)}
.spec-v{font-size:.79rem;font-weight:700;font-family:var(--mono);letter-spacing:.02em;color:var(--t1);text-align:right}
.spec-v.grn{color:#4ade80}.spec-v.org{color:var(--ah)}

/* -- TRUST PILLS ---------------------------- */
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:14px}
.tpill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:var(--r99);background:rgba(255,255,255,.03);border:1px solid var(--bdr);font-size:.76rem;font-weight:500;color:var(--t2);transition:color .15s,border-color .15s,background .15s}
.tpill:hover{color:var(--t1);border-color:var(--bdr2);background:var(--sur2)}
.tpill svg{width:11px;height:11px;stroke:var(--ah);fill:none;stroke-width:2;flex-shrink:0}

/* -- SECURITY BADGES GRID -------------------- */
.sec-badges-wrap{max-width:820px;margin:18px auto 0}
.sec-badges-label{text-align:center;color:var(--t3);font-size:.65rem;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.sec-badges{display:grid;grid-template-columns:repeat(3,1fr);border-radius:var(--r);overflow:hidden;border:1px solid var(--bdr);background:var(--sur);backdrop-filter:blur(20px) saturate(1.6)}
.sec-badge{display:flex;align-items:center;gap:12px;padding:16px 20px;text-decoration:none;color:inherit;transition:background .2s}
.sec-badge:hover{background:rgba(247,150,58,.04)}
.sec-badge:nth-child(3n+2),.sec-badge:nth-child(3n+3){border-left:1px solid var(--bdr)}
.sec-badge:nth-child(n+4){border-top:1px solid var(--bdr)}
.sec-badge-logo{height:22px;width:auto;flex-shrink:0}
.sec-badge-logo.snyk{height:28px}
.sec-badge-logo.qualys{height:26px}
.sec-badge-logo.vt{height:16px}
.sec-badge-logo.immuniweb{height:20px}
.sec-badge-logo.google{height:16px}
.sec-badge-logo.internetnl{height:18px}
.sec-badge-logo.cloudflare{height:18px}
.sec-badge-grade{font-size:1.35rem;font-weight:800;line-height:1;color:var(--a);flex-shrink:0}
.sec-badge-safe{font-size:.72rem;font-weight:700;line-height:1;color:#34a853;flex-shrink:0;padding:3px 8px;border-radius:5px;background:rgba(52,168,83,.12);border:1px solid rgba(52,168,83,.2)}
.sec-badge-clean{font-size:.88rem;font-weight:700;line-height:1;color:var(--a);flex-shrink:0}
.sec-badge-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.sec-badge-name{font-size:.73rem;font-weight:600;line-height:1;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sec-badge-score{font-size:.62rem;font-weight:500;line-height:1.3;color:var(--t2)}
@media(max-width:640px){.sec-badges{grid-template-columns:repeat(2,1fr)}.sec-badge{border-left:none!important;border-top:none!important}.sec-badge:nth-child(even){border-left:1px solid var(--bdr)!important}.sec-badge:nth-child(n+3){border-top:1px solid var(--bdr)!important}}
@media(max-width:420px){.sec-badges{grid-template-columns:1fr}.sec-badge{border-left:none!important;border-top:none!important}.sec-badge+.sec-badge{border-top:1px solid var(--bdr)!important}}

/* ── Detailed badge cards (security page) ────────────────────────── */
.sec-detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:900px;margin:0 auto}
.sec-detail-card{display:flex;gap:16px;padding:20px 22px;border-radius:var(--r);border:1px solid var(--bdr);background:var(--sur);backdrop-filter:blur(20px) saturate(1.6);text-decoration:none;color:inherit;transition:background .2s,border-color .2s}
.sec-detail-card:hover{background:rgba(247,150,58,.04);border-color:rgba(247,150,58,.2)}
.sec-detail-left{display:flex;flex-direction:column;align-items:center;gap:6px;flex-shrink:0;min-width:64px}
.sec-detail-left .sec-badge-logo{height:24px;width:auto}
.sec-detail-left .sec-badge-logo.snyk{height:30px}
.sec-detail-left .sec-badge-logo.qualys{height:28px}
.sec-detail-left .sec-badge-logo.vt{height:18px}
.sec-detail-left .sec-badge-logo.immuniweb{height:22px}
.sec-detail-left .sec-badge-logo.google{height:18px}
.sec-detail-left .sec-badge-logo.internetnl{height:20px}
.sec-detail-left .sec-badge-logo.cloudflare{height:20px}
.sec-detail-grade{font-size:1.5rem;font-weight:800;line-height:1;color:var(--a)}
.sec-detail-safe{font-size:.7rem;font-weight:700;line-height:1;color:#34a853;padding:3px 8px;border-radius:5px;background:rgba(52,168,83,.12);border:1px solid rgba(52,168,83,.2)}
.sec-detail-clean{font-size:1rem;font-weight:700;line-height:1;color:var(--a)}
.sec-detail-right{display:flex;flex-direction:column;gap:4px;min-width:0}
.sec-detail-name{font-size:.88rem;font-weight:700;color:var(--t1);line-height:1.2}
.sec-detail-desc{font-size:.78rem;font-weight:400;line-height:1.5;color:var(--t2)}
.sec-detail-tag{display:inline-block;font-size:.62rem;font-weight:600;color:var(--a);letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
@media(max-width:640px){.sec-detail-grid{grid-template-columns:1fr}}

.tp-widget{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:var(--r99);border:1px solid var(--bdr);background:rgba(255,255,255,.03)}
.tp-stars{display:flex;gap:2px}
.tp-star{width:16px;height:16px;fill:#00b67a;color:#00b67a}
.tp-label{font-size:.78rem;font-weight:700;color:var(--t1)}
.tp-count{font-size: 0.75rem;color:var(--t2)}
.tp-tp{font-size: 0.75rem;color:#00b67a;font-weight:700}

/* -- CTA BAND -------------------------------- */
.cta-band{border-radius:var(--r24);padding:64px 48px;text-align:center;background:linear-gradient(135deg,rgba(250,56,0,.1) 0%,rgba(250,106,42,.05) 100%);border:1px solid rgba(250,56,0,.17);position:relative;overflow:hidden}
.cta-band::before{content:'';position:absolute;top:-1px;left:12%;right:12%;height:1px;background:linear-gradient(90deg,transparent,rgba(250,106,42,.65),transparent)}
.cta-btns{display:flex;align-items:center;justify-content:center;gap:11px;flex-wrap:wrap;margin-top:28px}

/* -- FOOTER ---------------------------------- */
.footer{padding-block:56px 32px;border-top:1px solid var(--bdr)}
.ft-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:28px;margin-bottom:0;padding-bottom:32px}
@media(max-width:960px){.ft-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.ft-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.ft-brand{grid-column:1/-1;text-align:center}.ft-brand .nav-logo{display:flex;justify-content:center}.ft-brand p{max-width:none;margin-inline:auto}}
.ft-brand p{font-size:.82rem;color:var(--t3);line-height:1.62;margin-top:9px;max-width:230px}
.ft-col h4{font-size: 0.75rem;font-weight:800;color:var(--t2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.ft-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.ft-col ul li a{font-size:.82rem;color:var(--t3);transition:color .15s}
.ft-col ul li a:hover{color:var(--t1)}
.ft-industries{padding-block:20px 28px;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);margin-bottom:24px}
.ft-industries h4{font-size: 0.75rem;font-weight:800;color:var(--t2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.ft-tags{display:flex;flex-wrap:wrap;gap:6px}
.ft-tags a{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r99);background:rgba(255,255,255,.025);border:1px solid var(--bdr);font-size:.78rem;color:var(--t3);text-decoration:none;transition:color .15s,border-color .15s,background .15s}
.ft-tags a:hover{color:var(--t1);border-color:rgba(250,106,42,.4);background:rgba(250,56,0,.06)}
.ft-bot{display:flex;align-items:center;justify-content:space-between;padding-top:0;flex-wrap:wrap;gap:8px}
.ft-bot span{font-size:.75rem;color:var(--t3)}
.ft-pills{display:flex;gap:5px}
.fp{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:var(--r99);background:rgba(255,255,255,.025);border:1px solid var(--bdr);font-size: 0.75rem;font-weight:700;color:var(--t3)}
.fp svg{width:9px;height:9px;stroke:var(--ah);fill:none;stroke-width:2}
.ft-security{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:14px 0 10px;border-top:1px solid var(--bdr)}
.ft-security .fp{transition:border-color .2s,color .2s;text-decoration:none}
.ft-security .fp:hover{border-color:rgba(250,106,42,.45);color:var(--t1)}
.ft-security .fp .sec-grade{color:var(--ah);font-weight:800;font-size:.8rem;margin-left:1px}

/* -- DOWNLOAD PAGE --------------------------- */
.dl-preview{max-width:480px;border-radius:var(--r24);overflow:hidden;border:1px solid var(--bdr);margin-inline:auto}
.dl-bar{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--bdr);background:rgba(255,255,255,.02)}
.dl-dots{display:flex;gap:5px}
.dl-dot{width:9px;height:9px;border-radius:50%}
.dl-url{flex:1;font-size: 0.75rem;font-family:var(--mono);color:var(--t3);background:rgba(0,0,0,.18);padding:3px 9px;border-radius:var(--r4);border:1px solid var(--bdr);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-body{padding:24px 22px}
.dl-preview-media{width:100%;max-height:160px;object-fit:cover;border-radius:var(--r12);margin-bottom:16px;display:block}
.dl-icon-wrap{display:flex;justify-content:center;margin-bottom:16px}
.dl-ficon{width:58px;height:58px;border-radius:var(--r12);background:rgba(250,56,0,.1);border:1px solid rgba(250,56,0,.22);display:flex;align-items:center;justify-content:center}
.dl-ficon svg{width:26px;height:26px;stroke:var(--ah);fill:none;stroke-width:1.6}
.dl-fname{font-size:.97rem;font-weight:800;text-align:center;letter-spacing:-.03em;margin-bottom:3px}
.dl-fmeta{font-size:.77rem;color:var(--t2);text-align:center;margin-bottom:16px}
.dl-enc{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:var(--r8);background:rgba(34,197,94,.07);border:1px solid rgba(34,197,94,.18);font-size: 0.75rem;font-weight:600;color:#4ade80;margin-bottom:16px}
.dl-enc svg{width:12px;height:12px;stroke:#4ade80;fill:none;stroke-width:2}
.dl-pw{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:var(--r8);background:rgba(255,255,255,.03);border:1px solid var(--bdr);margin-bottom:12px}
.dl-pw svg{width:12px;height:12px;stroke:var(--t2);fill:none;stroke-width:2;flex-shrink:0}
.dl-pw input{flex:1;background:none;border:none;color:var(--t1);font-size:.8rem;font-family:var(--font)}
.dl-pw input:focus{outline:none}
.dl-dl{display:block;width:100%;padding:12px;font-size:.88rem;font-weight:800;text-align:center;border-radius:var(--r99);background:var(--grad);color:#fff;border:none;cursor:pointer;box-shadow:0 4px 18px var(--aglow);letter-spacing:-.01em;transition:background .18s,box-shadow .18s}
.dl-dl:hover{background:var(--gradh);box-shadow:0 4px 28px var(--aglow2)}

/* -- CONCEPT 5 FONT + BODY OVERRIDE ----------------------------------
   Overrides legacy 'Play' font-family declaration at line 1605.
   Must stay at END of file to win specificity. --------------------- */
body,button,input,select,textarea,h1,h2,h3,h4,h5,h6{font-family:var(--font)}
body{background:var(--bg);color:var(--t1)}

/* -- PHASE3: Tool card glass overrides -------------------------------
   Override legacy --bg-primary-based cards (content-card, upload-box,
   tool-tabs) to use concept5 glass tokens.
   Must stay at END to win specificity. ----------------------------- */
.content-card{background:var(--sur)!important;border:1px solid var(--bdr)!important;box-shadow:none!important;backdrop-filter:blur(14px) saturate(1.2)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2)!important;border-radius:var(--r24)!important}
.upload-box{background:var(--sur)!important;border:2px dashed var(--bdr2)!important;backdrop-filter:blur(14px) saturate(1.2)!important;-webkit-backdrop-filter:blur(14px) saturate(1.2)!important;border-radius:var(--r24)!important}
.tool-tabs{background:rgba(255,255,255,.04)!important;border:1px solid var(--bdr)!important;border-radius:var(--r12)!important;padding:4px!important}
.tool-tab{color:var(--t2)!important;border-radius:var(--r8)!important;font-family:var(--font)!important}
.tool-tab.active{background:var(--a)!important;color:#fff!important;box-shadow:none!important}

/* -- AUTH MODAL: concept5 glass overrides ----------------------------
   Replaces legacy --bg-primary-based auth modal with glass tokens.
   Must stay at END to win specificity. ------------------------------ */
.modal-content{background:var(--sur)!important;border:1px solid var(--bdr)!important;border-radius:var(--r24)!important;box-shadow:0 24px 64px rgba(0,0,0,.5)!important;backdrop-filter:blur(20px) saturate(1.4)!important;-webkit-backdrop-filter:blur(20px) saturate(1.4)!important}
.modal-content input,.modal-content select{background:rgba(0,0,0,.28)!important;border:1px solid var(--bdr)!important;color:var(--t1)!important;border-radius:var(--r8)!important}
.modal-content input::placeholder{color:var(--t3)!important}
.auth-main-tabs{background:rgba(255,255,255,.04)!important;border:1px solid var(--bdr)!important;border-radius:var(--r99)!important}
.auth-main-tab{color:var(--t2)!important;border-radius:var(--r99)!important}
.auth-main-tab.active{background:rgba(255,255,255,.10)!important;color:var(--t1)!important;box-shadow:none!important}
/* Light theme overrides for auth modal */
.light-theme .modal-content{background:rgba(255,255,255,.97)!important;box-shadow:0 24px 64px rgba(0,0,0,.18)!important}
.light-theme .modal-content input,.light-theme .modal-content select{background:rgba(0,0,0,.04)!important;color:#1f1f1f!important}
.light-theme .auth-main-tabs{background:rgba(0,0,0,.05)!important}
.light-theme .auth-main-tab{color:#6b6b6b!important}
.light-theme .auth-main-tab.active{background:rgba(0,0,0,.09)!important;color:#1f1f1f!important}

/* ── PAGE TRANSITION — smooth fade-in on every navigation, no white flash ── */
@keyframes fs-page-fadein { from { opacity: 0 } to { opacity: 1 } }
body { animation: fs-page-fadein 0.18s ease both; }