:root{--bg-app:#f8fafc;--bg-surface:#fff;--bg-surface-hover:#f1f5f9;--bg-subtle:#f1f5f9;--border-light:#e2e8f0;--border-medium:#cbd5e1;--text-primary:#0f172a;--text-secondary:#475569;--text-muted:#94a3b8;--brand-primary:#2563eb;--brand-primary-hover:#1d4ed8;--brand-light:#eff6ff;--success-bg:#ecfdf5;--success-text:#047857;--success-border:#a7f3d0;--warning-bg:#fffbeb;--warning-text:#b45309;--warning-border:#fde68a;--danger-bg:#fef2f2;--danger-text:#b91c1c;--danger-border:#fecaca;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-full:9999px;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000000d, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #0000000d, 0 4px 6px -4px #00000008;--shadow-modal:0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000000d;--font-sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5}#root,.app-container{flex-direction:column;min-height:100vh;display:flex}.navbar{background:var(--bg-surface);border-bottom:1px solid var(--border-light);z-index:100;box-shadow:var(--shadow-sm);justify-content:space-between;align-items:center;padding:.85rem 2rem;display:flex;position:sticky;top:0}.nav-brand{color:var(--text-primary);letter-spacing:-.02em;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:700;display:flex}.nav-brand-logo{border-radius:var(--radius-md);color:#fff;background:linear-gradient(135deg,#2563eb,#1d4ed8);justify-content:center;align-items:center;width:36px;height:36px;display:flex;box-shadow:0 2px 8px #2563eb40}.nav-menu{background:var(--bg-subtle);border-radius:var(--radius-md);align-items:center;gap:.5rem;padding:.25rem;display:flex}.nav-item{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;background:0 0;border:none;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem;font-weight:500;transition:all .15s;display:flex}.nav-item:hover{color:var(--text-primary)}.nav-item.active{background:var(--bg-surface);color:var(--brand-primary);box-shadow:var(--shadow-sm);font-weight:600}.nav-actions{align-items:center;gap:.75rem;display:flex}.status-pill{border-radius:var(--radius-full);white-space:nowrap;align-items:center;gap:.4rem;padding:.3rem .75rem;font-size:.8rem;font-weight:500;display:inline-flex}.status-pill.online{background:var(--success-bg);color:var(--success-text);border:1px solid var(--success-border)}.status-pill.offline{background:var(--warning-bg);color:var(--warning-text);border:1px solid var(--warning-border)}.status-dot{background:currentColor;border-radius:50%;width:7px;height:7px}.main-content{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:2rem}.btn{border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.55rem 1.1rem;font-size:.875rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-primary{background:var(--brand-primary);color:#fff}.btn-primary:hover{background:var(--brand-primary-hover);box-shadow:0 4px 12px #2563eb33}.btn-secondary{background:var(--bg-surface);border-color:var(--border-medium);color:var(--text-primary)}.btn-secondary:hover{background:var(--bg-subtle)}.btn-danger{background:var(--danger-bg);color:var(--danger-text);border-color:var(--danger-border)}.btn-danger:hover{background:#fee2e2}.btn-sm{padding:.35rem .75rem;font-size:.8rem}.card{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:1.5rem;transition:box-shadow .2s}.card:hover{box-shadow:var(--shadow-md)}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-bottom:2rem;display:grid}.kpi-card{justify-content:space-between;align-items:flex-start;display:flex}.kpi-title{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.35rem;font-size:.85rem;font-weight:500}.kpi-value{color:var(--text-primary);letter-spacing:-.02em;font-size:1.75rem;font-weight:700}.kpi-subtext{color:var(--text-muted);margin-top:.25rem;font-size:.8rem}.kpi-icon{border-radius:var(--radius-md);background:var(--brand-light);width:44px;height:44px;color:var(--brand-primary);justify-content:center;align-items:center;display:flex}.table-container{-webkit-overflow-scrolling:touch;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow-x:auto}.data-table{border-collapse:collapse;text-align:left;width:100%;font-size:.875rem}.data-table th{background:var(--bg-subtle);color:var(--text-secondary);border-bottom:1px solid var(--border-light);white-space:nowrap;padding:.85rem 1.25rem;font-weight:600}.data-table td{border-bottom:1px solid var(--border-light);color:var(--text-primary);padding:1rem 1.25rem}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background-color:#f8fafc}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.5rem;display:flex}.page-title{color:var(--text-primary);letter-spacing:-.02em;font-size:1.5rem;font-weight:700}.page-subtitle{color:var(--text-secondary);margin-top:.15rem;font-size:.875rem}.form-group{flex-direction:column;justify-content:flex-end;margin-bottom:1.25rem;display:flex}.form-label{color:var(--text-secondary);white-space:nowrap;text-overflow:ellipsis;margin-bottom:.4rem;font-size:.85rem;font-weight:600;display:block;overflow:hidden}.form-input,.form-select,.form-textarea{border:1px solid var(--border-medium);border-radius:var(--radius-md);background:var(--bg-surface);width:100%;color:var(--text-primary);height:38px;padding:.6rem .85rem;font-family:inherit;font-size:.9rem;transition:border-color .15s,box-shadow .15s}.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--brand-primary);outline:none;box-shadow:0 0 0 3px #2563eb26}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0f172a66;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.modal-card{background:var(--bg-surface);border-radius:var(--radius-lg);width:100%;max-width:600px;max-height:90vh;box-shadow:var(--shadow-modal);border:1px solid var(--border-light);flex-direction:column;display:flex;overflow-y:auto}.modal-header{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-title{font-size:1.2rem;font-weight:700}.modal-body{flex:1;padding:1.5rem}.modal-footer{border-top:1px solid var(--border-light);background:var(--bg-subtle);border-bottom-left-radius:var(--radius-lg);border-bottom-right-radius:var(--radius-lg);justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.5rem;display:flex}@media (width<=900px){.navbar{flex-wrap:wrap;gap:.75rem;padding:.75rem 1.25rem}.nav-menu{-webkit-overflow-scrolling:touch;order:3;justify-content:flex-start;width:100%;padding:.35rem;overflow-x:auto}.main-content{padding:1.25rem}.page-header{flex-direction:column;align-items:stretch;gap:.75rem}.page-header .btn{width:100%}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:1rem}}@media (width<=640px){.navbar{padding:.65rem .85rem}.nav-brand{gap:.5rem;font-size:1.05rem}.nav-brand-logo{width:32px;height:32px}.nav-actions{gap:.4rem}.nav-actions .btn{padding:.4rem .65rem;font-size:.78rem}.main-content{padding:1rem .75rem}.kpi-grid{grid-template-columns:repeat(2,1fr);gap:.65rem}.kpi-card{padding:.85rem}.kpi-title{font-size:.75rem}.kpi-value{font-size:1.25rem}.kpi-icon{width:36px;height:36px}.card{border-radius:var(--radius-md);padding:1rem}.modal-overlay{padding:.5rem}.modal-card{max-height:95vh}.modal-header,.modal-body,.modal-footer{padding:1rem}.modal-body div[style*="display: grid"],.modal-body div[style*=display\:grid]{grid-template-columns:1fr!important;gap:.75rem!important}.data-table th,.data-table td{padding:.65rem .75rem;font-size:.8rem}}@media print{@page{margin:1.5cm;size:auto}body{color:#000!important;background:#fff!important;font-size:12pt!important}body *{visibility:hidden!important}.modal-overlay,.modal-overlay *{visibility:visible!important}.modal-overlay{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;width:100%!important;height:auto!important;box-shadow:none!important;background:0 0!important;margin:0!important;padding:0!important;position:absolute!important;top:0!important;left:0!important}.modal-card{width:100%!important;max-width:100%!important;box-shadow:none!important;border:none!important;margin:0!important;padding:0!important;position:absolute!important;top:0!important;left:0!important}.no-print,.no-print *{visibility:hidden!important;display:none!important}}