.App{height:100vh;background-color:#f5f5f5;overflow:hidden}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.6;color:#333;background-color:#f5f5f5}.table-container{max-height:320px;overflow-y:auto;margin-bottom:16px;border:1px solid #e0e0e0;border-radius:8px;background:#fff}.data-table{width:100%;border-collapse:collapse;font-size:14px}.data-table th{background:linear-gradient(180deg,#f8f9fa,#e9ecef);padding:12px 16px;border-bottom:2px solid #dee2e6;font-weight:600;color:#495057;text-align:left;position:sticky;top:0;z-index:10;white-space:nowrap}.data-table td{padding:12px 16px;border-bottom:1px solid #e9ecef;color:#6c757d;transition:background-color .15s ease}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover{background-color:#f8f9fa;cursor:pointer}.data-table tr:hover td{color:#495057}.data-table tr.selected{background-color:#e3f2fd;font-weight:500}.data-table tr.selected td{color:#1976d2;font-weight:500}.table-container::-webkit-scrollbar{width:8px}.table-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:0 8px 8px 0}.table-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:4px}.table-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.matching-controls{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:24px;box-shadow:0 2px 8px #0000001a;margin-bottom:24px}.selected-items{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.selected-item{background:linear-gradient(135deg,#f8f9fa,#e9ecef);padding:20px;border-radius:8px;border:1px solid #dee2e6;transition:transform .2s ease,box-shadow .2s ease}.selected-item:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.selected-item h3{font-size:16px;font-weight:600;color:#2c3e50;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #3498db}.selected-item p{margin-bottom:8px;color:#6c757d;font-size:14px}.selected-item strong{color:#2c3e50;font-weight:600}.comment-section{margin-bottom:24px}.comment-section h3{font-size:16px;font-weight:600;color:#2c3e50;margin-bottom:12px}.comment-section textarea{width:100%;padding:16px;border:2px solid #e9ecef;border-radius:8px;resize:vertical;font-size:14px;font-family:inherit;transition:border-color .2s ease,box-shadow .2s ease;min-height:100px}.comment-section textarea:focus{outline:none;border-color:#3498db;box-shadow:0 0 0 3px #3498db1a}.comment-section textarea::placeholder{color:#adb5bd}.match-button{padding:14px 32px;background:linear-gradient(135deg,#3498db,#2980b9);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;margin-right:20px;transition:all .3s ease;box-shadow:0 4px 6px #3498db4d}.match-button:hover:not(:disabled){background:linear-gradient(135deg,#2980b9,#2471a3);transform:translateY(-2px);box-shadow:0 6px 12px #3498db66}.match-button:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #3498db4d}.match-button:disabled{background:linear-gradient(135deg,#bdc3c7,#95a5a6);cursor:not-allowed;transform:none;box-shadow:none}.success-message{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:linear-gradient(135deg,#27ae60,#229954);color:#fff;border-radius:8px;font-weight:500;animation:slideIn .3s ease;box-shadow:0 4px 6px #27ae604d}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.selected-items{grid-template-columns:1fr;gap:16px}.matching-controls{padding:20px}.match-button{width:100%;margin-right:0;margin-bottom:16px}.success-message{width:100%;justify-content:center}}@media (max-width: 480px){.matching-controls,.selected-item{padding:16px}.match-button{padding:12px 24px;font-size:14px}}.pagination{display:flex;justify-content:center;align-items:center;gap:20px;padding:16px 0;background:#fff;border-radius:8px;border:1px solid #e0e0e0}.pagination button{padding:8px 16px;border:1px solid #d1d5db;background:linear-gradient(180deg,#fff,#f9fafb);color:#374151;cursor:pointer;border-radius:6px;font-size:14px;font-weight:500;transition:all .2s ease;min-width:80px}.pagination button:hover:not(:disabled){background:linear-gradient(180deg,#f3f4f6,#e5e7eb);border-color:#9ca3af;transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.pagination button:active:not(:disabled){transform:translateY(0);box-shadow:none}.pagination button:disabled{opacity:.5;cursor:not-allowed;background:#f3f4f6;color:#9ca3af}.pagination span{font-size:14px;color:#6b7280;font-weight:500;min-width:120px;text-align:center}@media (max-width: 480px){.pagination{gap:12px;flex-wrap:wrap}.pagination button{min-width:60px;padding:6px 12px;font-size:12px}.pagination span{font-size:12px;min-width:100px}}.accounting-matching{padding:24px;max-height:calc(100vh - 60px);overflow-y:auto;background-color:#f5f5f5}.accounting-matching h1{font-size:28px;font-weight:600;color:#2c3e50;margin-bottom:24px;padding-bottom:12px;border-bottom:3px solid #3498db}.matching-container{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.payments-section,.invoices-section{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;transition:box-shadow .2s ease}.payments-section:hover,.invoices-section:hover{box-shadow:0 4px 12px #00000026}.payments-section h2,.invoices-section h2{font-size:20px;font-weight:600;color:#3498db;margin-bottom:16px;padding-bottom:8px;border-bottom:2px solid #ecf0f1}.matched-pairs{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;margin-top:24px}.matched-pairs h2{font-size:20px;font-weight:600;color:#27ae60;margin-bottom:16px}@media (max-width: 1200px){.matching-container{grid-template-columns:1fr}.accounting-matching{padding:16px}}@media (max-width: 768px){.accounting-matching h1{font-size:24px}.payments-section,.invoices-section{padding:16px}}