/* EvidenceFix v31.0 - Main Styles */

/* ═══════════════════════════════════════════════════════════
   CSS VARIABLES
   ═══════════════════════════════════════════════════════════ */
:root {
    /* Colors */
    --color-primary: #1a365d;
    --color-primary-light: #2c5282;
    --color-primary-dark: #0f2942;
    --color-secondary: #3182ce;
    --color-accent: #ed8936;
    
    --color-success: #38a169;
    --color-warning: #d69e2e;
    --color-danger: #e53e3e;
    --color-info: #3182ce;
    
    --color-text: #1a202c;
    --color-text-light: #4a5568;
    --color-text-muted: #718096;
    
    --color-bg: #ffffff;
    --color-bg-light: #f7fafc;
    --color-bg-dark: #edf2f7;
    
    --color-border: #e2e8f0;
    --color-border-dark: #cbd5e0;
    --color-bg-secondary: #edf2f7;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    
    /* Borders */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
}

/* ═══════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

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

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

img {
    max-width: 100%;
    height: auto;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════ */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.main {
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════════════ */
.header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-md) 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 700;
    font-size: var(--font-size-xl);
    color: var(--color-primary);
}

.logo-icon {
    font-size: 1.5em;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}
.nav-link--mobile-only {
    display: none;
}

.nav-link {
    color: var(--color-text-light);
    font-weight: 500;
    padding: var(--space-sm) 0;
}

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

.nav-link--admin {
    color: var(--color-danger);
}

.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-sm);
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

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

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

.btn-secondary {
    background: var(--color-bg-dark);
    color: var(--color-text);
}

.btn-secondary:hover {
    background: var(--color-border);
}

.btn-success {
    background: var(--color-success);
    color: white;
}

.btn-danger {
    background: var(--color-danger);
    color: white;
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

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

.btn-sm {
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-size-lg);
}

.btn-block {
    width: 100%;
}

/* ═══════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════ */
.form-group {
    margin-bottom: var(--space-md);
}

.form-label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 500;
    color: var(--color-text);
}

.form-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

.form-input--lg {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--font-size-lg);
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    padding-right: var(--space-2xl);
}

.form-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
}

