body{font-family:Arial,sans-serif}input{border-radius:4px;border:1px solid #ccc}button{background-color:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}button:hover{background-color:#0056b3}:root{--primary: #4361ee;--primary-dark: #3a56d4;--secondary: #7209b7;--background: #f8f9fa;--card-bg: #ffffff;--text: #212529;--text-light: #6c757d;--border: #dee2e6;--error: #dc3545;--success: #28a745;--warning: #ffc107;--info: #17a2b8;--shadow: 0 4px 12px rgba(0, 0, 0, .08);--radius: 12px}.dark-mode{--background: #121212;--card-bg: #1e1e1e;--text: #e9ecef;--text-light: #adb5bd;--border: #343a40}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,Segoe UI,system-ui,-apple-system,sans-serif;background:#121212;color:var(--text);line-height:1.6;transition:background .3s ease,color .3s ease}.encurtador-container{max-width:1000px;margin:0 auto;padding:20px}.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px;transition:all .3s ease}h1{text-align:center;color:var(--primary);margin-bottom:8px;font-size:2.4rem;font-weight:800}.subtitle{text-align:center;color:var(--text-light);margin-bottom:28px;font-size:1.1rem}.url-form{margin-bottom:24px}.input-group{display:flex;gap:12px;margin-bottom:16px}.input-group input{flex:1;padding:14px 18px;border:2px solid var(--border);border-radius:var(--radius);font-size:1rem;background:var(--card-bg);color:var(--text);outline:none;transition:all .2s ease}.input-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #4361ee26}.input-group input::placeholder{color:var(--text-light)}.input-group button{background:var(--primary);color:#fff;border:none;border-radius:var(--radius);padding:0 24px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.input-group button:hover:not(:disabled){background:var(--primary-dark);transform:translateY(-1px)}.input-group button:disabled{background:var(--text-light);cursor:not-allowed;transform:none}.input-group button.loading{opacity:.8;cursor:wait}.message{padding:12px 16px;border-radius:var(--radius);margin-bottom:16px;display:flex;align-items:center;gap:10px}.error-message{background:#dc35451a;color:var(--error);border-left:4px solid var(--error)}.success-message{background:#28a7451a;color:var(--success);border-left:4px solid var(--success)}.divider{height:1px;background:var(--border);margin:28px 0;opacity:.6}.table-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}.table-header h2{color:var(--text);font-size:1.4rem;font-weight:700}.table-controls{display:flex;align-items:center;gap:12px}.results-count{color:var(--text-light);font-size:.9rem}.refresh-btn{background:none;border:none;cursor:pointer;font-size:1.2rem;padding:6px;border-radius:50%;transition:all .2s ease}.refresh-btn:hover{background:#0000000d;transform:rotate(90deg)}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 0;color:var(--text-light)}.spinner{width:40px;height:40px;border:4px solid var(--border);border-top:4px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.empty-state{text-align:center;padding:40px 0;color:var(--text-light)}.empty-icon{font-size:3rem;margin-bottom:16px;opacity:.5}.empty-state h3{margin-bottom:8px;color:var(--text)}.table-container{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}.url-table{width:100%;border-collapse:collapse;min-width:600px}.url-table th{background:var(--primary);color:#fff;font-weight:600;text-align:left;padding:16px;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .2s ease}.url-table th:hover{background:var(--primary-dark)}.th-content{display:flex;align-items:center;gap:8px}.url-table td{padding:16px;border-bottom:1px solid var(--border);vertical-align:middle}.url-table tr:last-child td{border-bottom:none}.url-table tr:hover{background:#4361ee08}.original-url{color:var(--text);text-decoration:none;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}.original-url:hover{color:var(--primary);text-decoration:underline}.short-url-container{display:flex;align-items:center;gap:8px}.short-url-link{color:var(--primary);text-decoration:none;font-weight:600;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.short-url-link:hover{text-decoration:underline}.icon-btn{background:none;border:none;cursor:pointer;padding:6px;border-radius:6px;font-size:1.1rem;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center}.icon-btn:hover{background:#0000000d;transform:scale(1.1)}.copy-btn:hover{color:var(--success)}.delete-btn:hover{color:var(--error)}.share-btn:hover{color:var(--info)}.clicks-count{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:#4361ee1a;color:var(--primary);border-radius:50%;font-weight:600;font-size:.9rem}.pagination{display:flex;justify-content:center;margin-top:24px;gap:6px}.pagination-btn{padding:8px 14px;border:1px solid var(--border);background:var(--card-bg);color:var(--text);border-radius:6px;cursor:pointer;transition:all .2s ease}.pagination-btn:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary)}.pagination-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.theme-toggle{position:fixed;top:20px;right:20px;background:var(--card-bg);border:1px solid var(--border);border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;box-shadow:var(--shadow)}@media (max-width: 768px){.encurtador-container{padding:16px}.card{padding:20px}h1{font-size:2rem}.input-group{flex-direction:column}.input-group button{width:100%;padding:14px}.table-header{flex-direction:column;align-items:flex-start}.url-table th,.url-table td{padding:12px 10px}.original-url{max-width:150px}}@media (max-width: 480px){.card{padding:16px}h1{font-size:1.8rem}.url-table th,.url-table td{padding:10px 8px;font-size:.9rem}.original-url{max-width:120px}.short-url-container,.pagination{flex-wrap:wrap}}
