/* Documentation Style CSS */
:root {
    /* Colors */
    --primary-color: #0066cc;
    --primary-hover: #0052a3;
    --secondary-color: #6b7280;
    --accent-color: #10b981;
    
    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-sidebar: #ffffff;
    --bg-code: #f8fafc;
    
    /* Border Colors */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    --border-dark: #9ca3af;
    
    /* Spacing */
    --sidebar-width: 280px;
    --sidebar-collapsed-width: 50px;
    --content-max-width: 800px;
    --toc-width: 200px;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    
    /* Shadows */
    --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);
    
    /* Animation */
    --transition-fast: 0.15s ease-in-out;
    --transition-medium: 0.25s ease-in-out;
}

/* Dark Theme */
[data-theme="dark"] {
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    --bg-sidebar: #1f2937;
    --bg-code: #374151;
    
    --border-light: #374151;
    --border-medium: #4b5563;
    --border-dark: #6b7280;
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: background-color var(--transition-medium), 
                border-color var(--transition-medium), 
                color var(--transition-medium);
}

/* Theme toggle visual improvements */
.theme-toggle {
    position: relative;
    overflow: hidden;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: var(--primary-color);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.3s ease, height 0.3s ease;
    opacity: 0.1;
    z-index: -1;
}

.theme-toggle:active::before {
    width: 40px;
    height: 40px;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    display: flex;
    min-height: 100vh;
}

/* Documentation Sidebar */
.docs-sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--bg-sidebar);
    border-right: 1px solid var(--border-light);
    overflow-y: auto;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: width var(--transition-medium);
}

.docs-sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.docs-sidebar.collapsed .logo-text,
.docs-sidebar.collapsed .version-badge,
.docs-sidebar.collapsed .section-title,
.docs-sidebar.collapsed .footer-text,
.docs-sidebar.collapsed .search-container,
.docs-sidebar.collapsed .nav-sections,
.docs-sidebar.collapsed .sidebar-footer {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-medium), visibility var(--transition-medium);
}

.docs-sidebar.collapsed .logo {
    justify-content: center;
}

.docs-sidebar.collapsed .sidebar-header {
    justify-content: center;
    position: relative;
    padding: 1rem 0.5rem;
}

.docs-sidebar.collapsed .sidebar-collapse {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
}

.docs-sidebar.collapsed .section-links .nav-link {
    padding-left: 1rem;
    justify-content: center;
    text-align: center;
}

.docs-sidebar.collapsed .sidebar-collapse i {
    transform: rotate(180deg);
}

.sidebar-header {
    padding: 1rem 1rem 1rem 1rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 60px;
    gap: 0.5rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    flex: 1;
    overflow: visible;
}

.logo-icon {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    border-radius: 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 14px;
    transition: var(--transition-medium);
}

.docs-sidebar.collapsed .logo-icon {
    margin: 0 auto;
}

.logo-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-primary);
    transition: var(--transition-medium);
    white-space: nowrap;
}

.version-badge {
    background-color: var(--primary-color);
    color: white;
    font-size: var(--font-size-xs);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
    transition: var(--transition-medium);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: fit-content;
}

.sidebar-collapse {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: var(--transition-fast);
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
}

.sidebar-collapse:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.sidebar-collapse i {
    transition: transform var(--transition-medium);
}

/* Search */
.search-container {
    padding: 1rem;
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition-medium);
}

.search-box {
    position: relative;
    display: flex;
    align-items: center;
}

.search-box i {
    position: absolute;
    left: 0.75rem;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
}

.search-box input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
}

/* Navigation Sections */
.nav-sections {
    flex: 1;
    padding: 1rem 0;
}

.nav-section {
    margin-bottom: 1.5rem;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.section-header i {
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.section-title {
    transition: var(--transition-medium);
    white-space: nowrap;
}

.section-links {
    list-style: none;
    margin-top: 0.5rem;
}

.section-links .nav-link {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem 0.5rem 2.5rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    border-left: 3px solid transparent;
    transition: var(--transition-fast);
    white-space: nowrap;
    overflow: hidden;
}

.section-links .nav-link:hover {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
}

.section-links .nav-link.active {
    color: var(--primary-color);
    background-color: rgba(0, 102, 204, 0.1);
    border-left-color: var(--primary-color);
    font-weight: 500;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 1rem;
}

.footer-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--font-size-xs);
    transition: var(--transition-fast);
    min-width: 0;
}

