:root{--bg:#f4f6f8;--bg-strong:#e7edf2;--surface:#fff;--surface-muted:#f8fafc;--surface-raised:#fff;--text:#16202a;--text-muted:#667382;--text-soft:#8492a3;--border:#d9e1e8;--border-strong:#c8d4df;--green:#16835f;--green-strong:#0f684b;--green-soft:#e6f6ef;--blue:#2563eb;--blue-soft:#e8f0ff;--amber:#b7791f;--amber-soft:#fff5dc;--red:#b42318;--red-soft:#fff0ed;--shadow-sm:0 1px 2px #1118270f;--shadow-md:0 12px 30px #11182717;--shadow-lg:0 24px 60px #11182721;--radius-sm:6px;--radius-md:8px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--motion-fast:.14s ease;--motion-base:.22s ease;--motion-slow:.42s cubic-bezier(.2, .8, .2, 1);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:linear-gradient(180deg, #2563eb0d, #f4f6f800 360px), var(--bg);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button{-webkit-tap-highlight-color:transparent}.login-shell,.app-shell{min-height:100vh}.login-shell{padding:var(--space-6);place-items:center;display:grid}.login-panel{gap:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);width:min(100%,430px);box-shadow:var(--shadow-lg);animation:panel-rise var(--motion-slow) both;padding:32px;display:grid;position:relative;overflow:hidden}.login-accent{background:linear-gradient(90deg, var(--green), var(--blue), var(--amber));height:4px;position:absolute;inset:0 0 auto}.login-heading{gap:var(--space-2);display:grid}.login-panel h1,.topbar h1,.panel h2,.event-toolbar h2{letter-spacing:0;margin:0}.login-panel h1{color:var(--text);font-size:30px;line-height:1.1}.eyebrow{color:var(--text-muted);text-transform:uppercase;font-size:12px;font-weight:800;line-height:1.2}label{gap:var(--space-2);color:#344454;font-weight:750;display:grid}input,select{border:1px solid var(--border-strong);border-radius:var(--radius-sm);width:100%;min-height:44px;color:var(--text);background:var(--surface);transition:border-color var(--motion-fast), box-shadow var(--motion-fast), background var(--motion-fast);outline:none;padding:0 12px}select{cursor:pointer}input:hover,select:hover{border-color:#aebdcc}input:focus-visible,select:focus-visible,button:focus-visible{outline-offset:2px;outline:3px solid #2563eb2e}input:focus-visible,select:focus-visible{border-color:var(--blue);box-shadow:0 0 0 4px #2563eb1a}.primary-button,.command-button,.icon-button,.tabs button{cursor:pointer;transition:transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);border:0}.primary-button,.command-button{justify-content:center;align-items:center;gap:var(--space-2);border-radius:var(--radius-sm);white-space:nowrap;min-height:44px;font-weight:850;display:inline-flex}.primary-button{color:#fff;background:var(--green);box-shadow:0 12px 24px #16835f38}.primary-button:hover:not(:disabled){background:var(--green-strong);transform:translateY(-1px);box-shadow:0 16px 30px #16835f47}.primary-button:active:not(:disabled),.command-button:active:not(:disabled),.icon-button:active:not(:disabled),.tabs button:active:not(:disabled){transform:translateY(1px)scale(.99)}.primary-button:disabled,.command-button:disabled{cursor:not-allowed;opacity:.58;box-shadow:none}.login-panel.is-loading .primary-button svg{animation:.9s linear infinite spin}.app-shell{padding:var(--space-6)}.topbar,.event-toolbar,.panel-heading,.topbar-actions{align-items:center;display:flex}.topbar{justify-content:space-between;gap:var(--space-5);width:min(100%,1240px);margin:0 auto var(--space-5);padding:var(--space-4) 0 var(--space-2);animation:fade-slide var(--motion-slow) both}.topbar h1{max-width:680px;color:var(--text);font-size:38px;line-height:1.05}.topbar-actions{gap:var(--space-2);flex-wrap:wrap;justify-content:flex-end}.connection{align-items:center;gap:var(--space-2);background:var(--amber-soft);min-height:38px;color:var(--amber);box-shadow:var(--shadow-sm);border:1px solid #f0d2a7;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:850;display:inline-flex;position:relative}.connection:before{content:"";background:currentColor;border-radius:999px;width:8px;height:8px}.connection.online{background:var(--green-soft);color:var(--green-strong);border-color:#b9e7cf}.connection.online:before{animation:1.8s ease-out infinite status-pulse}.icon-button{border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:#425466;width:40px;height:40px;box-shadow:var(--shadow-sm);place-items:center;display:inline-grid}.icon-button:hover:not(:disabled){border-color:var(--border-strong);color:var(--blue);box-shadow:var(--shadow-md);transform:translateY(-1px)}.icon-button.is-spinning svg{animation:.7s linear infinite spin}.tabs{width:min(100%,1240px);margin:0 auto var(--space-5);gap:var(--space-1);padding:var(--space-1);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-strong);animation:fade-slide var(--motion-slow) both;animation-delay:80ms;display:flex;box-shadow:inset 0 1px #ffffffb3}.tabs button{border-radius:var(--radius-sm);color:#526170;background:0 0;min-height:38px;padding:0 16px;font-weight:850}.tabs button:hover:not(.active){color:var(--text);background:#ffffff8c}.tabs button.active{background:var(--surface);color:var(--text);box-shadow:var(--shadow-sm)}.notice{width:min(100%,1240px);margin:0 auto var(--space-4);border-radius:var(--radius-sm);background:var(--blue-soft);color:#1e4ea8;box-shadow:var(--shadow-sm);animation:notice-reveal var(--motion-base) both;border:1px solid #bfd3ff;padding:12px 14px;font-weight:780}.notice.error{background:var(--red-soft);width:auto;color:var(--red);border-color:#ffd0ca;margin:0}.dashboard-grid{gap:var(--space-4);grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);width:min(100%,1240px);margin:0 auto;display:grid}.tab-panel{animation:fade-slide var(--motion-slow) both}.panel{padding:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:#ffffffe0}.panel.wide{grid-column:span 1}.panel-heading,.event-toolbar{justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}.panel-heading h2,.event-toolbar h2{color:var(--text);font-size:20px;line-height:1.2}.panel-heading svg{color:var(--green)}.status-grid,.metric-grid,.command-grid{gap:var(--space-3);display:grid}.status-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}.metric-grid{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}.metric-grid.compact{grid-template-columns:1fr}.command-grid{grid-template-columns:repeat(auto-fit,minmax(142px,1fr))}.status-pill,.metric-card{align-content:space-between;gap:var(--space-2);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-raised);min-height:82px;box-shadow:var(--shadow-sm);animation:card-reveal var(--motion-slow) both;transition:transform var(--motion-fast), box-shadow var(--motion-fast), border-color var(--motion-fast);padding:14px;display:grid}.status-pill:hover,.metric-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md);transform:translateY(-2px)}.status-pill span,.metric-card span{color:var(--text-muted);font-size:13px;font-weight:850;line-height:1.25}.status-pill strong,.metric-card strong{overflow-wrap:anywhere;color:var(--text);font-size:22px;line-height:1.15}.status-pill.active{background:linear-gradient(180deg, #fff, var(--green-soft));border-color:#a9dfc2}.status-pill.active strong{color:var(--green-strong)}.status-pill.idle{background:linear-gradient(180deg, #fff, var(--amber-soft));border-color:#f0d2a7}.status-pill.idle strong{color:var(--amber)}.command-button{color:#173326;min-width:0;box-shadow:var(--shadow-sm);background:#f1fbf6;border:1px solid #bdd6c9;padding:0 12px}.command-button span{text-overflow:ellipsis;overflow:hidden}.command-button svg{color:var(--green);flex:none}.command-button:hover:not(:disabled){background:var(--green-soft);box-shadow:var(--shadow-md);border-color:#8ec4aa;transform:translateY(-1px)}.events-panel{width:min(100%,1240px);margin:0 auto}.event-toolbar select{background:var(--surface);max-width:360px}.table-wrap{margin-top:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm);overflow:auto}table{border-collapse:collapse;background:var(--surface);width:100%;min-width:760px}th,td{text-align:left;white-space:nowrap;border-bottom:1px solid #edf1f5;padding:13px 14px}th{z-index:1;color:var(--text-muted);background:var(--surface-muted);text-transform:uppercase;font-size:12px;font-weight:850;position:sticky;top:0}tbody tr{animation:row-reveal var(--motion-base) both;transition:background var(--motion-fast)}tbody tr:hover{background:#f7fbff}tr:last-child td{border-bottom:0}@keyframes panel-rise{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes fade-slide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes notice-reveal{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@keyframes card-reveal{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes row-reveal{0%{opacity:0}to{opacity:1}}@keyframes status-pulse{0%{box-shadow:0 0 #0f684b57}70%{box-shadow:0 0 0 8px #0f684b00}to{box-shadow:0 0 #0f684b00}}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.app-shell{padding:var(--space-4)}.topbar,.event-toolbar{flex-direction:column;align-items:flex-start}.topbar h1{font-size:32px}.topbar-actions,.tabs,.event-toolbar select{width:100%}.tabs button{flex:1}.dashboard-grid{grid-template-columns:1fr}}@media (width<=560px){.login-shell,.login-panel,.panel{padding:var(--space-4)}.topbar h1{font-size:28px}.topbar-actions{grid-template-columns:1fr 40px 40px;display:grid}.connection{justify-content:center}.tabs{grid-template-columns:1fr;display:grid}.command-grid,.status-grid,.metric-grid{grid-template-columns:1fr}.primary-button,.command-button{white-space:normal}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}