.form-help {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════
   ALERTS
   ═══════════════════════════════════════════════════════════ */
.flash-messages {
    position: fixed;
    top: 80px;
    right: var(--space-md);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-width: 400px;
}

.alert {
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    animation: slideIn 0.3s ease;
    box-shadow: var(--shadow-lg);
}

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.alert-success { background: #c6f6d5; color: #22543d; }
.alert-warning { background: #fefcbf; color: #744210; }
.alert-danger { background: #fed7d7; color: #742a2a; }
.alert-info { background: #bee3f8; color: #2a4365; }

.alert-close {
    background: none;
    border: none;
    font-size: var(--font-size-xl);
    cursor: pointer;
    opacity: 0.5;
    transition: opacity var(--transition-fast);
}

.alert-close:hover {
    opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════ */
.card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
}

.card-header {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════ */
.table-wrapper {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}

.table th,
.table td {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.table th {
    font-weight: 600;
    color: var(--color-text-light);
    background: var(--color-bg-light);
}

.table tr:hover td {
    background: var(--color-bg-light);
}

/* ═══════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
}

.badge-success { background: #c6f6d5; color: #22543d; }
.badge-warning { background: #fefcbf; color: #744210; }
.badge-danger { background: #fed7d7; color: #742a2a; }
.badge-info { background: #bee3f8; color: #2a4365; }
.badge-secondary { background: var(--color-bg-dark); color: var(--color-text-light); }

/* ═══════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════ */
.footer {
    background: var(--color-primary-dark);
    color: white;
    padding: var(--space-3xl) 0 var(--space-xl);
    margin-top: var(--space-3xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--space-2xl);
}

.footer-brand .logo {
    color: white;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
}

.footer-brand p {
    color: rgba(255,255,255,0.7);
    font-size: var(--font-size-sm);
}

.footer-legal {
    margin-top: var(--space-sm);
    font-size: var(--font-size-xs) !important;
}

.footer-links h4 {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-md);
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.footer-links a {
    display: block;
    color: rgba(255,255,255,0.8);
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
}

.footer-links a:hover {
    color: white;
}

.footer-bottom {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.5);
}

/* ═══════════════════════════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════════════════════════ */
.hero {
    padding: var(--space-3xl) 0;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    color: white;
    text-align: center;
}

.hero-title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: var(--font-size-lg);
    color: rgba(255,255,255,0.8);
    margin-bottom: var(--space-2xl);
}

.hero-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.hero-badge {
    background: rgba(255,255,255,0.15);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
}

/* ═══════════════════════════════════════════════════════════
   CAPTURE FORM
   ═══════════════════════════════════════════════════════════ */
.capture-form {
    background: white;
    padding: var(--space-lg);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    max-width: 600px;
    margin: 0 auto;
}

.capture-form .form-row {
    display: flex;
    gap: var(--space-sm);
}

.capture-form .form-input {
    flex: 1;
}

.device-toggle {
    display: flex;
    background: var(--color-bg-dark);
    border-radius: var(--radius-md);
    padding: 2px;
}

.device-toggle label {
    padding: var(--space-sm) var(--space-md);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.device-toggle input {
    display: none;
}

.device-toggle input:checked + label {
    background: white;
    box-shadow: var(--shadow-sm);
}

/* ═══════════════════════════════════════════════════════════
   VERIFY PAGE v29.0
   ═══════════════════════════════════════════════════════════ */
.verify-page {
    background: var(--color-bg-light);
    min-height: 100vh;
}

/* Verify Header */
.verify-header {
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #3182ce 100%);
    color: white;
    padding: var(--space-2xl) 0;
    text-align: center;
}
.verify-header h1 {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin: 0;
}
.verify-header-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}
.verify-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.verify-header-subtitle {
    font-size: var(--font-size-sm);
    opacity: 0.8;
}

/* Verify Content Container */
.verify-content {
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-xl) var(--space-lg);
}

/* Methods Grid */
.verify-methods-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}
.verify-method-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.verify-method-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.verify-method-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.verify-method-icon-blue { background: #dbeafe; }
.verify-method-icon-blue svg { stroke: #3182ce; }
.verify-method-icon-green { background: #d1fae5; }
.verify-method-icon-green svg { stroke: #059669; }
.verify-method-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin: 0;
}

/* Input styling */
.verify-input-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}
.verify-input-field {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    font-size: var(--font-size-base) !important;
    padding: 12px 16px !important;
    border: 2px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    transition: border-color 0.2s;
}
.verify-input-field:focus {
    border-color: var(--color-secondary) !important;
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.15);
}
.verify-submit-btn {
    padding: 12px !important;
    font-weight: 600;
    border-radius: var(--radius-lg) !important;
    margin-top: var(--space-md);
}

/* Drop Zone */
.verify-drop-zone {
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}
.verify-drop-zone:hover { border-color: #9ca3af; }
.verify-drop-zone.drag-over { border-color: var(--color-secondary); background: #eff6ff; }
.verify-file-input { display: none; }
.verify-drop-icon { margin: 0 auto var(--space-md); color: var(--color-text-muted); }

/* Result Card */
.verify-result-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Protocol Info */
.verify-protocol-info {
    background: #f7fafc;
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.verify-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}
.verify-info-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.verify-info-value {
    font-weight: 600;
    margin-left: var(--space-sm);
}
.verify-info-full {
    grid-column: 1 / -1;
}

/* Verification Checks */
.verify-checks-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.verify-checks-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.verify-check-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: #f7fafc;
}
.verify-check-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.verify-check-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.verify-check-icon-success { background: #d1fae5; }
.verify-check-icon-success svg { stroke: #059669; }
.verify-check-icon-pending { background: #fef3c7; }
.verify-check-icon-pending svg { stroke: #d97706; }
.verify-check-title { font-weight: 600; margin: 0; font-size: var(--font-size-base); }
.verify-check-desc { font-size: var(--font-size-xs); color: var(--color-text-muted); margin: 2px 0 0 0; }

/* Badges */
.verify-check-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.verify-badge-success { background: #d1fae5; color: #065f46; }
.verify-badge-pending { background: #fef3c7; color: #92400e; }

/* Details Section */
.verify-details-section {
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
}
.verify-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--font-size-sm);
}
.verify-hash-code {
    display: block;
    word-break: break-all;
    font-size: var(--font-size-xs);
    background: #f7fafc;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: monospace;
    margin-top: var(--space-xs);
}

/* Extra Sections */
.verify-extra-section {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    border-left: 3px solid;
}
.verify-extra-green { background: #f0fff4; border-left-color: #38a169; }
.verify-extra-yellow { background: #fffff0; border-left-color: #d69e2e; }

/* Overall Result */
.verify-overall-result {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    margin-top: var(--space-lg);
}
.verify-overall-success { background: #f0fff4; }
.verify-overall-error { background: #fff5f5; }
.verify-overall-icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.verify-overall-icon-success { background: #d1fae5; }
.verify-overall-icon-success svg { stroke: #059669; }
.verify-overall-icon-error { background: #fee2e2; }
.verify-overall-icon-error svg { stroke: #dc2626; }
.verify-overall-title {
    font-weight: 700;
    margin: 0;
}
.verify-overall-title--success { color: #22543d; }
.verify-overall-title--error { color: #742a2a; }
.verify-overall-desc {
    margin: 4px 0 0 0;
    font-size: var(--font-size-sm);
}
.verify-overall-desc--success { color: #276749; }
.verify-overall-desc--error { color: #9b2c2c; }

/* How It Works */
.verify-how-it-works {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    margin-bottom: var(--space-xl);
}
.verify-how-title-main {
    font-size: var(--font-size-xl);
    font-weight: 700;
    margin-bottom: var(--space-lg);
}
.verify-how-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}
.verify-how-title { font-weight: 600; margin: 0 0 var(--space-xs) 0; font-size: var(--font-size-base); }
.verify-how-desc { font-size: var(--font-size-sm); color: var(--color-text-muted); margin: 0; }
.verify-how-footer {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

/* Verify additional elements */
.verify-hash-section {
    margin-top: var(--space-md);
}
.verify-extra-link {
    margin-top: var(--space-xs);
    word-break: break-all;
}
.verify-file-name {
    margin-top: var(--space-sm);
    display: none;
}
.verify-zip-submit-btn {
    background: #38a169;
    color: white;
}
.verify-zip-submit-btn:hover {
    background: #2f855a;
}
.verify-reasons {
    padding: var(--space-md);
    margin-top: var(--space-md);
}
.verify-reasons-title {
    margin-bottom: var(--space-sm);
}
.verify-reasons-list {
    margin-left: var(--space-lg);
}
.verify-input-hint {
    margin-top: 4px;
}

/* Verify Footer */
.verify-footer {
    padding: var(--space-xl) 0;
    background: var(--color-bg-dark);
    text-align: center;
}

/* Verify Responsive */
@media (max-width: 768px) {
    .verify-methods-grid { grid-template-columns: 1fr; }
    .verify-info-grid { grid-template-columns: 1fr; }
    .verify-how-grid { grid-template-columns: 1fr; }
    .verify-check-item { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD LAYOUT
   ═══════════════════════════════════════════════════════════ */
.dashboard-layout {
    display: flex;
    min-height: calc(100vh - 65px);
}

.dashboard-sidebar {
    width: 250px;
    background: var(--color-bg-light);
    border-right: 1px solid var(--color-border);
    padding: var(--space-lg);
    flex-shrink: 0;
}

.dashboard-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.dashboard-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--color-text-light);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.dashboard-nav a:hover,
.dashboard-nav a.active {
    background: var(--color-primary);
    color: white;
}

/* ── Admin Sidebar (dark variant) ────────────────────────── */
.dashboard-sidebar--admin {
    background: var(--color-primary-dark);
}
.admin-sidebar-header { margin-bottom: var(--space-xl); }
.admin-sidebar-header .text-label {
    color: rgba(255,255,255,0.5); font-size: var(--font-size-sm);
}
.admin-sidebar-header .text-brand {
    color: #fff; font-weight: 600;
}
.dashboard-sidebar--admin .dashboard-nav a {
    color: rgba(255,255,255,0.75);
}
.dashboard-sidebar--admin .dashboard-nav a:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.dashboard-sidebar--admin .dashboard-nav a.active {
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.admin-sidebar-footer {
    margin-top: auto; padding-top: var(--space-xl);
}
.admin-sidebar-footer a {
    color: rgba(255,255,255,0.5); font-size: var(--font-size-sm);
}
.admin-sidebar-footer a:hover { color: rgba(255,255,255,0.8); }

.dashboard-main {
    flex: 1;
    padding: var(--space-xl);
    overflow-x: auto;
}

.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
}

.dashboard-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
}

/* Stats */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.stat-card {
    background: white;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
}

.stat-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-primary);
}

.stat-label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ═══════════════════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════════════════ */
.pagination {
    display: flex;
    gap: var(--space-xs);
    justify-content: center;
    margin-top: var(--space-xl);
}

.pagination a,
.pagination span {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text-light);
}

.pagination a:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
}

.pagination .active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Single-source responsive nav: dropdown on mobile */
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        z-index: 100;
    }
    .nav.nav--open {
        display: flex;
    }
    .nav .nav-link,
    .nav .nav-link--register {
        display: block;
        padding: var(--space-md) var(--space-lg);
        border-bottom: 1px solid var(--color-border);
        width: 100%;
        text-align: left;
        border-radius: 0;
    }
    .nav .nav-link:hover {
        background: var(--color-bg-light);
    }
    .nav .nav-link--register {
        margin: var(--space-sm) var(--space-lg);
        width: auto;
        text-align: center;
        border-bottom: none;
        border-radius: var(--radius-md, 6px);
    }
    .nav .theme-toggle {
        padding: var(--space-md) var(--space-lg);
        justify-content: flex-start;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        width: 100%;
    }
    .nav .lang-switcher {
        padding: var(--space-md) var(--space-lg);
    }
    /* FAQ link visible only on mobile */
    .nav-link--mobile-only {
        display: none;
    }
    .nav .nav-link--mobile-only {
        display: block;
    }

    .mobile-menu-btn {
        display: block;
    }
    
    .hero-title {
        font-size: var(--font-size-2xl);
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }
    
    .dashboard-layout {
        flex-direction: column;
    }
    
    .dashboard-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    
    .capture-form .form-row {
        flex-direction: column;
    }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE UX ENHANCEMENTS (v6.0)
   ═══════════════════════════════════════════════════════════ */

/* Mobile-first touch targets (min 44px per WCAG) */
@media (max-width: 768px) {
    /* Увеличенные кнопки для touch */
    .btn {
        min-height: 48px;
        min-width: 48px;
        padding: var(--space-md) var(--space-lg);
        font-size: var(--font-size-base);
    }
    
    .btn-sm {
        min-height: 44px;
        min-width: 44px;
        padding: var(--space-sm) var(--space-md);
    }
    
    /* Увеличенные поля ввода */
    .form-control {
        min-height: 48px;
        font-size: 16px; /* Предотвращает zoom на iOS */
        padding: var(--space-md);
    }
    
    textarea.form-control {
        min-height: 120px;
    }
    
    /* Увеличенные чекбоксы и радио */
    input[type="checkbox"],
    input[type="radio"] {
        min-width: 24px;
        min-height: 24px;
    }
    
    /* Карточки на всю ширину */
    .card {
        border-radius: 0;
        margin-left: calc(-1 * var(--space-md));
        margin-right: calc(-1 * var(--space-md));
        width: calc(100% + 2 * var(--space-md));
    }
    
    /* Container padding */
    .container {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }
    
    /* Улучшенные таблицы для мобильных */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table th,
    .table td {
        padding: var(--space-sm);
        font-size: var(--font-size-sm);
    }
    
    /* Device toggle buttons - увеличенный размер */
    .device-toggle {
        display: flex;
        gap: var(--space-sm);
        flex-wrap: wrap;
    }
    
    .device-toggle .btn {
        flex: 1;
        min-width: 100px;
        justify-content: center;
    }
    
    /* Прогресс-бар на мобильных */
    .capture-progress {
        padding: var(--space-md);
    }
    
    .progress-stages {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
    
    .step {
        padding: var(--space-sm);
    }
    
    /* Верификация на мобильных */
    .verify-detail {
        flex-direction: column;
        gap: var(--space-xs);
    }
    
    .verify-detail-label {
        font-size: var(--font-size-xs);
    }
    
    .verify-detail-value {
        font-size: var(--font-size-sm);
        word-break: break-word;
    }
    
    /* Hash values на мобильных */
    .hash-value {
        font-size: 10px;
        word-break: break-all;
        max-width: 100%;
        display: block;
    }
    
    /* Hero section на мобильных */
    .hero {
        padding: var(--space-xl) 0;
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
    }
    
    /* Форма захвата на мобильных */
    .capture-form {
        padding: var(--space-md);
    }
    
    .url-input-wrapper {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .url-input-wrapper input {
        width: 100%;
    }
    
    .url-input-wrapper .btn {
        width: 100%;
    }
    
    /* Модальные окна */
    .modal-content {
        margin: var(--space-md);
        max-height: calc(100vh - 2 * var(--space-md));
        overflow-y: auto;
    }
    
    /* Sidebar navigation на мобильных */
    .sidebar-nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        padding: var(--space-sm);
    }
    
    .sidebar-nav a {
        flex: 1;
        min-width: 100px;
        text-align: center;
        padding: var(--space-sm);
    }
    
    /* Статистика дашборда */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .stat-card {
        padding: var(--space-md);
    }
    
    .stat-value {
        font-size: var(--font-size-xl);
    }
    
    /* Alerts на мобильных */
    .alert {
        padding: var(--space-md);
        font-size: var(--font-size-sm);
    }
}

/* Очень маленькие экраны (< 375px) */
@media (max-width: 375px) {
    :root {
        --font-size-base: 0.875rem;
        --font-size-lg: 1rem;
        --font-size-xl: 1.125rem;
    }
    
    .container {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
    
    .btn {
        padding: var(--space-sm) var(--space-md);
        font-size: var(--font-size-sm);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* Landscape на мобильных */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        padding: var(--space-lg) 0;
    }
    
    .capture-progress {
        max-height: 80vh;
        overflow-y: auto;
    }
    
    .progress-stages {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Safe area для iPhone X+ */
@supports (padding: max(0px)) {
    .footer {
        padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
    }
    
    .mobile-menu {
        padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    }
}

/* Touch-friendly hover states */
@media (hover: none) {
    .btn:hover {
        transform: none;
    }
    
    .card:hover {
        transform: none;
        box-shadow: var(--shadow-md);
    }
    
    /* Active states instead of hover */
    .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ═══════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════ */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }

.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.ml-md { margin-left: var(--space-md); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.text-lg { font-size: var(--font-size-lg); }

.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }

.hidden { display: none !important; }
.form-inline { display: inline; }
.card-body { /* semantic wrapper in admin templates */ }
.card-header h3 { margin: 0; font-size: var(--font-size-md); }

/* ═══════════════════════════════════════════════════════════
   STAT CARD VARIANTS
   ═══════════════════════════════════════════════════════════ */
.stat-card--gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
}

.stat-card--gradient .stat-value {
    color: white;
}

.stat-card--gradient .stat-label {
    color: rgba(255, 255, 255, 0.8);
}

/* ═══════════════════════════════════════════════════════════
   LANGUAGE SWITCHER
   ═══════════════════════════════════════════════════════════ */
.lang-switcher {
    display: flex;
    gap: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 2px;
    margin-left: var(--space-sm);
}

.lang-btn {
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    transition: all var(--transition-fast);
}

.lang-btn.active {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

.lang-btn:hover:not(.active) {
    color: rgba(255, 255, 255, 0.9);
}

/* ═══════════════════════════════════════════════════════════
   TOAST NOTIFICATION
   ═══════════════════════════════════════════════════════════ */
.toast {
    position: fixed;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--color-primary-dark);
    color: white;
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-sm);
    font-weight: 500;
    box-shadow: var(--shadow-xl);
    z-index: 2000;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.toast.toast--visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.toast--success {
    background: var(--color-success);
}

.toast--error {
    background: var(--color-danger);
}

/* ═══════════════════════════════════════════════════════════
   BREADCRUMBS
   ═══════════════════════════════════════════════════════════ */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}

.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

.breadcrumbs-separator {
    color: var(--color-border-dark);
    font-size: var(--font-size-xs);
}

.breadcrumbs-current {
    color: var(--color-text);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD QUICK ACTIONS
   ═══════════════════════════════════════════════════════════ */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.quick-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg);
    text-decoration: none;
    color: var(--color-text);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.quick-action-card:hover {
    border-color: var(--color-secondary);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    color: var(--color-text);
}

.quick-action-icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
    line-height: 1;
}

.quick-action-title {
    font-weight: 600;
    font-size: var(--font-size-base);
}

.quick-action-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR NAV GROUPS
   ═══════════════════════════════════════════════════════════ */
.nav-group {
    margin-bottom: var(--space-md);
}

.nav-group-title {
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-xs) var(--space-md);
    margin-bottom: var(--space-xs);
}

/* ═══════════════════════════════════════════════════════════
   EMPTY STATES
   ═══════════════════════════════════════════════════════════ */
.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
}

.empty-state-icon {
    font-size: 3.5rem;
    margin-bottom: var(--space-lg);
    opacity: 0.4;
    line-height: 1;
}

.empty-state-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--space-sm);
}

.empty-state-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════
   BUTTON LOADING STATE
   ═══════════════════════════════════════════════════════════ */
.btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.btn--loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    top: 50%;
    left: 50%;
    margin-top: -9px;
    margin-left: -9px;
}

.btn-secondary.btn--loading::after,
.btn-outline.btn--loading::after {
    border-color: rgba(0, 0, 0, 0.15);
    border-top-color: var(--color-primary);
}

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

/* ═══════════════════════════════════════════════════════════
   PROTOCOL DETAIL RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
.protocol-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
}

@media (max-width: 1024px) {
    .protocol-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════
   INFO CARDS (Bottom dashboard)
   ═══════════════════════════════════════════════════════════ */
.info-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
}

/* ═══════════════════════════════════════════════════════════
   ADMIN REVENUE GRID
   ═══════════════════════════════════════════════════════════ */
.revenue-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

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

/* ═══════════════════════════════════════════════════════════
   NCALAYER / EDS STYLES
   ═══════════════════════════════════════════════════════════ */
.ncalayer-widget {
    padding: var(--space-lg);
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
}

.ncalayer-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.ncalayer-status-icon {
    font-size: 1.25rem;
}

.ncalayer-status-text {
    font-size: var(--font-size-sm);
}

.ncalayer-content {
    margin-top: var(--space-md);
}

.ncalayer-cert-info {
    margin-bottom: var(--space-lg);
}

.ncalayer-actions {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.ncalayer-error {
    padding: var(--space-lg);
    background: #fff5f5;
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-md);
    text-align: center;
}

.ncalayer-error p {
    color: var(--color-danger);
    margin-bottom: var(--space-md);
}

/* Certificate Card */
.cert-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.cert-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.cert-details {
    flex: 1;
    min-width: 0;
}

.cert-name {
    font-weight: 600;
    font-size: var(--font-size-lg);
    margin: 0 0 var(--space-xs) 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cert-id {
    color: var(--color-primary);
    font-family: monospace;
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-xs) 0;
}

.cert-org {
    margin: 0;
}

/* Signature Display */
.signature-info {
    border: 2px solid var(--color-success);
    background: #f0fff4;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
}

.signature-info h3 {
    color: var(--color-success);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0 0 var(--space-md) 0;
}

.signature-invalid {
    border-color: var(--color-danger);
    background: #fff5f5;
}

.signature-invalid h3 {
    color: var(--color-danger);
}

/* Protocol Summary Table */
.protocol-summary {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
}

.protocol-summary dt {
    color: var(--color-text-muted);
}

.protocol-summary dd {
    margin: 0;
    word-break: break-word;
}

/* Hash Display */
.hash-value {
    font-family: monospace;
    font-size: var(--font-size-xs);
    background: var(--color-bg-light);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    display: inline-block;
    word-break: break-all;
}

/* Success/Error backgrounds */
.color-success-bg { background: #f0fff4; }
.color-warning-bg { background: #fffff0; }
.color-danger-bg { background: #fff5f5; }
.color-info-bg { background: #ebf8ff; }

/* ═══════════════════════════════════════════════════════════
   CAPTURE PROGRESS (WebSocket real-time)
   ═══════════════════════════════════════════════════════════ */
.capture-progress {
    max-width: 600px;
    margin: 0 auto;
    padding: var(--space-xl);
}

.progress-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}

.progress-header h3 {
    margin-bottom: var(--space-sm);
    color: var(--color-primary);
}

.progress-url {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    word-break: break-all;
    background: var(--color-bg-light);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

/* Progress Bar */
.progress-bar-container {
    margin-bottom: var(--space-xl);
}

.progress-bar {
    height: 12px;
    background: var(--color-bg-dark);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.3),
        transparent
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-fill.complete {
    background: var(--color-success);
}

.progress-fill.complete::after {
    display: none;
}

.progress-fill.error {
    background: var(--color-danger);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.current-stage {
    font-weight: 500;
    color: var(--color-text);
}

.progress-percent {
    font-weight: 600;
    color: var(--color-primary);
    font-size: var(--font-size-lg);
}

/* Progress Stages List */
.progress-stages {
    display: grid;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
}

.progress-stages .step {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.progress-stages .step-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.progress-stages .step-label {
    font-size: var(--font-size-sm);
}

/* Step States */
.progress-stages .step.pending {
    opacity: 0.5;
}

.progress-stages .step.pending .step-icon {
    background: var(--color-bg-dark);
    color: var(--color-text-light);
}

.progress-stages .step.in-progress {
    background: var(--color-bg-light);
}

.progress-stages .step.in-progress .step-icon {
    background: var(--color-primary);
    color: white;
}

.progress-stages .step.completed {
    opacity: 1;
}

.progress-stages .step.completed .step-icon {
    background: var(--color-success);
    color: white;
}

.progress-stages .step.error .step-icon {
    background: var(--color-danger);
    color: white;
}

/* Spinner for in-progress */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Progress Message */
.progress-message {
    margin-bottom: var(--space-lg);
}

.progress-footer {
    text-align: center;
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

/* Compact Stages (2 columns on desktop) */
@media (min-width: 576px) {
    .progress-stages {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════
   v11.0 DESIGN UPGRADE
   ═══════════════════════════════════════════════════════════ */

/* Gradient backgrounds */
.gradient-bg {
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #3182ce 100%);
    color: white;
}
.gradient-bg-light {
    background: linear-gradient(135deg, #ebf8ff 0%, #f7fafc 100%);
}
.glass-card {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.2);
}

/* Animations */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in { animation: fadeInUp 0.6s ease-out forwards; }
.animate-fade-in-delay-1 { animation: fadeInUp 0.6s ease-out 0.1s forwards; opacity: 0; }
.animate-fade-in-delay-2 { animation: fadeInUp 0.6s ease-out 0.2s forwards; opacity: 0; }
.animate-fade-in-delay-3 { animation: fadeInUp 0.6s ease-out 0.3s forwards; opacity: 0; }

/* Feature cards v11.0 */
.feature-card {
    transition: all 0.3s ease;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    background: var(--color-bg);
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-secondary);
}
.feature-card h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-xs);
}
.feature-icon-box {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--space-md);
}
.feature-icon-box--blue { background: #dbeafe; color: #2563eb; }
.feature-icon-box--green { background: #d1fae5; color: #059669; }
.feature-icon-box--yellow { background: #fef3c7; color: #d97706; }
.feature-icon-box--purple { background: #ede9fe; color: #7c3aed; }
.feature-icon-box--red { background: #fee2e2; color: #dc2626; }
.feature-icon-box--indigo { background: #e0e7ff; color: #4f46e5; }
.feature-icon-box--cyan { background: #cffafe; color: #0891b2; }
.feature-icon-box--orange { background: #ffedd5; color: #ea580c; }

/* Feature grid */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

/* Pricing cards v11.0 */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}
.pricing-card {
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: 2rem;
    transition: all 0.3s;
    background: var(--color-bg);
    text-align: center;
}
.pricing-card:hover {
    box-shadow: var(--shadow-xl);
}
.pricing-card--featured {
    border-color: var(--color-secondary);
    transform: scale(1.05);
    position: relative;
    box-shadow: 0 20px 40px rgba(49,130,206,0.15);
}
.pricing-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-secondary);
    color: white;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}
.pricing-price {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-primary);
    margin: var(--space-lg) 0 var(--space-xs);
}
.pricing-period {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.pricing-features {
    list-style: none;
    margin: 1.5rem 0;
    padding: 0;
    text-align: left;
}
.pricing-features li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pricing-features li::before {
    content: "\2713";
    color: var(--color-success);
    font-weight: 700;
    flex-shrink: 0;
}

/* FAQ Accordion v11.0 */
.faq-list {
    max-width: 800px;
    margin: 0 auto;
}
.faq-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: 0.75rem;
    overflow: hidden;
}
.faq-question {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text);
    transition: background 0.2s;
}
.faq-question:hover {
    background: var(--color-bg-light);
}
.faq-arrow {
    transition: transform 0.3s;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.faq-item.active .faq-arrow {
    transform: rotate(180deg);
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 1.5rem;
}
.faq-item.active .faq-answer {
    max-height: 500px;
    padding: 0 1.5rem 1.25rem;
}

/* Trust badges */
.trust-badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: var(--space-xl);
}
.trust-badge {
    text-align: center;
    padding: 1rem;
}
.trust-badge-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.trust-badge-text {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: rgba(255,255,255,0.9);
}

/* Stats counter section v11.0 */
.stats-section {
    padding: var(--space-3xl) 0;
}
.stats-counter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    text-align: center;
}
.stat-number {
    font-size: var(--font-size-4xl);
    font-weight: 700;
}
.stat-counter-label {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,0.8);
    margin-top: var(--space-xs);
}

/* Header scroll effect */
.header--scrolled {
    box-shadow: var(--shadow-md);
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
}

/* Mobile menu animation */
/* .mobile-nav removed — unified into .nav with .nav--open (v31.0) */

/* How it works steps v11.0 */
.steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}
.step-card {
    text-align: center;
    position: relative;
}
.step-number {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-secondary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-xl);
    margin: 0 auto var(--space-md);
}
.step-card h3 {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-sm);
}
.step-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Dashboard stat cards with gradient */
.stat-card--gradient {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: white;
    border: none;
}
.stat-card--gradient .stat-value {
    color: white;
}
.stat-card--gradient .stat-label {
    color: rgba(255,255,255,0.8);
}

/* Action cards hover v11.0 */
.action-card {
    transition: all 0.3s ease;
}
.action-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Auth glass forms */
.auth-page {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: linear-gradient(135deg, #ebf8ff 0%, #f7fafc 100%);
}
.auth-glass {
    width: 100%;
    max-width: 440px;
}
.auth-glass .card {
    box-shadow: var(--shadow-xl);
    border: none;
}

/* Section utility */
.section {
    padding: var(--space-3xl) 0;
}
.section--gray {
    background: var(--color-bg-light);
}
.section-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    text-align: center;
    margin-bottom: var(--space-2xl);
}
.section-subtitle {
    text-align: center;
    color: var(--color-text-muted);
    max-width: 600px;
    margin: -1.5rem auto var(--space-2xl);
}

/* Hero v11.0 upgrade */
.hero-v11 {
    padding: 5rem 0 4rem;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #3182ce 100%);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hero-v11::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 50%);
    animation: heroFloat 15s ease-in-out infinite;
}
@keyframes heroFloat {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-10%, -10%); }
}
.hero-v11 .container { position: relative; z-index: 1; }
.hero-v11 .hero-title { font-size: 3rem; margin-bottom: var(--space-lg); }

/* Responsive v11.0 */
@media (max-width: 1024px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .pricing-grid { grid-template-columns: 1fr; }
    .pricing-card--featured { transform: scale(1); }
    .trust-badges { grid-template-columns: repeat(2, 1fr); }
    .stats-counter-grid { grid-template-columns: 1fr; gap: 1rem; }
    .steps-grid { grid-template-columns: 1fr; }
    .feature-grid { grid-template-columns: 1fr; }
    .hero-v11 .hero-title { font-size: var(--font-size-2xl); }
    .hero-v11 { padding: 3rem 0 2rem; }
}

/* Mobile hamburger icon */
.mobile-menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    margin: 5px 0;
    transition: all 0.3s ease;
}
.mobile-menu-btn span::before,
.mobile-menu-btn span::after {
    content: '';
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-text);
    transition: all 0.3s ease;
}
.mobile-menu-btn span::before { margin-bottom: 3px; }
.mobile-menu-btn span::after { margin-top: 5px; }
.mobile-menu-btn.active span { background: transparent; }
.mobile-menu-btn.active span::before { transform: rotate(45deg) translate(3px, 6px); }
.mobile-menu-btn.active span::after { transform: rotate(-45deg) translate(3px, -6px); }

/* ═══════════════════════════════════════════════════════════
   v11.1 BATCH CAPTURE & PROJECTS
   ═══════════════════════════════════════════════════════════ */

/* Batch capture form */
.batch-textarea {
    width: 100%;
    min-height: 200px;
    padding: var(--space-md);
    font-family: monospace;
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    resize: vertical;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    line-height: 1.8;
}

.batch-textarea:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}

.batch-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.batch-url-count {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
}

.batch-cost {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Batch status progress */
.batch-progress {
    margin-bottom: var(--space-xl);
}

.batch-progress-bar {
    height: 16px;
    background: var(--color-bg-dark);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.batch-progress-fill {
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s ease;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary));
}

.batch-progress-fill.complete {
    background: var(--color-success);
}

.batch-progress-fill.partial {
    background: var(--color-warning);
}

.batch-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Project cards */
.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
}

.project-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.project-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-secondary);
}

.project-card-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.project-card-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.project-card-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

.project-card-desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

.project-card-stats {
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-md) 0;
    border-top: 1px solid var(--color-border);
    margin-top: auto;
}

.project-card-stat {
    text-align: center;
}

.project-card-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
}

.project-card-stat-label {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Project new card (dashed) */
.project-card--new {
    border: 2px dashed var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    cursor: pointer;
    background: var(--color-bg-light);
}

.project-card--new:hover {
    border-color: var(--color-secondary);
    background: var(--color-bg);
}

/* Batch history cards */
.batch-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    transition: box-shadow var(--transition-fast);
}

.batch-card:hover {
    box-shadow: var(--shadow-md);
}

.batch-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.batch-card-title {
    font-weight: 600;
    color: var(--color-text);
}

.batch-card-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Modal overlay (reusable) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-lg);
}

.modal-overlay > .card {
    animation: fadeInUp 0.3s ease-out;
}

/* ═══════════════════════════════════════════════════════════
   v11.1 ADMIN REPORTS (Chart.js)
   ═══════════════════════════════════════════════════════════ */

.reports-layout {
    display: grid;
    gap: var(--space-lg);
}

.reports-filter {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
}

.reports-filter .btn {
    font-size: var(--font-size-sm);
}

.reports-filter .btn.active {
    background: var(--color-primary);
    color: white;
}

.reports-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.kpi-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

.kpi-value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.kpi-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
}

.kpi-change {
    font-size: var(--font-size-xs);
    margin-top: var(--space-xs);
    font-weight: 500;
}

.kpi-change--up { color: var(--color-success); }
.kpi-change--down { color: var(--color-danger); }

.chart-container {
    position: relative;
    width: 100%;
    min-height: 300px;
}

.chart-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-lg);
}