.footer-link:hover {
    color: var(--primary-color);
}

.footer-text {
    transition: var(--transition-medium);
    white-space: nowrap;
}

/* Main Documentation Content */
.docs-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left var(--transition-medium);
}

.docs-sidebar.collapsed ~ .docs-main {
    margin-left: var(--sidebar-collapsed-width);
}

/* Documentation Header */
.docs-header {
    height: 60px;
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    position: sticky;
    top: 0;
    z-index: 50;
}

.sidebar-toggle {
    display: none;
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.breadcrumb a {
    color: var(--primary-color);
    text-decoration: none;
}

.breadcrumb i {
    font-size: 0.75rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.theme-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    border-radius: 6px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.theme-toggle:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.install-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    transition: var(--transition-fast);
}

.install-btn:hover {
    background-color: var(--primary-hover);
}

/* Documentation Content */
.docs-content {
    flex: 1;
    display: flex;
    max-width: calc(var(--content-max-width) + var(--toc-width) + 4rem);
    margin: 0 auto;
    padding: 2rem;
    gap: 2rem;
}

.content-article {
    flex: 1;
    max-width: var(--content-max-width);
}

/* Page Header */
.page-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-light);
}

.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.page-subtitle {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.5;
}

.page-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.meta-item i {
    font-size: var(--font-size-xs);
}

/* Table of Contents */
.toc-container {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

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

.toc-list {
    list-style: none;
}

.toc-list li {
    margin-bottom: 0.5rem;
}

.toc-list a {
    color: var(--primary-color);
    text-decoration: none;
    font-size: var(--font-size-sm);
    transition: var(--transition-fast);
}

.toc-list a:hover {
    color: var(--primary-hover);
}

/* Content Sections */
.content-section {
    margin-bottom: 3rem;
}

.content-section h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
    line-height: 1.3;
}

.content-section h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin: 1.5rem 0 0.75rem 0;
    line-height: 1.4;
}

.content-section p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
}

/* Info Boxes */
.info-box {
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
    border-left: 4px solid;
}

.info-box.info {
    background-color: rgba(59, 130, 246, 0.1);
    border-left-color: #3b82f6;
}

.info-box.warning {
    background-color: rgba(245, 158, 11, 0.1);
    border-left-color: #f59e0b;
}

.info-box.error {
    background-color: rgba(239, 68, 68, 0.1);
    border-left-color: #ef4444;
}

.info-box.success {
    background-color: rgba(16, 185, 129, 0.1);
    border-left-color: var(--accent-color);
}

.box-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* Lists */
.feature-list {
    list-style: none;
    margin: 1rem 0;
}

.feature-list li {
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
}

.feature-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

/* Feature Grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.feature-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    transition: var(--transition-medium);
}

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

.feature-icon {
    width: 48px;
    height: 48px;
    background-color: var(--primary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    color: white;
    font-size: var(--font-size-lg);
}

.feature-card h3 {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-card p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
}

/* Step Container */
.step-container {
    margin: 2rem 0;
}

.step {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-light);
}

.step:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.step-number {
    width: 32px;
    height: 32px;
    background-color: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.step-content h3 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

/* Code Blocks */
.code-block {
    background-color: var(--bg-code);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    margin: 1rem 0;
}

.code-header {
    background-color: var(--bg-tertiary);
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.copy-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: var(--transition-fast);
}

.copy-btn:hover {
    color: var(--primary-color);
    background-color: var(--bg-secondary);
}

.code-block pre {
    margin: 0;
    padding: 1rem;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.code-block code {
    font-family: var(--font-mono);
    color: var(--text-primary);
}

/* Content Footer */
.content-footer {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-light);
}

.footer-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.nav-prev,
.nav-next {
    flex: 1;
}

.nav-next {
    text-align: right;
}

.footer-nav .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: var(--transition-fast);
}

.footer-nav .nav-link:hover {
    color: var(--primary-hover);
}

.footer-feedback {
    text-align: center;
}

.footer-feedback h4 {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.feedback-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.feedback-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--border-medium);
    border-radius: 6px;
    padding: 0.5rem 1rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
}

.feedback-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.feedback-btn.positive:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

