@tailwind base;@tailwind components;@tailwind utilities;:root{--color-primary: #33808d;--color-primary-dark: #2a6b75;--color-primary-light: #4a9aa8;--color-background: #1f2121;--color-surface: #2a2d2d;--color-surface-light: #343838;--color-text-primary: #ffffff;--color-text-secondary: #b8c5c5;--color-text-muted: #8a9999;--color-border: #404545;--color-success: #10b981;--color-warning: #f59e0b;--color-error: #ef4444;--color-sidebar: #1a1d1d;--color-sidebar-hover: #252929;--color-sidebar-active: #33808d20;--color-table-header: #1e3a8a;--color-table-row: #374151;--color-table-hover: #4b5563}body{background:var(--color-background);color:var(--color-text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;margin:0;padding:0;min-height:100vh}.app-container{display:flex;min-height:100vh;background:var(--color-background)}.sidebar{width:280px;background:var(--color-sidebar);border-right:1px solid var(--color-border);padding:1.5rem 0;overflow-y:auto;display:flex;flex-direction:column}.sidebar h3{color:var(--color-text-primary);font-size:1.1rem;font-weight:600;padding:0 1.5rem;margin-bottom:1rem;letter-spacing:.025em}.category-list{list-style:none;padding:0;margin:0 .75rem;flex:1}.category-item{margin-bottom:.25rem}.category-button{width:100%;display:flex;align-items:center;padding:.75rem 1rem;background:transparent;border:none;color:var(--color-text-secondary);font-size:.95rem;border-radius:.5rem;cursor:pointer;transition:all .2s ease;text-align:left}.category-button:hover{background:var(--color-sidebar-hover);color:var(--color-text-primary)}.category-button.active{background:var(--color-sidebar-active);color:var(--color-primary);font-weight:500}.category-icon{margin-right:.75rem;font-size:1.1rem}.category-count{margin-left:auto;background:var(--color-surface);color:var(--color-text-muted);padding:.25rem .5rem;border-radius:1rem;font-size:.75rem;min-width:1.5rem;text-align:center}.active .category-count{background:var(--color-primary);color:#fff}.actions-section{margin-top:2rem;padding:0 .75rem}.actions-title{color:var(--color-text-muted);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:0 1rem;margin-bottom:1rem}.action-button{width:100%;padding:.75rem 1rem;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-secondary);font-size:.9rem;border-radius:.5rem;cursor:pointer;transition:all .2s ease;margin-bottom:.5rem;text-align:left}.action-button:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.footer-info{padding:1rem 1.5rem;border-top:1px solid var(--color-border);color:var(--color-text-muted);font-size:.8rem}.main-content{flex:1;padding:2rem;overflow:auto}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.app-title{font-size:1.5rem;font-weight:600;color:var(--color-text-primary);margin:0;display:flex;align-items:center;gap:.75rem}.network-info{color:var(--color-text-muted);font-size:.9rem;font-family:SF Mono,Monaco,monospace;margin-top:.25rem}.header-controls{display:flex;align-items:center;gap:1rem}.btn{padding:.75rem 1.5rem;border-radius:.5rem;font-weight:500;cursor:pointer;transition:all .2s ease;border:none;font-size:.95rem}.btn--primary{background:var(--color-primary);color:#fff}.btn--primary:hover:not(:disabled){background:var(--color-primary-dark);transform:translateY(-1px)}.btn--primary:disabled{background:var(--color-text-muted);cursor:not-allowed}.btn--secondary{background:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn--secondary:hover{background:var(--color-surface-light);color:var(--color-text-primary)}.search-container{margin-bottom:1.5rem;display:flex;align-items:center;gap:1rem}.search-input{flex:1;max-width:400px;padding:.75rem 1rem;background:var(--color-surface);border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:.5rem;font-size:.95rem}.search-input:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary) 20}.search-input::placeholder{color:var(--color-text-muted)}.offline-toggle{display:flex;align-items:center;gap:.5rem;color:var(--color-text-secondary);font-size:.9rem;cursor:pointer}.device-table-container{background:var(--color-surface);border-radius:.75rem;overflow:hidden;border:1px solid var(--color-border);margin-bottom:2rem}.device-table{width:100%;border-collapse:collapse}.device-table th{background:var(--color-table-header);color:#fff;padding:1rem;text-align:left;font-weight:500;font-size:.9rem;border-bottom:1px solid var(--color-border);position:sticky;top:0}.device-table th:first-child{border-radius:.75rem 0 0}.device-table th:last-child{border-radius:0 .75rem 0 0}.device-table td{padding:1rem;border-bottom:1px solid var(--color-border);color:var(--color-text-primary);font-size:.9rem}.device-table tr:hover{background:var(--color-table-hover)20}.device-table tr:last-child td{border-bottom:none}.status-indicator{display:flex;align-items:center;gap:.5rem}.status-dot{width:8px;height:8px;border-radius:50%}.status-dot.online{background:var(--color-success);box-shadow:0 0 4px var(--color-success)}.status-dot.offline{background:var(--color-text-muted)}.mac-address{font-family:SF Mono,Monaco,monospace;font-size:.85rem;color:var(--color-text-secondary)}.category-badge{padding:.25rem .75rem;background:var(--color-primary)20;color:var(--color-primary);border-radius:1rem;font-size:.8rem;font-weight:500}.table-action-btn{padding:.25rem .75rem;background:var(--color-surface-light);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:.25rem;cursor:pointer;font-size:.8rem;transition:all .2s ease;margin-right:.5rem}.table-action-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.table-action-btn.delete{background:var(--color-error)20;color:var(--color-error);border-color:var(--color-error)}.table-action-btn.delete:hover{background:var(--color-error);color:#fff}.export-bar{display:flex;gap:.75rem;margin-top:1.5rem;flex-wrap:wrap}.export-btn{padding:.5rem 1rem;background:var(--color-surface);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:.5rem;cursor:pointer;font-size:.9rem;transition:all .2s ease}.export-btn:hover{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.empty-state{text-align:center;padding:3rem 1rem;color:var(--color-text-muted)}.empty-state h3{margin-bottom:.5rem;color:var(--color-text-secondary);font-size:1.1rem}.empty-state p{margin:0;font-size:.9rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-container{background:var(--color-surface);border-radius:1rem;padding:2rem;min-width:400px;max-width:90vw;max-height:90vh;overflow-y:auto;border:1px solid var(--color-border);box-shadow:0 20px 25px -5px #00000080}.modal-container h2{color:var(--color-text-primary);margin:0 0 1.5rem;font-size:1.25rem}.modal-form{display:flex;flex-direction:column;gap:1rem}.modal-form label{display:flex;flex-direction:column;gap:.25rem;color:var(--color-text-secondary);font-size:.9rem;font-weight:500}.modal-form input,.modal-form select,.modal-form textarea{padding:.75rem;background:var(--color-background);border:1px solid var(--color-border);color:var(--color-text-primary);border-radius:.5rem;font-size:.95rem}.modal-form input:focus,.modal-form select:focus,.modal-form textarea:focus{outline:none;border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary) 20}.modal-form textarea{min-height:80px;resize:vertical}.modal-buttons{display:flex;gap:1rem;margin-top:1.5rem;justify-content:flex-end}@media (max-width: 768px){.app-container{flex-direction:column}.sidebar{width:100%;padding:1rem 0;height:auto}.main-content{padding:1rem}.app-header{flex-direction:column;gap:1rem;align-items:stretch}.search-container{flex-direction:column;align-items:stretch;gap:.5rem}.export-bar{flex-direction:column}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--color-surface)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid transparent;border-top:2px solid currentColor;border-radius:50%;animation:spin 1s linear infinite;margin-right:.5rem}