/**
 * VeraCita Financial Audit - Styles
 */

/* ============================================
   AUDIT CONTAINER
   ============================================ */

.audit-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%);
    color: #e0e0e0;
    padding: 2rem;
}

/* ============================================
   RECONCILIATION TYPE SELECTOR
   ============================================ */

.recon-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 900px;
    margin: 2rem auto;
}

.recon-type-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.recon-type-card:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    transform: translateY(-4px);
}

.recon-type-card.selected {
    background: rgba(16, 185, 129, 0.15);
    border-color: #10b981;
}

.recon-type-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #10b981;
}

.recon-type-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.5rem;
}

.recon-type-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.recon-type-icon svg {
    width: 48px;
    height: 48px;
    color: #10b981;
}

/* ============================================
   AUDIT SCREEN CONTAINER
   ============================================ */

.audit-screen-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a2e 50%, #0f0f1a 100%);
}

.audit-header {
    text-align: center;
    padding: 2rem 0;
}

.audit-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
}

.audit-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.audit-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 1rem;
}

.audit-back-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

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

/* ============================================
   AUDIT UPLOAD SECTION
   ============================================ */

.audit-upload-section {
    max-width: 600px;
    margin: 2rem auto;
    text-align: center;
}

.audit-upload-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1rem;
}

.audit-upload-zone {
    border: 2px dashed rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 3rem 2rem;
    background: rgba(16, 185, 129, 0.02);
    cursor: pointer;
    transition: all 0.3s ease;
}

.audit-upload-zone:hover,
.audit-upload-zone.dragover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.audit-upload-zone svg {
    width: 48px;
    height: 48px;
    color: #10b981;
    margin-bottom: 1rem;
}

.audit-upload-zone p {
    font-size: 1rem;
    color: #fff;
    margin: 0;
}

.audit-upload-zone span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.audit-file-list {
    margin-top: 1.5rem;
}

.audit-file-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.audit-file-item svg {
    width: 20px;
    height: 20px;
    color: #10b981;
}

.audit-file-item span {
    flex: 1;
    text-align: left;
    color: #fff;
}

.audit-file-size {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 0.85rem;
}

.audit-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    margin-top: 1.5rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.audit-start-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.audit-start-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   UPLOAD GRID - DOCUMENT-SPECIFIC ZONES
   ============================================ */

.audit-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.audit-upload-zone[data-doc-id] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    border: 2px dashed rgba(16, 185, 129, 0.3);
    border-radius: 16px;
    padding: 1.5rem;
    background: rgba(16, 185, 129, 0.02);
    cursor: pointer;
    transition: all 0.3s ease;
}

.audit-upload-zone[data-doc-id]:hover,
.audit-upload-zone[data-doc-id].dragover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.audit-upload-zone[data-doc-id].has-file {
    border-style: solid;
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.upload-zone-empty,
.upload-zone-filled {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

.upload-zone-empty svg,
.upload-zone-filled svg {
    width: 40px;
    height: 40px;
    color: #10b981;
    margin-bottom: 0.75rem;
}

.upload-zone-label {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.5rem 0;
}

.upload-zone-hint {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    margin-bottom: 0.25rem;
}

.upload-zone-accepts {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    display: block;
}

.upload-zone-filename {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    display: block;
    margin-bottom: 0.75rem;
    word-break: break-all;
    max-width: 100%;
}

.upload-zone-remove {
    padding: 0.5rem 1rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    color: #ef4444;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-zone-remove:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

/* ============================================
   AUDIT LOADING & PLACEHOLDER
   ============================================ */

.audit-loading {
    text-align: center;
    padding: 4rem 2rem;
}

.audit-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid rgba(16, 185, 129, 0.2);
    border-top-color: #10b981;
    border-radius: 50%;
    animation: audit-spin 1s linear infinite;
    margin: 0 auto 1rem;
}

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

.audit-loading p {
    color: rgba(255, 255, 255, 0.7);
}

.audit-placeholder-result {
    text-align: center;
    padding: 4rem 2rem;
}

.audit-placeholder-result svg {
    width: 64px;
    height: 64px;
    color: #10b981;
    margin-bottom: 1rem;
}

.audit-placeholder-result h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.audit-placeholder-result p {
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 0.5rem;
}

/* ============================================
   SCORE CARD
   ============================================ */

.audit-score-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(
        #10b981 calc(var(--score) * 3.6deg),
        rgba(255, 255, 255, 0.1) 0
    );
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    position: relative;
}

.score-circle::before {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background: #1a1a2e;
    border-radius: 50%;
}

.score-value {
    position: relative;
    z-index: 1;
    font-size: 1.8rem;
    font-weight: 700;
    color: #10b981;
}

.score-label {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ============================================
   STATS ROW
   ============================================ */

.audit-stats-row {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.audit-stat {
    text-align: center;
    padding: 1rem;
    min-width: 100px;
}

.audit-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
}

.audit-stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 0.25rem;
}

.audit-stat.matched .audit-stat-value { color: #10b981; }
.audit-stat.unmatched .audit-stat-value { color: #f59e0b; }
.audit-stat.duplicate .audit-stat-value { color: #ef4444; }

/* ============================================
   BALANCE COMPARISON
   ============================================ */

.balance-comparison {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.balance-comparison h3 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: #fff;
}

.balance-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.balance-row:last-child {
    border-bottom: none;
}

.balance-row.total {
    font-weight: 600;
    color: #fff;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
    margin-top: 0.5rem;
    padding-top: 1rem;
}

.balance-row.difference {
    color: #f59e0b;
}

.balance-row.difference.zero {
    color: #10b981;
}

/* ============================================
   ITEMS LIST
   ============================================ */

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

.audit-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px 12px 0 0;
    cursor: pointer;
}

.audit-section-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
}

.audit-section-badge {
    background: rgba(255, 255, 255, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
}

.audit-section.unmatched .audit-section-badge { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.audit-section.duplicates .audit-section-badge { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.audit-section.matched .audit-section-badge { background: rgba(16, 185, 129, 0.2); color: #10b981; }

.audit-section-content {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: none;
    border-radius: 0 0 12px 12px;
    overflow: hidden;
}

.audit-item {
    display: grid;
    grid-template-columns: 100px 1fr 120px 100px;
    gap: 1rem;
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    align-items: center;
}

.audit-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

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

.audit-item-date {
    font-family: monospace;
    color: rgba(255, 255, 255, 0.7);
}

.audit-item-desc {
    color: #fff;
}

.audit-item-amount {
    text-align: right;
    font-weight: 600;
    font-family: monospace;
}

.audit-item-actions {
    display: flex;
    gap: 0.5rem;
}

.audit-item-btn {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: none;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.audit-item-btn.match {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.audit-item-btn.match:hover {
    background: rgba(16, 185, 129, 0.3);
}

.audit-item-btn.flag {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.audit-item-btn.flag:hover {
    background: rgba(245, 158, 11, 0.3);
}

/* ============================================
   EXPORT BUTTONS
   ============================================ */

.audit-export-row {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.audit-export-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.audit-export-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

.audit-export-btn.primary {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
}

.audit-export-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3);
}

.audit-export-btn svg {
    width: 18px;
    height: 18px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .audit-container {
        padding: 1rem;
    }

    .audit-item {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .audit-item-amount {
        text-align: left;
    }

    .audit-stats-row {
        gap: 1rem;
    }

    .audit-stat {
        min-width: 80px;
        padding: 0.5rem;
    }

    .audit-export-row {
        flex-direction: column;
    }

    .audit-export-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   LIGHT THEME
   ============================================ */

[data-theme="light"] .audit-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
    color: #1e293b;
}

[data-theme="light"] .recon-type-card,
[data-theme="light"] .audit-score-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .recon-type-card:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

[data-theme="light"] .recon-type-name,
[data-theme="light"] .audit-stat-value {
    color: #0f172a;
}

[data-theme="light"] .recon-type-desc,
[data-theme="light"] .audit-stat-label,
[data-theme="light"] .score-label {
    color: #64748b;
}

[data-theme="light"] .score-circle::before {
    background: #f1f5f9;
}

[data-theme="light"] .balance-comparison,
[data-theme="light"] .audit-section-content {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .balance-comparison h3 {
    color: #0f172a;
}

[data-theme="light"] .balance-row {
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .balance-row.total {
    color: #0f172a;
    border-top-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .audit-section-header {
    background: rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .audit-item {
    border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .audit-item:hover {
    background: rgba(15, 23, 42, 0.03);
}

[data-theme="light"] .audit-item-date {
    color: #64748b;
}

[data-theme="light"] .audit-item-desc {
    color: #0f172a;
}

[data-theme="light"] .audit-export-btn {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

[data-theme="light"] .audit-export-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
}

/* Audit Screen Container - Light Theme */
[data-theme="light"] .audit-screen-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);
}

[data-theme="light"] .audit-title {
    color: #0f172a;
}

[data-theme="light"] .audit-subtitle {
    color: #64748b;
}

[data-theme="light"] .audit-back-btn {
    background: transparent;
    border-color: rgba(15, 23, 42, 0.15);
    color: #475569;
}

[data-theme="light"] .audit-back-btn:hover {
    background: rgba(15, 23, 42, 0.05);
    color: #1e293b;
}

[data-theme="light"] .audit-upload-zone {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.02);
}

[data-theme="light"] .audit-upload-zone:hover,
[data-theme="light"] .audit-upload-zone.dragover {
    background: rgba(16, 185, 129, 0.06);
}

[data-theme="light"] .audit-upload-zone p {
    color: #0f172a;
}

[data-theme="light"] .audit-upload-zone span {
    color: #64748b;
}

[data-theme="light"] .audit-file-item {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .audit-file-item span {
    color: #0f172a;
}

[data-theme="light"] .audit-file-size {
    color: #64748b !important;
}

[data-theme="light"] .audit-upload-title {
    color: #0f172a;
}

[data-theme="light"] .audit-loading p {
    color: #475569;
}

[data-theme="light"] .audit-placeholder-result h3 {
    color: #0f172a;
}

[data-theme="light"] .audit-placeholder-result p {
    color: #64748b;
}

/* Light theme - Upload Grid */
[data-theme="light"] .audit-upload-zone[data-doc-id] {
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.03);
}

[data-theme="light"] .audit-upload-zone[data-doc-id]:hover,
[data-theme="light"] .audit-upload-zone[data-doc-id].dragover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

[data-theme="light"] .audit-upload-zone[data-doc-id].has-file {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

[data-theme="light"] .upload-zone-label {
    color: #0f172a;
}

[data-theme="light"] .upload-zone-hint {
    color: #64748b;
}

[data-theme="light"] .upload-zone-accepts {
    color: #94a3b8;
}

[data-theme="light"] .upload-zone-filename {
    color: #334155;
}

[data-theme="light"] .upload-zone-remove {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

[data-theme="light"] .upload-zone-remove:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #dc2626;
}

/* ============================================
   MODAL BASE STYLES
   ============================================ */

.audit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: modal-fade-in 0.2s ease;
}

.audit-modal-overlay.closing {
    animation: modal-fade-out 0.2s ease forwards;
}

@keyframes modal-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modal-fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

.audit-modal {
    background: linear-gradient(135deg, rgba(30, 32, 44, 0.98), rgba(20, 22, 34, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    max-width: 800px;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
    animation: modal-slide-up 0.3s ease;
}

@keyframes modal-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.audit-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.audit-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.audit-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 10px;
    color: #10b981;
}

.audit-modal-icon svg {
    width: 20px;
    height: 20px;
}

.audit-modal-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    font-weight: 600;
}

.audit-modal-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 8px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audit-modal-close:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.audit-modal-close svg {
    width: 18px;
    height: 18px;
}

.audit-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.audit-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

/* ============================================
   MANUAL MATCH MODAL SPECIFIC
   ============================================ */

.manual-match-modal {
    max-width: 850px;
}

.match-source-section h4,
.match-targets-header h4 {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.match-count {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    text-transform: none;
}

/* Transaction Card */
.transaction-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    transition: all 0.2s;
}

.transaction-card.source {
    border-color: rgba(99, 102, 241, 0.4);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(99, 102, 241, 0.02));
}

.transaction-card.source .txn-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.transaction-card.source .txn-field:last-child {
    border-bottom: none;
}

.transaction-card.source .txn-field.description {
    flex-direction: column;
    align-items: flex-start;
}

.transaction-card.source .txn-field.description .txn-field-value {
    margin-left: 30px;
}

.txn-field-icon {
    color: rgba(255, 255, 255, 0.4);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.txn-field-icon svg {
    width: 100%;
    height: 100%;
}

.txn-field-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    width: 80px;
    flex-shrink: 0;
}

.txn-field-value {
    flex: 1;
    color: #fff;
    font-size: 0.9rem;
}

.txn-field-value.amount {
    font-weight: 600;
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    color: #10b981;
}

/* Match Arrow */
.match-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 0;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
}

.match-arrow svg {
    width: 24px;
    height: 24px;
    color: #10b981;
}

/* Search */
.match-targets-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.match-search {
    position: relative;
    width: 250px;
}

.match-search .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
}

.match-search .search-icon svg {
    width: 16px;
    height: 16px;
}

.match-search input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.match-search input:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(255, 255, 255, 0.08);
}

.match-search input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Targets List */
.match-targets-list {
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 4px;
}

.match-targets-list::-webkit-scrollbar {
    width: 6px;
}

.match-targets-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.02);
    border-radius: 3px;
}

.match-targets-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.match-targets-list::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.15);
}

.match-target-item {
    display: block;
    cursor: pointer;
    margin-bottom: 8px;
}

.match-target-item input[type="checkbox"] {
    display: none;
}

.match-target-item .transaction-card.target {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
}

.match-target-item:hover .transaction-card.target {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.match-target-item input[type="checkbox"]:checked + .transaction-card.target {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.08);
}

/* Match Score Badge */
.match-score-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
}

.match-score-badge.high {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.match-score-badge.medium {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.match-score-badge.low {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.match-score-badge .score-value {
    font-size: 1.1rem;
    font-weight: 700;
}

.match-score-badge .score-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.8;
}

/* Transaction Details */
.txn-details {
    flex: 1;
    min-width: 0;
}

.txn-primary {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 4px;
}

.txn-date {
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
}

.txn-desc {
    color: #fff;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.txn-secondary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.txn-ref {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
}

.txn-variance {
    font-size: 0.8rem;
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    padding: 2px 6px;
    border-radius: 4px;
}

.txn-variance.zero {
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.txn-variance.positive {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.txn-variance.negative {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.txn-amount-col {
    text-align: right;
    flex-shrink: 0;
}

.txn-amount {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
}

/* No Matches */
.no-matches {
    text-align: center;
    padding: 40px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.no-matches-icon {
    display: block;
    margin-bottom: 16px;
}

.no-matches-icon svg {
    width: 48px;
    height: 48px;
    opacity: 0.3;
}

.no-matches p {
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.7);
}

/* Selection Summary */
.match-selection-summary {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.match-selection-summary.variance-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.3);
}

.summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 0.9rem;
}

.summary-row span:first-child {
    color: rgba(255, 255, 255, 0.6);
}

.summary-row span:last-child {
    font-weight: 600;
    color: #fff;
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
}

.summary-row.variance span:last-child.zero {
    color: #10b981;
}

.summary-row.variance span:last-child.positive {
    color: #f59e0b;
}

.summary-row.variance span:last-child.negative {
    color: #ef4444;
}

/* Tolerance Config */
.match-tolerance-config {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 14px 16px;
}

.tolerance-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 10px;
}

.tolerance-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #10b981;
}

.tolerance-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 28px;
}

.tolerance-input-group input[type="number"] {
    width: 100px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #fff;
    font-size: 0.9rem;
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
}

.tolerance-input-group input[type="number"]:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.5);
}