.chart-row--equal {
    grid-template-columns: 1fr 1fr;
}

/* Responsive adjustments for v11.1 */
@media (max-width: 768px) {
    .project-grid {
        grid-template-columns: 1fr;
    }

    .batch-info {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }

    .chart-row,
    .chart-row--equal {
        grid-template-columns: 1fr;
    }

    .reports-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ═══════════════════════════════════════════════════════════
   v14.0 LANDING PAGE REDESIGN
   ═══════════════════════════════════════════════════════════ */

/* ── Slide-up animation ─────────────────────────────── */
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
    animation: slideUp 0.7s ease-out both;
}

/* ── Hero v14 ────────────────────────────────────────── */
.hero-v14 {
    position: relative;
    padding: 6rem 0 5rem;
    background: linear-gradient(135deg, #0f2942 0%, #1a365d 40%, #2c5282 100%);
    color: #fff;
    text-align: center;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: center;
}
.hero-bg-gradient {
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(49,130,206,.18) 0%, transparent 70%);
    pointer-events: none;
}
.hero-particles {
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.hero-particles::before,
.hero-particles::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}
.hero-particles::before {
    width: 600px; height: 600px;
    top: -200px; right: -100px;
    animation: heroFloat 20s ease-in-out infinite;
}
.hero-particles::after {
    width: 400px; height: 400px;
    bottom: -150px; left: -80px;
    animation: heroFloat 15s ease-in-out infinite reverse;
}

.hero-container-inner {
    position: relative;
    z-index: 2;
}
.hero-content {
    max-width: 740px;
    margin: 0 auto;
}

/* Hero badge */
.hero-v14 .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
    padding: var(--space-sm) var(--space-lg);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--space-xl);
    border: 1px solid rgba(255,255,255,.15);
}
.hero-badge-dot {
    width: 8px; height: 8px;
    background: #48bb78;
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(72,187,120,.6); }
    50%      { box-shadow: 0 0 0 6px rgba(72,187,120,0); }
}

/* Title & subtitle */
.hero-title-v14 {
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
}
.hero-subtitle-v14 {
    font-size: var(--font-size-lg);
    color: rgba(255,255,255,.75);
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
    line-height: 1.6;
}

/* Hero form */
.hero-form {
    max-width: 580px;
    margin: 0 auto;
}
.hero-form-inner {
    background: #fff;
    border-radius: var(--radius-xl);
    padding: 6px;
    display: flex;
    align-items: center;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.hero-form-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0 var(--space-md);
}
.hero-form-icon {
    flex-shrink: 0;
    color: var(--color-text-muted);
}
.hero-form-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--color-text);
    padding: var(--space-md) 0;
    background: transparent;
    min-width: 0;
}
.hero-form-input::placeholder {
    color: var(--color-text-muted);
}
.hero-form-options {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-shrink: 0;
}
.hero-device-select {
    appearance: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    font-size: var(--font-size-sm);
    font-family: inherit;
    background: var(--color-bg-light);
    cursor: pointer;
    color: var(--color-text);
}
.hero-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
    color: #fff;
    border: none;
    border-radius: var(--radius-lg);
    font-family: inherit;
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.hero-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(26,54,93,.35);
}
.hero-form-hint {
    margin-top: var(--space-md);
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,.55);
}

/* Hero trust row */
.hero-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}
.hero-trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,.8);
}
.hero-trust-check {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(72,187,120,.2);
    color: #48bb78;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Counter bar ─────────────────────────────────────── */
.counter-bar {
    background: var(--color-primary-dark);
    color: #fff;
    padding: var(--space-xl) 0;
}
.counter-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-2xl);
    flex-wrap: wrap;
}
.counter-item {
    text-align: center;
}
.counter-value {
    display: block;
    font-size: var(--font-size-3xl);
    font-weight: 800;
    line-height: 1.2;
}
.counter-label {
    font-size: var(--font-size-sm);
    color: rgba(255,255,255,.6);
    margin-top: var(--space-xs);
}
.counter-divider {
    width: 1px;
    height: 40px;
    background: rgba(255,255,255,.15);
    flex-shrink: 0;
}

/* ── Sources grid ────────────────────────────────────── */
.sources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.source-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.source-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.source-card--web::before    { background: var(--color-secondary); }
.source-card--email::before  { background: #e53e3e; }
.source-card--social::before { background: #9f7aea; }
.source-card--messenger::before { background: #38b2ac; }
.source-card--video::before  { background: #ed8936; }
.source-card--batch::before  { background: #667eea; }

.source-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}
.source-icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    line-height: 1;
}
.source-card h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}
.source-card p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ── Steps timeline ──────────────────────────────────── */
.steps-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    max-width: 560px;
    margin: 0 auto;
}
.step-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    width: 100%;
}
.step-timeline-number {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-lg);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(49,130,206,.3);
}
.step-timeline-content {
    padding-top: var(--space-xs);
}
.step-timeline-content h3 {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--space-xs);
}
.step-timeline-content p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
}
.step-timeline-connector {
    width: 2px;
    height: 32px;
    background: linear-gradient(to bottom, var(--color-secondary), var(--color-border));
    margin-left: 23px; /* center of 48px circle */
    flex-shrink: 0;
}

/* ── Testimonials ────────────────────────────────────── */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}
.testimonial-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: all 0.3s ease;
}
.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.testimonial-stars {
    color: #f6ad55;
    font-size: var(--font-size-lg);
    margin-bottom: var(--space-md);
    letter-spacing: 2px;
}
.testimonial-text {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    font-style: italic;
}
.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-md);
}
.testimonial-avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}
.testimonial-author strong {
    display: block;
    font-size: var(--font-size-sm);
}
.testimonial-author .text-sm {
    display: block;
}

/* ── Pricing v14 ─────────────────────────────────────── */
.pricing-grid-v14 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    align-items: start;
}
.pricing-card-v14 {
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    text-align: center;
    position: relative;
    transition: all 0.3s ease;
}
.pricing-card-v14:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}
.pricing-card-v14--popular {
    border-color: var(--color-secondary);
    box-shadow: 0 12px 40px rgba(49,130,206,.15);
    transform: scale(1.04);
    z-index: 1;
}
.pricing-card-v14--popular:hover {
    transform: scale(1.04) translateY(-6px);
}
.pricing-badge-v14 {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    padding: 4px 18px;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.03em;
}
.pricing-icon-v14 {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
    line-height: 1;
}
.pricing-name-v14 {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.pricing-price-v14 {
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}
.pricing-amount-v14 {
    font-size: var(--font-size-4xl);
    font-weight: 800;
}
.pricing-currency-v14 {
    font-size: var(--font-size-xl);
    font-weight: 500;
}
.pricing-period-v14 {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.pricing-per-item-v14 {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-lg);
}
.pricing-features-v14 {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0;
    text-align: left;
}
.pricing-features-v14 li {
    padding: var(--space-sm) 0;
    font-size: var(--font-size-sm);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border-bottom: 1px solid var(--color-bg-dark);
}
.pricing-features-v14 li:last-child {
    border-bottom: none;
}
.pricing-features-v14 li::before {
    content: '\2713';
    color: var(--color-success);
    font-weight: 700;
    flex-shrink: 0;
}

/* ── CTA Section v14 ─────────────────────────────────── */
.cta-section-v14 {
    padding: var(--space-3xl) 0;
    background: linear-gradient(135deg, #1a365d 0%, #2c5282 50%, #3182ce 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cta-section-v14::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 50% 80% at 50% 100%, rgba(255,255,255,.06) 0%, transparent 60%);
    pointer-events: none;
}
.cta-title-v14 {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.cta-subtitle-v14 {
    font-size: var(--font-size-lg);
    color: rgba(255,255,255,.7);
    margin-bottom: var(--space-2xl);
}
.cta-btn-primary {
    background: #fff;
    color: var(--color-primary);
    font-weight: 600;
    border: none;
    transition: all var(--transition-fast);
}
.cta-btn-primary:hover {
    background: #f0f0f0;
    color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.2);
}
.cta-btn-secondary {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.4);
    font-weight: 500;
    transition: all var(--transition-fast);
}
.cta-btn-secondary:hover {
    background: rgba(255,255,255,.1);
    border-color: #fff;
    color: #fff;
}

/* ── v14 Responsive ──────────────────────────────────── */
@media (max-width: 1024px) {
    .pricing-grid-v14 {
        grid-template-columns: repeat(2, 1fr);
    }
    .sources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .hero-v14 {
        padding: 3.5rem 0 3rem;
        min-height: auto;
    }
    .hero-title-v14 {
        font-size: var(--font-size-2xl);
    }
    .hero-form-inner {
        flex-direction: column;
        padding: var(--space-sm);
        gap: var(--space-sm);
    }
    .hero-form-input-wrap {
        width: 100%;
    }
    .hero-form-options {
        width: 100%;
        justify-content: stretch;
    }
    .hero-device-select {
        flex: 1;
    }
    .hero-submit-btn {
        flex: 2;
        justify-content: center;
    }
    .hero-trust {
        gap: var(--space-md);
    }

    .counter-grid {
        gap: var(--space-lg);
    }
    .counter-divider {
        display: none;
    }
    .counter-value {
        font-size: var(--font-size-2xl);
    }

    .sources-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .pricing-grid-v14 {
        grid-template-columns: 1fr;
    }
    .pricing-card-v14--popular {
        transform: scale(1);
    }
    .pricing-card-v14--popular:hover {
        transform: translateY(-6px);
    }

    .cta-title-v14 {
        font-size: var(--font-size-xl);
    }
}

@media (max-width: 480px) {
    .hero-v14 {
        padding: 2.5rem 0 2rem;
    }
    .hero-trust {
        flex-direction: column;
        gap: var(--space-sm);
    }
    .counter-grid {
        flex-direction: column;
        gap: var(--space-md);
    }
}

/* ══════════════════════════════════════════════════════════
   v29.0 — Sidebar, Admin, Filters, Table Actions
   ══════════════════════════════════════════════════════════ */

/* ── Sidebar Plan & Balance ─────────────────────────────── */
.sidebar-plan {
    margin-bottom: var(--space-xl);
}
.sidebar-plan-name {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-success);
}
.sidebar-progress-wrap {
    margin-top: var(--space-xs);
}
.sidebar-progress-track {
    background: var(--color-bg-secondary);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}
