.mod8-root{--pulse-animation:mod8-pulse-normal 2s infinite;--alert-z-index:1000;--live-indicator:#22c55e;--critical-color:red;--warning-color:orange;--normal-color:#22c55e;--updating-color:#3b82f6;--update-interval:5s;--toast-duration:5s;--bg-color:#0b1120;--panel-bg:#1e293b;--panel-border:#334155;--text-main:#f8fafc;--text-muted:#94a3b8;--font-head:"Fira Code",monospace;--font-body:"Fira Sans",sans-serif;margin:0;padding:0;background-color:var(--bg-color);color:var(--text-main);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}.mod8-root .app-header{display:flex;justify-content:space-between;align-items:center;padding:20px 32px;background:#111827;border-bottom:1px solid var(--panel-border);box-shadow:0 4px 6px -1px rgba(0,0,0,.3);flex-wrap:wrap;gap:16px}.mod8-root .app-title-wrap{display:flex;flex-direction:column}.mod8-root .app-name{font-family:var(--font-head);font-size:21.6px;font-weight:700;color:var(--text-main);letter-spacing:.5px}.mod8-root .module-name{font-family:var(--font-body);font-size:15.2px;color:var(--text-muted);margin-top:4.8px}.mod8-root .connection-status{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:13.6px;color:var(--normal-color);background:rgba(34,197,94,.1);padding:8px 16px;border-radius:999px;border:1px solid rgba(34,197,94,.3)}@-webkit-keyframes mod8-pulse-normal{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 mod8-pulse-normal{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 mod8-pulse-warning{0%{box-shadow:0 0 0 0 rgba(255,165,0,.7)}70%{box-shadow:0 0 0 8px rgba(255,165,0,0)}to{box-shadow:0 0 0 0 rgba(255,165,0,0)}}@keyframes mod8-pulse-warning{0%{box-shadow:0 0 0 0 rgba(255,165,0,.7)}70%{box-shadow:0 0 0 8px rgba(255,165,0,0)}to{box-shadow:0 0 0 0 rgba(255,165,0,0)}}@-webkit-keyframes mod8-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 mod8-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)}}@-webkit-keyframes mod8-pulse-updating{0%{box-shadow:0 0 0 0 rgba(59,130,246,.7)}70%{box-shadow:0 0 0 8px rgba(59,130,246,0)}to{box-shadow:0 0 0 0 rgba(59,130,246,0)}}@keyframes mod8-pulse-updating{0%{box-shadow:0 0 0 0 rgba(59,130,246,.7)}70%{box-shadow:0 0 0 8px rgba(59,130,246,0)}to{box-shadow:0 0 0 0 rgba(59,130,246,0)}}.mod8-root .status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:middle}.mod8-root .dot-normal{background:var(--normal-color);-webkit-animation:mod8-pulse-normal 2s infinite;animation:mod8-pulse-normal 2s infinite}.mod8-root .dot-warning{background:var(--warning-color);-webkit-animation:mod8-pulse-warning 2s infinite;animation:mod8-pulse-warning 2s infinite}.mod8-root .dot-critical{background:var(--critical-color);-webkit-animation:mod8-pulse-critical 1s infinite;animation:mod8-pulse-critical 1s infinite}.mod8-root .dot-updating{background:var(--updating-color);-webkit-animation:mod8-pulse-updating 1.5s infinite;animation:mod8-pulse-updating 1.5s infinite}.mod8-root .grid-container{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding:24px;max-width:1600px;margin:0 auto}.mod8-root .card{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 4px 6px -1px rgba(0,0,0,.2)}.mod8-root .card.wide{grid-column:1/-1}.mod8-root .card-header{font-family:var(--font-head);font-size:17.6px;font-weight:600;color:#e2e8f0;border-bottom:1px solid var(--panel-border);padding-bottom:12px}.mod8-root .data-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-body);font-size:15.2px}.mod8-root .data-label{color:var(--text-muted)}.mod8-root .data-value{font-family:var(--font-head);font-weight:500;color:var(--text-main)}.mod8-root .chart-legend{margin-top:12px;font-family:var(--font-head);font-size:13.6px}.mod8-root .chart-container{width:100%;height:280px;background:#0f172a;border-radius:4px;border:1px solid var(--panel-border);position:relative}.mod8-root canvas{display:block;width:100%;height:100%}.mod8-root .log-table{width:100%;border-collapse:collapse;font-family:var(--font-body);font-size:13.6px}.mod8-root .log-table td,.mod8-root .log-table th{text-align:left;padding:12px;border-bottom:1px solid var(--panel-border)}.mod8-root .log-table th{color:var(--text-muted);font-weight:600}.mod8-root .log-level{padding:3.2px 8px;border-radius:4px;font-family:var(--font-head);font-size:12px;font-weight:600}.mod8-root .level-normal{background:rgba(34,197,94,.2);color:var(--normal-color)}.mod8-root .level-warning{background:rgba(255,165,0,.2);color:var(--warning-color)}.mod8-root .level-critical{background:rgba(255,0,0,.2);color:var(--critical-color)}.mod8-root .control-panel{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap}.mod8-root .input-group{display:flex;flex-direction:column;gap:8px}.mod8-root .input-group label{font-family:var(--font-body);font-size:13.6px;color:var(--text-muted)}.mod8-root .input-group input{background:#0b1120;border:1px solid var(--panel-border);color:var(--text-main);padding:8px;border-radius:4px;font-family:var(--font-head);width:120px}.mod8-root .input-group input:focus{outline:none;border-color:var(--updating-color)}.mod8-root .btn-group{display:flex;gap:16px}.mod8-root .btn{background:var(--updating-color);color:#fff;border:none;padding:9.6px 19.2px;border-radius:4px;font-family:var(--font-head);font-weight:500;cursor:pointer;transition:background .2s,transform .1s}.mod8-root .btn:hover{background:#2563eb}.mod8-root .btn:active{transform:scale(.98)}.mod8-root .btn-outline{background:transparent;border:1px solid var(--panel-border);color:var(--text-main)}.mod8-root .btn-outline:hover{border-color:var(--text-muted);background:hsla(0,0%,100%,.05)}.mod8-root #toast-container{position:fixed;top:24px;right:24px;z-index:var(--alert-z-index);display:flex;flex-direction:column;gap:12px;pointer-events:none}.mod8-root .toast{background:#1e293b;border-left:4px solid var(--normal-color);padding:16px;border-radius:4px;box-shadow:0 10px 15px -3px rgba(0,0,0,.5),0 0 10px rgba(0,0,0,.3);min-width:280px;color:var(--text-main);font-family:var(--font-body);font-size:14.4px;-webkit-animation:mod8-slideIn .3s ease-out forwards;animation:mod8-slideIn .3s ease-out forwards;opacity:1;transition:opacity .5s ease,transform .5s ease;transform:translateX(0)}.mod8-root .toast.warning{border-left-color:var(--warning-color)}.mod8-root .toast.critical{border-left-color:var(--critical-color)}.mod8-root .toast.fade-out{opacity:0;transform:translateX(120%)}@-webkit-keyframes mod8-slideIn{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes mod8-slideIn{0%{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}@media (max-width:1024px){.mod8-root .grid-container{grid-template-columns:repeat(2,1fr)}.mod8-root .card:nth-child(3){grid-column:1/-1}}@media (max-width:768px){.mod8-root .app-header{flex-direction:column;align-items:flex-start;padding:16px}.mod8-root .grid-container{grid-template-columns:1fr;padding:16px}.mod8-root .card:nth-child(3){grid-column:auto}.mod8-root .control-panel{flex-direction:column;align-items:stretch}.mod8-root .input-group input{width:100%;box-sizing:border-box}.mod8-root .btn-group{flex-direction:column}}.mod8-root{min-height:calc(100vh - 50px)}