body{margin:0;font-family:system-ui,sans-serif;background:#0f172a;color:#e2e8f0}.app-container{display:flex;height:100vh}.sidebar{width:240px;background:#111827;padding:20px;display:flex;flex-direction:column}.logo-section{text-align:center;margin-bottom:30px}.logo{width:60px;margin-bottom:10px}.sidebar nav a{display:flex;align-items:center;gap:8px;padding:10px;margin:5px 0;text-decoration:none;color:#94a3b8;border-radius:6px;transition:.2s ease}.sidebar nav a:hover{background:#1e293b;color:#fff}.sidebar nav a.active{background:#2563eb;color:#fff}.main-content{flex:1;padding:30px;overflow-y:auto}.metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:40px}.metric-card{background:#1e293b;padding:20px;border-radius:10px;transition:.2s ease}.metric-card h4{margin:0;font-size:14px;color:#94a3b8}.metric-card h2{margin:10px 0;font-size:24px}.metric-card span{font-size:12px;color:#64748b}.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:30px}.chart-card{background:#1e293b;padding:20px;border-radius:10px}body{margin:0;font-family:Inter,sans-serif;background:radial-gradient(circle at top left,#111827,#0f172a);color:#e5e7eb}.app{display:flex;height:100vh;overflow:hidden}.sidebar{width:240px;background:#0b1220;border-right:1px solid #1F2937;padding:25px;display:flex;flex-direction:column;justify-content:space-between}.logo{font-weight:600;font-size:18px;margin-bottom:30px}.navItem{padding:10px 0;color:#9ca3af;cursor:pointer}.navItem.active{color:#3b82f6}.sidebar button{background:#1e293b;border:none;padding:10px;border-radius:8px;color:#fff;cursor:pointer}.sidebar button:hover{background:#334155}.main{flex:1;display:flex;flex-direction:column}.header{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;border-bottom:1px solid #1F2937;background:#11182799;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.content{flex:1;padding:40px;overflow-y:auto}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:25px;margin-bottom:35px}.card{background:#111827cc;border:1px solid #1F2937;border-radius:16px;padding:25px;transition:.3s;box-shadow:0 4px 20px #0000004d}.card:hover{transform:translateY(-6px);box-shadow:0 12px 30px #00000080;border-color:#3b82f6}.card h4{font-size:13px;color:#9ca3af;margin-bottom:8px}.card p{font-size:22px;font-weight:600}.grid2{display:grid;grid-template-columns:2fr 1fr;gap:25px;margin-bottom:30px}table{width:100%;border-collapse:collapse;margin-top:15px}th{text-align:left;font-size:13px;color:#9ca3af;border-bottom:1px solid #1F2937;padding-bottom:10px}td{padding:12px 0}tr:hover{background:#1e293b}.loginScreen{height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#111827,#0f172a)}.loginBox{background:#111827;padding:40px;border-radius:16px;width:320px;border:1px solid #1F2937;box-shadow:0 10px 40px #0009}.loginBox h2{margin-bottom:25px}.loginBox input{width:100%;padding:12px;margin-bottom:15px;border-radius:8px;border:1px solid #1F2937;background:#0f172a;color:#fff}.loginBox button{width:100%;padding:12px;border-radius:8px;border:none;background:#3b82f6;color:#fff;cursor:pointer}.loginBox button:hover{background:#2563eb}.loading{height:100vh;display:flex;align-items:center;justify-content:center;font-size:20px}@media(max-width:1200px){.stats{grid-template-columns:repeat(2,1fr)}.grid2{grid-template-columns:1fr}}.loginScreen{height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#0f172a,#020617)}.loginBox{width:380px;padding:50px;border-radius:20px;background:#111827e6;border:1px solid #1F2937;box-shadow:0 20px 60px #0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center}.loginBox h2{margin-bottom:30px;font-weight:500}.loginBox input{width:100%;padding:14px;margin-bottom:18px;border-radius:10px;border:1px solid #1F2937;background:#0f172a;color:#fff;font-size:14px}.product{font-weight:600;font-size:18px}.subtitle{font-size:12px;color:#9ca3af}.statusDot{width:8px;height:8px;border-radius:50%;background:#22c55e;margin-right:6px}.divider{margin:0 8px;color:#334155}.page-title{margin-bottom:20px}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}.card{background:#0f172a;padding:20px;border-radius:12px;margin-bottom:20px}.metric-card h3{margin-bottom:10px}.primary-btn{margin-top:20px;padding:10px 20px;background:#2563eb;border:none;border-radius:8px;color:#fff;cursor:pointer}.sla-bar{width:100%;height:12px;background:#1e293b;border-radius:6px;overflow:hidden;margin-bottom:8px}.sla-fill{height:100%;background:linear-gradient(90deg,#22c55e,#facc15,#ef4444)}.decision-table{width:100%;border-collapse:collapse}.decision-table th,.decision-table td{padding:8px;text-align:left;border-bottom:1px solid #1e293b}.loginBox button{width:100%;padding:14px;border-radius:10px;border:none;background:linear-gradient(90deg,#3b82f6,#2563eb);color:#fff;font-weight:500;cursor:pointer;transition:.3s}.loginBox button:hover{transform:translateY(-2px);box-shadow:0 8px 20px #3b82f666}.login-wrapper{height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a,#1e293b)}.login-card{background:#fff;padding:40px;border-radius:16px;width:380px;box-shadow:0 20px 60px #0000004d}.login-title{text-align:center;margin-bottom:5px;font-size:28px}.login-subtitle{text-align:center;margin-bottom:30px;color:#64748b}.login-form{display:flex;flex-direction:column;gap:15px}.login-input{padding:12px;border-radius:8px;border:1px solid #ddd;font-size:14px}.login-btn{padding:12px;border-radius:8px;font-weight:600;cursor:pointer;border:none}.login-btn.primary{background:#2563eb;color:#fff}.login-btn.primary:hover{background:#1d4ed8}.login-btn.google{background:#f1f5f9}.divider{text-align:center;margin:20px 0;color:#94a3b8}.auth-container{display:flex;height:100vh;font-family:Inter,sans-serif}.auth-left{flex:1.2;background:radial-gradient(circle at 20% 30%,#1e293b,#0f172a 70%);color:#fff;padding:80px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.auth-left:before{content:"";position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(59,130,246,.15),transparent 60%);top:-200px;left:-200px;animation:float 8s ease-in-out infinite alternate}@keyframes float{0%{transform:translate(0)}to{transform:translate(80px,40px)}}.auth-brand h1{font-size:40px;letter-spacing:2px;font-weight:700}.auth-brand p{opacity:.7;margin-bottom:50px;font-size:14px}.auth-tagline h2{font-weight:400;opacity:.85}.auth-right{flex:1;background:#f8fafc;display:flex;align-items:center;justify-content:center}.auth-card{width:380px;background:#fff;padding:45px;border-radius:18px;box-shadow:0 10px 30px #0000000d,0 25px 60px #0000001a;transition:transform .3s ease}.auth-card:hover{transform:translateY(-4px)}.auth-card h2{font-size:24px;margin-bottom:8px;font-weight:700;background:linear-gradient(90deg,#2563eb,#1d4ed8);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.auth-card h2:after{content:"";display:block;width:40px;height:3px;background:#2563eb;margin-top:8px;border-radius:2px}.auth-sub{font-size:14px;color:#64748b;margin-bottom:25px}.auth-form{display:flex;flex-direction:column;gap:15px}.auth-form input{padding:14px;border-radius:10px;border:1px solid #e2e8f0;font-size:14px;transition:all .2s ease}.auth-form input:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26}.btn-primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;padding:14px;border-radius:10px;border:none;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px #2563eb4d}.btn-google{width:100%;padding:14px;border-radius:10px;border:1px solid #e5e7eb;background:#fff;font-weight:500;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s ease}.btn-google:hover{background:#f9fafb;box-shadow:0 5px 15px #0000000d}.google-icon{width:18px;height:18px}.btn-google:hover{border-color:#ea4335}.divider{text-align:center;margin:20px 0;font-size:12px;color:#94a3b8}@media(max-width:900px){.auth-container{flex-direction:column}.auth-left{display:none}.auth-right{flex:1;background:linear-gradient(180deg,#f8fafc,#e2e8f0);display:flex;align-items:center;justify-content:center}.logo-stack{display:flex;flex-direction:column;align-items:center;margin-bottom:40px}.logo{width:140px;height:140px;animation:pulse 4s ease-in-out infinite alternate}@keyframes pulse{0%{transform:scale(1)}to{transform:scale(1.05)}}.logo-stack{display:flex;flex-direction:column;align-items:center;margin-bottom:30px}.live-table-header,.row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;padding:10px 15px;font-size:14px}.live-table-header{font-weight:600;border-bottom:1px solid rgba(255,255,255,.1)}.live-table{max-height:500px;overflow-y:auto}.row{border-left:4px solid transparent;transition:background .2s ease}.row:hover{background:#ffffff0d}.row.FOG_EXECUTION{border-left-color:#22c55e}.row.CLOUD_EXECUTION{border-left-color:#3b82f6}.row.FOG_AND_CLOUD{border-left-color:#facc15}.live-card,.device-card{background:#1f2937;padding:12px;margin-bottom:10px;border-radius:6px}.logs-box{background:#111827;padding:15px;max-height:500px;overflow-y:auto;font-family:monospace}.page-container{padding:20px}.device-card{background:#1f2937;padding:15px;margin-bottom:15px;border-radius:6px}.sla-bar{height:14px;background:#111827;border-radius:8px;overflow:hidden;margin-top:10px}.sla-fill{height:100%;transition:width .5s ease,background .3s ease}.sla-fill.healthy{background:#22c55e}.sla-fill.warning{background:#facc15}.sla-fill.danger{background:#ef4444}.sla-text{margin-top:6px;font-weight:600}.alloc-row{display:grid;grid-template-columns:80px 1fr 60px;align-items:center;margin-bottom:10px}.alloc-bar{height:10px;background:#111827;border-radius:6px;overflow:hidden}.alloc-fill{height:100%;transition:width .4s ease}.alloc-fill.fog{background:#22c55e}.alloc-fill.cloud{background:#3b82f6}.alloc-fill.hybrid{background:#facc15}.decision-table th,.decision-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.05);text-align:left}.config-card select,.config-card input{width:100%;margin-top:6px;margin-bottom:14px;padding:8px;background:#111827;border:1px solid #1f2937;border-radius:6px;color:#fff}.primary-btn{margin-top:10px;padding:10px 18px;background:#3b82f6;border:none;border-radius:6px;color:#fff;cursor:pointer;transition:.2s ease}.primary-btn:hover{background:#2563eb}.decision-badge{padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:.5px}.decision-badge.FOG_EXECUTION{background:#22c55e26;color:#22c55e}.decision-badge.CLOUD_EXECUTION{background:#3b82f626;color:#3b82f6}.decision-badge.FOG_AND_CLOUD{background:#facc1526;color:#facc15}.sla-breach{color:#ef4444;font-weight:600}.sla-ok{color:#22c55e;font-weight:600}.decision-table{width:100%;border-collapse:collapse}.decision-table thead{position:sticky;top:0;background:#0f172a;z-index:1}.decision-table th{font-size:13px;text-transform:uppercase;opacity:.6;padding:12px 10px}.decision-table td{padding:12px 10px;border-bottom:1px solid rgba(255,255,255,.05)}.breach-row{background:#ef444414}.normal-row:hover{background:#ffffff0a}@keyframes pulseRed{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 6px #ef444400}to{box-shadow:0 0 #ef444400}}.breach-row{animation:pulseRed 2s infinite}}