.sidebar-progress-fill {
    background: var(--color-primary);
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.sidebar-progress-label {
    margin-top: 2px;
}
.sidebar-balance-label {
    margin-top: var(--space-sm);
}
.sidebar-balance-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-primary);
}
.sidebar-footer {
    margin-top: auto;
    padding-top: var(--space-xl);
}

/* ── Filters Bar ────────────────────────────────────────── */
.filters-bar {
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
}
.filters-form {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    flex-wrap: wrap;
}

/* ── Table Actions ──────────────────────────────────────── */
.table-actions {
    display: flex;
    gap: var(--space-xs);
}

/* ── Admin Dashboard ────────────────────────────────────── */
.revenue-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
}
.revenue-value--success {
    color: var(--color-success);
}
.revenue-value--danger {
    color: var(--color-danger);
}

.admin-chart-card {
    margin-bottom: var(--space-xl);
}
.admin-chart-title {
    margin-bottom: var(--space-lg);
}
.admin-chart {
    height: 200px;
    display: flex;
    align-items: flex-end;
    gap: var(--space-sm);
}
.admin-chart-bar {
    flex: 1;
    text-align: center;
}
.admin-chart-bar-fill {
    background: var(--color-primary);
    min-height: 5px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    transition: height 0.3s ease;
}
.admin-chart-bar:hover .admin-chart-bar-fill {
    background: var(--color-secondary);
}

.admin-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}
@media (max-width: 768px) {
    .admin-two-col {
        grid-template-columns: 1fr;
    }
}

.admin-section-title {
    margin-bottom: var(--space-md);
}
.admin-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-lg);
}
.admin-summary-value {
    font-size: var(--font-size-xl);
    font-weight: 600;
}

/* ── Protocol URL cell truncation ───────────────────────── */
.table-url-cell {
    max-width: 250px;
}
.table-url-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   v29.0 — Utility / Helper Classes
   ══════════════════════════════════════════════════════════ */

