:root{--primary: #3b82f6;--primary-dark: #1d4ed8;--secondary: #14b8a6;--accent: #8b5cf6;--danger: #ef4444;--danger-dark: #dc2626;--success: #22c55e;--neutral: #6b7280;--neutral-light: #9ca3af;--text-primary: #111827;--text-secondary: #4b5563;--text-light: #6b7280;--text-white: #ffffff;--bg-primary: #f9fafb;--bg-secondary: #ffffff;--bg-tertiary: #f3f4f6;--bg-hover: #f1f5f9;--border-light: #e5e7eb;--border-medium: #d1d5db;--border-dark: #9ca3af;--shadow-sm: 0 1px 3px rgba(0,0,0,.1);--shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px}[data-theme=dark]{--text-primary: #e5e7eb;--text-secondary: #9ca3af;--bg-primary: #181a1b;--bg-secondary: #121212;--bg-tertiary: #23272e;--bg-hover: #222326;--border-light: #374151;--border-medium: #4b5563}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.5;font-size:16px}a{color:var(--primary);text-decoration:none;transition:color .2s ease}a:hover{color:var(--primary-dark)}.app-container{padding:0rem .5rem;background-color:var(--bg-primary)}.main-content{padding:0rem .5rem}.table-container{background:var(--bg-secondary);border-radius:var(--radius-md);border:1px solid var(--border-light);overflow-x:auto}table{width:100%;border-collapse:collapse}th,td{width:165px;padding:.5rem;border-bottom:1px solid var(--border-light);text-align:left;font-weight:400}th{background:var(--bg-tertiary);font-weight:500;color:var(--text-primary);font-size:1rem;text-transform:uppercase;border-bottom:1px solid var(--border-medium)}tr:hover{background:var(--bg-hover)}tr:last-child td{border-bottom:none}.selection-td,.selection-th{min-width:10px;border-bottom:1px solid var(--border-light)}th input{padding:.5rem .75rem;border:1px solid var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;font-family:inherit}th button{padding:.5rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--border-light);background:var(--bg-secondary);color:var(--text-primary);cursor:pointer}.above-table{padding:.5rem 0rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;position:sticky;top:0;background-color:var(--bg-primary);z-index:10}.above-table-inner{color:var(--text-primary);background:var(--bg-primary);padding:.75rem;border-radius:var(--radius-sm);border:1px solid var(--border-light);transition:all .2s ease;cursor:pointer}.above-table-inner:hover{color:var(--text-primary);border-color:var(--primary);background:var(--bg-hover)}.above-actions{color:var(--text-primary);background:var(--bg-primary);padding:.5rem;border-radius:var(--radius-sm);border:1px solid var(--border-light);transition:all .2s ease;cursor:pointer;justify-content:center;align-items:center}.above-actions:hover{color:var(--text-primary);border-color:var(--primary);background:var(--bg-hover)}.below-table{border-radius:var(--radius-md);padding:.5rem 0rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem}.below-table-inner{color:var(--text-primary);background:var(--bg-primary);padding:.75rem;border-radius:var(--radius-sm);border:1px solid var(--border-light);cursor:pointer}.below-table-inner:hover{color:var(--text-primary);border-color:var(--primary);background:var(--bg-hover)}.actions{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.5rem}.action-btn{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border-light);cursor:pointer;transition:all .2s ease;color:var(--text-secondary);background:none}.action-btn:hover{background:var(--bg-hover)}.edit-btn:hover{color:var(--primary);border-color:var(--primary)}.del-btn:hover{color:var(--danger);border-color:var(--danger)}.actions-header{background:var(--bg-tertiary);min-width:165px;padding:0rem;color:var(--text-primary);display:flex;flex-direction:row;align-items:center;justify-content:center;gap:.3rem}.action-btn-header{background:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border-light);cursor:pointer;transition:all .2s ease}.action-btn-header:hover{background:var(--bg-tertiary)}.loading-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;background:var(--bg-primary);gap:1.5rem}.loading-logo{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.1));animation:pulse 1.5s infinite;border-radius:20px}@keyframes pulse{0%,to{opacity:.6;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}.spinner{width:40px;height:40px;border:4px solid var(--border-light);border-top:4px solid var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:1rem 0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{padding:1rem;border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:500;font-size:1rem;transition:all .2s ease;display:inline-flex;align-items:center;gap:.5rem}.btn.primary{background:var(--primary);color:var(--text-white)}.btn.primary:hover{background:var(--primary-dark)}.btn.secondary{background:var(--bg-secondary);color:var(--text-primary);border:1px solid var(--border-medium)}.btn.secondary:hover{background:var(--bg-hover)}.delete-btn{color:var(--text-white);background-color:var(--danger)}.delete-btn:hover{color:var(--text-white);background-color:var(--danger-dark)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:50}.modal{max-width:400px;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;position:fixed;z-index:51;background:var(--bg-secondary);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:var(--shadow-lg);width:100%;max-width:450px;top:50%;left:50%;transform:translate(-50%,-50%)}.modal p{max-width:100%;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-line}.modal-actions{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem}.form-group{margin-bottom:1rem}.form-group label{display:block;font-weight:500;margin-bottom:.5rem}.form-group input[type=text],.form-group input[type=datetime-local]{width:100%;padding:.75rem;border:1px solid var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;font-family:inherit;line-height:1.5;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-group input[type=text]:focus,.form-group input[type=datetime-local]:focus{outline:none;border-color:var(--primary)}.form-group select{width:100%;padding:.75rem;border:1px solid var(--border-medium);border-radius:var(--radius-sm);background:var(--bg-secondary);color:var(--text-primary);font-size:1rem;font-family:inherit;line-height:1.5;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg fill='none' stroke='%236b7280' stroke-width='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/></svg>");background-repeat:no-repeat;background-position:right .75rem center;background-size:1em;cursor:pointer}.form-group select:focus{outline:none;border-color:var(--primary)}[data-theme=dark] .form-group select{background-color:var(--bg-secondary);color:var(--text-primary)}.form-group input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(40%) sepia(20%) saturate(300%) hue-rotate(200deg);cursor:pointer;opacity:.7}.form-group input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1}[data-theme=dark] .form-group input[type=datetime-local]::-webkit-calendar-picker-indicator{filter:invert(80%) sepia(0%) saturate(0%) hue-rotate(0deg);opacity:.8}[data-theme=dark] .form-group input[type=datetime-local]::-webkit-calendar-picker-indicator:hover{opacity:1}.empty-state{text-align:center;padding:2rem;color:var(--text-secondary)}.empty-actions{display:flex;justify-content:center;margin-top:1rem}.error-content{text-align:center;color:var(--danger)}@media (max-width: 768px){table{min-width:600px}}@media (max-width: 480px){th,td{font-size:.875rem;padding:.5rem}.btn{font-size:.875rem;padding:.5rem 1rem}}