.tolerance-currency {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
}

.tolerance-hint {
    display: block;
    margin-left: 28px;
    margin-top: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-primary,
.btn-secondary,
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #10b981, #059669);
    color: #fff;
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

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

.btn-secondary {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.8);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.btn-danger {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

.audit-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    background: rgba(30, 32, 44, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 10001;
    opacity: 0;
    transition: all 0.3s ease;
}

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

.toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.toast-icon svg {
    width: 100%;
    height: 100%;
}

.toast-message {
    color: #fff;
    font-size: 0.9rem;
}

.audit-toast-success .toast-icon {
    color: #10b981;
}

.audit-toast-error .toast-icon {
    color: #ef4444;
}

.audit-toast-warning .toast-icon {
    color: #f59e0b;
}

.audit-toast-info .toast-icon {
    color: #6366f1;
}

/* ============================================
   DUPLICATE REVIEW MODAL
   ============================================ */

.duplicate-review-modal .audit-modal-body {
    padding: 20px 24px;
}

.duplicate-severity {
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.duplicate-severity.critical {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.duplicate-severity.high {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.duplicate-severity.medium {
    background: rgba(99, 102, 241, 0.15);
    color: #6366f1;
}

.duplicate-severity.low {
    background: rgba(107, 114, 128, 0.15);
    color: #9ca3af;
}

.duplicate-reason {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    margin-bottom: 20px;
}

.duplicate-transactions h4 {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.duplicate-item {
    display: grid;
    grid-template-columns: 40px 90px 1fr 100px;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.dup-idx {
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.85rem;
    font-weight: 500;
}

.dup-date {
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
}

.dup-desc {
    color: #fff;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dup-amount {
    text-align: right;
    font-weight: 600;
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    color: #fff;
}

/* Duplicate Review Modal - Enhanced Styles */

.duplicate-review-modal {
    max-width: 900px;
    width: 95%;
}

.duplicate-review-modal .audit-modal-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.duplicate-review-modal .audit-modal-header h3 svg {
    width: 24px;
    height: 24px;
    color: #f59e0b;
}

/* Alert Banner */
.duplicate-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 24px;
    position: relative;
}

.duplicate-alert.critical {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.duplicate-alert.high {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.06));
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.duplicate-alert.medium {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.06));
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.duplicate-alert.low {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.12), rgba(107, 114, 128, 0.06));
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.duplicate-alert .alert-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

.duplicate-alert .alert-icon svg {
    width: 100%;
    height: 100%;
}

.duplicate-alert.critical .alert-icon { color: #ef4444; }
.duplicate-alert.high .alert-icon { color: #f59e0b; }
.duplicate-alert.medium .alert-icon { color: #6366f1; }
.duplicate-alert.low .alert-icon { color: #9ca3af; }

.duplicate-alert .alert-content {
    flex: 1;
}

.duplicate-alert .alert-content strong {
    display: block;
    color: #fff;
    font-size: 1rem;
    margin-bottom: 4px;
}

.duplicate-alert .alert-content p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.duplicate-alert .alert-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.duplicate-alert.critical .alert-badge {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.duplicate-alert.high .alert-badge {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.duplicate-alert.medium .alert-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

.duplicate-alert.low .alert-badge {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Side-by-Side Comparison */
.duplicate-comparison {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.comparison-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.comparison-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comparison-icon {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.4);
}

.comparison-icon svg {
    width: 100%;
    height: 100%;
}

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: stretch;
}

.comparison-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.comparison-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.comparison-card .card-badge {
    font-size: 0.8rem;
    font-weight: 600;
    color: #10b981;
}

.comparison-card .source-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.05);
    padding: 3px 8px;
    border-radius: 4px;
}

.comparison-card .card-fields {
    padding: 16px;
}

.comparison-card .field-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.comparison-card .field-row:last-child {
    margin-bottom: 0;
}

.comparison-card .field-row.match {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.2);
}

.comparison-card .field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.comparison-card .field-label svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.comparison-card .field-value {
    font-size: 0.9rem;
    color: #fff;
    max-width: 180px;
    text-align: right;
}

.comparison-card .field-value.amount {
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    font-weight: 600;
}

.comparison-card .field-value.desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* VS Divider */
.comparison-divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.vs-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(245, 158, 11, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    color: #f59e0b;
    letter-spacing: 0.5px;
}

/* Match Summary */
.match-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.match-summary .summary-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.match-summary .summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.match-summary .match-badge {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 20px;
    color: #10b981;
}

.match-summary .no-match {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

/* Action Selection */
.duplicate-actions {
    margin-bottom: 24px;
}

.duplicate-actions h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 16px 0;
}

.action-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.action-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-option:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}

.action-option.selected {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.4);
}

.action-option input[type="radio"] {
    display: none;
}

.action-option .option-icon {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.2s ease;
}

.action-option .option-icon svg {
    width: 18px;
    height: 18px;
}

.action-option.selected .option-icon {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.action-option .option-content {
    flex: 1;
}

.action-option .option-content strong {
    display: block;
    font-size: 0.9rem;
    color: #fff;
    margin-bottom: 4px;
}

.action-option .option-content small {
    display: block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
}

.action-option.selected .option-content strong {
    color: #10b981;
}

/* Audit Note */
.duplicate-note {
    margin-bottom: 8px;
}

.duplicate-note label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

.duplicate-note label svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.duplicate-note .optional {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
}

.duplicate-note textarea {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    transition: all 0.2s ease;
}

.duplicate-note textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(16, 185, 129, 0.4);
}

.duplicate-note textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Footer buttons with icons */
.duplicate-review-modal .audit-modal-footer button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.duplicate-review-modal .audit-modal-footer button svg {
    width: 16px;
    height: 16px;
}

.duplicate-review-modal .audit-modal-footer button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   UNMATCH CONFIRMATION MODAL
   ============================================ */

.unmatch-modal {
    max-width: 560px;
    width: 95%;
}

.unmatch-modal .audit-modal-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.unmatch-modal .audit-modal-header h3 svg {
    width: 22px;
    height: 22px;
    color: #ef4444;
}

/* Warning Banner */
.unmatch-warning {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12), rgba(239, 68, 68, 0.06));
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 10px;
    margin-bottom: 20px;
}

.unmatch-warning .warning-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #ef4444;
}

.unmatch-warning .warning-icon svg {
    width: 100%;
    height: 100%;
}

.unmatch-warning .warning-text p {
    margin: 0;
    color: #fff;
    font-size: 0.95rem;
}

.unmatch-warning .warning-text p strong {
    color: #fff;
}

.unmatch-warning .warning-detail {
    margin-top: 8px !important;
    font-size: 0.875rem !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.5;
}

/* Match Details */
.unmatch-details {
    margin-bottom: 20px;
}

.unmatch-details h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 14px 0;
}

/* Transaction Cards Row */
.unmatch-transactions {
    display: flex;
    align-items: stretch;
    gap: 12px;
    margin-bottom: 16px;
}

.unmatch-txn-card {
    flex: 1;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
}

.unmatch-txn-card.source {
    border-color: rgba(99, 102, 241, 0.3);
}

.unmatch-txn-card.target {
    border-color: rgba(16, 185, 129, 0.3);
}

.unmatch-txn-card .txn-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.unmatch-txn-card .txn-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
}

.unmatch-txn-card .txn-badge.source {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

.unmatch-txn-card .txn-badge.target {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}

.unmatch-txn-card .txn-count {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.unmatch-txn-card .txn-card-body {
    padding: 12px 14px;
}

.unmatch-txn-card .txn-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 0.85rem;
}

.unmatch-txn-card .txn-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.unmatch-txn-card .txn-row.total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.unmatch-txn-card .txn-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.unmatch-txn-card .txn-label svg {
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

.unmatch-txn-card .txn-value {
    color: #fff;
    font-size: 0.85rem;
    max-width: 140px;
    text-align: right;
}

.unmatch-txn-card .txn-value.desc {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unmatch-txn-card .txn-value.amount {
    font-family: 'SF Mono', Monaco, 'Consolas', monospace;
    font-weight: 600;
    color: #fff;
}

/* Link Icon Between Cards */
.unmatch-link-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.3);
}

.unmatch-link-icon svg {
    width: 20px;
    height: 20px;
}

/* Match Info Grid */
.unmatch-info {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 12px 14px;
}

.unmatch-info .info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.85rem;
}

.unmatch-info .info-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.unmatch-info .info-label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.5);
}

.unmatch-info .info-label svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.unmatch-info .info-value {
    color: #fff;
}

.unmatch-info .info-value.manual {
    color: #f59e0b;
}

.unmatch-info .info-value.automatic {
    color: #10b981;
}

/* Unmatch Note */
.unmatch-note {
    margin-bottom: 8px;
}

.unmatch-note label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 10px;
}

.unmatch-note label svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.unmatch-note .optional {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: normal;
}

.unmatch-note textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    transition: all 0.2s ease;
}

.unmatch-note textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(239, 68, 68, 0.4);
}

.unmatch-note textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

/* Footer Buttons */
.unmatch-modal .audit-modal-footer button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.unmatch-modal .audit-modal-footer button svg {
    width: 16px;
    height: 16px;
}

/* Responsive - Unmatch Modal */
@media (max-width: 600px) {
    .unmatch-transactions {
        flex-direction: column;
    }

    .unmatch-link-icon {
        width: 100%;
        height: 24px;
        transform: rotate(90deg);
    }

    .unmatch-modal {
        width: 98%;
        max-height: 95vh;
    }
}

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

    .comparison-divider {
        padding: 8px 0;
    }

    .vs-badge {
        width: 32px;
        height: 32px;
        font-size: 0.7rem;
    }

    .action-options {
        grid-template-columns: 1fr;
    }

    .duplicate-review-modal {
        width: 98%;
        max-height: 95vh;
    }
}

/* ============================================
   LIGHT THEME - MODALS
   ============================================ */

[data-theme="light"] .audit-modal-overlay {
    background: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .audit-modal {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .audit-modal-header {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.5);
}

[data-theme="light"] .audit-modal-header h3 {
    color: #0f172a;
}

[data-theme="light"] .audit-modal-close {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.1);
    color: #64748b;
}

[data-theme="light"] .audit-modal-close:hover {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
    color: #dc2626;
}

[data-theme="light"] .audit-modal-footer {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(248, 250, 252, 0.5);
}

[data-theme="light"] .transaction-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .transaction-card.source {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(99, 102, 241, 0.02));
    border-color: rgba(99, 102, 241, 0.3);
}

[data-theme="light"] .match-source-section h4,
[data-theme="light"] .match-targets-header h4 {
    color: #475569;
}