/* Layout utilities */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-center { align-items: center; }
.flex-between { justify-content: space-between; }
.flex-start { align-items: flex-start; }
.flex-1 { flex: 1; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Grid utilities */
.grid { display: grid; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 768px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Typography utilities */
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.font-medium { font-weight: 500; }
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.text-primary { color: var(--color-primary); }
.text-mono { font-family: 'Courier New', Courier, monospace; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-break { word-break: break-all; }
.text-prewrap { white-space: pre-wrap; }
.lh-relaxed { line-height: 1.6; }

/* Spacing utilities */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-0  { margin-bottom: 0; }
.mt-0  { margin-top: 0; }
.d-inline { display: inline; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }

/* Width utilities */
.w-full { width: 100%; }
.max-w-sm { max-width: 400px; }
.max-w-md { max-width: 600px; }
.max-w-lg { max-width: 800px; }
.max-w-xl { max-width: 1000px; }

/* Background utilities */
.bg-light { background: var(--color-bg-light); }
.bg-success-light { background: #f0fff4; }
.bg-danger-light { background: #fff5f5; }
.bg-warning-light { background: #fffff0; }
.bg-info-light { background: #ebf8ff; }

/* Border utilities */
.border { border: 1px solid var(--color-border); }
.border-success { border-color: var(--color-success); }
.border-danger { border-color: var(--color-danger); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

/* Visibility */
.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ── Detail page patterns ───────────────────────────────── */
.detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);
}
.detail-header-title {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
.detail-header-title h1 {
    margin: 0;
}
.detail-header-actions {
    display: flex;
    gap: var(--space-sm);
}
.detail-meta-table {
    width: 100%;
}
.detail-meta-table td {
    padding: var(--space-sm) 0;
    vertical-align: top;
}
.detail-meta-table td:first-child {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    width: 40%;
    padding-right: var(--space-md);
}
.detail-content-box {
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    white-space: pre-wrap;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    max-height: 500px;
    overflow-y: auto;
}
.detail-section-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    margin-bottom: var(--space-md);
}

/* ── Status indicator ───────────────────────────────────── */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: var(--space-xs);
}
.status-dot--success { background: var(--color-success); }
.status-dot--warning { background: var(--color-warning); }
.status-dot--danger { background: var(--color-danger); }
.status-dot--processing {
    background: var(--color-secondary);
    animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── Info alert box ─────────────────────────────────────── */
.info-box {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
}
.info-box--success {
    background: #f0fff4;
    border: 2px solid var(--color-success);
}
.info-box--warning {
    background: #fffff0;
    border: 2px solid var(--color-warning);
}
.info-box--danger {
    background: #fff5f5;
    border: 2px solid var(--color-danger);
}
.info-box--info {
    background: #ebf8ff;
    border: 2px solid var(--color-info);
}
.info-box-icon {
    font-size: 2rem;
    flex-shrink: 0;
}
.info-box-title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

/* ── Tabular numbers ────────────────────────────────────── */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════
   v30.0 — Detail Pages, Progress, Metrics, Billing
   ═══════════════════════════════════════════════════════════ */

/* ── Card section title (icon + text) ─────────────────────── */
.card-section-title {
    margin: 0 0 var(--space-md);
    display: flex;
    align-items: center;
    gap: 8px;
}
.card-section-title svg { flex-shrink: 0; }

/* ── Detail page common patterns ──────────────────────────── */
.detail-back-btn { padding: 8px; }
.detail-subtitle { color: var(--color-text-secondary); margin-top: 2px; }
.detail-status-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.detail-status-badge { font-size: var(--font-size-base); padding: 6px 16px; }
.detail-status-time { color: var(--color-text-secondary); font-size: var(--font-size-sm); }
.detail-status-duration { color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.detail-actions-stack { display: flex; flex-direction: column; gap: var(--space-sm); }
.detail-verify-url {
    background: var(--color-bg-light);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    word-break: break-all;
    font-size: var(--font-size-sm);
}

/* ── Screenshot preview ───────────────────────────────────── */
.screenshot-preview {
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    max-height: 600px;
    overflow-y: auto;
}
.screenshot-preview--sm { max-height: 400px; }
.screenshot-preview--lg {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    max-height: 500px;
    overflow-y: auto;
    background: var(--color-bg-light);
}
.screenshot-preview img,
.screenshot-preview--sm img,
.screenshot-preview--lg img { max-width: 100%; display: block; }

/* ── Progress indicator (all capture types) ───────────────── */
.progress-container { padding: var(--space-lg); }
.progress-spinner-wrap { text-align: center; margin-bottom: var(--space-md); }
.progress-spinner {
    width: 36px; height: 36px;
    border: 3px solid var(--color-bg-light, #eee);
    border-top-color: var(--color-primary, #3b82f6);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}
.progress-bar-wrap { margin-bottom: var(--space-sm); }
.progress-bar-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.progress-bar-label { font-weight: 600; font-size: var(--font-size-sm); }
.progress-bar-pct { font-weight: 600; font-size: var(--font-size-sm); color: var(--color-primary, #3b82f6); }
.progress-track {
    width: 100%; height: 6px;
    background: var(--color-bg-light, #eee);
    border-radius: 3px; overflow: hidden;
}
.progress-fill {
    width: 0%; height: 100%;
    background: var(--color-primary, #3b82f6);
    border-radius: 3px;
    transition: width 0.5s ease;
}
.progress-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.progress-note { margin-top: var(--space-sm); font-size: 0.85rem; color: var(--color-text-tertiary, #999); }

/* ── EDS signature success box ────────────────────────────── */
.eds-box {
    padding: var(--space-md);
    background: #f0fff4;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-success);
}
.eds-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.eds-check { color: var(--color-success); }

/* ── Error state box ──────────────────────────────────────── */
.error-box {
    padding: var(--space-md);
    background: #fff5f5;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-danger);
}
.error-box-title { font-weight: 600; color: var(--color-danger); }
.error-card { border-left: 4px solid var(--color-danger, #dc3545); }
.error-card-title { margin: 0 0 var(--space-sm); color: var(--color-danger, #dc3545); display: flex; align-items: center; gap: 8px; }

/* ── Hint/warning box ─────────────────────────────────────── */
.hint-box {
    padding: var(--space-sm) var(--space-md);
    border-radius: 8px;
    border: 1px solid;
}
.hint-box--warning { background: #fffbeb; border-color: #fbbf24; }
.hint-box--warning p { font-size: 0.8rem; color: #92400e; margin: 0; }
.hint-box--warning a { color: #2563eb; text-decoration: underline; }
.hint-box--info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: #fffbeb;
    border-radius: 8px;
    margin-bottom: var(--space-md);
}
.hint-box--info strong { color: #92400e; }
.hint-box--info p { font-size: 0.85rem; color: #92400e; margin-top: 2px; }

/* ── Hash / monospace code ────────────────────────────────── */
.hash-code { font-size: var(--font-size-xs); word-break: break-all; }
.monospace-cell { word-break: break-all; font-family: monospace; font-size: var(--font-size-sm); }
.monospace-cell--secondary { color: var(--color-text-secondary); }
.monospace-cell--xs { font-size: var(--font-size-xs, 12px); color: var(--color-text-secondary); }
.monospace-cell--chain { font-size: var(--font-size-xs, 12px); color: var(--color-text-tertiary); max-height: 80px; overflow-y: auto; }

/* ── Copy button inline ───────────────────────────────────── */
.btn-copy-inline {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-light, #f7fafc);
    cursor: pointer;
    color: var(--color-text-secondary);
}
.btn-copy-inline:hover { background: var(--color-bg-secondary); }

/* ── Badge size modifiers ─────────────────────────────────── */
.badge--sm { font-size: 0.75rem; }

/* ── Attachment icons ─────────────────────────────────────── */
.attachment-type-icon {
    width: 36px; height: 36px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: white;
}
.attachment-type-icon--pdf { background: #ef4444; }
.attachment-type-icon--doc { background: #3b82f6; }
.attachment-type-icon--xls { background: #22c55e; }
.attachment-type-icon--img { background: #8b5cf6; }
.attachment-info { flex: 1; min-width: 0; }
.attachment-name { font-weight: 500; word-break: break-word; }
.attachment-meta { font-size: var(--font-size-xs, 12px); color: var(--color-text-tertiary); margin-top: 2px; }
.attachment-hash { font-family: monospace; font-size: 10px; color: var(--color-text-tertiary); text-align: right; cursor: help; }

/* ── Verify item description ──────────────────────────────── */
.verify-item-desc { margin: 4px 0 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.verify-item-hash { margin: 4px 0 0; font-family: monospace; font-size: var(--font-size-xs, 12px); color: var(--color-text-secondary); word-break: break-all; }

/* ── Technical verification grid ──────────────────────────── */
.tech-verify-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-sm);
}
.tech-verify-card { padding: var(--space-sm) var(--space-md); border-radius: 8px; border: 1px solid; }
.tech-verify-card--dns { background: #f7fafc; border-color: #e2e8f0; }
.tech-verify-card--ssl { background: #f0fff4; border-color: #c6f6d5; }
.tech-verify-card--whois { background: #fffff0; border-color: #fefcbf; }
.tech-verify-card--traceroute { background: #faf5ff; border-color: #e9d5ff; }
.tech-verify-title { font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; }
.tech-verify-title--dns { color: #2c5282; }
.tech-verify-title--ssl { color: #276749; }
.tech-verify-title--whois { color: #975a16; }
.tech-verify-title--traceroute { color: #6b21a8; }
.tech-verify-body { font-size: 0.8rem; color: var(--color-text-secondary); }
.tech-verify-body--mono { font-family: monospace; font-size: 0.8rem; color: var(--color-text-secondary); }
.tech-ip-bar {
    margin-top: var(--space-sm);
    padding: 8px var(--space-sm);
    background: #edf2f7;
    border-radius: 6px;
    font-size: 0.8rem;
}
.tech-ip-bar span { font-family: monospace; }

/* ── SMTP delivery route table ────────────────────────────── */
.route-table-wrap { overflow-x: auto; }
.route-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.route-table thead tr { background: #2c5282; color: white; }
.route-table th { padding: 8px; text-align: left; }
.route-table td { padding: 6px 8px; }
.route-table tbody tr:nth-child(odd) { background: #f7fafc; }
.route-table tbody tr:nth-child(even) { background: white; }
.route-mono { font-family: monospace; font-size: 0.8rem; }
.route-tls-yes { color: #38a169; font-weight: 600; }
.route-tls-no { color: #e53e3e; }

/* ── Raw headers ──────────────────────────────────────────── */
.raw-headers-summary { cursor: pointer; font-weight: 600; color: var(--color-text-primary); }
.raw-headers-pre {
    margin-top: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-bg-light, #f7fafc);
    border-radius: 8px;
    font-size: 0.75rem;
    max-height: 400px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ── Engagement metrics (social detail) ───────────────────── */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: var(--space-md);
    text-align: center;
}
.metric-card { padding: var(--space-md); border-radius: var(--radius-md); }
.metric-card--likes { background: #fff5f5; }
.metric-card--comments { background: #ebf4ff; }
.metric-card--shares { background: #f0fff4; }
.metric-card--views { background: #ebf8ff; }
.metric-value { font-size: 1.5rem; font-weight: 700; }
.metric-value--likes { color: #e53e3e; }
.metric-value--comments { color: #3182ce; }
.metric-value--shares { color: #38a169; }
.metric-value--views { color: #319795; }
.metric-label { color: var(--color-text-muted); }

/* Engagement snapshot (gradient cards) */
.engagement-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-sm);
}
.engagement-card {
    text-align: center;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid;
}
.engagement-card--likes { background: linear-gradient(135deg, #fff5f5, #fff); border-color: #fed7d7; }
.engagement-card--comments { background: linear-gradient(135deg, #ebf8ff, #fff); border-color: #bee3f8; }
.engagement-card--shares { background: linear-gradient(135deg, #f0fff4, #fff); border-color: #c6f6d5; }
.engagement-card--views { background: linear-gradient(135deg, #faf5ff, #fff); border-color: #e9d8fd; }
.engagement-value { font-size: 1.5rem; font-weight: 700; }
.engagement-value--likes { color: #e53e3e; }
.engagement-value--comments { color: #3182ce; }
.engagement-value--shares { color: #38a169; }
.engagement-value--views { color: #805ad5; }
.engagement-label { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 4px; }

/* ── Social media grid ────────────────────────────────────── */
.social-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-sm);
}
.social-media-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-light);
    aspect-ratio: 1;
}
.social-media-item img { width: 100%; height: 100%; object-fit: cover; }
.social-media-overlay {
    position: absolute;
    bottom: 4px; right: 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}
.social-media-play {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: #1a202c;
}
.social-media-play-icon { font-size: 2.5rem; color: #fff; }

/* ── Social detail 2-column grid ──────────────────────────── */
.social-detail-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
}
@media (max-width: 900px) {
    .social-detail-grid { grid-template-columns: 1fr; }
}

/* Social platform badge */
.badge--platform { color: #fff; }
.badge--verified { color: #1d9bf0; }

/* ── Billing page ─────────────────────────────────────────── */
.billing-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}
.billing-balance-value { font-size: var(--font-size-3xl); font-weight: 700; color: var(--color-primary); }
.billing-sub-value { font-size: var(--font-size-xl); font-weight: 700; }
.billing-sub-value--active { color: var(--color-success); }
.billing-sub-value--inactive { font-weight: 600; color: var(--color-muted); }
.billing-sub-management { background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%); }
.billing-sub-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); }
.billing-progress-track { background: var(--color-bg-secondary); border-radius: 999px; height: 8px; overflow: hidden; }
.billing-progress-fill { background: var(--color-primary); height: 100%; border-radius: 999px; transition: width 0.3s; }
.billing-usage-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-xs); }
.billing-api-section { margin-top: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }
.billing-api-row { display: flex; align-items: center; gap: var(--space-sm); }
.billing-api-code {
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.billing-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}
.billing-plan-card { position: relative; text-align: center; padding: var(--space-xl) var(--space-lg); }
.billing-plan-card--active { background: linear-gradient(135deg, #f0fff4 0%, #c6f6d5 100%); border: 2px solid var(--color-success); }
.billing-plan-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: var(--font-size-xs);
    padding: 2px 12px;
}
.billing-plan-badge--current { position: absolute; top: -10px; right: 12px; left: auto; transform: none; }
.billing-plan-icon { font-size: 2rem; margin-bottom: var(--space-sm); }
.billing-plan-price { font-size: var(--font-size-3xl); font-weight: 800; }
.billing-plan-features {
    text-align: left;
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
}
.billing-plan-feature { margin-bottom: var(--space-xs); }
.billing-cancel-btn { color: var(--color-danger); border-color: var(--color-danger); }
.billing-cancel-btn:hover { background: #fff5f5; }
@media (max-width: 768px) { .billing-status-grid { grid-template-columns: 1fr; } }

/* ── Table label column ───────────────────────────────────── */
.table td.td-label { width: 180px; }
.table td.td-label-sm { width: 100px; }
.table td.td-label-lg { width: 200px; }

/* ── Card border modifiers ────────────────────────────────── */
.card--border-success { border-left: 4px solid var(--color-success); }
.card--border-muted { border-left: 4px solid var(--color-muted); }
.card--border-info { border-left: 3px solid var(--color-info); }

/* ── Reusable button/action group ────────────────────────── */
.btn-group { display: flex; gap: var(--space-sm); }
.btn-group--xs { display: flex; gap: 4px; align-items: center; }

/* ── Card header flex (space-between) ────────────────────── */
.card-header--flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-header--flex h3 { margin: 0; }

/* ── Table utilities ─────────────────────────────────────── */
.th-right { text-align: right; }
.td-right { text-align: right; font-variant-numeric: tabular-nums; }
.td-mono-right { text-align: right; font-variant-numeric: tabular-nums; font-family: monospace; }
.td-total { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-primary); }
.table-wrapper--flush { padding: 0; }

/* ── Inline form (no margin) ─────────────────────────────── */
.form--inline { display: inline; margin: 0; }

/* ── Promo code input (admin) ────────────────────────────── */
.form-input--promo { text-transform: uppercase; font-family: monospace; font-weight: 600; letter-spacing: 0.05em; }

/* ── Checkbox row ────────────────────────────────────────── */
.form-checkbox-row { display: flex; gap: var(--space-lg); }

/* ═══════════════════════════════════════════════════════════
   Admin Pricing — Business Design v2.0
   ═══════════════════════════════════════════════════════════ */

/* Stats Strip */
.pricing-stats-strip {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-xl);
    margin-bottom: var(--space-xl);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.pricing-mini-stat {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.pricing-mini-stat__value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.pricing-mini-stat__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.pricing-mini-stat__divider {
    width: 1px;
    height: 28px;
    background: var(--color-border);
}

/* Two Column Layout */
.pricing-two-col {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--space-xl);
}
.pricing-col-main { min-width: 0; }
.pricing-col-side { min-width: 0; }

/* Plans Table */
.pricing-plans-table { font-size: var(--font-size-sm); }
.pricing-plans-table th {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    font-weight: 600;
    padding: var(--space-sm) var(--space-md);
    white-space: nowrap;
}
.pricing-plans-table td {
    padding: var(--space-sm) var(--space-md);
    vertical-align: middle;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-border);
}
.pricing-plans-table td:first-child { white-space: normal; }
.pricing-plans-table tbody tr:hover { background: var(--color-bg-light); }
.pricing-plan-name { font-weight: 600; color: var(--color-text); }
.pricing-plan-desc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pricing-star { color: var(--color-warning); }

/* Action Buttons */
.pricing-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: white;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all var(--transition-fast);
}
.pricing-action-btn:hover {
    border-color: var(--color-border-dark);
    background: var(--color-bg-light);
}
.pricing-action-edit:hover {
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}
.pricing-action-delete:hover {
    color: var(--color-danger);
    border-color: var(--color-danger);
}
.pricing-toggle-active { color: var(--color-warning); }
.pricing-toggle-inactive { color: var(--color-success); }

/* Badges */
.pricing-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pricing-badge-active { background: #d4edda; color: #155724; }
.pricing-badge-inactive { background: #e9ecef; color: #6c757d; }
.pricing-badge--sm { font-size: 10px; padding: 1px 6px; }
.pricing-discount-badge {
    background: #d4edda;
    color: #155724;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
}

/* Calculator */
.pricing-calc-fields {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
.pricing-calc-field { display: flex; flex-direction: column; gap: 2px; }
.pricing-calc-input {
    font-size: var(--font-size-sm) !important;
    padding: 6px 8px !important;
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: monospace;
}
.pricing-calc-body { padding: 0 var(--space-lg) var(--space-lg); }
.pricing-calc-result {
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
}
.pricing-calc-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 3px 0;
}
.pricing-calc-total {
    border-top: 2px solid var(--color-border);
    padding-top: var(--space-sm);
    margin-top: var(--space-xs);
}
.pricing-calc-total-label { font-weight: 600; }
.pricing-calc-total-value { font-weight: 700; font-size: var(--font-size-lg); color: var(--color-primary); }
.pricing-calc-discount { color: var(--color-success); }

/* Legend */
.pricing-legend { display: flex; flex-direction: column; gap: 6px; }
.pricing-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Info / Quick Actions Cards */
.pricing-side-card { padding: var(--space-md) var(--space-lg); }
.pricing-side-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin: 0 0 var(--space-sm) 0;
    color: var(--color-text);
}

/* Quick Actions */
.pricing-quick-actions { display: flex; flex-direction: column; gap: var(--space-xs); }
.pricing-quick-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: white;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    transition: all var(--transition-fast);
    width: 100%;
    text-align: left;
}
.pricing-quick-btn:hover {
    border-color: var(--color-secondary);
    color: var(--color-secondary);
    background: #ebf8ff;
}

/* Promo Code Styling */
.pricing-promo-code {
    font-family: monospace;
    font-weight: 700;
    color: #3182ce;
    background: #ebf8ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.pricing-promo-code:hover { background: #bee3f8; }
.pricing-row-inactive { opacity: 0.5; }

/* Discount Values */
.pricing-discount-value {
    display: inline-block;
    font-weight: 600;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 4px;
}
.pricing-discount-percent { color: #38a169; background: #f0fff4; }
.pricing-discount-fixed { color: #3182ce; background: #ebf8ff; }
.pricing-discount-free { color: #d69e2e; background: #fffff0; }

/* Usage Bar */
.pricing-promo-usage { min-width: 70px; }
.pricing-usage-bar {
    width: 60px; height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-top: 4px;
}
.pricing-usage-fill {
    height: 100%;
    background: #3182ce;
    border-radius: 2px;
    transition: width 0.3s;
}

/* Modals */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content {
    background: white;
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
}
.modal-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 { margin: 0; }
.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--color-text-muted);
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-base);
}
.modal-close:hover { background: var(--color-bg-light); }
.modal.hidden { display: none; }
.modal-content--wide { max-width: 700px; }
.modal-body { padding: var(--space-lg); }
.modal-footer {
    padding: var(--space-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
}
.form-row { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 150px; }

/* Responsive */
@media (max-width: 1200px) {
    .pricing-two-col { grid-template-columns: 1fr; }
    .pricing-stats-strip { flex-wrap: wrap; gap: var(--space-md); }
}
@media (max-width: 768px) {
    .pricing-stats-strip { flex-direction: column; align-items: flex-start; }
    .pricing-mini-stat__divider { display: none; }
    .pricing-calc-fields { grid-template-columns: 1fr; }
    .form-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════
   v30.1 — Capture Form Shared Utilities
   ═══════════════════════════════════════════════════════════ */

/* ── Shared layout helpers ──────────────────────────────── */
.dashboard-subtitle { color: var(--color-text-secondary); margin-top: 4px; }
.card--padded { padding: 28px; }
.section-card { margin-top: 24px; padding: 24px; }
.section-card__title { margin: 0 0 16px; font-size: var(--font-size-lg); }
.flex-fill { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.flex-auto { flex: 0 0 auto; }
.btn--block { width: 100%; }
.icon-inline { vertical-align: -2px; }
.gap-row { display: flex; gap: 16px; align-items: flex-start; }

/* ── Dropzone shared patterns ───────────────────────────── */
.dropzone-title { margin: 10px 0 4px; font-weight: 600; }
.dropzone-text { margin: 0; color: var(--color-text-tertiary); font-size: var(--font-size-sm); }
.dropzone-formats { margin: 8px 0 0; font-size: 12px; color: var(--color-text-tertiary); }
.dropzone-link { color: var(--color-primary); cursor: pointer; text-decoration: underline; }

/* ── File info shared ───────────────────────────────────── */
.file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.btn--ghost {
    background: none; border: none; cursor: pointer;
    color: var(--color-text-tertiary); padding: 4px;
}
.btn--ghost:hover { color: var(--color-text); }

/* ── Feature icon color variants ────────────────────────── */
.capture-icon--primary { color: var(--color-primary); }
.capture-icon--success { color: var(--color-success); }
.capture-icon--warning { color: var(--color-warning); }
.capture-icon--info { color: var(--color-info); }

/* ── QR Auth Section (email capture) ────────────────────── */
.qr-section-title { margin: 0 0 8px; font-size: var(--font-size-lg); }
.qr-section-desc { color: var(--color-text-secondary); margin: 0 0 16px; font-size: var(--font-size-sm); }
.qr-auth-layout { display: flex; gap: 24px; align-items: flex-start; }
.qr-auth-left { flex-shrink: 0; text-align: center; }
.qr-image-container {
    width: 420px; height: 420px; background: #fff; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--color-border); padding: 8px;
}
.qr-image {
    max-width: 400px; max-height: 400px; width: 100%; height: auto;
    object-fit: contain; border-radius: 4px; image-rendering: pixelated;
}
.qr-loading { color: var(--color-text-tertiary); }
.qr-loading-text { margin-top: 8px; font-size: var(--font-size-sm); }
.qr-status-text { margin-top: 8px; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.qr-auth-right { flex: 1; }
.qr-provider-name { margin: 0 0 12px; }
.qr-instructions { font-size: var(--font-size-sm); }
.qr-instructions ol { margin: 0; padding-left: 20px; }
.qr-instructions li { margin-bottom: 6px; }
.qr-enable-steps {
    margin-top: 12px; padding: 10px 12px; background: #e8f5e9;
    border-radius: 6px; font-size: var(--font-size-sm);
}
.qr-auth-success {
    margin-top: 20px; padding: 16px; background: #e8f5e9;
    border-left: 4px solid #4CAF50; border-radius: 6px;
}
.qr-auth-success__title { color: #2e7d32; }
.qr-auth-success__text { margin: 8px 0; color: #1b5e20; font-size: var(--font-size-sm); }

/* ── Cost badge (messenger capture) ─────────────────────── */
.cost-badge-text { color: var(--color-text-tertiary); }

/* ═══════════════════════════════════════════════════════════
   Email Capture Form (email/capture.html)
   ═══════════════════════════════════════════════════════════ */
.email-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    background: var(--color-bg-secondary, #f5f6f8);
    border-radius: var(--radius-md); padding: 4px;
}
.email-tab {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 16px; background: none; border: none;
    border-radius: var(--radius-sm, 6px); font-size: var(--font-size-sm);
    font-weight: 600; color: var(--color-text-secondary); cursor: pointer;
    transition: all 0.15s;
}
.email-tab:hover { color: var(--color-text); }
.email-tab.active {
    background: #fff; color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.email-tab-content { display: none; }
.email-tab-content.active { display: block; }
.email-dropzone {
    border: 2px dashed var(--color-border); border-radius: var(--radius-lg);
    padding: 36px; text-align: center; cursor: pointer; transition: all 0.2s;
}
.email-dropzone:hover,
.email-dropzone.dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light, #e8f0fe);
}
.email-file-info {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--color-bg-secondary, #f7f8fa);
    border-radius: var(--radius-md);
}
.email-hint {
    margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm); color: var(--color-text-tertiary);
}
.email-provider-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px;
}
.email-provider-option { cursor: pointer; }
.email-provider-option input { display: none; }
.email-provider-label {
    display: block; padding: 10px 12px; border: 2px solid var(--color-border);
    border-radius: var(--radius-md); text-align: center;
    font-size: var(--font-size-sm); font-weight: 500; transition: all 0.15s;
}
.email-provider-option input:checked + .email-provider-label {
    border-color: var(--color-primary);
    background: var(--color-primary-light, #e8f0fe);
    color: var(--color-primary);
}
.email-server-row { display: flex; gap: 12px; }
.email-features-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 768px) { .email-features-grid { grid-template-columns: 1fr; } }
.email-feature { display: flex; gap: 12px; align-items: flex-start; }
.email-feature-icon {
    width: 36px; height: 36px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.email-feature p { margin: 4px 0 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
/* Web login providers grid (QR) */
.weblogin-providers-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.weblogin-provider-card {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 20px 16px; border: 2px solid var(--color-border);
    border-radius: var(--radius-lg, 12px); background: none; cursor: pointer;
    transition: all 0.2s; text-align: center;
}
.weblogin-provider-card:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light, #e8f0fe);
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.weblogin-provider-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
}
.weblogin-provider-card strong { font-size: var(--font-size-md); color: var(--color-text); }
.weblogin-provider-card span { font-size: var(--font-size-xs, 11px); color: var(--color-text-tertiary); }

/* ═══════════════════════════════════════════════════════════
   Social Capture Form (social/capture.html)
   ═══════════════════════════════════════════════════════════ */
.social-url-input { position: relative; }
.social-url-icon {
    position: absolute; left: 14px; top: 50%;
    transform: translateY(-50%); pointer-events: none;
}
.social-row { display: flex; gap: 16px; align-items: flex-start; }
@media (max-width: 600px) { .social-row { flex-direction: column; } }
.social-preview {
    display: flex; gap: 16px; padding: 16px;
    background: var(--color-bg-secondary, #f7f8fa);
    border-radius: var(--radius-lg); margin-bottom: 16px;
}
.social-preview-img {
    width: 120px; height: 80px; object-fit: cover;
    border-radius: var(--radius-md); flex-shrink: 0;
}
.social-preview-body { flex: 1; min-width: 0; }
.social-badge {
    display: inline-block; padding: 2px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 600; background: var(--color-primary); color: #fff;
}
.social-metrics {
    display: flex; gap: 16px; font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.social-platforms-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.social-platform-item {
    text-align: center; padding: 16px 8px; border-radius: var(--radius-lg);
    border: 1px solid var(--color-border); transition: border-color 0.15s, box-shadow 0.15s;
}
.social-platform-item:hover {
    border-color: var(--platform-color);
    box-shadow: 0 0 0 1px var(--platform-color);
}
.social-platform-icon {
    width: 40px; height: 40px; margin: 0 auto 8px; border-radius: 10px;
    background: var(--platform-color); color: #fff; font-weight: 700;
    font-size: 15px; display: flex; align-items: center; justify-content: center;
}
.social-platform-name { font-weight: 600; font-size: var(--font-size-sm); }
.social-platform-desc { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }
.social-features-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 768px) { .social-features-grid { grid-template-columns: 1fr; } }
.social-feature { display: flex; gap: 12px; align-items: flex-start; }
.social-feature-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-primary); color: #fff; font-weight: 700;
    font-size: 13px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.social-feature p { margin: 4px 0 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ═══════════════════════════════════════════════════════════
   Messenger Capture Form (messenger/capture.html)
   ═══════════════════════════════════════════════════════════ */
.msg-tabs {
    display: flex; gap: 4px; margin-bottom: 24px;
    background: var(--color-bg-secondary, #f5f6f8);
    border-radius: var(--radius-md); padding: 4px;
}
.msg-tab {
    flex: 1; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px 16px; background: none; border: none;
    border-radius: var(--radius-sm, 6px); font-size: var(--font-size-sm);
    font-weight: 600; color: var(--color-text-secondary); cursor: pointer;
    transition: all 0.15s;
}
.msg-tab:hover { color: var(--color-text); }
.msg-tab.active {
    background: #fff; color: var(--color-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.msg-tab-content { display: none; }
.msg-tab-content.active { display: block; }
.qr-messenger-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.qr-messenger-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 28px 20px; border: 2px solid var(--color-border);
    border-radius: var(--radius-lg, 12px); background: none; cursor: pointer;
    transition: all 0.2s;
}
.qr-messenger-card:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light, #e8f0fe);
    transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.qr-messenger-icon {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
}
.qr-messenger-card strong { font-size: var(--font-size-lg); color: var(--color-text); }
.qr-messenger-card span { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.msg-qr-hint {
    margin-top: 20px; padding: 12px 16px;
    background: var(--color-bg-secondary, #f7f8fa);
    border-radius: var(--radius-md); font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.msg-dropzone {
    border: 2px dashed var(--color-border); border-radius: var(--radius-lg);
    padding: 36px; text-align: center; cursor: pointer; transition: all 0.2s;
}
.msg-dropzone:hover,
.msg-dropzone.dragover {
    border-color: var(--color-primary);
    background: var(--color-primary-light, #e8f0fe);
}
.msg-file-info {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; background: var(--color-bg-secondary, #f7f8fa);
    border-radius: var(--radius-md); margin-bottom: 16px;
}
.msg-row { display: flex; gap: 16px; align-items: flex-start; }
@media (max-width: 600px) { .msg-row { flex-direction: column; } }
.msg-cost-badge {
    padding: 10px 16px; background: var(--color-bg-secondary, #f7f8fa);
    border-radius: var(--radius-md); font-size: var(--font-size-sm);
    color: var(--color-text-secondary); white-space: nowrap;
}
.msg-instructions-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
@media (max-width: 768px) { .msg-instructions-grid { grid-template-columns: 1fr; } }
.msg-platform-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.msg-platform-badge {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.msg-platform-title { margin: 0; font-size: var(--font-size-lg); }
.msg-steps {
    margin: 0; padding-left: 20px; font-size: var(--font-size-sm);
    line-height: 1.8; color: var(--color-text-secondary);
}
.msg-steps strong { color: var(--color-text); }
.msg-steps code {
    background: var(--color-bg-secondary, #f0f0f0);
    padding: 1px 6px; border-radius: 4px; font-size: 12px;
}
.msg-features-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 768px) { .msg-features-grid { grid-template-columns: 1fr; } }
.msg-feature { display: flex; gap: 12px; align-items: flex-start; }
.msg-feature-icon {
    width: 36px; height: 36px; display: flex; align-items: center;
    justify-content: center; flex-shrink: 0;
}
.msg-feature p { margin: 4px 0 0; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

/* ═══════════════════════════════════════════════════════════
   v30.2 — Dashboard Page Components
   ═══════════════════════════════════════════════════════════ */

/* ── Content width constraints ────────────────────────────── */
.content--narrow   { max-width: 600px; }
.card--narrow      { max-width: 700px; }

/* ── Centered card with generous padding ─────────────────── */
.card--centered    { text-align: center; padding: var(--space-2xl); }
.card--centered-lg { text-align: center; padding: var(--space-lg); }

/* ── Large emoji decorators ──────────────────────────────── */
.emoji-xl { font-size: 3rem;   margin-bottom: var(--space-lg); }
.emoji-lg { font-size: 2rem;   margin-bottom: var(--space-sm); }
.emoji-md { font-size: 1.5rem; }

/* ── Centered narrow text ────────────────────────────────── */
.text-center-narrow { max-width: 500px; margin-left: auto; margin-right: auto; }

/* ── Form enhancements ───────────────────────────────────── */
.form-label--block  { display: block; font-weight: 600; margin-bottom: var(--space-xs); }
.form-grid-2 {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-lg); margin-bottom: var(--space-lg);
}
.form-input--full {
    width: 100%; padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    font-size: var(--font-size-md);
}
.form-select--full {
    width: 100%; padding: var(--space-sm);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
}

/* ── Info cards grid (3-column) ──────────────────────────── */
.info-cards-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg); margin-top: var(--space-xl);
}
@media (max-width: 768px) { .info-cards-grid { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════
   Telegram Bot Page (telegram.html)
   ═══════════════════════════════════════════════════════════ */
.tg-linked-header {
    display: flex; align-items: center; gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.tg-status-circle {
    width: 60px; height: 60px; background: var(--color-success);
    border-radius: 50%; display: flex; align-items: center;
    justify-content: center; font-size: 2rem; color: #fff;
}
.tg-commands-box {
    background: var(--color-bg-light); padding: var(--space-md);
    border-radius: var(--radius-md); margin-bottom: var(--space-lg);
}
.tg-link-layout {
    display: flex; gap: var(--space-xl);
    align-items: flex-start; flex-wrap: wrap;
}
.tg-qr-section {
    background: var(--color-bg-light); padding: var(--space-lg);
    border-radius: var(--radius-lg); text-align: center;
}
.tg-qr-placeholder {
    width: 150px; height: 150px; background: white;
    margin: 0 auto var(--space-md); display: flex;
    align-items: center; justify-content: center;
    border-radius: var(--radius-md);
}
.tg-instructions { flex: 1; min-width: 250px; }
.tg-instructions ol { margin-left: var(--space-lg); }
.tg-instructions li { margin-bottom: var(--space-sm); }
.tg-code-block {
    background: var(--color-bg-dark, #2d3748); color: #e2e8f0;
    padding: var(--space-md); border-radius: var(--radius-md);
    font-family: monospace; margin: var(--space-md) 0;
}
.tg-benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}
.tg-benefit-item  { display: flex; gap: var(--space-sm); }
.tg-benefit-check { color: var(--color-success); }

/* ═══════════════════════════════════════════════════════════
   Project Detail (project_detail.html)
   ═══════════════════════════════════════════════════════════ */
.project-header-actions { display: flex; gap: var(--space-md); }
.url-truncate {
    max-width: 300px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.actions-cell { display: flex; gap: var(--space-sm); }
.modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000; padding: var(--space-lg);
}
.modal-overlay > .card { animation: fadeInUp 0.3s ease-out; }
.modal-card {
    max-width: 700px; width: 100%; margin: auto;
    max-height: 80vh; overflow-y: auto;
}
.checkbox-list {
    max-height: 400px; overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-md);
}
.checkbox-item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-xs) 0; cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}
.checkbox-item-body { flex: 1; min-width: 0; }
.checkbox-item-url {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.modal-actions {
    display: flex; gap: var(--space-md);
    justify-content: flex-end; margin-top: var(--space-lg);
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════
   Messenger Detail (messenger/detail.html)
   ═══════════════════════════════════════════════════════════ */

/* ── Participants Grid ──────────────────────────────────── */
.msg-participants-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-md);
}
.msg-participant-card {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    transition: background 0.15s;
}
.msg-participant-card:hover { background: var(--color-bg-light); }
.msg-participant-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: var(--font-size-sm);
    flex-shrink: 0;
}

/* ── Chat Preview (bubble messages) ─────────────────────── */
.msg-chat-preview {
    background: #e5ddd5; /* WhatsApp bg */
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    max-height: 500px; overflow-y: auto;
}
.msg-chat-preview--telegram { background: #d5e8d4; }

.msg-date-divider {
    text-align: center; margin: var(--space-md) 0;
}
.msg-date-divider span {
    background: rgba(255,255,255,0.85);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs); color: var(--color-text-muted);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.msg-system-message {
    text-align: center;
    padding: var(--space-xs) var(--space-md);
    font-size: var(--font-size-xs); color: var(--color-text-muted);
    font-style: italic;
}
.msg-bubble-row {
    display: flex; justify-content: flex-start;
    margin-bottom: var(--space-xs);
}
.msg-bubble-row--out { justify-content: flex-end; }

.msg-bubble {
    background: #fff;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    max-width: 75%; min-width: 120px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
.msg-bubble--out { background: #dcf8c6; }
.msg-chat-preview--telegram .msg-bubble--out { background: #effdde; }

.msg-bubble-sender {
    font-size: var(--font-size-xs); font-weight: 700;
    margin-bottom: 2px;
}
.msg-bubble-text {
    font-size: var(--font-size-sm);
    line-height: 1.4; word-break: break-word;
}
.msg-bubble-time {
    font-size: 11px; color: var(--color-text-muted);
    text-align: right; margin-top: 2px;
}

/* v42.0: Dark theme for message preview bubbles */
[data-theme="dark"] .msg-chat-preview,
.dark .msg-chat-preview { background: #0b141a; }
[data-theme="dark"] .msg-bubble,
.dark .msg-bubble { background: #202c33; color: #e9edef; }
[data-theme="dark"] .msg-bubble--out,
.dark .msg-bubble--out { background: #005c4b; color: #e9edef; }
[data-theme="dark"] .msg-bubble-text,
.dark .msg-bubble-text { color: #e9edef; }
[data-theme="dark"] .msg-bubble-sender,
.dark .msg-bubble-sender { color: #25D366; }
[data-theme="dark"] .msg-bubble-time,
.dark .msg-bubble-time { color: #8696a0; }
[data-theme="dark"] .msg-date-divider span,
.dark .msg-date-divider span { background: rgba(30,40,50,0.85); color: #8696a0; }
@media (prefers-color-scheme: dark) {
  .msg-chat-preview { background: #0b141a; }
  .msg-bubble { background: #202c33; color: #e9edef; }
  .msg-bubble--out { background: #005c4b; color: #e9edef; }
  .msg-bubble-text { color: #e9edef; }
  .msg-bubble-sender { color: #25D366; }
  .msg-bubble-time { color: #8696a0; }
  .msg-date-divider span { background: rgba(30,40,50,0.85); color: #8696a0; }
}

/* ── Message Statistics ─────────────────────────────────── */
.msg-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md); margin-bottom: var(--space-lg);
}
.msg-stat-card {
    text-align: center; padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-bg-light);
}
.msg-stat-card--text   { border-left: 3px solid var(--color-primary); }
.msg-stat-card--media  { border-left: 3px solid var(--color-warning); }
.msg-stat-card--system { border-left: 3px solid var(--color-text-muted); }
.msg-stat-value {
    font-size: 1.5rem; font-weight: 700; color: var(--color-text);
}
.msg-stat-label {
    font-size: var(--font-size-xs); color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── Per-sender Statistics ──────────────────────────────── */
.msg-sender-row {
    display: flex; align-items: center; gap: var(--space-md);
    padding: var(--space-xs) 0;
}
.msg-sender-bar {
    flex: 1; display: flex; align-items: center; gap: var(--space-sm);
}
@media (max-width: 768px) {
    .msg-stats-grid { grid-template-columns: 1fr; }
    .msg-participants-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   Video Detail (video/detail.html)
   ═══════════════════════════════════════════════════════════ */

/* ── Video Player ───────────────────────────────────────── */
.vid-player-wrap {
    background: #000; border-radius: var(--radius-md);
    overflow: hidden;
}
.vid-player-wrap video {
    width: 100%; max-height: 500px; display: block;
}

/* ── Video Metadata Stats ───────────────────────────────── */
.vid-metadata-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md); margin-bottom: var(--space-lg);
}
.vid-meta-card {
    text-align: center; padding: var(--space-md);
    border-radius: var(--radius-md);
}
.vid-meta-card--format   { background: #f5f0f8; }
.vid-meta-card--resolution { background: #eaf4fc; }
.vid-meta-card--duration { background: #e8f5e9; }
.vid-meta-value {
    font-size: 1.25rem; font-weight: 700;
}
.vid-meta-card--format .vid-meta-value   { color: #8e44ad; }
.vid-meta-card--resolution .vid-meta-value { color: #2980b9; }
.vid-meta-card--duration .vid-meta-value { color: #2e7d32; }
.vid-meta-label {
    font-size: var(--font-size-xs); color: var(--color-text-muted);
}

/* ── Keyframes Gallery ──────────────────────────────────── */
.vid-keyframes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
}
.vid-keyframe-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xs); text-align: center;
}
.vid-keyframe-item .text-sm { color: var(--color-text-muted); }

/* ── Archive Contents List ──────────────────────────────── */
.vid-archive-list {
    list-style: none; padding: 0; margin: 0;
}
.vid-archive-item {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-xs) 0;
    font-size: var(--font-size-sm);
}
.vid-archive-icon {
    width: 20px; text-align: center;
}
.vid-source-badge {
    display: inline-block;
    background: #8e44ad; color: #fff;
    padding: 2px 8px; border-radius: var(--radius-sm);
    font-size: var(--font-size-xs); font-weight: 600;
}
@media (max-width: 768px) {
    .vid-metadata-grid { grid-template-columns: 1fr; }
    .vid-keyframes-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — Content Manager (admin/content.html)
   ═══════════════════════════════════════════════════════════ */
.content-preview {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    max-width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.code-editor {
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
}
.content-img-thumb {
    max-height: 50px;
    border-radius: var(--radius-sm);
}
pre {
    background: var(--color-bg-light);
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    overflow-x: auto;
}

/* ═══════════════════════════════════════════════════════════
   ADMIN — EDS / Digital Signature (admin/eds_settings.html)
   ═══════════════════════════════════════════════════════════ */
.admin-narrow { max-width: 800px; }

/* ── Status Cards ─────────────────────────────────────────── */
.eds-status-card {
    padding: var(--space-lg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}
.eds-status-card--success {
    background: #f0fff4;
    border-color: var(--color-success);
}
.eds-status-card--warning {
    background: #fffaf0;
    border-color: var(--color-warning);
    text-align: center;
}
.eds-status-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
}
.eds-status-icon { font-size: 3rem; line-height: 1; }
.eds-status-body { flex: 1; }
.eds-status-title {
    font-weight: 600;
    margin: 0 0 var(--space-sm) 0;
}
.eds-status-card--success .eds-status-title { color: var(--color-success); }
.eds-status-card--warning .eds-status-title { color: var(--color-warning); }
.eds-cert-name {
    margin: 0;
    font-weight: 600;
    font-size: var(--font-size-lg);
}

/* ── Actions / Steps ──────────────────────────────────────── */
.eds-actions {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-md);
}
.eds-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    text-align: center;
}
.eds-step-icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}
.eds-security-list {
    margin-left: var(--space-lg);
    list-style: disc;
}
.eds-security-list li {
    margin-bottom: var(--space-sm);
}
.eds-security-list li:last-child { margin-bottom: 0; }

/* ── Alert List (ordered lists inside alerts) ─────────────── */
.alert-list {
    margin: var(--space-sm) 0 0 var(--space-lg);
    list-style: disc;
}
.alert-list li { margin-bottom: 2px; }

/* ═══════════════════════════════════════════════════════════
   ADMIN — Reports & Analytics (admin/reports.html)
   ═══════════════════════════════════════════════════════════ */

/* ── Report Type Selector ─────────────────────────────────── */
.report-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}
.report-type-card {
    display: block;
    background: white;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.2s;
}
.report-type-card:hover {
    transform: translateY(-2px);
    border-color: #93c5fd;
}
.report-type-active {
    border-color: #3182ce !important;
    background: #f7faff;
}
.report-type-icon {
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
}
.report-type-icon svg { width: 22px; height: 22px; }
.report-type-icon-blue   { background: #dbeafe; color: #3182ce; }
.report-type-icon-blue svg   { stroke: #3182ce; }
.report-type-icon-purple { background: #e9d8fd; color: #805ad5; }
.report-type-icon-purple svg { stroke: #805ad5; }
.report-type-icon-green  { background: #c6f6d5; color: #38a169; }
.report-type-icon-green svg  { stroke: #38a169; }
.report-type-icon-orange { background: #feebc8; color: #dd6b20; }
.report-type-icon-orange svg { stroke: #dd6b20; }
.report-type-title {
    font-size: var(--font-size-md);
    font-weight: 600;
    margin: 0;
}
.report-type-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 2px 0 0 0;
}

/* ── Report Builder Layout ────────────────────────────────── */
.report-builder {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-lg);
}

/* ── Filters Panel ────────────────────────────────────────── */
.report-filters-panel {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    align-self: start;
    position: sticky;
    top: var(--space-lg);
}
.report-filters-title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0 0 var(--space-lg) 0;
}
.report-filter-section {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
}
.report-filter-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.report-filter-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

/* ── Period Buttons ────────────────────────────────────────── */
.report-period-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.report-period-btn {
    display: inline-block;
    padding: 4px 10px;
    font-size: 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.15s;
}
.report-period-btn:hover { background: #f0f0f0; }
.report-period-active {
    background: #ebf8ff !important;
    border-color: #3182ce !important;
    color: #3182ce !important;
    font-weight: 600;
}

/* ── Conversion Funnel ────────────────────────────────────── */
.report-funnel {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}
.report-funnel-step {
    text-align: center;
    flex: 1;
    min-width: 60px;
}
.report-funnel-value {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 700;
}
.report-funnel-value--blue   { color: #3182ce; }
.report-funnel-value--yellow { color: #d69e2e; }
.report-funnel-value--green  { color: #38a169; }
.report-funnel-label {
    display: block;
    font-size: 10px;
    color: var(--color-text-muted);
}
.report-funnel-arrow {
    color: var(--color-text-muted);
    font-size: 14px;
}

/* ── Top Users List ───────────────────────────────────────── */
.report-top-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.report-top-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: var(--font-size-sm);
}
.report-top-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #edf2f7;
    font-size: 10px;
    font-weight: 600;
    margin-right: 8px;
}
.report-top-count {
    font-weight: 700;
    color: #3182ce;
    font-variant-numeric: tabular-nums;
}

/* ── KPI Cards ────────────────────────────────────────────── */
.report-content { min-width: 0; }
.report-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}
.report-kpi-card {
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}
.report-kpi-blue   { background: #ebf8ff; }
.report-kpi-green  { background: #f0fff4; }
.report-kpi-purple { background: #faf5ff; }
.report-kpi-orange { background: #fffaf0; }
.report-kpi-label {
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-xs) 0;
}
.report-kpi-blue .report-kpi-label   { color: #3182ce; }
.report-kpi-green .report-kpi-label  { color: #38a169; }
.report-kpi-purple .report-kpi-label { color: #805ad5; }
.report-kpi-orange .report-kpi-label { color: #dd6b20; }
.report-kpi-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: 0;
}
.report-kpi-blue .report-kpi-value   { color: #1a365d; }
.report-kpi-green .report-kpi-value  { color: #22543d; }
.report-kpi-purple .report-kpi-value { color: #44337a; }
.report-kpi-orange .report-kpi-value { color: #7b341e; }

/* ── Charts ───────────────────────────────────────────────── */
.report-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}
.report-chart-card { margin: 0; }
.report-chart-container {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
    min-height: 280px;
}

/* ── Error Rate ───────────────────────────────────────────── */
.report-error-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.report-error-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}
.report-error-value {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin: var(--space-xs) 0 0 0;
}
.report-error-value--ok      { color: #38a169; }
.report-error-value--warning  { color: #d69e2e; }
.report-error-value--danger   { color: #e53e3e; }
.report-error-bar-wrapper { width: 200px; }
.report-error-bar {
    width: 100%; height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 4px;
}
.report-error-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s;
}
.report-error-fill--ok      { background: #38a169; }
.report-error-fill--warning  { background: #d69e2e; }
.report-error-fill--danger   { background: #e53e3e; }
.report-error-scale {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--color-text-muted);
}

/* ── Domain Table ─────────────────────────────────────────── */
.report-domain-code {
    font-size: var(--font-size-sm);
    font-family: monospace;
}
.report-domain-count {
    text-align: right;
    font-weight: 600;
}

/* ── Reports Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
    .report-builder { grid-template-columns: 1fr; }
    .report-filters-panel { position: static; }
    .eds-steps-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .report-types-grid { grid-template-columns: repeat(2, 1fr); }
    .report-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .report-charts-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   SHARED LAYOUT HELPERS
   ═══════════════════════════════════════════════════════════ */
.container-narrow {
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.btn-row-center {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* Animation delay utilities for stagger effects */
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }
.animate-delay-5 { animation-delay: 0.5s; }

/* ═══════════════════════════════════════════════════════════
   PAYMENT PAGE
   ═══════════════════════════════════════════════════════════ */
.pay-preview-wrap {
    position: relative;
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-md);
}
.pay-preview-img {
    width: 100%;
    filter: blur(5px);
    opacity: 0.7;
    display: block;
}
.pay-preview-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    text-align: center;
}
.pay-preview-label {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin: 0;
}
.pay-details {
    font-size: var(--font-size-sm);
}
.pay-amount {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}
.pay-qr-box {
    background: var(--color-bg-light);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}
.pay-qr-img {
    max-width: 200px;
}
.pay-qr-placeholder {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-md);
}
.pay-timer {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
}

/* ═══════════════════════════════════════════════════════════
   SHARED DASHBOARD HELPERS
   ═══════════════════════════════════════════════════════════ */
.content-narrow {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.dashboard-subtitle {
    color: var(--color-text-muted);
    margin-top: 4px;
}
.dashboard-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.btn-row-end {
    display: flex;
    gap: var(--space-md);
    justify-content: flex-end;
}
.card-link {
    text-decoration: none;
    color: inherit;
}
.card--padded {
    padding: var(--space-2xl);
}
.hr-section {
    border: none;
    border-top: 1px solid var(--color-border);
    margin-bottom: var(--space-xl);
}
.btn--icon {
    padding: 8px;
}
.btn--icon-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-md);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    text-decoration: none;
}
.back-link:hover { color: var(--color-text); }

/* ═══════════════════════════════════════════════════════════
   COURT DECISIONS PAGE
   ═══════════════════════════════════════════════════════════ */
.court-page {
    padding: var(--space-3xl) 0;
}
.court-page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.court-page-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-bottom: var(--space-xl);
}
.case-card {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
}
.case-card h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}
.case-card p {
    line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   PROJECTS PAGE
   ═══════════════════════════════════════════════════════════ */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--space-lg);
}
.project-stats {
    display: flex;
    gap: var(--space-lg);
    margin-top: auto;
}
.project-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
}
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: var(--space-lg);
}
.modal-overlay.hidden { display: none; }
.modal-overlay > .card {
    animation: fadeInUp 0.3s ease-out;
}
.modal-dialog {
    max-width: 500px;
    width: 100%;
    margin: auto;
}

/* ═══════════════════════════════════════════════════════════
   QR LOGIN PAGE (messenger)
   ═══════════════════════════════════════════════════════════ */
.qr-auth-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    max-width: 900px;
}
.qr-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 28px;
    text-align: center;
}
.qr-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.qr-status--waiting { background: #fef3cd; color: #856404; }
.qr-status--success { background: #d4edda; color: #155724; }
.qr-status--error { background: #f8d7da; color: #721c24; }
.qr-image-container { margin: 20px 0; }
.qr-img {
    max-width: 300px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.qr-placeholder {
    width: 300px;
    height: 300px;
    border: 2px dashed var(--color-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}
.qr-spinner { margin: 16px 0; }
.qr-spinner.hidden { display: none; }
.qr-spinner-text {
    color: var(--color-primary);
    margin-top: 8px;
}
.qr-success { margin: 20px 0; }
.qr-success.hidden { display: none; }
.qr-success-icon {
    color: var(--color-success);
    font-size: 3rem;
}
.qr-success-title {
    color: var(--color-success);
    margin: 8px 0;
}
.qr-hint {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 12px 0 0;
}
.qr-platform-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}
.qr-platform-header h3 { margin: 0; }
.qr-platform-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.qr-instructions {
    margin: 0;
    padding-left: 20px;
    line-height: 2;
    color: var(--color-text-muted);
}
.qr-instructions li { margin-bottom: 4px; }
.qr-note {
    margin-top: 20px;
    padding: 12px 16px;
    background: var(--color-bg-secondary, #f7f8fa);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.qr-instruction-card { padding: 24px; }
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .qr-auth-container { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   EMAIL WEB LOGIN PAGE
   ═══════════════════════════════════════════════════════════ */
.weblogin-card {
    padding: 28px;
    max-width: 700px;
}
.weblogin-step {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light, #f0f0f0);
}
.weblogin-step:last-of-type {
    border-bottom: none;
}
.weblogin-step-num {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}
.weblogin-step h3 {
    margin: 0 0 8px;
}
.weblogin-step p {
    color: var(--color-text-muted);
    margin: 0 0 12px;
}
.weblogin-step p:last-child {
    margin-bottom: 0;
}
.weblogin-form {
    margin-top: 24px;
}
.weblogin-alt {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}
.weblogin-alt p {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════
   EMAIL IMAP LIST PAGE
   ═══════════════════════════════════════════════════════════ */
.email-container { max-width: 900px; }
.email-search-card { padding: 16px 20px !important; }
.email-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.email-search-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s;
}
.email-search-input-wrap:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}
.email-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--font-size-sm);
    background: transparent;
    color: var(--color-text);
}
.email-search-input::placeholder {
    color: var(--color-text-muted);
}
.email-filters-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light, #f0f0f0);
}
.email-filters-panel.hidden { display: none; }
.email-filter-group {
    flex: 1;
    min-width: 180px;
}
.email-filter-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-bottom: 4px;
    font-weight: 500;
}
.email-filter-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    background: var(--color-bg);
    color: var(--color-text);
}
.email-filter-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(49, 130, 206, 0.1);
}
.email-search-active {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border-light, #f0f0f0);
    flex-wrap: wrap;
}
.email-search-active-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.email-search-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: var(--color-primary-light, #ebf5ff);
    color: var(--color-primary);
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    margin-left: 4px;
}
.email-actions-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}
.email-select-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.email-select-text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.email-actions-right {
    display: flex;
    align-items: center;
    gap: 12px;
}
.email-selected-count {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}
.email-list-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--color-border-light, #f5f5f5);
    cursor: pointer;
    transition: background 0.1s;
}
.email-list-item:hover {
    background: var(--color-bg-secondary, #f7f8fa);
}
.email-list-item:last-child { border-bottom: none; }
.email-list-item input[type="checkbox"] {
    margin-top: 4px;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.email-list-content {
    flex: 1;
    min-width: 0;
}
.email-list-from {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.email-list-subject {
    margin-top: 2px;
    font-size: var(--font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--color-text-muted);
    line-height: 1.4;
}
.email-list-meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}
.email-list-date { font-variant-numeric: tabular-nums; }
.email-list-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 4px;
}
.email-list-arrow { opacity: 0.3; }
.email-list-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 48px 24px;
}
.email-list-empty svg {
    margin-bottom: 12px;
    opacity: 0.4;
}
.email-list-empty p { font-size: var(--font-size-sm); }
.email-load-more {
    text-align: center;
    padding: 16px;
    border-top: 1px solid var(--color-border);
}
.email-hint {
    max-width: 900px;
    margin-top: 12px;
}
.email-hint p {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: center;
}
.btn--sm {
    padding: 6px 14px;
    font-size: var(--font-size-sm);
}
.btn--xs {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
}
@media (max-width: 640px) {
    .email-search-row { flex-wrap: wrap; }
    .email-search-input-wrap { flex: 1 1 100%; }
    .email-filters-panel { flex-direction: column; }
    .email-filter-group { min-width: auto; }
}

/* ── Social Capture (inline-style migration) ─────────────── */
.social-url-input .form-input {
    padding-left: 44px;
}
.social-row .flex-auto {
    align-self: flex-start;
    padding-top: 26px;
}

/* ── Admin: User Detail ──────────────────────────────────── */
.admin-detail-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-xl);
}
@media (max-width: 992px) {
    .admin-detail-grid { grid-template-columns: 1fr; }
}
.breadcrumb-nav {
    font-size: var(--font-size-sm);
}
.breadcrumb-nav a {
    color: var(--color-primary);
    text-decoration: none;
}
.breadcrumb-nav a:hover {
    text-decoration: underline;
}
.user-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    font-size: 2rem;
}
.user-balance-value {
    font-size: var(--font-size-3xl);
    text-align: center;
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.user-balance-form {
    display: flex;
    gap: var(--space-sm);
}
.user-balance-form .form-input {
    flex: 1;
}
td.text-truncate {
    max-width: 250px;
}

/* ── Admin: Settings ─────────────────────────────────────── */
.settings-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-xl);
}
@media (max-width: 992px) {
    .settings-grid { grid-template-columns: 1fr; }
}
.card--info {
    border-left: 3px solid var(--color-info);
}
.btn--full {
    width: 100%;
    padding: var(--space-md);
    text-align: center;
}

/* ── Public: How It Works ────────────────────────────────── */
.page-intro {
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}
.page-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    margin-bottom: var(--space-md);
}
.page-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-top: var(--space-md);
}
.steps-grid--auto {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    max-width: 960px;
    margin: 0 auto;
}
.step-circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
    font-size: var(--font-size-2xl);
    font-weight: 700;
}
.step-circle--primary { background: var(--color-primary); }
.step-circle--secondary { background: var(--color-secondary); }
.step-circle--success { background: var(--color-success); }
.step-title {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}
.mt-3xl { margin-top: var(--space-3xl); }

/* ── Public: Legal ───────────────────────────────────────── */
.legal-body {
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}
.legal-body ul {
    padding-left: 1.5rem;
}
.section-heading {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin-bottom: var(--space-md);
}
.info-box {
    margin-top: var(--space-xl);
    padding: var(--space-lg);
    background: var(--color-bg-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.info-box h4 {
    font-weight: 600;
    margin-bottom: var(--space-sm);
}
.info-box p {
    line-height: 1.7;
}

/* ── Error Page ──────────────────────────────────────────── */
.error-page {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-xl);
}
.error-icon {
    font-size: 6rem;
    margin-bottom: var(--space-lg);
}
.error-icon svg {
    opacity: 0.5;
}
.error-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--space-sm);
}
.error-message {
    font-size: var(--font-size-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-xl);
    max-width: 400px;
}

/* ── Section Title Variant ───────────────────────────────── */
.section-title--lg {
    font-size: var(--font-size-3xl);
}

/* ── Auth Forms (shared across login/register/forgot/reset) ─ */
.auth-glass--wide { max-width: 480px; }
.auth-header {
    text-align: center;
    margin-bottom: var(--space-xl);
}
.auth-header .logo {
    justify-content: center;
}
.auth-header h1 {
    font-size: var(--font-size-xl);
    margin-top: var(--space-lg);
}
.auth-footer {
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
    text-align: center;
}
.auth-footer--simple {
    margin-top: var(--space-xl);
    text-align: center;
}
.auth-remember-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.auth-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
}
.auth-checkbox-label input {
    margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════
   v31.0 — P0: BEM BUTTON ALIASES (btn--primary → btn-primary)
   ═══════════════════════════════════════════════════════════ */
.btn--primary { background: var(--color-primary); color: white; }
.btn--primary:hover { background: var(--color-primary-light); color: white; }
.btn--secondary { background: var(--color-bg-dark); color: var(--color-text); }
.btn--secondary:hover { background: var(--color-border); }
.btn--success { background: var(--color-success); color: white; }
.btn--danger { background: var(--color-danger); color: white; }
.btn--outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: white; }
.btn--sm { padding: var(--space-xs) var(--space-md); font-size: var(--font-size-sm); }
.btn--lg { padding: var(--space-md) var(--space-xl); font-size: var(--font-size-lg); }
.btn--block { width: 100%; }

/* ═══════════════════════════════════════════════════════════
   v31.0 — P0: BOOTSTRAP-REPLACEMENT UTILITIES
   (for terms.html, contacts.html, privacy.html)
   ═══════════════════════════════════════════════════════════ */
.row { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--space-md)); }
.row > * { padding: 0 var(--space-md); }
.col-lg-8 { width: 100%; max-width: 800px; }
.col-md-6 { width: 100%; }
@media (min-width: 768px) { .col-md-6 { width: 50%; } }
.mx-auto { margin-left: auto; margin-right: auto; }
.py-5 { padding-top: var(--space-3xl); padding-bottom: var(--space-3xl); }
.mb-4 { margin-bottom: var(--space-xl); }
.g-4 { gap: var(--space-xl); }
.lead { font-size: var(--font-size-lg); color: var(--color-text-light); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════
   v31.0 — P0: FORM-CONTROL ALIAS (→ form-input)
   ═══════════════════════════════════════════════════════════ */
.form-control {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: inherit;
    font-size: var(--font-size-base);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--color-bg);
}
.form-control:focus {
    outline: none;
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.1);
}
.form-control::placeholder { color: var(--color-text-muted); }
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5568' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    padding-right: var(--space-2xl);
}

/* ═══════════════════════════════════════════════════════════
   v31.0 — P2: UNIFIED MODAL COMPONENT
   ═══════════════════════════════════════════════════════════ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal-content {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalSlideIn 0.2s ease-out;
}
@keyframes modalSlideIn {
    from { opacity: 0; transform: translateY(-20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}
.modal-header h3 { margin: 0; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: var(--space-xs);
    line-height: 1;
}
.modal-close:hover { color: var(--color-text); }
.modal-footer {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}
.modal-footer > * { flex: 1; }

/* ═══════════════════════════════════════════════════════════
   v31.0 — P2: INLINE STYLE REPLACEMENTS
   ═══════════════════════════════════════════════════════════ */
.max-w-600 { max-width: 600px; }
.balance-info {
    padding: var(--space-md);
    background: var(--color-bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}
.balance-ok { color: var(--color-success); }
.balance-empty { color: var(--color-warning); }
.list-spaced { margin-left: var(--space-lg); }
.card--centered { text-align: center; padding: var(--space-2xl); }
.card--narrow { max-width: 600px; }
.emoji-xl { font-size: 3rem; margin-bottom: var(--space-md); line-height: 1; }
.emoji-lg { font-size: 2rem; margin-bottom: var(--space-sm); line-height: 1; }
.card--centered-lg { text-align: center; padding: var(--space-lg); }
.text-center-narrow { max-width: 500px; margin-left: auto; margin-right: auto; }
.form-label--block { display: block; margin-bottom: var(--space-xs); font-weight: 500; }
.form-input--full { width: 100%; }
.form-select--full { width: 100%; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
@media (max-width: 576px) { .form-grid-2 { grid-template-columns: 1fr; } }
.table-url-cell { max-width: 300px; }
.table-url-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.table-actions { display: flex; gap: 4px; align-items: center; }
.td-label-lg { width: 140px; min-width: 140px; }
.card-section-title { font-size: var(--font-size-lg); font-weight: 600; margin-bottom: var(--space-md); }
.filters-bar { margin-bottom: var(--space-lg); }
.filters-form { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.btn-group { display: flex; align-items: center; gap: var(--space-sm); }

/* ═══════════════════════════════════════════════════════════
   v31.0 — P2: DARK MODE
   ═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --color-primary: #4a90d9;
    --color-primary-light: #5da0e8;
    --color-primary-dark: #1a365d;
    --color-secondary: #63b3ed;

    --color-text: #e2e8f0;
    --color-text-light: #a0aec0;
    --color-text-muted: #718096;

    --color-bg: #1a202c;
    --color-bg-light: #2d3748;
    --color-bg-dark: #171923;
    --color-bg-secondary: #2d3748;

    --color-border: #4a5568;
    --color-border-dark: #2d3748;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .header { background: var(--color-bg); }
[data-theme="dark"] .card { background: var(--color-bg); }
[data-theme="dark"] .stat-card { background: var(--color-bg); }
[data-theme="dark"] .table th { background: var(--color-bg-dark); }
[data-theme="dark"] .alert-success { background: #1c4532; color: #9ae6b4; }
[data-theme="dark"] .alert-warning { background: #5f370e; color: #fbd38d; }
[data-theme="dark"] .alert-danger { background: #63171b; color: #feb2b2; }
[data-theme="dark"] .alert-info { background: #1a365d; color: #90cdf4; }
[data-theme="dark"] .badge-success { background: #1c4532; color: #9ae6b4; }
[data-theme="dark"] .badge-warning { background: #5f370e; color: #fbd38d; }
[data-theme="dark"] .badge-danger { background: #63171b; color: #feb2b2; }
[data-theme="dark"] .badge-info { background: #1a365d; color: #90cdf4; }
[data-theme="dark"] .capture-form { background: var(--color-bg-light); }
[data-theme="dark"] .verify-method-card,
[data-theme="dark"] .verify-result-card,
[data-theme="dark"] .verify-how-it-works { background: var(--color-bg); }
[data-theme="dark"] .hero { background: linear-gradient(135deg, #0f2942 0%, #1a365d 100%); }

/* Auto dark mode from system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary: #4a90d9;
        --color-primary-light: #5da0e8;
        --color-text: #e2e8f0;
        --color-text-light: #a0aec0;
        --color-text-muted: #718096;
        --color-bg: #1a202c;
        --color-bg-light: #2d3748;
        --color-bg-dark: #171923;
        --color-bg-secondary: #2d3748;
        --color-border: #4a5568;
        --color-border-dark: #2d3748;
    }
}

/* ═══════════════════════════════════════════════════════════
   v31.0 — P2: SKIP LINK (accessibility)
   ═══════════════════════════════════════════════════════════ */
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    background: var(--color-primary);
    color: white;
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    z-index: 10000;
    font-weight: 600;
    transition: top 0.2s;
}
.skip-link:focus {
    top: var(--space-md);
    color: white;
}

/* Focus visible for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   v31.0 — UX: LOADING SKELETONS
   ═══════════════════════════════════════════════════════════ */
.skeleton {
    background: linear-gradient(90deg, var(--color-bg-dark) 25%, var(--color-bg-light) 50%, var(--color-bg-dark) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text { height: 1rem; margin-bottom: var(--space-sm); }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 1.5rem; width: 40%; margin-bottom: var(--space-md); }
.skeleton-card {
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}
.skeleton-stat { height: 80px; border-radius: var(--radius-lg); }

/* ═══════════════════════════════════════════════════════════
   v31.0 — UX: PROTOCOL SEARCH BAR
   ═══════════════════════════════════════════════════════════ */
.search-bar {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.search-bar .form-input,
.search-bar .form-control {
    flex: 1;
}
.search-bar .btn { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   v31.0 — P0: PRINT STYLES
   ═══════════════════════════════════════════════════════════ */
@media print {
    /* Hide non-essential elements */
    .header, .footer, .mobile-menu-btn,
    .dashboard-sidebar, .flash-messages, .toast,
    .btn, .filters-bar, .pagination, .nav-group,
    .sidebar-plan, .sidebar-footer, .skip-link { display: none !important; }

    /* Reset layout */
    body { background: white; color: black; font-size: 12pt; }
    .dashboard-layout { display: block; }
    .dashboard-main { padding: 0; }
    .card { border: 1px solid #ccc; box-shadow: none; page-break-inside: avoid; }
    .table th { background: #f0f0f0 !important; }
    a { color: black; text-decoration: underline; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #666; }
    .table-url-truncate { white-space: normal; max-width: none; }

    /* Page settings */
    @page { margin: 2cm; }
    h1, h2, h3 { page-break-after: avoid; }
    .protocol-grid { display: block; }
    .protocol-grid > * { margin-bottom: 1cm; }

    /* Show protocol ID prominently */
    .dashboard-title { font-size: 18pt; border-bottom: 2pt solid black; padding-bottom: 0.5cm; }
}

/* ═══════════════════════════════════════════════════════════
   v31.0 — P1: THEME TOGGLE BUTTON
   ═══════════════════════════════════════════════════════════ */
.theme-toggle {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 6px 8px;
    cursor: pointer;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1;
    transition: all var(--transition-fast);
}
.theme-toggle:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
}

/* ═══════════════════════════════════════════════════════════
   v31.0 — SIDEBAR PLAN SECTION
   ═══════════════════════════════════════════════════════════ */
.sidebar-plan { margin-bottom: var(--space-lg); padding-bottom: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.sidebar-plan-name { font-weight: 600; font-size: var(--font-size-lg); }
.sidebar-progress-wrap { margin-top: var(--space-sm); }
.sidebar-progress-track { height: 6px; background: var(--color-bg-dark); border-radius: 3px; overflow: hidden; }
.sidebar-progress-fill { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width 0.3s; }
.sidebar-progress-label { margin-top: var(--space-xs); }
.sidebar-balance-label { margin-top: var(--space-md); }
.sidebar-balance-value { font-size: var(--font-size-2xl); font-weight: 700; color: var(--color-primary); }
.sidebar-footer { margin-top: auto; padding-top: var(--space-lg); border-top: 1px solid var(--color-border); }

/* Sidebar SVG icons */
.dashboard-nav a svg,
.sidebar-footer a svg {
    vertical-align: -2px;
    margin-right: var(--space-xs);
    flex-shrink: 0;
    opacity: 0.7;
}
.dashboard-nav a:hover svg,
.dashboard-nav a.active svg { opacity: 1; }

/* Additional utility classes */
.mb-md { margin-bottom: var(--space-md); }
.table-wrapper { overflow-x: auto; }
.form-select--auto { width: auto; min-width: 160px; }
.stat-value--plan { color: var(--color-success); font-size: var(--font-size-lg); }
.stat-value--empty { font-size: var(--font-size-lg); }
.card-header--flex { display: flex; justify-content: space-between; align-items: center; }