@import"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap";:root{--bg-primary: #0a0f1a;--bg-secondary: #111827;--bg-card: #1a2332;--bg-card-hover: #1f2937;--border-color: rgba(255, 255, 255, .08);--text-primary: #f3f4f6;--text-secondary: #9ca3af;--text-muted: #6b7280;--accent-green: #10b981;--accent-blue: #3b82f6;--accent-purple: #8b5cf6;--accent-orange: #f59e0b;--accent-red: #ef4444;--accent-yellow: #eab308;--accent-gray: #6b7280;--gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);--gradient-blue: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);--gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);--gradient-orange: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);--gradient-red: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px rgba(0, 0, 0, .5);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Space Grotesk,-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}#root{min-height:100vh}.login-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);background-image:radial-gradient(ellipse at top,rgba(16,185,129,.1) 0%,transparent 50%),radial-gradient(ellipse at bottom right,rgba(59,130,246,.1) 0%,transparent 50%);padding:20px}.login-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:48px 40px;text-align:center;max-width:400px;width:100%;box-shadow:var(--shadow-lg)}.login-logo{width:80px;height:80px;background:var(--gradient-green);border-radius:20px;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:#fff}.login-card h1{font-size:1.75rem;font-weight:700;margin-bottom:8px;background:linear-gradient(135deg,var(--text-primary) 0%,var(--accent-green) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.login-subtitle{color:var(--text-secondary);margin-bottom:32px}.login-error{background:#ef44441a;border:1px solid rgba(239,68,68,.3);color:#fca5a5;padding:12px 16px;border-radius:var(--radius-md);margin-bottom:24px;display:flex;align-items:center;gap:8px;font-size:.875rem}.login-button{width:100%;padding:14px 24px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-primary);font-family:inherit;font-size:1rem;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:all .2s ease}.login-button:hover{background:var(--bg-card-hover);border-color:#ffffff26;transform:translateY(-1px)}.login-footer{margin-top:24px;font-size:.8rem;color:var(--text-muted)}.loading-spinner{width:24px;height:24px;border:2px solid var(--border-color);border-top-color:var(--accent-green);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}.loading-spinner.large{width:48px;height:48px;border-width:3px}@keyframes spin{to{transform:rotate(360deg)}}.dashboard{max-width:1400px;margin:0 auto;padding:24px}.dashboard-loading,.dashboard-error{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-secondary)}.dashboard-error{color:var(--accent-red)}.dashboard-error h2{margin:16px 0 8px}.dashboard-error p{color:var(--text-secondary);margin-bottom:24px}.retry-button{display:flex;align-items:center;gap:8px;padding:12px 24px;background:var(--gradient-green);border:none;border-radius:var(--radius-md);color:#fff;font-family:inherit;font-weight:500;cursor:pointer;transition:transform .2s}.retry-button:hover{transform:translateY(-2px)}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.header-left{display:flex;align-items:center;gap:16px}.header-logo{color:var(--accent-green)}.header-left h1{font-size:1.5rem;font-weight:700;margin-bottom:2px}.header-left p{color:var(--text-secondary);font-size:.875rem}.header-right{display:flex;align-items:center;gap:12px}.icon-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all .2s}.icon-button:hover{background:var(--bg-card-hover);color:var(--text-primary)}.user-info{display:flex;align-items:center;gap:10px;padding:6px 12px 6px 6px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md)}.user-avatar{width:28px;height:28px;border-radius:50%}.user-info span{font-size:.875rem;font-weight:500}.last-updated{display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:.8rem;margin-bottom:24px}.metrics-section{margin-bottom:32px}.section-title{display:flex;align-items:center;gap:10px;font-size:1.1rem;font-weight:600;color:var(--text-secondary);margin-bottom:16px}.section-title svg{color:var(--accent-green)}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.metric-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px;position:relative;overflow:hidden;transition:all .2s ease}.metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px}.metric-card-green:before{background:var(--gradient-green)}.metric-card-blue:before{background:var(--gradient-blue)}.metric-card-purple:before{background:var(--gradient-purple)}.metric-card-orange:before{background:var(--gradient-orange)}.metric-card-red:before{background:var(--gradient-red)}.metric-card-yellow:before{background:linear-gradient(135deg,#eab308,#ca8a04)}.metric-card-gray:before{background:linear-gradient(135deg,#6b7280,#4b5563)}.metric-card:hover{transform:translateY(-2px);border-color:#ffffff1f;box-shadow:var(--shadow-md)}.metric-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}.metric-title{font-size:.85rem;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.metric-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#ffffff0d;border-radius:var(--radius-sm);color:var(--text-secondary)}.metric-card-green .metric-icon{color:var(--accent-green)}.metric-card-blue .metric-icon{color:var(--accent-blue)}.metric-card-purple .metric-icon{color:var(--accent-purple)}.metric-card-orange .metric-icon{color:var(--accent-orange)}.metric-card-red .metric-icon{color:var(--accent-red)}.metric-card-yellow .metric-icon{color:var(--accent-yellow)}.metric-value{font-family:JetBrains Mono,monospace;font-size:2rem;font-weight:600;line-height:1.2;margin-bottom:8px}.metric-footer{display:flex;justify-content:space-between;align-items:center}.metric-subtitle{font-size:.8rem;color:var(--text-muted)}.metric-trend{display:flex;align-items:center;gap:4px;font-size:.8rem;font-weight:500}.trend-up{color:var(--accent-green)}.trend-down{color:var(--accent-red)}.trend-neutral{color:var(--text-muted)}.charts-section{margin-bottom:32px}.charts-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.charts-grid.three-cols{grid-template-columns:repeat(3,1fr)}.charts-grid.single{grid-template-columns:1fr;max-width:600px}.chart-card{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:20px}.chart-header{margin-bottom:16px}.chart-header h3{font-size:1rem;font-weight:600;margin-bottom:4px}.chart-subtitle{font-size:.8rem;color:var(--text-muted)}.chart-container{height:220px}.chart-empty{height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.chart-tooltip{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);padding:10px 14px;box-shadow:var(--shadow-md)}.chart-tooltip-label{font-size:.8rem;color:var(--text-secondary);margin-bottom:4px}.chart-tooltip-value{font-family:JetBrains Mono,monospace;font-size:.95rem;font-weight:600;color:var(--text-primary)}.donut-container .recharts-legend-wrapper{bottom:0!important}.donut-legend{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}.donut-legend li{display:flex;align-items:center;gap:6px;font-size:.75rem}.legend-color{width:10px;height:10px;border-radius:2px}.legend-label{color:var(--text-secondary)}.legend-value{font-family:JetBrains Mono,monospace;font-weight:500;color:var(--text-primary)}.dashboard-footer{text-align:center;padding:24px;color:var(--text-muted);font-size:.8rem;border-top:1px solid var(--border-color);margin-top:32px}.user-management{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;margin-bottom:32px}.user-management .section-title,.search-box{margin-bottom:20px}.search-input-wrapper{display:flex;align-items:center;gap:12px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);padding:8px 16px}.search-input-wrapper svg{color:var(--text-muted);flex-shrink:0}.search-input-wrapper input{flex:1;background:none;border:none;color:var(--text-primary);font-family:inherit;font-size:.95rem;outline:none}.search-input-wrapper input::placeholder{color:var(--text-muted)}.search-input-wrapper button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--gradient-green);border:none;border-radius:var(--radius-sm);color:#fff;font-family:inherit;font-weight:500;cursor:pointer;transition:opacity .2s}.search-input-wrapper button:hover{opacity:.9}.search-input-wrapper button:disabled{opacity:.5;cursor:not-allowed}.error-box{display:flex;align-items:center;gap:10px;padding:14px 18px;background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:var(--radius-md);color:#fca5a5;font-size:.9rem}.user-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-md);overflow:hidden}.user-header{padding:20px;border-bottom:1px solid var(--border-color);background:linear-gradient(135deg,rgba(16,185,129,.05) 0%,transparent 100%)}.user-info-main h3{font-size:1.25rem;font-weight:600;margin-bottom:10px}.user-badges{display:flex;gap:8px;flex-wrap:wrap}.badge{padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px}.status-badge{padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:500;text-transform:capitalize;background:#ffffff1a;color:var(--text-secondary)}.status-badge.active{background:#10b98133;color:#34d399}.status-badge.trial{background:#3b82f633;color:#60a5fa}.status-badge.cancelled{background:#ef444433;color:#f87171}.status-badge.expired{background:#f59e0b33;color:#fbbf24}.user-details{padding:20px}.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:20px}.detail-item{display:flex;flex-direction:column;gap:4px}.detail-item label{font-size:.75rem;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.detail-item span{font-size:.9rem;color:var(--text-primary);font-family:JetBrains Mono,monospace}.features-section{margin-bottom:20px}.features-section>label{display:block;font-size:.85rem;font-weight:500;color:var(--text-secondary);margin-bottom:10px}.features-list{display:flex;flex-wrap:wrap;gap:8px}.feature-tag{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--radius-sm);font-size:.8rem;font-family:JetBrains Mono,monospace}.feature-tag.active{background:#10b98126;color:#34d399}.feature-tag.inactive{background:#6b728026;color:var(--text-muted)}.devices-section{margin-bottom:20px}.devices-section>label{display:flex;align-items:center;gap:6px;font-size:.85rem;font-weight:500;color:var(--text-secondary);margin-bottom:10px}.devices-list{display:flex;flex-direction:column;gap:8px}.device-item{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:var(--bg-card);border-radius:var(--radius-sm);font-size:.85rem}.device-name{color:var(--text-primary)}.device-date{color:var(--text-muted);font-size:.8rem}.user-actions{padding:20px;border-top:1px solid var(--border-color);background:var(--bg-card)}.action-group{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:16px}.action-group label{font-size:.85rem;font-weight:500;color:var(--text-secondary)}.action-group select{padding:10px 14px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-primary);font-family:inherit;font-size:.9rem;cursor:pointer}.action-buttons{display:flex;flex-wrap:wrap;gap:12px}.btn-primary,.btn-danger,.btn-warning{display:flex;align-items:center;gap:8px;padding:10px 18px;border:none;border-radius:var(--radius-sm);font-family:inherit;font-size:.9rem;font-weight:500;cursor:pointer;transition:opacity .2s,transform .2s}.btn-primary{background:var(--gradient-green);color:#fff}.btn-danger{background:var(--gradient-red);color:#fff}.btn-warning{background:var(--gradient-orange);color:#fff}.btn-primary:hover,.btn-danger:hover,.btn-warning:hover{opacity:.9;transform:translateY(-1px)}.btn-primary:disabled,.btn-danger:disabled,.btn-warning:disabled{opacity:.5;cursor:not-allowed;transform:none}.spin{animation:spin 1s linear infinite}@media(max-width:1200px){.charts-grid.three-cols{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.dashboard{padding:16px}.dashboard-header{flex-direction:column;gap:16px;text-align:center}.header-left{flex-direction:column}.metrics-grid,.charts-grid,.charts-grid.three-cols{grid-template-columns:1fr}.user-info span{display:none}.metric-value{font-size:1.75rem}}.test-button{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--gradient-purple);border:none;border-radius:var(--radius-md);color:#fff;font-family:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.test-button:hover{opacity:.9;transform:translateY(-1px)}.test-checklist{max-width:1000px;margin:0 auto;padding:24px}.test-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--border-color)}.test-header h1{font-size:1.5rem;font-weight:700;color:var(--accent-green)}.back-button{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-family:inherit;font-size:.875rem;cursor:pointer;transition:all .2s}.back-button:hover{background:var(--bg-card-hover);color:var(--text-primary)}.header-actions{display:flex;gap:10px}.action-button{display:flex;align-items:center;gap:6px;padding:10px 16px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-family:inherit;font-size:.875rem;cursor:pointer;transition:all .2s}.action-button:hover{background:var(--bg-card-hover);color:var(--text-primary)}.action-button.danger{border-color:#ef44444d;color:var(--accent-red)}.action-button.danger:hover{background:#ef44441a}.progress-container{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);padding:24px;margin-bottom:24px}.progress-bar{background:var(--bg-secondary);border-radius:10px;height:24px;overflow:hidden;margin-bottom:20px}.progress-fill{background:linear-gradient(90deg,#4ade80,#22c55e);height:100%;transition:width .3s ease;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:#000;min-width:40px}.stats-row{display:flex;justify-content:center;gap:40px;flex-wrap:wrap}.stats-row .stat{text-align:center}.stats-row .stat-number{font-family:JetBrains Mono,monospace;font-size:2rem;font-weight:700}.stats-row .stat-label{font-size:.8rem;color:var(--text-muted)}.stats-row .stat.passed .stat-number{color:var(--accent-green)}.stats-row .stat.failed .stat-number{color:var(--accent-red)}.stats-row .stat.pending .stat-number{color:var(--accent-yellow)}.last-updated-text{text-align:center;color:var(--text-muted);font-size:.8rem;margin-top:16px}.test-sections{display:flex;flex-direction:column;gap:16px}.test-section{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-lg);overflow:hidden}.test-section .section-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#ffffff05;cursor:pointer;transition:background .2s}.test-section .section-header:hover{background:#ffffff0d}.test-section .section-title{font-size:1rem;font-weight:600;color:var(--text-primary);margin:0}.section-meta{display:flex;align-items:center;gap:12px}.section-count{background:var(--bg-secondary);padding:4px 12px;border-radius:20px;font-size:.8rem;font-family:JetBrains Mono,monospace;color:var(--text-secondary)}.section-content{padding:12px 20px 20px}.test-item{display:flex;align-items:flex-start;gap:16px;padding:16px;border-radius:var(--radius-md);background:#ffffff05;margin-bottom:10px;transition:background .2s}.test-item:hover{background:#ffffff0a}.test-item:last-child{margin-bottom:0}.test-checkbox{width:28px;height:28px;min-width:28px;border:2px solid var(--border-color);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;margin-top:2px}.test-checkbox:hover{border-color:var(--text-muted)}.test-checkbox.passed{background:var(--accent-green);border-color:var(--accent-green);color:#000}.test-checkbox.failed{background:var(--accent-red);border-color:var(--accent-red);color:#fff}.test-content{flex:1;min-width:0}.test-id{color:var(--text-muted);font-size:.75rem;font-family:JetBrains Mono,monospace;margin-bottom:4px}.test-name{font-weight:600;font-size:.95rem;margin-bottom:6px}.test-steps{font-size:.85rem;color:var(--text-secondary);margin-bottom:6px}.test-expected{font-size:.85rem;color:var(--accent-green)}.test-actions{display:flex;gap:8px;flex-shrink:0}.btn-pass,.btn-fail{padding:8px 14px;border:none;border-radius:6px;cursor:pointer;font-size:.8rem;font-weight:600;font-family:inherit;transition:all .2s}.btn-pass{background:#10b98126;color:var(--accent-green)}.btn-pass:hover{background:#10b98140}.btn-fail{background:#ef444426;color:var(--accent-red)}.btn-fail:hover{background:#ef444440}@media(max-width:768px){.test-header{flex-direction:column;align-items:stretch;text-align:center}.back-button,.header-actions{justify-content:center}.stats-row{gap:24px}.stats-row .stat-number{font-size:1.5rem}.test-item{flex-direction:column}.test-checkbox{margin-top:0}.test-actions{width:100%;justify-content:flex-end}}