.mod4-root{--bg-base:#0b1120;--bg-panel:#1e293b;--bg-panel-hover:#334155;--border-color:#334155;--text-main:#f8fafc;--text-muted:#94a3b8;--color-total:#cbd5e1;--color-low:#3b82f6;--color-high:#f97316;--live-indicator:#22c55e;--critical-color:red;--warning-color:orange;--pulse-animation:mod4-pulse 2s infinite;--alert-z-index:1000;--update-interval:5s;--toast-duration:5s;--font-head:"Fira Code",monospace;--font-body:"Fira Sans",sans-serif}.mod4-root,.mod4-root *{box-sizing:border-box;margin:0;padding:0}.mod4-root{font-family:var(--font-body);background-color:var(--bg-base);color:var(--text-main);line-height:1.5;padding:16px;overflow-x:hidden}.mod4-root .app-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:var(--bg-panel);border:1px solid var(--border-color);border-radius:8px;margin-bottom:24px;flex-wrap:wrap;gap:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}.mod4-root .sys-name{font-size:13.6px;color:var(--text-muted);margin-bottom:4px}.mod4-root .module-name{font-family:var(--font-head);font-size:20px;font-weight:600;color:var(--text-main)}.mod4-root .sys-status{display:flex;align-items:center;gap:16px;font-family:var(--font-head);font-size:14.4px}.mod4-root .status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;background:var(--live-indicator);-webkit-animation:var(--pulse-animation);animation:var(--pulse-animation)}.mod4-root .time-display{color:var(--text-muted)}@-webkit-keyframes mod4-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}to{box-shadow:0 0 0 0 rgba(34,197,94,0)}}@keyframes mod4-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.7)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}to{box-shadow:0 0 0 0 rgba(34,197,94,0)}}@-webkit-keyframes mod4-pulse-critical{0%{box-shadow:0 0 0 0 rgba(255,0,0,.8)}70%{box-shadow:0 0 0 10px rgba(255,0,0,0)}to{box-shadow:0 0 0 0 rgba(255,0,0,0)}}@keyframes mod4-pulse-critical{0%{box-shadow:0 0 0 0 rgba(255,0,0,.8)}70%{box-shadow:0 0 0 10px rgba(255,0,0,0)}to{box-shadow:0 0 0 0 rgba(255,0,0,0)}}.mod4-root .dashboard{display:flex;flex-direction:column;gap:24px}.mod4-root .metrics-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}.mod4-root .content-grid{display:grid;grid-template-columns:320px 1fr;gap:24px}@media (max-width:900px){.mod4-root .content-grid{grid-template-columns:1fr}}.mod4-root .panel{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:8px;padding:20px;display:flex;flex-direction:column}.mod4-root .panel-title{font-family:var(--font-head);font-size:16px;font-weight:600;margin-bottom:16px;color:var(--text-main);border-left:3px solid var(--color-low);padding-left:8px}.mod4-root .metric-card{background:var(--bg-panel);border:1px solid var(--border-color);border-radius:8px;padding:20px;display:flex;flex-direction:column;position:relative;overflow:hidden}.mod4-root .metric-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--bg-panel-hover)}.mod4-root .metric-card.alert:before{background:var(--critical-color)}.mod4-root .metric-card.alert .metric-value{color:var(--critical-color);-webkit-animation:mod4-pulse-critical 1.5s infinite;animation:mod4-pulse-critical 1.5s infinite}.mod4-root .metric-title{font-size:13.6px;color:var(--text-muted);margin-bottom:8px}.mod4-root .metric-value{font-family:var(--font-head);font-size:32px;font-weight:700;transition:color .3s}.mod4-root .metric-trend{font-size:12px;color:var(--text-muted);margin-top:8px;font-family:var(--font-head)}.mod4-root .text-blue{color:var(--color-low)}.mod4-root .text-orange{color:var(--color-high)}.mod4-root .form-group{margin-bottom:16px}.mod4-root .form-group label{display:block;font-size:13.6px;color:var(--text-muted);margin-bottom:4px}.mod4-root .form-group input{width:100%;padding:9.6px;background:var(--bg-base);border:1px solid var(--border-color);border-radius:4px;color:var(--text-main);font-family:var(--font-head);outline:none;transition:border-color .2s}.mod4-root .form-group input:focus{border-color:var(--color-low)}.mod4-root .btn-group{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}.mod4-root .btn{flex:1;min-width:120px;padding:9.6px;border:none;border-radius:4px;font-family:var(--font-body);font-weight:600;cursor:pointer;transition:all .2s;font-size:13.6px}.mod4-root .btn-primary{background:var(--color-low);color:#fff}.mod4-root .btn-primary:hover{background:#2563eb}.mod4-root .btn-outline{background:transparent;border:1px solid var(--border-color);color:var(--text-main)}.mod4-root .btn-outline:hover{background:var(--bg-panel-hover)}.mod4-root .chart-panel{min-height:420px}.mod4-root .panel-header{display:flex;justify-content:space-between;align-items:center;border:none;padding:0;margin-bottom:16px;flex-wrap:wrap;gap:8px}.mod4-root .legend{display:flex;gap:16px;font-size:12.8px;font-family:var(--font-head);color:var(--text-muted)}.mod4-root .lg-item{display:flex;align-items:center;gap:4.8px}.mod4-root .lg-color{width:12px;height:4px;border-radius:2px}.mod4-root .bg-gray{background:var(--text-muted)}.mod4-root .bg-blue{background:var(--color-low)}.mod4-root .bg-orange{background:var(--color-high)}.mod4-root .canvas-container{flex:1;position:relative;width:100%;height:100%;min-height:320px}.mod4-root canvas{position:absolute;top:0;left:0;width:100%;height:100%}.mod4-root .log-panel{max-height:260px;overflow-y:auto}.mod4-root .log-list{list-style:none;font-family:var(--font-head);font-size:12.8px}.mod4-root .log-item{padding:8px 0;border-bottom:1px solid var(--border-color);display:flex;gap:16px;align-items:flex-start}.mod4-root .log-time{color:var(--text-muted);flex-shrink:0}.mod4-root .log-msg{color:var(--text-main)}.mod4-root .log-msg.warning{color:var(--warning-color)}.mod4-root .log-msg.critical{color:var(--critical-color);font-weight:600}.mod4-root #toast-container{position:fixed;bottom:32px;right:32px;display:flex;flex-direction:column;gap:12px;z-index:var(--alert-z-index);pointer-events:none}.mod4-root .toast{background:var(--bg-panel);border-left:4px solid var(--color-low);border-radius:4px;padding:16px 20px;box-shadow:0 4px 12px rgba(0,0,0,.5);font-family:var(--font-body);font-size:14.4px;color:var(--text-main);-webkit-animation:mod4-slideIn .3s ease-out,mod4-fadeOut .5s ease-in var(--toast-duration) forwards;animation:mod4-slideIn .3s ease-out,mod4-fadeOut .5s ease-in var(--toast-duration) forwards;display:flex;align-items:center;gap:12px}.mod4-root .toast.critical{border-left-color:var(--critical-color)}.mod4-root .toast.warning{border-left-color:var(--warning-color)}@-webkit-keyframes mod4-slideIn{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes mod4-slideIn{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@-webkit-keyframes mod4-fadeOut{to{opacity:0;visibility:hidden}}@keyframes mod4-fadeOut{to{opacity:0;visibility:hidden}}.mod4-root ::-webkit-scrollbar{width:6px}.mod4-root ::-webkit-scrollbar-track{background:var(--bg-base)}.mod4-root ::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}.mod4-root{min-height:calc(100vh - 50px)}