[data-theme="light"] .match-count {
    color: #94a3b8;
}

[data-theme="light"] .txn-field-label {
    color: #64748b;
}

[data-theme="light"] .txn-field-value {
    color: #0f172a;
}

[data-theme="light"] .match-arrow {
    color: #94a3b8;
}

[data-theme="light"] .match-search input {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.1);
    color: #0f172a;
}

[data-theme="light"] .match-search input:focus {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(16, 185, 129, 0.5);
}

[data-theme="light"] .match-search input::placeholder {
    color: #94a3b8;
}

[data-theme="light"] .match-target-item:hover .transaction-card.target {
    background: rgba(15, 23, 42, 0.03);
    border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .match-target-item input[type="checkbox"]:checked + .transaction-card.target {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .txn-desc,
[data-theme="light"] .txn-amount {
    color: #0f172a;
}

[data-theme="light"] .txn-date,
[data-theme="light"] .txn-ref {
    color: #64748b;
}

[data-theme="light"] .match-selection-summary {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .match-selection-summary.variance-warning {
    background: rgba(245, 158, 11, 0.06);
    border-color: rgba(245, 158, 11, 0.25);
}

[data-theme="light"] .summary-row span:first-child {
    color: #64748b;
}

[data-theme="light"] .summary-row span:last-child {
    color: #0f172a;
}

[data-theme="light"] .match-tolerance-config {
    background: rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .tolerance-checkbox {
    color: #334155;
}

[data-theme="light"] .tolerance-input-group input[type="number"] {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

[data-theme="light"] .tolerance-currency {
    color: #64748b;
}

[data-theme="light"] .tolerance-hint {
    color: #94a3b8;
}

[data-theme="light"] .btn-secondary {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.15);
    color: #334155;
}

[data-theme="light"] .btn-secondary:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(15, 23, 42, 0.25);
    color: #0f172a;
}

[data-theme="light"] .no-matches {
    color: #64748b;
}

[data-theme="light"] .no-matches p {
    color: #475569;
}

[data-theme="light"] .audit-toast {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .toast-message {
    color: #0f172a;
}

[data-theme="light"] .duplicate-item {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .dup-idx {
    color: #94a3b8;
}

[data-theme="light"] .dup-date {
    color: #64748b;
}

[data-theme="light"] .dup-desc,
[data-theme="light"] .dup-amount {
    color: #0f172a;
}

[data-theme="light"] .duplicate-reason {
    color: #334155;
}

[data-theme="light"] .duplicate-transactions h4 {
    color: #64748b;
}

/* Light Theme - Duplicate Review Modal Enhanced */
[data-theme="light"] .duplicate-alert .alert-content strong {
    color: #0f172a;
}

[data-theme="light"] .duplicate-alert .alert-content p {
    color: #475569;
}

[data-theme="light"] .duplicate-comparison {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .comparison-header {
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .comparison-title {
    color: #334155;
}

[data-theme="light"] .comparison-icon {
    color: #94a3b8;
}

[data-theme="light"] .comparison-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .comparison-card .card-header {
    background: rgba(248, 250, 252, 0.8);
    border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .comparison-card .card-badge {
    color: #059669;
}

[data-theme="light"] .comparison-card .source-label {
    color: #64748b;
    background: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .comparison-card .field-row {
    background: rgba(15, 23, 42, 0.02);
}

[data-theme="light"] .comparison-card .field-row.match {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .comparison-card .field-label {
    color: #64748b;
}

[data-theme="light"] .comparison-card .field-value {
    color: #0f172a;
}

[data-theme="light"] .vs-badge {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(245, 158, 11, 0.08));
    border-color: rgba(245, 158, 11, 0.25);
    color: #d97706;
}

[data-theme="light"] .match-summary {
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .match-summary .summary-label {
    color: #64748b;
}

[data-theme="light"] .match-summary .match-badge {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.25);
    color: #059669;
}

[data-theme="light"] .match-summary .no-match {
    color: #94a3b8;
}

[data-theme="light"] .duplicate-actions h4 {
    color: #334155;
}

[data-theme="light"] .action-option {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .action-option:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(15, 23, 42, 0.15);
}

[data-theme="light"] .action-option.selected {
    background: rgba(16, 185, 129, 0.06);
    border-color: rgba(16, 185, 129, 0.4);
}

[data-theme="light"] .action-option .option-icon {
    background: rgba(15, 23, 42, 0.05);
    color: #64748b;
}

[data-theme="light"] .action-option.selected .option-icon {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

[data-theme="light"] .action-option .option-content strong {
    color: #0f172a;
}

[data-theme="light"] .action-option .option-content small {
    color: #64748b;
}

[data-theme="light"] .action-option.selected .option-content strong {
    color: #059669;
}

[data-theme="light"] .duplicate-note label {
    color: #334155;
}

[data-theme="light"] .duplicate-note .optional {
    color: #94a3b8;
}

[data-theme="light"] .duplicate-note textarea {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

[data-theme="light"] .duplicate-note textarea:focus {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(16, 185, 129, 0.5);
}

[data-theme="light"] .duplicate-note textarea::placeholder {
    color: #94a3b8;
}

/* Light Theme - Unmatch Modal */
[data-theme="light"] .unmatch-warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.04));
    border-color: rgba(239, 68, 68, 0.25);
}

[data-theme="light"] .unmatch-warning .warning-text p {
    color: #0f172a;
}

[data-theme="light"] .unmatch-warning .warning-text p strong {
    color: #0f172a;
}

[data-theme="light"] .unmatch-warning .warning-detail {
    color: #475569 !important;
}

[data-theme="light"] .unmatch-details h4 {
    color: #64748b;
}

[data-theme="light"] .unmatch-txn-card {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .unmatch-txn-card.source {
    border-color: rgba(99, 102, 241, 0.25);
}

[data-theme="light"] .unmatch-txn-card.target {
    border-color: rgba(16, 185, 129, 0.25);
}

[data-theme="light"] .unmatch-txn-card .txn-card-header {
    background: rgba(248, 250, 252, 0.8);
    border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .unmatch-txn-card .txn-count {
    color: #64748b;
}

[data-theme="light"] .unmatch-txn-card .txn-label {
    color: #64748b;
}

[data-theme="light"] .unmatch-txn-card .txn-value {
    color: #0f172a;
}

[data-theme="light"] .unmatch-link-icon {
    color: #94a3b8;
}

[data-theme="light"] .unmatch-info {
    background: rgba(15, 23, 42, 0.02);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .unmatch-info .info-label {
    color: #64748b;
}

[data-theme="light"] .unmatch-info .info-value {
    color: #0f172a;
}

[data-theme="light"] .unmatch-info .info-value.manual {
    color: #d97706;
}

[data-theme="light"] .unmatch-info .info-value.automatic {
    color: #059669;
}

[data-theme="light"] .unmatch-note label {
    color: #334155;
}

[data-theme="light"] .unmatch-note .optional {
    color: #94a3b8;
}

[data-theme="light"] .unmatch-note textarea {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(15, 23, 42, 0.15);
    color: #0f172a;
}

[data-theme="light"] .unmatch-note textarea:focus {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(239, 68, 68, 0.5);
}

[data-theme="light"] .unmatch-note textarea::placeholder {
    color: #94a3b8;
}

/* ============================================
   PROGRESS OVERLAY STYLES
   ============================================ */

.progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: progressOverlayFadeIn 0.3s ease-out;
}

@keyframes progressOverlayFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.progress-container {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.95), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    padding: 32px;
    width: 100%;
    max-width: 520px;
    margin: 20px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(148, 163, 184, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    animation: progressContainerSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes progressContainerSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.progress-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.progress-header .progress-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.2));
    border-radius: 12px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.progress-header .progress-icon svg {
    width: 24px;
    height: 24px;
    stroke: #60a5fa;
    animation: progressIconPulse 2s ease-in-out infinite;
}

@keyframes progressIconPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.95);
    }
}

.progress-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 4px 0;
}

.progress-header .progress-subtitle {
    font-size: 13px;
    color: #94a3b8;
}

/* Phase List */
.progress-phases {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.phase-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.08);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.phase-item.completed {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

.phase-item.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}

.phase-item.pending {
    opacity: 0.5;
}

.phase-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.phase-item.completed .phase-icon {
    background: rgba(16, 185, 129, 0.2);
}

.phase-item.completed .phase-icon svg {
    width: 16px;
    height: 16px;
    stroke: #10b981;
}

.phase-item.active .phase-icon {
    background: rgba(59, 130, 246, 0.2);
}

.phase-item.active .phase-icon svg {
    width: 16px;
    height: 16px;
    stroke: #60a5fa;
    animation: progressSpinner 1s linear infinite;
}

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

.phase-item.pending .phase-icon {
    background: rgba(148, 163, 184, 0.1);
}

.phase-item.pending .phase-icon svg {
    width: 16px;
    height: 16px;
    stroke: #64748b;
}

.phase-info {
    flex: 1;
    min-width: 0;
}

.phase-name {
    font-size: 13px;
    font-weight: 500;
    color: #e2e8f0;
    margin-bottom: 2px;
}

.phase-item.pending .phase-name {
    color: #64748b;
}

.phase-detail {
    font-size: 11px;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phase-item.pending .phase-detail {
    color: #475569;
}

.phase-progress {
    font-size: 12px;
    font-weight: 600;
    color: #60a5fa;
    min-width: 40px;
    text-align: right;
}

.phase-item.completed .phase-progress {
    color: #10b981;
}

.phase-item.pending .phase-progress {
    color: #475569;
}

/* Progress Bar Section */
.progress-bar-section {
    margin-bottom: 20px;
}

.progress-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.progress-bar-label {
    font-size: 13px;
    font-weight: 500;
    color: #e2e8f0;
}

.progress-bar-percent {
    font-size: 14px;
    font-weight: 700;
    color: #60a5fa;
}

.progress-bar-container {
    height: 10px;
    background: rgba(30, 41, 59, 0.8);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.1);
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd);
    background-size: 200% 100%;
    border-radius: 5px;
    transition: width 0.4s ease;
    animation: progressGradient 2s linear infinite;
    position: relative;
}

@keyframes progressGradient {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.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: progressShimmer 1.5s infinite;
}

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

/* Stats Grid */
.progress-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: rgba(30, 41, 59, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(148, 163, 184, 0.06);
}

.stat-value {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
}

.stat-label {
    font-size: 10px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Current Operation Display */
.current-operation {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
}

.current-operation .operation-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.current-operation .operation-icon svg {
    width: 20px;
    height: 20px;
    stroke: #60a5fa;
    animation: operationPulse 1.5s ease-in-out infinite;
}

@keyframes operationPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.current-operation .operation-text {
    font-size: 12px;
    color: #94a3b8;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cancel Button */
.progress-cancel {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.progress-cancel .btn-cancel {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #f87171;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.progress-cancel .btn-cancel:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
}

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

/* ============================================
   PROGRESS OVERLAY - LIGHT THEME
   ============================================ */

[data-theme="light"] .progress-overlay {
    background: rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .progress-container {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .progress-header {
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .progress-header .progress-icon {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(99, 102, 241, 0.1));
    border-color: rgba(59, 130, 246, 0.2);
}

[data-theme="light"] .progress-header .progress-icon svg {
    stroke: #3b82f6;
}

[data-theme="light"] .progress-header h3 {
    color: #0f172a;
}

[data-theme="light"] .progress-header .progress-subtitle {
    color: #64748b;
}

[data-theme="light"] .phase-item {
    background: rgba(248, 250, 252, 0.8);
    border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .phase-item.completed {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.15);
}

[data-theme="light"] .phase-item.active {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.2);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

[data-theme="light"] .phase-name {
    color: #1e293b;
}

[data-theme="light"] .phase-item.pending .phase-name {
    color: #94a3b8;
}

[data-theme="light"] .phase-detail {
    color: #64748b;
}

[data-theme="light"] .phase-item.pending .phase-detail {
    color: #cbd5e1;
}

[data-theme="light"] .phase-progress {
    color: #3b82f6;
}

[data-theme="light"] .phase-item.completed .phase-progress {
    color: #059669;
}

[data-theme="light"] .phase-item.pending .phase-progress {
    color: #cbd5e1;
}

[data-theme="light"] .progress-bar-label {
    color: #1e293b;
}

[data-theme="light"] .progress-bar-percent {
    color: #3b82f6;
}

[data-theme="light"] .progress-bar-container {
    background: rgba(241, 245, 249, 0.9);
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .progress-stats {
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .stat-item {
    background: rgba(248, 250, 252, 0.6);
    border-color: rgba(15, 23, 42, 0.04);
}

[data-theme="light"] .stat-value {
    color: #0f172a;
}

[data-theme="light"] .stat-label {
    color: #94a3b8;
}

[data-theme="light"] .current-operation {
    background: rgba(59, 130, 246, 0.06);
    border-color: rgba(59, 130, 246, 0.15);
}

[data-theme="light"] .current-operation .operation-icon svg {
    stroke: #3b82f6;
}

[data-theme="light"] .current-operation .operation-text {
    color: #64748b;
}

[data-theme="light"] .progress-cancel {
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .progress-cancel .btn-cancel {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
    color: #dc2626;
}

[data-theme="light"] .progress-cancel .btn-cancel:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.35);
}

/* ============================================
   CREDIT MODAL STYLES
   ============================================ */

.audit-credit-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.audit-credit-modal-overlay.active {
    opacity: 1;
}

.audit-credit-modal {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.99));
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    width: 100%;
    max-width: 450px;
    margin: 20px;
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(148, 163, 184, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transform: translateY(-20px) scale(0.95);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.audit-credit-modal-overlay.active .audit-credit-modal {
    transform: translateY(0) scale(1);
}

/* Modal Header */
.audit-credit-modal-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 24px 20px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.audit-credit-modal-header.warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
}

.audit-credit-modal-header .header-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
    border-radius: 12px;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.audit-credit-modal-header.warning .header-icon {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(239, 68, 68, 0.1));
    border-color: rgba(239, 68, 68, 0.3);
}

.audit-credit-modal-header .header-icon svg {
    width: 22px;
    height: 22px;
    stroke: #a78bfa;
}

.audit-credit-modal-header.warning .header-icon svg {
    stroke: #f87171;
}

.audit-credit-modal-header .header-text {
    flex: 1;
}

.audit-credit-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #f1f5f9;
    margin: 0 0 4px 0;
}

.audit-credit-modal-header .header-subtitle {
    font-size: 13px;
    color: #94a3b8;
}

.modal-close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(148, 163, 184, 0.1);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close-btn svg {
    width: 18px;
    height: 18px;
    stroke: #94a3b8;
}

.modal-close-btn:hover {
    background: rgba(148, 163, 184, 0.2);
}

.modal-close-btn:hover svg {
    stroke: #f1f5f9;
}

/* Modal Body */
.audit-credit-modal-body {
    padding: 24px;
}

/* Cost Summary */
.cost-summary {
    text-align: center;
    padding: 28px 24px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(139, 92, 246, 0.08));
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid rgba(99, 102, 241, 0.2);
}

.cost-total {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.cost-credits-value {
    font-size: 3rem;
    font-weight: 700;
    background: linear-gradient(135deg, #a78bfa, #818cf8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.cost-credits-label {
    font-size: 1.25rem;
    color: #a78bfa;
    font-weight: 500;
}

.cost-chf {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.5);
}

.cost-chf-symbol {
    font-size: 0.875rem;
}

.cost-chf-value {
    font-size: 1.125rem;
    font-weight: 500;
}

.cost-capped-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    font-size: 12px;
    color: #94a3b8;
}

.cost-capped-notice .capped-icon svg {
    width: 14px;
    height: 14px;
    stroke: #94a3b8;
}

/* Cost Breakdown Table */
.cost-breakdown {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 10px;
    padding: 16px;
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.cost-breakdown h4 {
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.cost-breakdown table {
    width: 100%;
    border-collapse: collapse;
}

.cost-breakdown tbody tr {
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

.cost-breakdown tbody tr:last-child {
    border-bottom: none;
}

.cost-breakdown td {
    padding: 10px 0;
    font-size: 13px;
}

.cost-breakdown .item-name {
    color: #e2e8f0;
}

.cost-breakdown .item-count {
    text-align: center;
    color: #64748b;
    font-size: 12px;
}

.cost-breakdown .item-credits {
    text-align: right;
    color: #a78bfa;
    font-weight: 500;
}

.cost-capped-badge {
    display: inline-block;
    font-size: 9px;
    padding: 2px 6px;
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    border-radius: 4px;
    margin-left: 6px;
    text-transform: uppercase;
    font-weight: 600;
}

.cost-breakdown tfoot tr {
    border-top: 1px solid rgba(148, 163, 184, 0.15);
}

.cost-breakdown tfoot td {
    padding-top: 14px;
}

/* Modal Footer */
.audit-credit-modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
}

.btn-credit-secondary,
.btn-credit-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.btn-credit-secondary {
    background: rgba(148, 163, 184, 0.1);
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.2);
}

.btn-credit-secondary:hover {
    background: rgba(148, 163, 184, 0.15);
    color: #e2e8f0;
}

.btn-credit-primary {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.btn-credit-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.btn-credit-primary .btn-icon svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.btn-credit-primary.buy-credits {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn-credit-primary.buy-credits:hover {
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

/* Insufficient Credits Modal */
.insufficient-credits-modal .credits-warning-message {
    text-align: center;
    margin-bottom: 24px;
}

.insufficient-credits-modal .credits-warning-message p {
    font-size: 16px;
    color: #f1f5f9;
    margin: 0 0 8px 0;
}

.insufficient-credits-modal .credits-warning-message strong {
    color: #f87171;
}

.insufficient-credits-modal .warning-chf {
    font-size: 13px;
    color: #64748b;
}

.credits-status-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.credits-status-grid .status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px 12px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.credits-status-grid .status-label {
    font-size: 11px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.credits-status-grid .status-value {
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
}

.credits-status-grid .status-item.shortfall {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.2);
}

.credits-status-grid .status-item.shortfall .status-value {
    color: #f87171;
}

.credit-packages-hint {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 10px;
    border: 1px solid rgba(16, 185, 129, 0.15);
}

.credit-packages-hint .hint-icon {
    flex-shrink: 0;
}

.credit-packages-hint .hint-icon svg {
    width: 20px;
    height: 20px;
    stroke: #10b981;
}

.credit-packages-hint .hint-text strong {
    display: block;
    font-size: 13px;
    color: #e2e8f0;
    margin-bottom: 8px;
}

.credit-packages-hint .hint-text ul {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 12px;
    color: #94a3b8;
}

.credit-packages-hint .hint-text li {
    margin-bottom: 4px;
}

/* Processing Cost Display */
.processing-cost-display {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
}

.processing-cost-display .cost-display-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(30, 41, 59, 0.9);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 8px;
    backdrop-filter: blur(8px);
}

.processing-cost-display .cost-icon svg {
    width: 16px;
    height: 16px;
    stroke: #a78bfa;
}

.processing-cost-display .cost-value {
    font-size: 16px;
    font-weight: 700;
    color: #a78bfa;
}

.processing-cost-display .cost-label {
    font-size: 11px;
    color: #64748b;
}

/* Credit Toast Notifications */
.credit-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10002;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.credit-toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transform: translateX(120%);
    transition: transform 0.3s ease;
}

.credit-toast.visible {
    transform: translateX(0);
}

.credit-toast .toast-icon svg {
    width: 18px;
    height: 18px;
}

.credit-toast .toast-message {
    font-size: 13px;
    color: #e2e8f0;
}

.credit-toast-success .toast-icon svg {
    stroke: #10b981;
}

.credit-toast-warning .toast-icon svg {
    stroke: #fbbf24;
}

.credit-toast-error .toast-icon svg {
    stroke: #f87171;
}

.credit-toast-info .toast-icon svg {
    stroke: #60a5fa;
}

/* ============================================
   CREDIT MODAL - LIGHT THEME
   ============================================ */

[data-theme="light"] .audit-credit-modal-overlay {
    background: rgba(255, 255, 255, 0.85);
}

[data-theme="light"] .audit-credit-modal {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow:
        0 25px 50px -12px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .audit-credit-modal-header {
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .audit-credit-modal-header.warning {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03));
}

[data-theme="light"] .audit-credit-modal-header .header-icon {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .audit-credit-modal-header h3 {
    color: #0f172a;
}

[data-theme="light"] .audit-credit-modal-header .header-subtitle {
    color: #64748b;
}

[data-theme="light"] .modal-close-btn {
    background: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .modal-close-btn:hover {
    background: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .modal-close-btn:hover svg {
    stroke: #0f172a;
}

[data-theme="light"] .cost-summary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(139, 92, 246, 0.05));
    border-color: rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .cost-chf {
    color: rgba(15, 23, 42, 0.5);
}

[data-theme="light"] .cost-breakdown {
    background: rgba(248, 250, 252, 0.8);
    border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .cost-breakdown h4 {
    color: #64748b;
}

[data-theme="light"] .cost-breakdown tbody tr {
    border-color: rgba(15, 23, 42, 0.05);
}

[data-theme="light"] .cost-breakdown .item-name {
    color: #1e293b;
}

[data-theme="light"] .cost-breakdown .item-count {
    color: #94a3b8;
}

[data-theme="light"] .cost-breakdown .item-credits {
    color: #7c3aed;
}

[data-theme="light"] .cost-breakdown tfoot tr {
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .audit-credit-modal-footer {
    border-color: rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .btn-credit-secondary {
    background: rgba(15, 23, 42, 0.05);
    color: #64748b;
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .btn-credit-secondary:hover {
    background: rgba(15, 23, 42, 0.1);
    color: #1e293b;
}

[data-theme="light"] .insufficient-credits-modal .credits-warning-message p {
    color: #0f172a;
}

[data-theme="light"] .credits-status-grid .status-item {
    background: rgba(248, 250, 252, 0.6);
    border-color: rgba(15, 23, 42, 0.06);
}

[data-theme="light"] .credits-status-grid .status-value {
    color: #0f172a;
}

[data-theme="light"] .credits-status-grid .status-item.shortfall {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.12);
}

[data-theme="light"] .credit-packages-hint {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.1);
}

[data-theme="light"] .credit-packages-hint .hint-text strong {
    color: #1e293b;
}

[data-theme="light"] .processing-cost-display .cost-display-inner {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
}

[data-theme="light"] .credit-toast {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(15, 23, 42, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .credit-toast .toast-message {
    color: #1e293b;
}

/* ============================================
   ONBOARDING WIZARD STYLES
   ============================================ */

.onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.onboarding-overlay.visible {
    opacity: 1;
}

.onboarding-overlay.closing {
    opacity: 0;
}

.onboarding-wizard {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    background: linear-gradient(135deg, rgba(30, 32, 44, 0.98), rgba(20, 22, 34, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 40px;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.onboarding-overlay.visible .onboarding-wizard {
    transform: translateY(0);
}

/* Close button */
.onboarding-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Progress dots */
.onboarding-progress {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 32px;
}

.progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
    cursor: pointer;
}

.progress-dot:hover {
    background: rgba(255, 255, 255, 0.4);
}

.progress-dot.active {
    background: #6366f1;
    transform: scale(1.2);
}

.progress-dot.complete {
    background: #10b981;
}

/* Content area */
.onboarding-content {
    transition: opacity 0.2s ease;
}

.onboarding-content.transitioning {
    opacity: 0;
}

.onboarding-header {
    text-align: center;
    margin-bottom: 32px;
}

.onboarding-header h2 {
    margin: 0 0 8px 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: #fff;
}

.onboarding-header p {
    margin: 0;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.onboarding-body {
    margin-bottom: 32px;
}

/* Feature grid (Step 1) */
.onboarding-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s;
}

.feature-item:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
    border-radius: 10px;
    color: #6366f1;
    flex-shrink: 0;
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feature-text strong {
    color: #fff;
    font-size: 0.95rem;
}

.feature-text span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

/* Document types (Step 2) */
.onboarding-document-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.doc-category h4 {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.doc-category ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.doc-category li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: #fff;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.doc-category li:last-child {
    border-bottom: none;
}

.doc-icon {
    display: flex;
    color: rgba(255, 255, 255, 0.5);
}

.onboarding-privacy-note {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
}

.privacy-icon {
    color: #10b981;
    flex-shrink: 0;
}

.onboarding-privacy-note p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

/* Reconciliation types (Step 3) */
.onboarding-recon-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.recon-type-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.2s;
}

.recon-type-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.12);
}

.recon-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    color: var(--color);
    flex-shrink: 0;
}

.recon-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.recon-info strong {
    color: #fff;
    font-size: 0.9rem;
}

.recon-info span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Results guide (Step 4) */
.onboarding-results-guide {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.result-type {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.result-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.result-indicator.matched {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.result-indicator.unmatched {
    background: #ef4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.result-indicator.duplicate {
    background: #f59e0b;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5);
}

.result-indicator.variance {
    background: #6366f1;
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
}

.result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.result-info strong {
    color: #fff;
    font-size: 0.9rem;
}

.result-info span {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

.onboarding-tip {
    display: flex;
    gap: 14px;
    padding: 16px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 12px;
}

.tip-icon {
    color: #6366f1;
    flex-shrink: 0;
}

.onboarding-tip p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

/* Actions */
.onboarding-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.onboarding-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-actions .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.onboarding-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-actions .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.onboarding-actions .btn-text {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 12px 16px;
    transition: color 0.2s;
}

.onboarding-actions .btn-text:hover {
    color: rgba(255, 255, 255, 0.8);
}

/* Step text */
.onboarding-step-text {
    text-align: center;
    margin-top: 20px;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
}

/* Keyboard hint */
.onboarding-keyboard-hint {
    text-align: center;
    margin-top: 12px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
}

.onboarding-keyboard-hint kbd {
    display: inline-block;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
    margin: 0 2px;
}

/* ============================================
   ONBOARDING WIZARD - LIGHT THEME
   ============================================ */

[data-theme="light"] .onboarding-overlay,
body.light-theme .onboarding-overlay {
    background: rgba(0, 0, 0, 0.6);
}

[data-theme="light"] .onboarding-wizard,
body.light-theme .onboarding-wizard {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .onboarding-close,
body.light-theme .onboarding-close {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .onboarding-close:hover,
body.light-theme .onboarding-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1e293b;
}

[data-theme="light"] .progress-dot,
body.light-theme .progress-dot {
    background: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .progress-dot:hover,
body.light-theme .progress-dot:hover {
    background: rgba(0, 0, 0, 0.25);
}

[data-theme="light"] .onboarding-header h2,
body.light-theme .onboarding-header h2 {
    color: #1e293b;
}

[data-theme="light"] .onboarding-header p,
body.light-theme .onboarding-header p {
    color: #64748b;
}

[data-theme="light"] .feature-item,
body.light-theme .feature-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .feature-item:hover,
body.light-theme .feature-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .feature-text strong,
body.light-theme .feature-text strong {
    color: #1e293b;
}

[data-theme="light"] .feature-text span,
body.light-theme .feature-text span {
    color: #64748b;
}

[data-theme="light"] .doc-category h4,
body.light-theme .doc-category h4 {
    color: #64748b;
}

[data-theme="light"] .doc-category li,
body.light-theme .doc-category li {
    color: #1e293b;
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .doc-icon,
body.light-theme .doc-icon {
    color: #64748b;
}

[data-theme="light"] .onboarding-privacy-note,
body.light-theme .onboarding-privacy-note {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.15);
}

[data-theme="light"] .onboarding-privacy-note p,
body.light-theme .onboarding-privacy-note p {
    color: #334155;
}

[data-theme="light"] .recon-type-card,
body.light-theme .recon-type-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .recon-type-card:hover,
body.light-theme .recon-type-card:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .recon-icon,
body.light-theme .recon-icon {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .recon-info strong,
body.light-theme .recon-info strong {
    color: #1e293b;
}

[data-theme="light"] .recon-info span,
body.light-theme .recon-info span {
    color: #64748b;
}

[data-theme="light"] .result-type,
body.light-theme .result-type {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .result-info strong,
body.light-theme .result-info strong {
    color: #1e293b;
}

[data-theme="light"] .result-info span,
body.light-theme .result-info span {
    color: #64748b;
}

[data-theme="light"] .onboarding-tip,
body.light-theme .onboarding-tip {
    background: rgba(99, 102, 241, 0.08);
    border-color: rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .onboarding-tip p,
body.light-theme .onboarding-tip p {
    color: #334155;
}

[data-theme="light"] .onboarding-actions,
body.light-theme .onboarding-actions {
    border-top-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .onboarding-actions .btn-secondary,
body.light-theme .onboarding-actions .btn-secondary {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #475569;
}

[data-theme="light"] .onboarding-actions .btn-secondary:hover,
body.light-theme .onboarding-actions .btn-secondary:hover {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .onboarding-actions .btn-text,
body.light-theme .onboarding-actions .btn-text {
    color: #64748b;
}

[data-theme="light"] .onboarding-actions .btn-text:hover,
body.light-theme .onboarding-actions .btn-text:hover {
    color: #1e293b;
}

[data-theme="light"] .onboarding-step-text,
body.light-theme .onboarding-step-text {
    color: #94a3b8;
}

[data-theme="light"] .onboarding-keyboard-hint,
body.light-theme .onboarding-keyboard-hint {
    color: #94a3b8;
}

[data-theme="light"] .onboarding-keyboard-hint kbd,
body.light-theme .onboarding-keyboard-hint kbd {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

/* ============================================
   ONBOARDING WIZARD - RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .onboarding-wizard {
        margin: 16px;
        padding: 24px;
        max-height: calc(100vh - 32px);
    }

    .onboarding-feature-grid,
    .onboarding-document-types,
    .onboarding-recon-types {
        grid-template-columns: 1fr;
    }

    .onboarding-header h2 {
        font-size: 1.5rem;
    }

    .onboarding-actions {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .onboarding-actions .actions-left,
    .onboarding-actions .actions-right {
        width: 100%;
    }

    .onboarding-actions .btn-primary,
    .onboarding-actions .btn-secondary {
        width: 100%;
        justify-content: center;
    }

    .onboarding-keyboard-hint {
        display: none;
    }
}

/* ============================================
   CONTEXTUAL HELP SYSTEM STYLES
   ============================================ */

/* Help trigger button */
.help-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    padding: 2px;
    border-radius: 50%;
    transition: all 0.2s ease;
    vertical-align: middle;
    flex-shrink: 0;
}

.help-trigger:hover {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.help-trigger:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}

.help-trigger.active {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.2);
}

.help-trigger--inline {
    margin-left: 6px;
}

.help-trigger--sm {
    width: 18px;
    height: 18px;
}

.help-trigger--sm svg {
    width: 14px;
    height: 14px;
}

.help-trigger--md {
    width: 24px;
    height: 24px;
}

.help-trigger--md svg {
    width: 16px;
    height: 16px;
}

/* Help tooltip container */
.help-tooltip {
    position: fixed;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: linear-gradient(135deg, rgba(40, 42, 54, 0.98), rgba(30, 32, 44, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 14px;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 20px 40px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 100001;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.help-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Tooltip arrow */
.help-tooltip::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: rgba(40, 42, 54, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-right: none;
    border-bottom: none;
    left: var(--arrow-left, 50%);
    margin-left: -6px;
}

.help-tooltip[data-arrow="top"]::before {
    top: -7px;
    transform: rotate(45deg);
}

.help-tooltip[data-arrow="bottom"]::before {
    bottom: -7px;
    transform: rotate(225deg);
}

.help-tooltip[data-arrow="none"]::before {
    display: none;
}

/* Tooltip header */
.help-tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.help-tooltip-header h4 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}

.help-tooltip-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.help-tooltip-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Tooltip body */
.help-tooltip-body {
    padding: 16px;
}

.help-description {
    margin: 0 0 14px 0;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.5;
}

.help-description:last-child {
    margin-bottom: 0;
}

/* Help details list */
.help-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.help-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.help-detail-item .detail-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #6366f1;
}

.help-detail-item .detail-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.4;
}

/* Help tip box */
.help-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
}

.help-tip svg {
    color: #f59e0b;
    flex-shrink: 0;
    margin-top: 1px;
}

.help-tip span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.4;
}

/* Tooltip footer */
.help-tooltip-footer {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.help-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #6366f1;
    text-decoration: none;
    transition: color 0.2s;
}

.help-learn-more:hover {
    color: #8b5cf6;
}

.help-learn-more svg {
    flex-shrink: 0;
}

/* ============================================
   CONTEXTUAL HELP - LIGHT THEME
   ============================================ */

[data-theme="light"] .help-trigger,
body.light-theme .help-trigger {
    color: rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .help-trigger:hover,
body.light-theme .help-trigger:hover {
    color: rgba(0, 0, 0, 0.7);
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .help-trigger.active,
body.light-theme .help-trigger.active {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.15);
}

[data-theme="light"] .help-tooltip,
body.light-theme .help-tooltip {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06),
        0 20px 40px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .help-tooltip::before,
body.light-theme .help-tooltip::before {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .help-tooltip-header,
body.light-theme .help-tooltip-header {
    background: rgba(0, 0, 0, 0.02);
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .help-tooltip-header h4,
body.light-theme .help-tooltip-header h4 {
    color: #1f2937;
}

[data-theme="light"] .help-tooltip-close,
body.light-theme .help-tooltip-close {
    background: rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.5);
}

[data-theme="light"] .help-tooltip-close:hover,
body.light-theme .help-tooltip-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1f2937;
}

[data-theme="light"] .help-description,
body.light-theme .help-description {
    color: #4b5563;
}

[data-theme="light"] .help-detail-item,
body.light-theme .help-detail-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .help-detail-item .detail-text,
body.light-theme .help-detail-item .detail-text {
    color: #6b7280;
}

[data-theme="light"] .help-tip,
body.light-theme .help-tip {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.15);
}

[data-theme="light"] .help-tip span,
body.light-theme .help-tip span {
    color: #4b5563;
}

[data-theme="light"] .help-tooltip-footer,
body.light-theme .help-tooltip-footer {
    border-top-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}

/* ============================================
   CONTEXTUAL HELP - RESPONSIVE
   ============================================ */

@media (max-width: 400px) {
    .help-tooltip {
        width: calc(100vw - 24px);
        left: 12px !important;
        right: 12px;
    }

    .help-tooltip::before {
        display: none;
    }
}

/* ============================================
   KEYBOARD SHORTCUTS - SELECTION HIGHLIGHT
   ============================================ */

.keyboard-selected {
    outline: 2px solid #6366f1 !important;
    outline-offset: 2px;
    background: rgba(99, 102, 241, 0.1) !important;
    position: relative;
}

.keyboard-selected::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 8px;
    pointer-events: none;
    animation: keyboardSelectPulse 2s ease-in-out infinite;
}

@keyframes keyboardSelectPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(99, 102, 241, 0);
    }
}

/* Light theme selection */
[data-theme="light"] .keyboard-selected,
body.light-theme .keyboard-selected {
    outline-color: #4f46e5;
    background: rgba(79, 70, 229, 0.08) !important;
}

/* ============================================
   KEYBOARD SHORTCUTS - MODAL
   ============================================ */

.shortcuts-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100002;
    animation: shortcutsModalFadeIn 0.2s ease;
}

@keyframes shortcutsModalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.shortcuts-modal {
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    background: linear-gradient(135deg, rgba(30, 32, 44, 0.98), rgba(20, 22, 34, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: shortcutsModalSlideIn 0.3s ease;
}

@keyframes shortcutsModalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.shortcuts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.shortcuts-header h3 {
    margin: 0;
    color: #fff;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
}

.shortcuts-header h3 svg {
    color: #6366f1;
}

.shortcuts-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.2s;
}

.shortcuts-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.shortcuts-close:focus {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.shortcuts-body {
    padding: 24px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.shortcut-category {
    break-inside: avoid;
}

.shortcut-category h4 {
    margin: 0 0 12px 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.shortcut-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
}

.shortcut-item kbd {
    min-width: 48px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 0.75rem;
    color: #fff;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.shortcut-item span {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.shortcuts-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.shortcuts-footer span {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
}

.shortcuts-footer kbd {
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.7rem;
    color: #fff;
}

.shortcuts-tip {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* Light theme shortcuts modal */
[data-theme="light"] .shortcuts-modal,
body.light-theme .shortcuts-modal {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .shortcuts-header,
body.light-theme .shortcuts-header {
    border-bottom-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .shortcuts-header h3,
body.light-theme .shortcuts-header h3 {
    color: #1f2937;
}

[data-theme="light"] .shortcuts-close,
body.light-theme .shortcuts-close {
    background: rgba(0, 0, 0, 0.05);
    color: #6b7280;
}

[data-theme="light"] .shortcuts-close:hover,
body.light-theme .shortcuts-close:hover {
    background: rgba(0, 0, 0, 0.1);
    color: #1f2937;
}

[data-theme="light"] .shortcut-category h4,
body.light-theme .shortcut-category h4 {
    color: #9ca3af;
}

[data-theme="light"] .shortcut-item kbd,
body.light-theme .shortcut-item kbd {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #1f2937;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .shortcut-item span,
body.light-theme .shortcut-item span {
    color: #4b5563;
}

[data-theme="light"] .shortcuts-footer,
body.light-theme .shortcuts-footer {
    border-top-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .shortcuts-footer span,
body.light-theme .shortcuts-footer span {
    color: #9ca3af;
}

[data-theme="light"] .shortcuts-footer kbd,
body.light-theme .shortcuts-footer kbd {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #1f2937;
}

/* ============================================
   KEYBOARD SHORTCUTS - TOAST NOTIFICATIONS
   ============================================ */

.audit-keyboard-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(30, 32, 44, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 0.875rem;
    z-index: 100003;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
}

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

.audit-keyboard-toast .toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.audit-keyboard-toast .toast-icon svg {
    width: 18px;
    height: 18px;
}

.audit-keyboard-toast .toast-message {
    white-space: nowrap;
}

/* Toast variants */
.audit-keyboard-toast--success {
    border-color: rgba(16, 185, 129, 0.3);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(30, 32, 44, 0.95));
}

.audit-keyboard-toast--success .toast-icon {
    color: #10b981;
}

.audit-keyboard-toast--error {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(30, 32, 44, 0.95));
}

.audit-keyboard-toast--error .toast-icon {
    color: #ef4444;
}

.audit-keyboard-toast--info {
    border-color: rgba(99, 102, 241, 0.3);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(30, 32, 44, 0.95));
}

.audit-keyboard-toast--info .toast-icon {
    color: #6366f1;
}

.audit-keyboard-toast--warning {
    border-color: rgba(245, 158, 11, 0.3);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(30, 32, 44, 0.95));
}

.audit-keyboard-toast--warning .toast-icon {
    color: #f59e0b;
}

/* Light theme toast */
[data-theme="light"] .audit-keyboard-toast,
body.light-theme .audit-keyboard-toast {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    color: #1f2937;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .audit-keyboard-toast--success,
body.light-theme .audit-keyboard-toast--success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(255, 255, 255, 0.95));
    border-color: rgba(16, 185, 129, 0.2);
}

[data-theme="light"] .audit-keyboard-toast--error,
body.light-theme .audit-keyboard-toast--error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(255, 255, 255, 0.95));
    border-color: rgba(239, 68, 68, 0.2);
}

[data-theme="light"] .audit-keyboard-toast--info,
body.light-theme .audit-keyboard-toast--info {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(255, 255, 255, 0.95));
    border-color: rgba(99, 102, 241, 0.2);
}

[data-theme="light"] .audit-keyboard-toast--warning,
body.light-theme .audit-keyboard-toast--warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(255, 255, 255, 0.95));
    border-color: rgba(245, 158, 11, 0.2);
}

/* ============================================
   KEYBOARD SHORTCUTS - BUTTON HINTS
   ============================================ */

.has-shortcut {
    position: relative;
}

.has-shortcut::after {
    content: attr(data-shortcut);
    margin-left: 8px;
    padding: 2px 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, monospace;
    font-size: 0.65rem;
    font-weight: 500;
    opacity: 0.6;
    vertical-align: middle;
}

[data-theme="light"] .has-shortcut::after,
body.light-theme .has-shortcut::after {
    background: rgba(0, 0, 0, 0.08);
}

/* Shortcut hint on hover */
.shortcut-hint-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: rgba(30, 32, 44, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    z-index: 1000;
}

.shortcut-hint-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: rgba(30, 32, 44, 0.95);
}

*:hover > .shortcut-hint-tooltip {
    opacity: 1;
    visibility: visible;
}

/* ============================================
   KEYBOARD SHORTCUTS - RESPONSIVE
   ============================================ */

@media (max-width: 700px) {
    .shortcuts-modal {
        max-width: calc(100vw - 32px);
        max-height: 90vh;
    }

    .shortcuts-body {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .shortcuts-footer {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .shortcuts-header {
        padding: 16px 20px;
    }

    .shortcuts-body {
        padding: 20px;
    }

    .shortcut-item kbd {
        min-width: 40px;
        padding: 5px 8px;
        font-size: 0.7rem;
    }

    .shortcut-item span {
        font-size: 0.8rem;
    }

    .audit-keyboard-toast {
        left: 16px;
        right: 16px;
        transform: translateX(0) translateY(100px);
        bottom: 16px;
    }

    .audit-keyboard-toast.visible {
        transform: translateX(0) translateY(0);
    }
}

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

/* ============================================
   COLLABORATION - SHARE DIALOG
   ============================================ */

.share-dialog-overlay {
    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: 10000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.share-dialog-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.share-dialog {
    background: var(--surface-color, #ffffff);
    border-radius: 12px;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.share-dialog-overlay.visible .share-dialog {
    transform: scale(1);
}

.share-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.share-dialog-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.share-dialog-title svg {
    color: var(--primary-color, #3b82f6);
}

.share-dialog-close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--text-secondary, #6b7280);
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.share-dialog-close:hover {
    background: var(--hover-bg, #f3f4f6);
    color: var(--text-primary, #111827);
}

.share-dialog-subtitle {
    padding: 0 24px 16px;
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.reconciliation-name {
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.share-dialog-content {
    padding: 0 24px;
    max-height: 400px;
    overflow-y: auto;
}

/* Add member section */
.share-add-section {
    margin-bottom: 16px;
}

.share-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--surface-secondary, #f9fafb);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    padding: 4px 4px 4px 12px;
    transition: border-color 0.15s ease;
}

.share-input-group:focus-within {
    border-color: var(--primary-color, #3b82f6);
}

.share-input-icon {
    color: var(--text-secondary, #6b7280);
    display: flex;
}

.share-email-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 0.9rem;
    color: var(--text-primary, #111827);
    min-width: 0;
}

.share-email-input:focus {
    outline: none;
}

.share-email-input::placeholder {
    color: var(--text-secondary, #9ca3af);
}

.share-permission-select {
    border: none;
    background: transparent;
    padding: 8px;
    font-size: 0.85rem;
    color: var(--text-primary, #111827);
    cursor: pointer;
}

.share-permission-select:focus {
    outline: none;
}

.share-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.share-add-btn:hover:not(:disabled) {
    background: var(--primary-hover, #2563eb);
}

.share-add-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-add-btn .btn-loading {
    display: none;
}

.share-add-btn.loading .btn-text {
    display: none;
}

.share-add-btn.loading .btn-loading {
    display: inline-flex;
}

.share-input-error {
    display: none;
    margin-top: 8px;
    font-size: 0.8rem;
    color: var(--error-color, #ef4444);
}

/* Copy link section */
.share-link-section {
    margin-bottom: 16px;
}

.share-copy-link-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: none;
    border: 1px dashed var(--border-color, #d1d5db);
    border-radius: 8px;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.share-copy-link-btn:hover {
    border-color: var(--primary-color, #3b82f6);
    color: var(--primary-color, #3b82f6);
    background: var(--primary-bg, rgba(59, 130, 246, 0.05));
}

/* Divider */
.share-divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: var(--text-secondary, #6b7280);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

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

.share-divider span {
    padding: 0 12px;
}

/* Shares list */
.share-list-container {
    margin-bottom: 20px;
}

.share-list-loading {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 24px;
    color: var(--text-secondary, #6b7280);
}

.share-list-loading .spin {
    animation: spin 1s linear infinite;
}

.share-list-empty {
    display: none;
    text-align: center;
    padding: 24px;
    color: var(--text-secondary, #9ca3af);
    font-size: 0.875rem;
}

.share-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-color, #f3f4f6);
}

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

.share-item-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.share-item-info {
    flex: 1;
    min-width: 0;
}

.share-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-item-email {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-owner-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
}

.share-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.share-item-permission {
    padding: 6px 10px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-primary, #374151);
    background: var(--surface-color, #ffffff);
    cursor: pointer;
}

.share-item-permission:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
}

.share-item-permission-label {
    font-size: 0.8rem;
    font-weight: 500;
}

.share-item-remove {
    padding: 6px;
    background: none;
    border: none;
    color: var(--text-secondary, #9ca3af);
    cursor: pointer;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.share-item-remove:hover {
    color: var(--error-color, #ef4444);
    background: rgba(239, 68, 68, 0.1);
}

.share-error {
    padding: 16px;
    text-align: center;
    color: var(--error-color, #ef4444);
    font-size: 0.875rem;
}

/* Share dialog footer */
.share-dialog-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    justify-content: flex-end;
}

.share-done-btn {
    padding: 10px 24px;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.share-done-btn:hover {
    background: var(--primary-hover, #2563eb);
}

/* Share toast */
.share-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--surface-color, #ffffff);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    font-size: 0.9rem;
    color: var(--text-primary, #111827);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 10001;
}

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

.share-toast-success svg {
    color: var(--success-color, #10b981);
}

.share-toast-error {
    background: var(--error-color, #ef4444);
    color: white;
}

/* ============================================
   COLLABORATION - COMMENTS PANEL
   ============================================ */

.comments-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: var(--surface-color, #ffffff);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    transition: right 0.3s ease;
}

.comments-panel.open {
    right: 0;
}

.comments-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-color, #ffffff);
}

.comments-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.comments-panel-title svg {
    color: var(--primary-color, #3b82f6);
}

.comments-count {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--text-secondary, #6b7280);
}

.comments-panel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comments-filter-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: var(--surface-secondary, #f3f4f6);
    border: none;
    border-radius: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.comments-filter-btn:hover {
    background: var(--hover-bg, #e5e7eb);
}

.comments-panel-close {
    padding: 6px;
    background: none;
    border: none;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.comments-panel-close:hover {
    background: var(--hover-bg, #f3f4f6);
    color: var(--text-primary, #111827);
}

.comments-panel-context {
    padding: 12px 20px;
    background: var(--surface-secondary, #f9fafb);
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.comments-item-type {
    font-weight: 500;
    color: var(--text-primary, #374151);
}

.comments-item-id {
    color: var(--text-secondary, #6b7280);
    font-family: monospace;
}

.comments-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}

.comments-loading {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px;
    color: var(--text-secondary, #6b7280);
}

.comments-loading .spin {
    animation: spin 1s linear infinite;
}

.comments-empty {
    display: none;
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary, #9ca3af);
}

.comments-empty span {
    display: block;
    font-size: 0.95rem;
    margin-bottom: 4px;
}

.comments-empty p {
    font-size: 0.8rem;
    margin: 0;
}

.comments-error {
    padding: 20px;
    text-align: center;
    color: var(--error-color, #ef4444);
    font-size: 0.875rem;
}

/* Comment items */
.comment-item {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.comment-item.comment-resolved {
    opacity: 0.6;
}

.comment-item.comment-reply {
    margin-left: 48px;
    margin-bottom: 12px;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    flex-shrink: 0;
}

.comment-reply .comment-avatar {
    width: 28px;
    height: 28px;
    font-size: 0.65rem;
}

.comment-body {
    flex: 1;
    min-width: 0;
}

.comment-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 4px;
}

.comment-author {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary, #111827);
}

.comment-time {
    font-size: 0.75rem;
    color: var(--text-secondary, #9ca3af);
}

.comment-resolved-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--success-bg, rgba(16, 185, 129, 0.1));
    color: var(--success-color, #10b981);
    font-size: 0.65rem;
    font-weight: 500;
    border-radius: 10px;
}

.comment-content {
    font-size: 0.875rem;
    color: var(--text-primary, #374151);
    line-height: 1.5;
    word-break: break-word;
}

.comment-content .mention {
    background: var(--primary-bg, rgba(59, 130, 246, 0.1));
    color: var(--primary-color, #3b82f6);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 500;
}

.comment-content a {
    color: var(--primary-color, #3b82f6);
    text-decoration: none;
}

.comment-content a:hover {
    text-decoration: underline;
}

.comment-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.comment-item:hover .comment-actions {
    opacity: 1;
}

.comment-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: none;
    border: none;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.comment-action-btn:hover {
    background: var(--hover-bg, #f3f4f6);
    color: var(--text-primary, #374151);
}

.comment-action-btn.delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--error-color, #ef4444);
}

.comment-replies {
    margin-top: 12px;
}

/* Comment input */
.comments-panel-input {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background: var(--surface-color, #ffffff);
}

.comment-input-container {
    flex: 1;
    position: relative;
}

.comment-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
    resize: none;
    min-height: 40px;
    max-height: 150px;
    line-height: 1.4;
    transition: border-color 0.15s ease;
}

.comment-input:focus {
    outline: none;
    border-color: var(--primary-color, #3b82f6);
}

.comment-input::placeholder {
    color: var(--text-secondary, #9ca3af);
}

.comment-submit-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color, #3b82f6);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
    flex-shrink: 0;
}

.comment-submit-btn:hover:not(:disabled) {
    background: var(--primary-hover, #2563eb);
}

.comment-submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.comment-submit-btn .spin {
    animation: spin 1s linear infinite;
}

/* Mention dropdown */
.mention-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 4px;
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 10;
}

.mention-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.mention-option:hover,
.mention-option.focused {
    background: var(--hover-bg, #f3f4f6);
}

.mention-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.65rem;
    font-weight: 600;
}

.mention-info {
    flex: 1;
    min-width: 0;
}

.mention-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary, #111827);
}

.mention-email {
    display: block;
    font-size: 0.75rem;
    color: var(--text-secondary, #6b7280);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Filter menu */
.comments-filter-menu {
    position: absolute;
    top: 100%;
    right: 60px;
    margin-top: 4px;
    background: var(--surface-color, #ffffff);
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 160px;
    z-index: 10;
}

.comments-filter-option {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-primary, #374151);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.comments-filter-option:hover {
    background: var(--hover-bg, #f3f4f6);
}

.comments-filter-option:first-child {
    border-radius: 8px 8px 0 0;
}

.comments-filter-option:last-child {
    border-radius: 0 0 8px 8px;
}

/* Comments toast */
.comments-toast {
    position: fixed;
    bottom: 24px;
    right: 420px;
    padding: 12px 20px;
    background: var(--surface-color, #ffffff);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    font-size: 0.875rem;
    color: var(--text-primary, #111827);
    opacity: 0;
    transform: translateY(20px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 10001;
}

.comments-toast.visible {
    transform: translateY(0);
    opacity: 1;
}

.comments-toast-error {
    background: var(--error-color, #ef4444);
    color: white;
}

/* ============================================
   COLLABORATION - RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .share-dialog {
        max-width: calc(100vw - 32px);
        margin: 16px;
    }

    .share-input-group {
        flex-wrap: wrap;
    }

    .share-email-input {
        width: 100%;
        flex: 1 1 100%;
    }

    .share-permission-select,
    .share-add-btn {
        flex: 1;
    }

    .comments-panel {
        width: 100%;
        right: -100%;
    }

    .comments-toast {
        right: 16px;
        left: 16px;
        text-align: center;
    }

    .comment-item.comment-reply {
        margin-left: 24px;
    }
}

@media (max-width: 480px) {
    .share-dialog-header,
    .share-dialog-footer {
        padding: 16px;
    }

    .share-dialog-content {
        padding: 0 16px;
    }

    .share-dialog-subtitle {
        padding: 0 16px 12px;
    }

    .share-item {
        flex-wrap: wrap;
    }

    .share-item-info {
        flex: 1 1 calc(100% - 48px);
    }

    .share-item-actions {
        width: 100%;
        margin-top: 8px;
        padding-left: 48px;
    }

    .comments-panel-header,
    .comments-panel-context,
    .comments-panel-content,
    .comments-panel-input {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* ============================================
   TEMPLATES UI - MODAL & OVERLAYS
   ============================================ */

.templates-modal-overlay,
.save-template-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.templates-modal-overlay.visible,
.save-template-dialog-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.templates-modal-overlay.closing,
.save-template-dialog-overlay.closing {
    opacity: 0;
}

.templates-modal {
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    background: linear-gradient(135deg, rgba(30, 32, 44, 0.98), rgba(20, 22, 34, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.templates-modal-overlay.visible .templates-modal {
    transform: scale(1);
}

.templates-modal.manager-modal {
    max-width: 800px;
}

/* ============================================
   TEMPLATES UI - HEADER
   ============================================ */

.templates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.header-title {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}

.header-title svg {
    color: var(--primary-color, #6366f1);
}

.header-title h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.templates-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: all 0.2s;
}

.templates-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ============================================
   TEMPLATES UI - CONTENT
   ============================================ */

.templates-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.templates-filters {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.templates-search {
    flex: 1;
    position: relative;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
    display: flex;
}

.search-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.search-input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
}

.search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.category-filter {
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    cursor: pointer;
    min-width: 180px;
}

.category-filter:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
}

.category-filter option {
    background: #1e2028;
    color: #fff;
}

/* ============================================
   TEMPLATES UI - LIST
   ============================================ */

.templates-list {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
}

.templates-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.templates-loading .spin {
    animation: spin 1s linear infinite;
}

.templates-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(255, 255, 255, 0.5);
}

.templates-empty p {
    margin: 0 0 8px 0;
}

.templates-empty .hint {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
}

.templates-group {
    margin-bottom: 28px;
}

.templates-group:last-child {
    margin-bottom: 0;
}

.templates-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
}

.templates-group h4 svg {
    width: 14px;
    height: 14px;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}

/* ============================================
   TEMPLATES UI - CARDS
   ============================================ */

.template-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.template-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-2px);
}

.template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.template-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.3;
}

.default-badge {
    display: flex;
    color: #f59e0b;
}

.template-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity 0.2s;
}

.template-card:hover .template-actions {
    opacity: 1;
}

.action-btn {
    padding: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.2s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.template-description {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.4;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.template-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.template-category {
    display: inline-flex;
    padding: 4px 10px;
    background: rgba(var(--category-color, 99, 102, 241), 0.15);
    color: var(--category-color, #6366f1);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
}

.template-usage {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

/* ============================================
   TEMPLATES UI - MANAGER CARDS
   ============================================ */

.manager-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.template-manager-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 16px 20px;
    transition: all 0.2s;
}

.template-manager-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.15);
}

.card-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.card-info {
    flex: 1;
    min-width: 0;
}

.card-info .template-name {
    margin-bottom: 4px;
}

.card-info .template-description {
    margin-bottom: 10px;
}

.template-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.template-stats {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.shared-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    font-size: 0.7rem;
    font-weight: 500;
    border-radius: 6px;
}

.card-actions {
    display: flex;
    gap: 6px;
}

/* ============================================
   TEMPLATES UI - FOOTER
   ============================================ */

.templates-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
    background: rgba(0, 0, 0, 0.15);
}

.btn-start-blank {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-start-blank:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}

/* ============================================
   TEMPLATES UI - SAVE DIALOG
   ============================================ */

.save-template-dialog {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(135deg, rgba(30, 32, 44, 0.98), rgba(20, 22, 34, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.save-template-dialog-overlay.visible .save-template-dialog {
    transform: scale(1);
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}

.dialog-header h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    color: #fff;
}

.dialog-header h3 svg {
    color: var(--primary-color, #6366f1);
}

.dialog-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    transition: all 0.2s;
}

.dialog-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.dialog-body {
    padding: 24px;
}

.form-group {
    margin-bottom: 20px;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.form-group input[type="text"],
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: #fff;
    font-size: 0.9rem;
    transition: border-color 0.2s;
}

.form-group input[type="text"]:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
}

.form-group input[type="text"]::placeholder,
.form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.form-group textarea {
    min-height: 80px;
    resize: vertical;
    line-height: 1.5;
}

.form-group select {
    cursor: pointer;
}

.form-group select option {
    background: #1e2028;
}

.checkbox-group label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #6366f1);
    cursor: pointer;
}

.checkbox-group span {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.15);
}

.btn-cancel {
    padding: 10px 20px;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-cancel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-save {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-save:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

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

.btn-save .spin {
    animation: spin 1s linear infinite;
}

/* ============================================
   TEMPLATES UI - TOAST
   ============================================ */

.templates-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    background: rgba(30, 32, 44, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
    font-size: 0.9rem;
    color: #fff;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    z-index: 100001;
}

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

.templates-toast-success svg {
    color: #10b981;
}

.templates-toast-error {
    border-color: rgba(239, 68, 68, 0.3);
}

/* ============================================
   TEMPLATES UI - RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .templates-modal {
        max-width: calc(100vw - 32px);
        max-height: 90vh;
        margin: 16px;
        border-radius: 16px;
    }

    .templates-filters {
        flex-direction: column;
        gap: 10px;
        padding: 12px 16px;
    }

    .category-filter {
        min-width: auto;
    }

    .templates-list {
        padding: 16px;
    }

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

    .templates-header {
        padding: 16px;
    }

    .templates-footer {
        padding: 12px 16px;
    }

    .save-template-dialog {
        max-width: calc(100vw - 32px);
        margin: 16px;
    }

    .dialog-body {
        padding: 20px 16px;
    }
}

@media (max-width: 480px) {
    .template-card {
        padding: 14px;
    }

    .template-name {
        font-size: 0.9rem;
    }

    .template-description {
        font-size: 0.8rem;
    }

    .card-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .card-actions {
        margin-top: 12px;
        width: 100%;
        justify-content: flex-end;
    }

    .templates-toast {
        left: 16px;
        right: 16px;
        transform: translateX(0) translateY(100px);
    }

    .templates-toast.visible {
        transform: translateX(0) translateY(0);
    }
}

/* ============================================
   ANALYTICS DASHBOARD STYLES
   ============================================ */

/* Dashboard Container */
.analytics-dashboard {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    overflow: hidden;
}

.analytics-dashboard.analytics-loading {
    min-height: 400px;
}

/* Dashboard Header */
.analytics-dashboard .dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(30, 41, 59, 0.4);
}

.analytics-dashboard .dashboard-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
}

.dashboard-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dashboard-refresh-btn svg {
    width: 18px;
    height: 18px;
    stroke: #a5b4fc;
}

.dashboard-refresh-btn:hover {
    background: rgba(99, 102, 241, 0.25);
}

.dashboard-refresh-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.dashboard-refresh-btn.spinning svg {
    animation: spin 1s linear infinite;
}

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

/* Dashboard Grid Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    padding: 20px 24px;
}

/* Widget Skeletons */
.widget-skeleton {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    animation: pulse 1.5s ease-in-out infinite;
}

.widget-skeleton.summary-cards {
    grid-column: 1 / -1;
    height: 120px;
}

.widget-skeleton.trend-chart {
    grid-column: 1 / -1;
    height: 200px;
}

.widget-skeleton.pending-items,
.widget-skeleton.quick-actions,
.widget-skeleton.recent-activity {
    height: 220px;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.3; }
}

/* Widget Base */
.widget {
    background: rgba(30, 41, 59, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.08);
    overflow: hidden;
}

.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.widget-header h3 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #e2e8f0;
}

.widget-header .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: #6366f1;
    border-radius: 11px;
}

.widget-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #64748b;
}

.widget-empty .empty-icon svg {
    width: 32px;
    height: 32px;
    stroke: #475569;
    margin-bottom: 12px;
}

.widget-empty p {
    margin: 0;
    font-size: 0.875rem;
}

/* Summary Cards Widget */
.widget.summary-cards {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    padding: 16px;
    border: none;
    background: transparent;
}

/* Metric Cards */
.metric-card {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: rgba(30, 41, 59, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    transition: all 0.2s ease;
}

.metric-card:hover {
    border-color: rgba(148, 163, 184, 0.2);
    transform: translateY(-2px);
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.15);
}

.metric-icon svg {
    width: 18px;
    height: 18px;
    stroke: #a5b4fc;
}

.metric-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.2;
}

.metric-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-trend {
    margin-top: auto;
    padding-top: 8px;
}

.metric-trend svg {
    width: 16px;
    height: 16px;
}

.metric-trend.positive svg {
    stroke: #10b981;
}

.metric-trend.negative svg {
    stroke: #ef4444;
}

/* Card color variants */
.metric-card.primary .metric-icon {
    background: rgba(99, 102, 241, 0.2);
}
.metric-card.primary .metric-icon svg { stroke: #a5b4fc; }

.metric-card.success .metric-icon {
    background: rgba(16, 185, 129, 0.2);
}
.metric-card.success .metric-icon svg { stroke: #34d399; }
.metric-card.success .metric-value { color: #34d399; }

.metric-card.warning .metric-icon {
    background: rgba(251, 191, 36, 0.2);
}
.metric-card.warning .metric-icon svg { stroke: #fbbf24; }
.metric-card.warning .metric-value { color: #fbbf24; }

.metric-card.info .metric-icon {
    background: rgba(56, 189, 248, 0.2);
}
.metric-card.info .metric-icon svg { stroke: #38bdf8; }

.metric-card.money .metric-icon {
    background: rgba(16, 185, 129, 0.2);
}
.metric-card.money .metric-icon svg { stroke: #10b981; }
.metric-card.money .metric-value { color: #10b981; }

.metric-card.neutral .metric-icon {
    background: rgba(148, 163, 184, 0.15);
}
.metric-card.neutral .metric-icon svg { stroke: #94a3b8; }

/* Trend Chart Widget */
.widget.trend-chart {
    grid-column: 1 / -1;
}

.chart-container {
    padding: 20px;
}

.trend-chart-svg {
    width: 100%;
    height: auto;
    max-height: 180px;
}

.grid-line {
    stroke: rgba(148, 163, 184, 0.1);
    stroke-width: 1;
}

.trend-bar {
    fill: #6366f1;
    rx: 4;
    transition: fill 0.2s ease;
}

.trend-bar:hover {
    fill: #818cf8;
}

.match-rate-line {
    fill: none;
    stroke: #10b981;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.match-rate-point {
    fill: #10b981;
    stroke: #0f172a;
    stroke-width: 2;
    transition: r 0.2s ease;
}

.match-rate-point:hover {
    r: 6;
}

.axis-label {
    font-size: 10px;
    fill: #64748b;
    text-anchor: middle;
}

.chart-legend {
    display: flex;
    gap: 16px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.bar-color {
    background: #6366f1;
}

.legend-color.line-color {
    background: #10b981;
}

.chart-tooltip {
    display: none;
    position: absolute;
    padding: 6px 10px;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 6px;
    font-size: 0.75rem;
    color: #f1f5f9;
    pointer-events: none;
    z-index: 100;
    white-space: nowrap;
}

/* Pending Items Widget */
.pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pending-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
    cursor: pointer;
    transition: background 0.15s ease;
}

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

.pending-item:hover {
    background: rgba(99, 102, 241, 0.08);
}

.item-priority {
    flex-shrink: 0;
}

.priority-dot {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
}

.pending-item.priority-high .priority-dot {
    background: #ef4444;
}

.pending-item.priority-medium .priority-dot {
    background: #f59e0b;
}

.pending-item.priority-low .priority-dot {
    background: #10b981;
}

.item-content {
    flex: 1;
    min-width: 0;
}

.item-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.item-type {
    font-size: 0.7rem;
    font-weight: 600;
    color: #a5b4fc;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 4px;
}

.item-unmatched {
    font-size: 0.75rem;
    color: #64748b;
}

.item-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.item-action svg {
    width: 16px;
    height: 16px;
    stroke: #64748b;
}

.item-action:hover {
    background: rgba(99, 102, 241, 0.15);
}

.item-action:hover svg {
    stroke: #a5b4fc;
}

/* Quick Actions Widget */
.actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 16px;
}

.widget.quick-actions .action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(30, 41, 59, 0.4);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.widget.quick-actions .action-btn:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: rgba(99, 102, 241, 0.3);
}

.widget.quick-actions .action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(99, 102, 241, 0.2);
    border-radius: 8px;
}

.widget.quick-actions .action-icon svg {
    width: 18px;
    height: 18px;
    stroke: #a5b4fc;
}

.widget.quick-actions .action-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #e2e8f0;
    text-align: center;
}

/* Recent Activity Widget */
.activity-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.06);
}

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

.activity-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 8px;
}

.activity-icon svg {
    width: 16px;
    height: 16px;
    stroke: #a5b4fc;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-description {
    display: block;
    font-size: 0.875rem;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-time {
    display: block;
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 4px;
}

/* Dashboard Responsive */
@media (max-width: 1200px) {
    .widget.summary-cards {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .widget.summary-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .analytics-dashboard .dashboard-header {
        padding: 16px;
    }

    .dashboard-grid {
        padding: 16px;
        gap: 16px;
    }

    .widget.summary-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .metric-card {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        padding: 14px;
    }

    .metric-icon {
        margin-bottom: 0;
    }

    .metric-content {
        flex: 1;
    }

    .metric-value {
        font-size: 1.25rem;
    }

    .metric-trend {
        margin-top: 0;
        padding-top: 0;
    }

    .chart-container {
        padding: 16px;
        overflow-x: auto;
    }

    .trend-chart-svg {
        min-width: 350px;
    }

    .chart-legend {
        flex-wrap: wrap;
        gap: 10px;
    }

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

/* ============================================
   API KEYS MANAGER STYLES
   ============================================ */

/* Main Container */
.api-manager {
    background: rgba(15, 23, 42, 0.6);
    border-radius: 16px;
    border: 1px solid rgba(148, 163, 184, 0.1);
    overflow: hidden;
}

/* Header */
.api-manager .manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
    background: rgba(30, 41, 59, 0.4);
}

.api-manager .header-content h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: #f1f5f9;
}

.api-manager .header-content p {
    margin: 4px 0 0 0;
    font-size: 0.875rem;
    color: #94a3b8;
}

.api-manager .btn-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.api-manager .btn-refresh svg {
    width: 18px;
    height: 18px;
    stroke: #a5b4fc;
}

.api-manager .btn-refresh:hover {
    background: rgba(99, 102, 241, 0.25);
}

/* Stats Row */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px 24px;
    background: rgba(30, 41, 59, 0.3);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: rgba(30, 41, 59, 0.5);
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.08);
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #f1f5f9;
}

.stat-label {
    font-size: 0.75rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 20px;
    color: #64748b;
}

/* Tabs */
.manager-tabs {
    display: flex;
    gap: 4px;
    padding: 16px 24px 0;
    background: rgba(30, 41, 59, 0.3);
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
}

.tab-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    background: transparent;
    border-radius: 8px 8px 0 0;
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-btn svg {
    width: 18px;
    height: 18px;
}

.tab-btn:hover {
    color: #e2e8f0;
    background: rgba(99, 102, 241, 0.1);
}

.tab-btn.active {
    color: #a5b4fc;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-bottom: 1px solid rgba(15, 23, 42, 0.6);
    margin-bottom: -1px;
}

/* Tab Content */
.tab-content {
    padding: 24px;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

/* Create Form */
.create-form {
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 24px;
}

.create-form h4 {
    margin: 0 0 16px 0;
    font-size: 1rem;
    font-weight: 600;
    color: #e2e8f0;
}

.form-row {
    margin-bottom: 16px;
}

.form-row > label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: #94a3b8;
}

.form-row input[type="text"],
.form-row input[type="url"] {
    width: 100%;
    max-width: 500px;
    padding: 12px 16px;
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 0.9rem;
    transition: border-color 0.2s ease;
}

.form-row input:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.5);
}

/* Scopes Grid */
.scopes-grid,
.events-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 600px;
}

.scope-option,
.event-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.scope-option:hover,
.event-option:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.2);
}

.scope-option input,
.event-option input {
    margin: 0;
    accent-color: #6366f1;
}

.scope-label,
.event-label {
    font-weight: 600;
    color: #e2e8f0;
    font-size: 0.875rem;
}

.scope-desc,
.event-desc {
    width: 100%;
    font-size: 0.75rem;
    color: #64748b;
    margin-left: 24px;
}

/* Create Button */
.btn-create {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.btn-create:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* List Section */
.list-section h4 {
    margin: 0 0 16px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Key Item */
.key-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    margin-bottom: 10px;
    transition: border-color 0.2s ease;
}

.key-item:hover {
    border-color: rgba(148, 163, 184, 0.2);
}

.key-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(99, 102, 241, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

.key-icon svg {
    width: 22px;
    height: 22px;
    stroke: #a5b4fc;
}

.key-info {
    flex: 1;
    min-width: 0;
}

.key-name {
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 6px;
}

.key-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.key-prefix {
    padding: 4px 8px;
    background: rgba(15, 23, 42, 0.6);
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.8rem;
    color: #10b981;
}

.key-scopes {
    font-size: 0.8rem;
    color: #64748b;
}

.key-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.75rem;
    color: #64748b;
}

.key-actions {
    display: flex;
    gap: 8px;
}

.btn-action {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-action svg {
    width: 16px;
    height: 16px;
    stroke: #64748b;
}

.btn-action:hover {
    background: rgba(239, 68, 68, 0.15);
}

.btn-action:hover svg {
    stroke: #ef4444;
}

/* Webhook Item */
.webhook-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: rgba(30, 41, 59, 0.5);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 10px;
    margin-bottom: 10px;
}

.webhook-item.inactive {
    opacity: 0.6;
}

.webhook-item.unhealthy {
    border-color: rgba(239, 68, 68, 0.3);
}

.webhook-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(16, 185, 129, 0.15);
    border-radius: 10px;
    flex-shrink: 0;
}

.webhook-icon svg {
    width: 22px;
    height: 22px;
    stroke: #34d399;
}

.webhook-item.inactive .webhook-icon {
    background: rgba(148, 163, 184, 0.1);
}

.webhook-item.inactive .webhook-icon svg {
    stroke: #64748b;
}

.webhook-info {
    flex: 1;
    min-width: 0;
}

.webhook-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.webhook-name {
    font-weight: 600;
    color: #f1f5f9;
}

.webhook-status {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

.webhook-item.inactive .webhook-status {
    background: rgba(148, 163, 184, 0.1);
    color: #64748b;
}

.webhook-url {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 8px;
    word-break: break-all;
}

.webhook-events {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.event-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-radius: 4px;
}

.webhook-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.75rem;
}

.webhook-stats .success {
    color: #34d399;
}

.webhook-stats .failures {
    color: #f59e0b;
}

.webhook-stats .disabled {
    color: #ef4444;
}

.webhook-actions {
    display: flex;
    gap: 8px;
}

.btn-toggle:hover {
    background: rgba(99, 102, 241, 0.15);
}

.btn-toggle:hover svg {
    stroke: #a5b4fc;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 40px 20px;
}

.empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 16px;
    margin-bottom: 16px;
}

.empty-icon svg {
    width: 32px;
    height: 32px;
    stroke: #6366f1;
}

.empty-state p {
    margin: 0;
    font-size: 1rem;
    color: #e2e8f0;
}

.empty-state span {
    font-size: 0.875rem;
    color: #64748b;
}

/* API Key Reveal Modal */
.api-key-reveal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.api-key-reveal-overlay.visible {
    opacity: 1;
}

.api-key-reveal {
    width: 100%;
    max-width: 520px;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.98), rgba(15, 23, 42, 0.98));
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 16px;
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.api-key-reveal-overlay.visible .api-key-reveal {
    transform: scale(1);
}

.reveal-header {
    padding: 20px 24px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.1);
}

.reveal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    color: #f1f5f9;
}

.reveal-body {
    padding: 24px;
}

.warning-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 10px;
    margin-bottom: 20px;
}

.warning-box svg {
    width: 20px;
    height: 20px;
    stroke: #f59e0b;
    flex-shrink: 0;
}

.warning-box p {
    margin: 0;
    font-size: 0.9rem;
    color: #fbbf24;
}

.key-display {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
}

.key-value {
    flex: 1;
    font-family: monospace;
    font-size: 0.85rem;
    color: #10b981;
    word-break: break-all;
    line-height: 1.5;
}

.btn-copy-key {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: rgba(99, 102, 241, 0.2);
    border: none;
    border-radius: 8px;
    color: #a5b4fc;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

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

.btn-copy-key:hover {
    background: rgba(99, 102, 241, 0.3);
}

.btn-copy-key.copied {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.secret-info {
    margin: 16px 0 0 0;
    font-size: 0.8rem;
    color: #64748b;
}

.reveal-footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(148, 163, 184, 0.1);
    text-align: right;
}

.btn-done {
    padding: 12px 24px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-done:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* Toast Notification */
.api-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    z-index: 100001;
    opacity: 0;
    transition: all 0.3s ease;
}

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

.api-toast.success {
    border-color: rgba(16, 185, 129, 0.3);
}

.api-toast.error {
    border-color: rgba(239, 68, 68, 0.3);
}

.toast-icon svg {
    width: 18px;
    height: 18px;
}

.api-toast.success .toast-icon svg {
    stroke: #34d399;
}

.api-toast.error .toast-icon svg {
    stroke: #ef4444;
}

.toast-message {
    font-size: 0.9rem;
    color: #e2e8f0;
}

/* Responsive */
@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .scopes-grid,
    .events-grid {
        grid-template-columns: 1fr;
    }

    .key-item,
    .webhook-item {
        flex-direction: column;
        align-items: stretch;
    }

    .key-icon,
    .webhook-icon {
        align-self: flex-start;
    }

    .key-actions,
    .webhook-actions {
        justify-content: flex-end;
        margin-top: 12px;
    }

    .key-display {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-copy-key {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .manager-tabs {
        padding: 12px 16px 0;
    }

    .tab-btn {
        padding: 10px 14px;
        font-size: 0.8rem;
    }

    .tab-btn span {
        display: none;
    }

    .tab-content {
        padding: 16px;
    }

    .create-form {
        padding: 16px;
    }

    .stats-row {
        gap: 10px;
        padding: 16px;
    }

    .stat-card {
        padding: 10px;
    }

    .stat-value {
        font-size: 1.25rem;
    }
}

/* ============================================
   LARGE FILE PROCESSING
   Recovery Dialog & Progress UI
   ============================================ */

/* Recovery Dialog Overlay */
.recovery-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px);
}

.recovery-dialog-overlay.visible {
    opacity: 1;
}

/* Recovery Dialog */
.recovery-dialog {
    width: 100%;
    max-width: 420px;
    background: linear-gradient(135deg, rgba(30, 32, 44, 0.98), rgba(20, 22, 34, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 36px;
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
}

.recovery-dialog-overlay.visible .recovery-dialog {
    transform: scale(1);
}

.recovery-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15));
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 50%;
    color: #6366f1;
    margin-bottom: 24px;
    animation: pulse-recovery 2s ease-in-out infinite;
}

@keyframes pulse-recovery {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.2);
    }
    50% {
        box-shadow: 0 0 0 15px rgba(99, 102, 241, 0);
    }
}

.recovery-dialog h3 {
    margin: 0 0 12px 0;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
}

.recovery-dialog p {
    margin: 0 0 8px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    line-height: 1.5;
}

.recovery-timestamp {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-bottom: 24px !important;
}

.recovery-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.btn-discard {
    padding: 14px 28px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-discard:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.btn-restore {
    padding: 14px 28px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-restore:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.4);
}

/* Processing Progress UI */
.processing-progress {
    background: rgba(30, 32, 44, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
}

.processing-progress .progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 16px;
}

.processing-progress .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
    background-size: 200% 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
    animation: progress-shimmer 2s linear infinite;
}

@keyframes progress-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.processing-progress .progress-message {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

.processing-progress .progress-cancel {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.5);
    border-radius: 8px;
    color: #ef4444;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.processing-progress .progress-cancel:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
}

/* Processing Error */
.processing-error {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #ef4444;
}

.processing-error svg {
    flex-shrink: 0;
}

/* Processing Success */
.processing-success {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 12px;
    color: #10b981;
}

.processing-success svg {
    flex-shrink: 0;
}

/* Large File Warning */
.large-file-warning {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 20px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    margin-bottom: 16px;
}

.large-file-warning svg {
    flex-shrink: 0;
    color: #f59e0b;
}

.large-file-warning-content h4 {
    margin: 0 0 4px 0;
    color: #f59e0b;
    font-size: 0.95rem;
    font-weight: 600;
}

.large-file-warning-content p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
}

/* File Processing Stats */
.file-processing-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 12px;
    margin-top: 16px;
}

.file-stat {
    text-align: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
}

.file-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #6366f1;
    margin-bottom: 4px;
}

.file-stat-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Chunked Processing Indicator */
.chunked-processing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.1);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

.chunked-processing .chunk-indicator {
    display: flex;
    gap: 3px;
}

.chunked-processing .chunk-dot {
    width: 6px;
    height: 6px;
    background: rgba(99, 102, 241, 0.4);
    border-radius: 50%;
    animation: chunk-pulse 1.5s ease-in-out infinite;
}

.chunked-processing .chunk-dot:nth-child(1) { animation-delay: 0s; }
.chunked-processing .chunk-dot:nth-child(2) { animation-delay: 0.2s; }
.chunked-processing .chunk-dot:nth-child(3) { animation-delay: 0.4s; }

.chunked-processing .chunk-dot.active {
    background: #6366f1;
}

@keyframes chunk-pulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Worker Status Badge */
.worker-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.worker-status.active {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
}

.worker-status.inactive {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.worker-status.fallback {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
}

.worker-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Responsive */
@media (max-width: 480px) {
    .recovery-dialog {
        margin: 20px;
        padding: 24px;
    }

    .recovery-actions {
        flex-direction: column;
    }

    .btn-discard,
    .btn-restore {
        width: 100%;
    }

    .file-processing-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}