.login-page{background:var(--bg1);justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}.login-bg{pointer-events:none;background:radial-gradient(80% 60% at 20% 40%,#00c6ff0f 0%,#0000 60%),radial-gradient(60% 50% at 80% 60%,#0072ff0d 0%,#0000 60%);position:absolute;inset:0}.login-card{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);text-align:center;border-radius:24px;width:100%;max-width:420px;padding:40px 44px;animation:.4s fadeIn;position:relative;box-shadow:0 24px 80px #00000080}.login-logo{margin-bottom:12px;font-size:40px}.login-title{color:var(--text-primary);margin-bottom:4px;font-size:22px;font-weight:700}.login-sub{color:var(--text-muted);letter-spacing:.5px;margin-bottom:16px;font-size:11px}.login-badges{flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:28px;display:flex}.l-badge{letter-spacing:.8px;text-transform:uppercase;color:var(--accent);background:#00c6ff1a;border:1px solid #00c6ff40;border-radius:20px;padding:3px 10px;font-size:9.5px;font-weight:700}.l-badge.gold{color:var(--gold);background:#f5c5181a;border-color:#f5c51840}.login-form{text-align:left}.form-field{margin-bottom:16px}.form-field label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-bottom:6px;font-size:11px;font-weight:600;display:block}.form-field input{width:100%}.login-error{color:var(--red);background:#ff17441a;border:1px solid #ff174440;border-radius:8px;margin-bottom:14px;padding:10px 14px;font-size:12px}.login-btn{background:linear-gradient(135deg, var(--accent), var(--accent2));width:100%;color:var(--text-primary);letter-spacing:.5px;cursor:pointer;transition:var(--transition);border:none;border-radius:10px;justify-content:center;align-items:center;gap:8px;margin-top:4px;padding:12px;font-size:13px;font-weight:700;display:flex}.login-btn:hover:not(:disabled){opacity:.9;box-shadow:0 0 20px #00c6ff66}.login-btn:disabled{opacity:.6;cursor:not-allowed}.login-spinner{border:2px solid #0000001a;border-top-color:var(--text-primary);border-radius:50%;width:14px;height:14px;animation:.6s linear infinite spin}.login-demo{color:var(--text-muted);background:#00c6ff0f;border:1px solid #00c6ff26;border-radius:8px;margin-top:18px;padding:10px 14px;font-size:11px}.login-links{text-align:center;margin-top:16px;font-size:12px}.login-links a{color:var(--accent,#00c6ff);text-decoration:none}.login-links a:hover{text-decoration:underline}.login-footer{color:var(--text-micro);flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:28px;font-size:10px;display:flex}.sidebar{width:var(--sidebar-w);background:var(--bg2);border-right:1px solid var(--glass-border);z-index:100;flex-direction:column;flex-shrink:0;min-height:100vh;display:flex;position:fixed;top:0;bottom:0;left:0;overflow:hidden}.sidebar-brand{border-bottom:1px solid var(--glass-border);cursor:pointer;transition:var(--transition);flex-shrink:0;align-items:center;gap:10px;padding:18px 16px 16px;display:flex}.sidebar-brand:hover{background:var(--glass-bg)}.sidebar-logo{font-size:24px}.sidebar-name{color:var(--text-primary);font-size:13px;font-weight:700;line-height:1.2}.sidebar-sub{color:var(--text-muted);letter-spacing:.5px;font-size:10px}.sidebar-scroll{flex:1;padding:8px 0;overflow:hidden auto}.sidebar-group{margin-bottom:4px}.sidebar-section-label{text-transform:uppercase;letter-spacing:1.5px;color:var(--text-micro);align-items:center;gap:6px;padding:10px 16px 4px;font-size:9px;font-weight:700;display:flex}.sidebar-item{color:var(--text-secondary);transition:var(--transition);align-items:center;gap:10px;padding:8px 16px;font-size:12.5px;text-decoration:none;display:flex;position:relative}.sidebar-item:hover,.sidebar-item.active{background:var(--glass-bg);color:var(--text-primary)}.sidebar-item.active:before{content:"";border-radius:0 2px 2px 0;width:3px;position:absolute;top:4px;bottom:4px;left:0}.sidebar-item.theme-cyan.active:before{background:var(--accent)}.sidebar-item.theme-green.active:before{background:var(--green)}.sidebar-item.theme-amber.active:before{background:var(--amber)}.sidebar-item.theme-purple.active:before{background:var(--purple)}.sidebar-item.theme-red.active:before{background:var(--red)}.sidebar-item.theme-teal.active:before{background:var(--teal)}.sidebar-item.theme-blue.active:before{background:var(--blue)}.sidebar-item.theme-lime.active:before{background:var(--lime)}.sidebar-item.theme-gold.active:before{background:var(--gold)}.sidebar-item.theme-pink.active:before{background:var(--pink)}.sidebar-item.theme-indigo.active:before{background:var(--indigo)}.sidebar-item.theme-orange.active:before{background:var(--orange)}.sidebar-item-icon{flex-shrink:0;font-size:15px}.sidebar-item-label{flex:1}.sidebar-badge{background:var(--red);color:var(--text-primary);border-radius:8px;justify-content:center;align-items:center;min-width:16px;height:16px;padding:0 4px;font-size:9px;font-weight:700;animation:1.5s infinite pulse-red;display:flex}.sidebar-footer{border-top:1px solid var(--glass-border);flex-shrink:0;align-items:center;gap:10px;padding:12px 14px;display:flex}.sidebar-user{flex:1;align-items:center;gap:8px;min-width:0;display:flex}.sidebar-user-avatar{background:linear-gradient(135deg, var(--accent), var(--accent2));width:30px;height:30px;color:var(--text-primary);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex}.sidebar-user-name{color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:12px;font-weight:600;overflow:hidden}.sidebar-user-role{color:var(--text-muted);text-transform:capitalize;font-size:10px}.sidebar-logout{color:var(--text-muted);transition:var(--transition);border-radius:8px;flex-shrink:0;padding:6px 8px;font-size:16px}.sidebar-logout:hover{color:var(--red);background:#ff17441a}.topbar{height:var(--topbar-h);background:var(--bg2);border-bottom:1px solid var(--glass-border);z-index:50;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 24px;display:flex;position:sticky;top:0}.topbar-left{align-items:center;gap:16px;display:flex}.topbar-right{align-items:center;gap:10px;display:flex}.topbar-title-wrap{align-items:baseline;gap:10px;display:flex}.topbar-title{color:var(--text-primary);font-size:15px;font-weight:700}.topbar-subtitle{color:var(--text-muted);text-transform:uppercase;letter-spacing:.8px;font-size:11px}.topbar-chip{letter-spacing:.4px;border:1px solid;border-radius:20px;align-items:center;gap:5px;padding:4px 10px;font-size:10.5px;font-weight:600;display:flex}.chip-green{color:var(--green);background:#00e6761a;border-color:#00e67640}.chip-red{color:var(--red);background:#ff17441a;border-color:#ff174440}.chip-amber{color:var(--amber);background:#ffa7261a;border-color:#ffa72640}.live-dot{background:var(--green);border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:1.6s infinite pulse}.dot-red{background:var(--red);animation:1s infinite pulse-red}.topbar-badge{letter-spacing:.8px;text-transform:uppercase;border-radius:20px;padding:3px 9px;font-size:9.5px;font-weight:700}.badge-gmp{color:var(--accent);background:#00c6ff1a;border:1px solid #00c6ff40}.badge-21cfr{color:var(--gold);background:#f5c5181a;border:1px solid #f5c51840}.topbar-theme-btn{cursor:pointer;color:var(--text-muted);transition:var(--transition);background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;padding:6px;font-size:16px;display:flex}.topbar-theme-btn:hover{background:var(--glass-bg);color:var(--text-primary)}.topbar-clock{color:var(--text-muted);font-variant-numeric:tabular-nums;min-width:58px;font-size:12px}.topbar-alarm-btn{color:var(--text-muted);transition:var(--transition);border-radius:8px;padding:6px;font-size:16px;position:relative}.topbar-alarm-btn:hover{background:var(--glass-bg);color:var(--text-primary)}.alarm-active{color:var(--amber)!important}.alarm-critical{animation:1s infinite pulse-red;color:var(--red)!important}.alarm-count{background:var(--red);color:var(--text-primary);border-radius:7px;justify-content:center;align-items:center;min-width:14px;height:14px;padding:0 3px;font-size:8px;font-weight:700;display:flex;position:absolute;top:0;right:0}.app-layout{width:100%;height:100vh;display:flex;overflow:hidden}.app-main{margin-left:var(--sidebar-w);flex-direction:column;flex:1;height:100vh;display:flex;overflow:hidden}.app-content{background:var(--bg1);flex:1;padding:24px;overflow-y:auto}.glass-card{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px);box-shadow:var(--shadow-card);transition:var(--transition);border-radius:16px;overflow:hidden}.glass-card:hover{border-color:var(--glass-border-hover)}.card-hdr{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:flex-start;padding:16px 20px;display:flex}.card-hdr-left{align-items:center;gap:10px;display:flex}.card-hdr-icon{font-size:20px}.card-hdr-title{color:var(--text-primary);font-size:14px;font-weight:700}.card-hdr-sub{color:var(--text-muted);letter-spacing:.3px;margin-top:2px;font-size:11px}.card-hdr-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.kpi-card{background:var(--th-bg);border:1px solid var(--th-border);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:var(--transition);border-radius:14px;position:relative;overflow:hidden}.kpi-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.kpi-bar{background:linear-gradient(90deg, transparent, var(--th-text), transparent);height:2px}.kpi-body{align-items:center;gap:12px;padding:14px 18px 16px;display:flex}.kpi-icon{flex-shrink:0;font-size:24px}.kpi-label{text-transform:uppercase;letter-spacing:1.2px;color:var(--text-muted);margin-bottom:4px;font-size:10px}.kpi-value{color:var(--th-text);font-size:22px;font-weight:700;line-height:1}.kpi-unit{opacity:.8;margin-left:3px;font-size:12px;font-weight:400}.kpi-sub{color:var(--text-muted);margin-top:4px;font-size:10px}.page{animation:.3s fadeIn}.page-kpi-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px;display:grid}.grid-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:24px;display:grid}.p-16{padding:16px}.p-20{padding:20px}.form-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;display:grid}.form-grid .form-field{flex-direction:column;gap:5px;display:flex}.form-grid .form-field label{text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);font-size:10.5px;font-weight:600}.form-grid .form-field input,.form-grid .form-field select{width:100%}.phase-timeline{gap:0;padding-bottom:8px;display:flex;overflow-x:auto}.phase-item{text-align:center;flex-direction:column;flex-shrink:0;align-items:center;min-width:100px;display:flex}.phase-bubble{border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;margin-bottom:6px;font-size:14px;display:flex}.phase-bubble.completed{background:#00e67626;border:1px solid #00e6764d}.phase-bubble.running{background:#00c6ff26;border:1px solid #00c6ff4d;animation:1.5s infinite pulse}.phase-bubble.pending{background:var(--glass-bg);border:1px solid var(--glass-border)}.phase-label{color:var(--text-muted);max-width:90px;font-size:10px;line-height:1.3}.phase-connector{background:#00c6ff4d;flex-shrink:0;width:30px;height:1px;margin-top:-22px}.alarm-strip{color:var(--red);background:#ff174414;border:1px solid #ff174433;border-radius:10px;align-items:center;gap:10px;margin-bottom:16px;padding:10px 16px;font-size:12.5px;display:flex}.tag-value-row{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:10px 0;display:flex}.tag-value-row:last-child{border-bottom:none}.tag-name{color:var(--text-secondary);font-size:12.5px}.tag-val{color:var(--accent);font-size:14px;font-weight:700}.tag-unit{color:var(--text-muted);margin-left:3px;font-size:11px}.tag-quality{color:var(--green);margin-left:8px;font-size:9px}.badge{letter-spacing:.7px;text-transform:uppercase;white-space:nowrap;border:1px solid;border-radius:20px;align-items:center;gap:5px;padding:3px 9px;font-size:10px;font-weight:600;display:inline-flex}.badge-dot{background:currentColor;border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:1.6s infinite pulse}.badge-live{color:var(--green);background:#00e6761f;border-color:#00e6764d}.badge-ready{color:var(--accent);background:#00c6ff1f;border-color:#00c6ff4d}.badge-hold{color:var(--amber);background:#ffa7261f;border-color:#ffa7264d}.badge-review{color:var(--purple);background:#ce93d81f;border-color:#ce93d84d}.badge-alert{color:var(--red);background:#ff17441f;border-color:#ff17444d}.badge-default{background:var(--glass-bg);color:var(--text-secondary);border-color:var(--glass-border)}.btn{transition:var(--transition);white-space:nowrap;border:1px solid #0000;border-radius:8px;justify-content:center;align-items:center;gap:6px;font-weight:600;display:inline-flex}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-sm{padding:5px 12px;font-size:11px}.btn-md{padding:8px 16px;font-size:12.5px}.btn-lg{padding:11px 22px;font-size:14px}.btn-default{background:var(--glass-bg);border-color:var(--glass-border);color:var(--text-secondary)}.btn-default:hover{background:var(--glass-hover);color:var(--text-primary)}.btn-primary{background:linear-gradient(135deg, var(--accent), var(--accent2));color:var(--text-primary)}.btn-primary:hover{opacity:.88;box-shadow:0 0 16px #00c6ff66}.btn-green{color:var(--green);background:#00e6761f;border-color:#00e6764d}.btn-green:hover{background:#00e67633}.btn-amber{color:var(--amber);background:#ffa7261f;border-color:#ffa7264d}.btn-amber:hover{background:#ffa72633}.btn-red{color:var(--red);background:#ff17441f;border-color:#ff17444d}.btn-red:hover{background:#ff174438}.btn-ghost{border-color:var(--glass-border);color:var(--text-muted);background:0 0}.btn-ghost:hover{background:var(--glass-bg);color:var(--text-primary)}.btn-loading{pointer-events:none}.btn-spinner{border:2px solid #0000001a;border-top-color:var(--text-primary);border-radius:50%;flex-shrink:0;width:12px;height:12px;animation:.6s linear infinite spin}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;background:#050b1acc;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;inset:0}.modal-box{background:var(--bg3);border:1px solid var(--glass-border);border-radius:20px;flex-direction:column;width:100%;max-width:520px;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 20px 60px #0009}.modal-header{border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;padding:18px 22px;display:flex}.modal-title{font-size:15px;font-weight:700}.modal-close{color:var(--text-muted);transition:var(--transition);border-radius:6px;padding:4px 6px;font-size:14px}.modal-close:hover{background:var(--glass-bg);color:var(--text-primary)}.modal-body{flex:1;padding:22px;overflow-y:auto}.modal-footer{border-top:1px solid var(--glass-border);justify-content:flex-end;gap:10px;padding:16px 22px;display:flex}.dt-wrap{border-radius:0 0 14px 14px;overflow-x:auto}.dt{border-collapse:collapse;width:100%;font-size:12.5px}.dt thead th{text-align:left;text-transform:uppercase;letter-spacing:1px;color:var(--text-muted);background:var(--glass-bg);border-bottom:1px solid var(--glass-border);white-space:nowrap;padding:10px 16px;font-size:10px;font-weight:700}.dt tbody td{color:var(--text-secondary);border-bottom:1px solid var(--glass-border);vertical-align:middle;padding:10px 16px}.dt tbody tr:last-child td{border-bottom:none}.dt tbody tr:hover td{background:var(--glass-bg);color:var(--text-primary)}.dt-clickable{cursor:pointer}.dt-empty{text-align:center;color:var(--text-muted);padding:40px;font-size:13px}.dt-empty-cell{text-align:center;color:var(--text-muted);padding:32px}*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg1:#050b1a;--bg2:#0a1628;--bg3:#0d1e35;--accent:#00c6ff;--accent2:#0072ff;--gold:#f5c518;--green:#00e676;--red:#ff1744;--amber:#ffa726;--purple:#ce93d8;--teal:#4dd0e1;--lime:#c6ff00;--pink:#f48fb1;--indigo:#7986cb;--orange:#ff7043;--blue:#5c9bff;--glass-bg:#ffffff0a;--glass-hover:#ffffff12;--glass-border:#ffffff1a;--glass-border-hover:#fff3;--text-primary:#fff;--text-secondary:#fff9;--text-muted:#ffffff59;--text-micro:#ffffff38;--shadow-card:0 4px 24px #0006, inset 0 1px 0 #ffffff14;--shadow-glow:0 0 20px #00c6ff33;--transition:all .25s cubic-bezier(.4,0,.2,1);--sidebar-w:240px;--topbar-h:60px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;font-family:Segoe UI,Inter,system-ui,-apple-system,sans-serif;font-size:14px;line-height:1.5}[data-theme=light]{--bg1:#f5f7fa;--bg2:#fff;--bg3:#eef1f6;--accent:#0072ff;--accent2:#0052cc;--gold:#c90;--green:#0d9e47;--red:#d32f2f;--amber:#f57c00;--purple:#8e24aa;--teal:#0097a7;--lime:#7cb342;--pink:#c2185b;--indigo:#283593;--orange:#e64a19;--blue:#1976d2;--glass-bg:#0000000a;--glass-hover:#00000014;--glass-border:#0000001f;--glass-border-hover:#0003;--text-primary:#0d1520;--text-secondary:#000000bf;--text-muted:#0000008c;--text-micro:#00000073;--shadow-card:0 2px 8px #0000001a, inset 0 1px 0 #fffc;--shadow-glow:0 0 20px #0072ff33;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}html,body,#root{background:var(--bg1);width:100%;height:100%;color:var(--text-primary)}body{overflow:hidden}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3}button{cursor:pointer;font-family:inherit;font-size:inherit;background:0 0;border:none;outline:none}input,textarea,select{font-family:inherit;font-size:inherit;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-primary);transition:var(--transition);border-radius:8px;outline:none;padding:8px 12px}:root select{color:#fff;background-color:#0a1628}[data-theme=light] select{color:#0d1520;background-color:#fff}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px #00c6ff26}input::placeholder{color:var(--text-muted)}select option{color:#fff;background:#0a1628;padding:4px 8px}select option:checked{color:#050b1a;background:#00c6ff}select option:hover{color:#fff;background:#0d1e35}[data-theme=light] select option{color:#0d1520;background:#fff}[data-theme=light] select option:checked{color:#fff;background:#0072ff}[data-theme=light] select option:hover{color:#0d1520;background:#f0f4ff}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#ffffff1f;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#ffffff38}.text-accent{color:var(--accent)}.text-green{color:var(--green)}.text-amber{color:var(--amber)}.text-red{color:var(--red)}.text-gold{color:var(--gold)}.text-purple{color:var(--purple)}.text-teal{color:var(--teal)}.text-muted{color:var(--text-muted)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}.grid-2{grid-template-columns:repeat(2,1fr);gap:16px;display:grid}.grid-3{grid-template-columns:repeat(3,1fr);gap:16px;display:grid}.grid-4{grid-template-columns:repeat(4,1fr);gap:16px;display:grid}@media (width<=1200px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){.grid-3{grid-template-columns:repeat(2,1fr)}.grid-4{grid-template-columns:1fr 1fr}}@media (width<=640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 #00e67699}50%{opacity:.7;box-shadow:0 0 0 6px #00e67600}}@keyframes pulse-red{0%,to{opacity:1;box-shadow:0 0 #ff174499}50%{opacity:.7;box-shadow:0 0 0 6px #ff174400}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes shimmer{0%{background-position:-200%}to{background-position:200%}}.fade-in{animation:.3s both fadeIn}