:root{--background:#0b1326;--on-background:#dae2fd;--surface:#0b1326;--surface-container-low:#131b2e;--surface-container:#171f33;--surface-container-high:#222a3d;--surface-variant:#2d3449;--on-surface:#dae2fd;--on-surface-variant:#c7c4d7;--primary:#c0c1ff;--on-primary:#1000a9;--accent-primary:#6366f1;--semantic-success:#10b981;--semantic-error:#ffb4ab;--semantic-warning:#ffb783;--border-glass:#ffffff1a;--border-focus:#6366f1;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--on-surface);background-color:var(--background);font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--background);min-height:100vh;color:var(--on-surface);overflow-x:hidden}.mono{font-family:JetBrains Mono,Fira Code,Consolas,monospace;line-height:1.6}.glass-panel{-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-glass);background:#1e293bb3;border-radius:0}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--surface-container-low)}::-webkit-scrollbar-thumb{background:var(--surface-container-high);border-radius:0}::-webkit-scrollbar-thumb:hover{background:var(--accent-primary)}.magic-bento{-webkit-backdrop-filter:blur(12px);color:var(--on-surface);cursor:pointer;transform-style:preserve-3d;border:1px solid var(--border-glass);background:#1e293bb3;border-radius:2px;padding:24px;transition:background .15s,border-color .15s;position:relative;overflow:hidden}.magic-bento:before{content:"";border-radius:inherit;background:linear-gradient(to bottom right, var(--border-glass), transparent);-webkit-mask-composite:xor;pointer-events:none;padding:1px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;-webkit-mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.bento-border-glow{border-radius:inherit;opacity:0;pointer-events:none;background:radial-gradient(300px circle at var(--mouse-x) var(--mouse-y), rgba(var(--glow-color), .6), transparent 30%);z-index:0;transition:opacity .15s;position:absolute;inset:0}.magic-bento:hover .bento-border-glow{opacity:1}.magic-bento:hover{border-color:rgba(var(--glow-color), .4)}.bento-spotlight{background:radial-gradient(circle, rgba(var(--glow-color), .1) 0%, transparent 60%);opacity:0;pointer-events:none;z-index:1;border-radius:50%;transition:opacity .15s;position:absolute;top:0;left:0}.magic-bento:hover .bento-spotlight{opacity:1}.bento-content{z-index:2;flex-direction:column;height:100%;transition:opacity .15s;display:flex;position:relative}.magic-bento.hide-text .bento-content p{opacity:0}.bento-stars{pointer-events:none;z-index:1;position:absolute;inset:0}.star{background:rgba(var(--glow-color), 1);width:1px;height:1px;box-shadow:0 0 4px 1px rgba(var(--glow-color), .8);animation:1s infinite alternate twinkle;position:absolute}@keyframes twinkle{0%{opacity:.1}to{opacity:1}}.app-container{flex-direction:column;width:100vw;height:100vh;display:flex}.topbar{border-bottom:1px solid var(--border-glass);background:var(--surface);z-index:100;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand h1{letter-spacing:-.01em;color:var(--on-surface);font-size:16px;font-weight:700}.topbar nav{flex-wrap:wrap;gap:8px;display:flex}.nav-item{cursor:pointer;color:var(--on-surface-variant);letter-spacing:0;border-radius:0;align-items:center;gap:8px;padding:8px 16px;font-size:14px;font-weight:600;transition:all .15s;display:flex}.nav-item:hover{background:var(--surface-container-high);color:var(--on-surface)}.nav-item.active{background:var(--accent-primary);color:#fff}.main-content{flex:1;padding:32px;overflow-y:auto}.header{margin-bottom:32px}.header h2{letter-spacing:-.01em;color:var(--on-surface);font-size:24px;font-weight:600;line-height:1.3}.header p{color:var(--on-surface-variant);margin-top:4px;font-size:14px;line-height:1.5}.metrics-grid{grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px;display:grid}.metric-card h3{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600;line-height:1}.metric-card .value{color:var(--on-surface);letter-spacing:-.02em;align-items:baseline;gap:8px;margin-top:16px;font-size:32px;font-weight:700;display:flex}.system-status{border-radius:2px;margin-top:32px;padding:24px}.status-row{border-bottom:1px solid var(--border-glass);justify-content:space-between;padding:12px 0;font-size:14px;display:flex}.status-row:last-child{border-bottom:none}.status-indicator{align-items:center;gap:8px;font-size:14px;font-weight:600;display:flex}.dot{border-radius:0;width:8px;height:8px}.dot.online{background:var(--semantic-success);box-shadow:0 0 4px var(--semantic-success)}.dot.offline{background:var(--semantic-error);box-shadow:0 0 4px var(--semantic-error)}.dot.warning{background:var(--semantic-warning);box-shadow:0 0 4px var(--semantic-warning)}.split-pane{grid-template-columns:1fr 350px;gap:20px;min-height:calc(100vh - 200px);display:grid}.form-pane{flex-direction:column;gap:24px;display:flex}.form-group{flex-direction:column;gap:8px;display:flex}.form-group label{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600;line-height:1}.form-control{background:var(--surface-container-lowest);border:1px solid var(--outline-variant);color:var(--on-surface);border-radius:0;width:100%;padding:12px 16px;font-family:inherit;font-size:14px;transition:all .15s}.form-control:focus{border-color:var(--accent-primary);box-shadow:0 0 0 1px var(--accent-primary);outline:none}textarea.form-control{resize:vertical;min-height:120px}.btn-broadcast{background:var(--accent-primary);color:#fff;cursor:pointer;border:none;border-radius:0;justify-content:center;align-items:center;gap:8px;padding:16px;font-size:14px;font-weight:600;transition:all .15s;display:flex}.btn-broadcast:hover:not(:disabled){background:#7a7df3}.btn-broadcast:focus{outline:2px solid var(--accent-primary);outline-offset:2px}.btn-broadcast:disabled{opacity:.5;cursor:not-allowed}.terminal{background:var(--surface-container-lowest);border:1px solid var(--surface-container-highest);border-radius:2px;flex-direction:column;flex:1;gap:4px;min-height:200px;padding:16px;font-size:13px;display:flex;overflow-y:auto}.terminal-line{word-break:break-all}.term-info{color:#60a5fa}.term-success{color:var(--semantic-success)}.term-error{color:var(--semantic-error)}.term-data{color:var(--on-surface-variant)}.mobile-mockup{border:4px solid var(--surface-container-high);background:#000;border-radius:4px;width:320px;height:650px;margin:0 auto;position:relative;overflow:hidden}.mockup-notch{background:var(--surface-container-high);z-index:10;border-bottom-right-radius:8px;border-bottom-left-radius:8px;width:120px;height:20px;position:absolute;top:0;left:50%;transform:translate(-50%)}.mockup-screen{background:var(--surface-container-lowest);flex-direction:column;width:100%;height:100%;padding:40px 15px 20px;display:flex}.notification-bubble{background:var(--surface-container-high);border:1px solid var(--border-glass);border-radius:2px;margin-top:10px;padding:12px 16px;animation:.2s ease-out slideDown}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.notif-header{align-items:center;gap:8px;margin-bottom:6px;display:flex}.notif-icon{background:var(--accent-primary);border-radius:0;width:16px;height:16px}.notif-appname{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600}.notif-title{color:var(--on-surface);margin-bottom:4px;font-size:14px;font-weight:600}.notif-body{color:var(--on-surface-variant);font-size:13px;line-height:1.5}.template-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;display:grid}.template-badge{color:var(--accent-primary);text-transform:uppercase;letter-spacing:.05em;background:#6366f11a;border:1px solid #6366f133;border-radius:0;align-self:flex-start;padding:4px 8px;font-size:12px;font-weight:600}.btn-secondary{border:1px solid var(--outline-variant);color:var(--on-surface);cursor:pointer;background:0 0;border-radius:0;padding:8px 16px;font-size:14px;font-weight:600;transition:all .15s}.btn-secondary:hover{background:var(--surface-container-high);border-color:var(--on-surface-variant)}.btn-secondary:focus{outline:2px solid var(--accent-primary);outline-offset:2px}.log-table{border-collapse:collapse;width:100%}.log-table th,.log-table td{text-align:left;border-bottom:1px solid var(--border-glass);padding:16px}.log-table th{color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:600}.log-table td{font-size:14px}.status-badge{text-transform:uppercase;letter-spacing:.05em;border-radius:0;padding:4px 8px;font-size:12px;font-weight:600}.status-badge.success{color:var(--semantic-success);background:#10b9811a;border:1px solid #10b98133}.status-badge.error{color:var(--semantic-error);background:#ffb4ab1a;border:1px solid #ffb4ab33}@media (width<=1024px){.split-pane{grid-template-columns:1fr}.mobile-mockup{margin:32px auto}}@media (width<=768px){.metrics-grid{grid-template-columns:1fr}.topbar{flex-direction:column;gap:16px;padding:16px}.main-content{padding:16px}.log-table{white-space:nowrap;display:block;overflow-x:auto}}