/* Side TOC */
.side-toc {
    width: var(--toc-width);
    align-self: flex-start;
    position: sticky;
    top: 80px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 1rem;
}

.side-toc h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.side-toc ul {
    list-style: none;
}

.side-toc li {
    margin-bottom: 0.5rem;
}

.side-toc a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    transition: var(--transition-fast);
}

.side-toc a:hover {
    color: var(--primary-color);
}

/* Additional styles for enhanced functionality */
.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    max-height: 300px;
    overflow-y: auto;
}

.search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-result-item {
    border-bottom: 1px solid var(--border-light);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item a {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    transition: var(--transition-fast);
}

.search-result-item a:hover {
    background-color: var(--bg-secondary);
}

.search-result-item mark {
    background-color: rgba(255, 235, 59, 0.3);
    color: inherit;
    padding: 0;
}

.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 50;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-medium);
}

.sidebar-overlay.active {
    opacity: 1;
    visibility: visible;
}

.feedback-active {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

.toc-active {
    color: var(--primary-color) !important;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .side-toc {
        display: none;
    }
    
    .docs-content {
        max-width: var(--content-max-width);
    }
}

@media (max-width: 768px) {
    .docs-sidebar {
        transform: translateX(-100%);
        transition: transform var(--transition-medium);
        width: var(--sidebar-width);
    }
    
    .docs-sidebar.open {
        transform: translateX(0);
    }
    
    .docs-main {
        margin-left: 0;
    }
    
    .docs-sidebar.collapsed ~ .docs-main {
        margin-left: 0;
    }
    
    .sidebar-toggle {
        display: block;
    }
    
    .docs-content {
        padding: 1rem;
    }
    
    .docs-header {
        padding: 0 1rem;
    }
    
    .breadcrumb {
        display: none;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
    }
    
    .page-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .footer-nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-next {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .docs-content {
        padding: 0.5rem;
    }
    
    .page-title {
        font-size: var(--font-size-2xl);
    }
    
    .step {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .feedback-buttons {
        flex-direction: column;
        align-items: center;
    }
}
/* Product family and shared accessibility additions */
.skip-link{position:fixed;left:16px;top:-100px;z-index:999;background:var(--bg-primary);padding:12px 20px;border:2px solid var(--primary-color);border-radius:8px}.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--primary-color);outline-offset:4px}
.product-navigation{padding:16px 20px 0;display:grid;gap:8px}.brand-home{font-size:12px;font-weight:600;color:var(--primary-color)}.product-navigation label{font-size:12px;color:var(--text-secondary)}.product-navigation select{width:100%;padding:10px;border:1px solid var(--border-light);border-radius:6px;background:var(--bg-primary);color:var(--text-primary);font:inherit;font-size:14px}.collapsed .product-navigation{display:none}
.search-results[hidden]{display:none}.search-results{max-height:60vh;overflow-y:auto}.search-count{font-size:12px;padding:10px 12px;color:var(--text-secondary)}.search-page-result{display:block;padding:12px;border-top:1px solid var(--border-light);color:var(--text-primary);text-decoration:none}.search-page-result:hover{background:var(--bg-tertiary)}.search-page-result strong{display:block;font-size:13px}.search-page-result span{display:block;font-size:12px;line-height:1.5;color:var(--text-secondary);margin-top:5px}
.product-home{display:block}.home-header,.home-main,.home-footer{max-width:1160px;margin:auto;padding-left:40px;padding-right:40px}.home-header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-light)}.home-brand{display:flex;align-items:center;gap:12px;font-size:22px;font-weight:700;color:var(--text-primary);text-decoration:none}.home-header nav{display:flex;align-items:center;gap:28px}.home-header nav a,.home-footer a{font-size:14px;color:var(--text-secondary);text-decoration:none}.home-header nav a:hover,.home-footer a:hover{color:var(--primary-color)}.home-hero{padding:90px 0 76px;max-width:740px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;color:var(--primary-color)}.home-hero h1{font-size:clamp(40px,5.5vw,68px);letter-spacing:-2.8px;line-height:1.12;margin:20px 0 24px;color:var(--text-primary)}.home-hero p{color:var(--text-secondary);font-size:18px;line-height:1.8;margin-bottom:30px}.home-hero .install-btn{display:inline-flex;gap:24px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.section-heading h2{font-size:24px;letter-spacing:-.5px;margin-top:10px}.catalog-note{font-size:12px;color:var(--text-secondary)}.product-card{display:grid;grid-template-columns:1.2fr 1fr;border:1px solid var(--border-light);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}.product-card-main{padding:36px}.product-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.product-card .logo-icon{width:48px;height:48px}.product-status{font-size:12px;color:var(--primary-color);background:var(--bg-tertiary);padding:5px 12px;border-radius:20px}.product-card h3{font-size:27px;letter-spacing:-.6px;margin-bottom:12px}.product-card p{color:var(--text-secondary);line-height:1.8;max-width:390px}.product-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:28px}.product-actions a{font-size:13px}.product-card-details{padding:40px;background:var(--bg-secondary);border-left:1px solid var(--border-light)}.product-card-details h4{font-size:25px;line-height:1.4;font-weight:600;margin:16px 0}.product-card-details ul{list-style:none;margin:20px 0}.product-card-details li{font-size:14px;color:var(--text-secondary);margin:12px 0}.product-card-details li:before{content:'✓';color:var(--primary-color);margin-right:12px}.product-card-details a{font-size:14px}.home-help{margin:52px 0 60px;padding:30px 0;border-top:1px solid var(--border-light);display:flex;align-items:center;justify-content:space-between;gap:24px}.home-help h2{font-size:20px;margin-bottom:8px}.home-help p{font-size:14px;color:var(--text-secondary)}.home-help a{font-size:14px}.home-footer{display:flex;gap:28px;align-items:center;border-top:1px solid var(--border-light);padding-top:24px;padding-bottom:32px;color:var(--text-secondary);font-size:12px}.home-footer span{margin-right:auto}html{scroll-padding-top:96px}.info-box a{overflow-wrap:anywhere}
@media(max-width:768px){.home-header,.home-main,.home-footer{padding-left:22px;padding-right:22px}.home-header{height:auto;min-height:88px;gap:18px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}.home-header nav{gap:15px}.home-header nav a{font-size:12px}.home-hero{padding:58px 0}.home-hero h1{letter-spacing:-1.7px}.home-hero p{font-size:16px}.section-heading{align-items:start;flex-direction:column;gap:8px}.product-card{grid-template-columns:1fr}.product-card-main,.product-card-details{padding:26px}.product-card-details{border-left:0;border-top:1px solid var(--border-light)}.home-help{align-items:start;flex-direction:column}.home-footer{flex-wrap:wrap;gap:16px}.home-footer span{width:100%}.sidebar-collapse{display:none}.docs-content{min-width:0}.content-article{min-width:0}.docs-header .breadcrumb{min-width:0;overflow:hidden}.search-results{max-height:50vh}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
.product-home .product-actions a:not(.install-btn),.product-card-details a,.home-help a,.brand-home{color:var(--primary-color);text-decoration:none}.product-home a:hover,.brand-home:hover{text-decoration:underline}.product-home .install-btn:hover{text-decoration:none}
/* Authentic product screenshots and product overview */
.product-preview{grid-column:1 / -1;margin:0;border-top:1px solid var(--border-light);padding:24px;background:var(--bg-secondary)}.product-preview img,.overview-screenshot img{display:block;width:100%;height:auto;border:1px solid var(--border-light);border-radius:8px}.product-preview figcaption,.overview-screenshot figcaption{font-size:12px;color:var(--text-secondary);padding-top:12px;line-height:1.6}.product-preview a{display:block}.product-intro{padding:48px 0 40px;max-width:820px}.back-link{font-size:13px;color:var(--text-secondary);text-decoration:none}.product-heading{display:flex;align-items:center;gap:14px;margin-top:40px}.product-intro h1{font-size:clamp(36px,5vw,60px);line-height:1.15;letter-spacing:-2px;margin:22px 0}.product-intro>p{font-size:18px;line-height:1.8;max-width:650px;color:var(--text-secondary)}.overview-screenshot{margin:0;padding:20px;background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:12px}.overview-screenshot a,.overview-guides a{color:var(--primary-color);text-decoration:none}.overview-section{margin:64px 0}.overview-section h2{font-size:28px;letter-spacing:-.5px;margin:12px 0 24px}.overview-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.step-label{display:inline-block;color:var(--primary-color);font-weight:600;font-size:13px;margin-bottom:14px}.overview-benefits h3{font-size:18px;margin-bottom:10px}.overview-benefits p,.overview-guides p{font-size:15px;line-height:1.8;color:var(--text-secondary)}.overview-guides{border-top:1px solid var(--border-light);padding-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:40px}.guide-links{display:grid;grid-template-columns:1fr 1fr;gap:16px}.guide-links a{padding:20px;border:1px solid var(--border-light);border-radius:8px}.guide-links a:hover{background:var(--bg-secondary)}.guide-links strong,.guide-links span{display:block}.guide-links span{font-size:12px;color:var(--text-secondary);margin-top:8px}
@media(max-width:768px){.product-preview{padding:12px}.product-intro{padding-top:28px}.product-heading{margin-top:28px}.product-intro h1{letter-spacing:-1px}.product-intro>p{font-size:16px}.overview-screenshot{padding:10px}.overview-benefits,.overview-guides{grid-template-columns:1fr}.overview-benefits{gap:24px}.overview-section{margin:40px 0}.guide-links{grid-template-columns:1fr}.product-intro .install-btn{white-space:normal;line-height:1.5}}
.product-home .home-help .install-btn{color:#fff}

/* Product screenshot galleries */
.screenshot-gallery{grid-column:1/-1;min-width:0;padding:24px;background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:12px}.product-card>.screenshot-gallery{border:0;border-top:1px solid var(--border-light);border-radius:0}.gallery-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.gallery-count{font-size:12px;color:var(--text-secondary)}.gallery-featured{margin:0}.gallery-open{display:block;position:relative;background:white;border:1px solid var(--border-light);border-radius:8px;overflow:hidden;cursor:zoom-in}.gallery-main-image{display:block;width:100%;height:auto;aspect-ratio:1.94;object-fit:contain}.gallery-zoom{position:absolute;right:12px;bottom:12px;background:var(--bg-primary);color:var(--primary-color);box-shadow:var(--shadow-sm);border:1px solid var(--border-light);border-radius:6px;padding:8px 12px;font-size:12px}.gallery-caption{font-size:13px;color:var(--text-secondary);padding:14px 0;min-height:52px}.gallery-thumbnails{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.gallery-thumb{min-width:0;overflow:hidden;background:var(--bg-primary);border:2px solid var(--border-light);border-radius:8px;padding:0;text-align:left;cursor:pointer;color:var(--text-primary);font:inherit}.gallery-thumb[aria-pressed=true]{border-color:var(--primary-color);box-shadow:var(--shadow-sm)}.gallery-thumb img{width:100%;aspect-ratio:1.94;object-fit:contain;display:block;background:white}.gallery-thumb span{display:block;font-size:12px;padding:10px;line-height:1.5}.gallery-dialog{width:min(96vw,1600px);max-width:96vw;max-height:94vh;padding:16px;border:1px solid var(--border-light);border-radius:12px;background:var(--bg-primary);color:var(--text-primary);margin:auto}.gallery-dialog::backdrop{background:rgba(0,0,0,.8)}.gallery-dialog header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:12px}.gallery-dialog button{padding:8px 16px;border:1px solid var(--border-light);border-radius:6px;background:var(--bg-secondary);color:var(--text-primary);cursor:pointer;font:inherit}.gallery-dialog img{display:block;width:100%;max-height:76vh;object-fit:contain;background:white}.gallery-dialog p{font-size:13px;margin-top:12px;color:var(--text-secondary)}
@media(max-width:768px){.screenshot-gallery{padding:12px}.gallery-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.gallery-caption{font-size:12px}.gallery-zoom{padding:5px 8px;font-size:11px;right:6px;bottom:6px}.gallery-thumb span{font-size:11px;padding:8px}}
/* Appix-wide pages: policies, security, support and per-app release history */
.site-page{display:grid;grid-template-columns:220px minmax(0,1fr);gap:56px;padding:48px 0 24px}.site-page-intro{grid-column:1 / -1;max-width:780px}.site-page-intro h1{font-size:clamp(34px,4.5vw,52px);line-height:1.15;letter-spacing:-1.6px;margin:16px 0 18px;color:var(--text-primary)}.site-page-intro p{font-size:17px;line-height:1.8;color:var(--text-secondary)}.page-updated{display:inline-block;margin-top:14px;font-size:13px;color:var(--text-muted)}.site-toc{position:sticky;top:24px;align-self:start;border-left:2px solid var(--border-light);padding-left:18px}.site-toc strong{display:block;font-size:11px;letter-spacing:2px;color:var(--text-muted);margin-bottom:12px}.site-toc a{display:block;font-size:13px;line-height:1.5;color:var(--text-secondary);text-decoration:none;padding:5px 0}.site-toc a:hover{color:var(--primary-color)}.site-toc .toc-sub{padding-left:12px;font-size:12px}.site-body{max-width:760px;min-width:0}.site-body section{padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid var(--border-light)}.site-body section:last-child{border-bottom:0}.site-body h2{font-size:26px;letter-spacing:-.5px;margin:0 0 16px;color:var(--text-primary)}.site-body h3{font-size:18px;margin:28px 0 10px;color:var(--text-primary)}.site-body p,.site-body li{font-size:15.5px;line-height:1.8;color:var(--text-secondary)}.site-body p+p{margin-top:12px}.site-body ul{margin:10px 0 0 20px}.site-body li{margin:6px 0}.site-body a{color:var(--primary-color)}.site-body strong{color:var(--text-primary)}.app-section{background:var(--bg-secondary);border:1px solid var(--border-light);border-radius:14px;padding:32px}.site-body section.app-section{border-bottom:1px solid var(--border-light)}.app-tag{display:inline-flex;align-items:center;gap:10px;margin-bottom:14px}.app-tag .logo-icon{width:36px;height:36px;font-size:13px}.support-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:8px}.support-card{border:1px solid var(--border-light);border-radius:12px;padding:22px;background:var(--bg-primary)}.support-card h3{margin:0 0 8px;font-size:16px}.support-card p{font-size:14px}.support-card a{display:inline-block;margin-top:10px;font-weight:600;font-size:14px;text-decoration:none;overflow-wrap:anywhere}.release{position:relative}.release-head{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:6px}.release-head h2{margin:0}.release-badge{font-size:11px;font-weight:700;letter-spacing:1px;padding:4px 10px;border-radius:20px;background:var(--bg-tertiary);color:var(--primary-color)}.release-badge.major{background:var(--primary-color);color:#fff}.release-summary{font-size:16px!important;color:var(--text-primary)!important;font-weight:500;margin:8px 0 4px}.release-date{font-size:13px!important;color:var(--text-muted)!important}
@media(max-width:900px){.site-page{grid-template-columns:1fr;gap:28px;padding-top:32px}.site-toc{position:static;border-left:0;padding:16px;border:1px solid var(--border-light);border-radius:10px}.support-grid{grid-template-columns:1fr}.app-section{padding:22px}}
/* Appix logo: links back to the home page from every page */
.brand-mark{display:block;height:24px;width:auto}.home-brand .brand-mark{height:28px}a.logo{text-decoration:none;color:var(--text-primary)}a.logo:hover .logo-text{color:var(--primary-color)}.docs-sidebar .logo .brand-mark{height:12px;flex-shrink:0}.docs-sidebar.collapsed .logo .brand-mark{height:auto;width:34px}
/* ProjectClone (Free) vs ProjectClone Pro: tier badges, product family cards, comparison table, Pro page */
:root{--pro-color:#6d4fc4;--pro-soft:#f1edff}[data-theme="dark"]{--pro-color:#a78bfa;--pro-soft:#2a2346}
.tier-badge{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:1.2px;padding:3px 9px;border-radius:20px;vertical-align:middle}.tier-badge.free{background:var(--bg-tertiary);color:var(--primary-color);border:1px solid var(--border-light)}.tier-badge.pro{background:linear-gradient(90deg,#3b5bdb,#6d4fc4);color:#fff}.tier-badge.soon{background:transparent;color:var(--text-secondary);border:1px dashed var(--border-medium)}
.family-head{display:flex;align-items:center;gap:12px;margin:8px 0 16px}.family-head h3{font-size:18px;color:var(--text-primary)}.family-head span{font-size:13px;color:var(--text-secondary)}
.tier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.tier-card{display:flex;flex-direction:column;border:1px solid var(--border-light);border-radius:14px;padding:30px;background:var(--bg-primary);box-shadow:var(--shadow-sm)}.tier-card.pro{border:2px solid var(--pro-color);background:linear-gradient(180deg,var(--pro-soft),var(--bg-primary) 55%)}.tier-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.tier-card .logo-icon{width:44px;height:44px}.tier-card.pro .logo-icon{background:linear-gradient(135deg,#3b5bdb,#6d4fc4)}.tier-card h3{font-size:24px;letter-spacing:-.5px;margin:0 0 4px;color:var(--text-primary)}.tier-card .tier-tagline{font-size:15px;font-weight:600;color:var(--text-primary);margin:6px 0 10px}.tier-card>p{color:var(--text-secondary);line-height:1.7;font-size:14.5px}.tier-card ul{list-style:none;margin:18px 0 22px;padding:0}.tier-card li{font-size:14px;color:var(--text-secondary);margin:9px 0}.tier-card li:before{content:'✓';color:var(--primary-color);font-weight:700;margin-right:10px}.tier-card.pro li:before{color:var(--pro-color)}.tier-card .product-actions{margin-top:auto;padding-top:6px}.tier-status{font-size:12px;color:var(--text-secondary)}
.soon-card{margin-top:32px;display:flex;align-items:center;gap:20px;border:1px dashed var(--border-medium);border-radius:14px;padding:24px 30px}.soon-card .logo-icon{width:44px;height:44px;background:linear-gradient(135deg,#1f8a5b,#2fb37a)}.soon-card h3{font-size:20px;margin:0 0 4px;color:var(--text-primary)}.soon-card p{font-size:14px;color:var(--text-secondary);margin:0}.soon-card .tier-badge{margin-left:auto}
.compare-section{margin:72px 0 24px}.compare-lead{color:var(--text-secondary);font-size:15px;line-height:1.7;max-width:720px;margin-top:10px}.compare-wrap{overflow-x:auto;border:1px solid var(--border-light);border-radius:14px;margin-top:8px}.compare-table{width:100%;border-collapse:collapse;min-width:620px;font-size:14px}.compare-table th,.compare-table td{padding:13px 18px;border-bottom:1px solid var(--border-light);text-align:left;vertical-align:middle}.compare-table thead th{background:var(--bg-secondary);font-size:13px;position:sticky;top:0}.compare-table thead th .compare-app{display:block;margin-top:6px;font-size:15px;color:var(--text-primary)}.compare-table tbody th{font-weight:500;color:var(--text-primary);width:52%}.compare-table td{color:var(--text-secondary);width:24%}.compare-table .pro-col{background:color-mix(in srgb,var(--pro-soft) 70%,transparent)}.compare-table tr.group th{background:var(--bg-tertiary);font-size:11px;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-secondary);font-weight:700;padding:9px 18px}.compare-table tr:last-child th,.compare-table tr:last-child td{border-bottom:0}.compare-table .yes{color:#1f8a5b;font-weight:800;font-size:16px}.compare-table .pro-col .yes{color:var(--pro-color)}.compare-table .no{color:var(--text-muted)}
.usecase-title{font-size:18px;margin:40px 0 16px;color:var(--text-primary)}.usecase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.usecase{border:1px solid var(--border-light);border-radius:12px;padding:18px;font-size:13.5px;color:var(--text-secondary)}.usecase p{font-size:14.5px;color:var(--text-primary);line-height:1.6;margin-bottom:12px}.usecase strong{color:var(--text-primary)}.compare-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}.compare-actions a:not(.install-btn){color:var(--primary-color);text-decoration:none;font-size:14px}.product-home .compare-actions .install-btn{color:#fff}
.pro-hero{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:48px;align-items:center;padding:48px 0 24px}.pro-hero h1{font-size:clamp(34px,4.4vw,54px);line-height:1.12;letter-spacing:-1.8px;margin:18px 0;color:var(--text-primary)}.pro-hero h1 em{font-style:normal;background:linear-gradient(90deg,#3b5bdb,#6d4fc4);-webkit-background-clip:text;background-clip:text;color:transparent}.pro-hero>div>p{font-size:17px;line-height:1.8;color:var(--text-secondary)}.pro-shot{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--border-light);box-shadow:0 24px 48px -20px rgba(45,35,110,.35)}.pro-shot img{display:block;width:100%;height:auto}.pro-shot figcaption{font-size:12.5px;color:var(--text-secondary);padding:10px 14px;background:var(--bg-secondary);border-top:1px solid var(--border-light)}.soon-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:8px;border:1px dashed var(--pro-color);color:var(--pro-color);font-size:14px;font-weight:600}
.pro-note{display:flex;gap:12px;align-items:center;padding:14px 18px;border-radius:10px;background:var(--bg-secondary);border:1px solid var(--border-light);font-size:14px;color:var(--text-secondary);margin:8px 0 0}.pro-note a{color:var(--primary-color)}
.pro-features{margin:56px 0}.pro-feature{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:center;padding:40px 0;border-top:1px solid var(--border-light)}.pro-feature:nth-child(even) .pro-copy{order:2}.pro-feature:nth-child(even){grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}.pro-copy h2{font-size:26px;letter-spacing:-.5px;margin:10px 0 12px;color:var(--text-primary)}.pro-copy p{font-size:15.5px;line-height:1.8;color:var(--text-secondary)}.pro-copy ul{margin:12px 0 0 18px}.pro-copy li{font-size:14.5px;color:var(--text-secondary);margin:6px 0;line-height:1.6}.pro-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 8px}.pro-links a{padding:20px;border:1px solid var(--border-light);border-radius:10px;color:var(--primary-color);text-decoration:none}.pro-links a:hover{background:var(--bg-secondary)}.pro-links strong,.pro-links span{display:block}.pro-links span{font-size:12.5px;color:var(--text-secondary);margin-top:6px}
.free-callout{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:8px 0 40px;padding:20px 24px;border-radius:12px;border:2px solid var(--pro-color);background:var(--pro-soft)}.free-callout p{margin:0;color:var(--text-primary);font-size:15px}.free-callout a{color:var(--pro-color);font-weight:600;text-decoration:none}
@media(max-width:900px){.tier-grid,.usecase-grid,.pro-links{grid-template-columns:1fr}.pro-hero,.pro-feature,.pro-feature:nth-child(even){grid-template-columns:1fr;gap:24px}.pro-feature:nth-child(even) .pro-copy{order:0}.soon-card{flex-wrap:wrap}.soon-card .tier-badge{margin-left:0}.tier-card{padding:22px}}
@media(max-width:600px){.compare-table{min-width:0;font-size:12.5px}.compare-table th,.compare-table td{padding:10px 8px}.compare-table tbody th{width:46%}.compare-table td{width:27%}.compare-table thead th .compare-app{font-size:12.5px}.compare-table tr.group th{padding:8px}.family-head{flex-direction:column;align-items:flex-start;gap:4px}.pro-note{align-items:flex-start;flex-direction:column}}

.pro-zoom{display:block;cursor:zoom-in}.pro-zoom img{transition:opacity .15s}.pro-zoom:hover img{opacity:.92}

/* App icons (image logos, e.g. Excel Exporter) next to the text "PC"-style logo icons */
.app-icon{width:40px;height:40px;border-radius:10px;flex:none;vertical-align:middle;box-shadow:0 2px 6px rgba(9,30,66,.15)}
.app-icon-sm{width:24px;height:24px;border-radius:6px;margin-right:4px;box-shadow:none}
.product-heading .app-icon{width:48px;height:48px;border-radius:12px}
.app-tag .app-icon{width:36px;height:36px;border-radius:9px}
/* Single-edition app card on the home page (Excel Exporter) */
.app-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:28px;align-items:center;border:1px solid var(--border-light);border-radius:14px;padding:30px;background:linear-gradient(135deg,rgba(143,111,196,.08),rgba(23,160,93,.08));box-shadow:var(--shadow-sm)}
.app-card h3{margin:14px 0 4px}
.app-card ul{margin:14px 0;padding-left:20px}
.app-card-shot{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--border-light);box-shadow:var(--shadow-md,0 8px 24px rgba(9,30,66,.15))}
.app-card-shot img{display:block;width:100%;height:auto}
.family-head+.app-card{margin-top:0}
#productCards .app-card{margin-bottom:8px}
@media (max-width:860px){.app-card{grid-template-columns:1fr;padding:22px}}
.tier-grid+.family-head{margin-top:36px}