*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;background:#0c0c0e}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}input[type=number]{-moz-appearance:textfield;appearance:textfield}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#333;border-radius:99px}:root{--color-bg: #0c0c0e;--color-text: #e0e0e0;--color-dim: #bbb;--color-faint: #777;--color-muted: #666;--color-ghost: #555;--color-dead: #444;--color-green: #4ade80;--color-amber: #f5a623;--color-red: #ff5555;--surface-1: rgba(255, 255, 255, .03);--surface-2: rgba(255, 255, 255, .04);--surface-3: rgba(255, 255, 255, .06);--border-1: rgba(255, 255, 255, .07);--border-2: rgba(255, 255, 255, .08);--border-3: rgba(255, 255, 255, .12);--border-4: rgba(255, 255, 255, .15);--fs-2xs: 9px;--fs-xs: 10px;--fs-sm: 11px;--fs-base: 12px;--fs-lg: 15px;--fs-xl: 20px;--fs-2xl: 24px;--fs-3xl: 34px}.app-shell{min-height:100vh;background:var(--color-bg);color:var(--color-text);display:flex;flex-direction:column;align-items:center;padding:28px 16px 56px}.app-sidebar{width:100%;max-width:400px}.app-panel{width:100%;max-width:400px;background:var(--surface-1);border:1px solid var(--border-1);border-radius:20px;padding:28px 22px;display:flex;flex-direction:column;align-items:center;gap:26px}.ring-stats-row{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}.stat-boxes{display:flex;gap:8px;width:100%}.app-footer{margin-top:20px;font-size:var(--fs-2xs);color:#2a2a2a;text-align:center;line-height:1.8}.ring{position:relative;width:192px;height:192px;flex-shrink:0}.ring-svg{width:100%;height:100%;transform:rotate(-90deg)}.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}.ring-value{font-size:var(--fs-3xl);font-weight:800;line-height:1;letter-spacing:-.03em}.ring-sublabel{font-size:var(--fs-sm);color:#888;margin-top:4px;letter-spacing:.05em}.pill{display:inline-flex;align-items:center;gap:6px;border-radius:99px;padding:4px 10px}.pill--idle{background:#ffffff0d}.pill--loading{background:#f5a6231f}.pill--ok{background:#4ade801f}.pill--error{background:#ff55551f}.pill__dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.pill--idle .pill__dot{background:var(--color-ghost)}.pill--loading .pill__dot{background:var(--color-amber);animation:pulse 1s infinite}.pill--ok .pill__dot{background:var(--color-green)}.pill--error .pill__dot{background:var(--color-red)}.pill__label{font-size:var(--fs-xs);letter-spacing:.08em}.pill--idle .pill__label{color:var(--color-faint)}.pill--loading .pill__label{color:var(--color-amber)}.pill--ok .pill__label{color:var(--color-green)}.pill--error .pill__label{color:var(--color-red)}.stat-box{flex:1;background:var(--surface-2);border-radius:12px;padding:12px 8px;text-align:center;border:1px solid transparent}.stat-box--accent{border-color:var(--border-3)}.stat-box__value{font-size:var(--fs-xl);font-weight:700;color:#e8e8e8;letter-spacing:-.02em}.stat-box__label{font-size:var(--fs-2xs);color:var(--color-faint);margin-top:3px;text-transform:uppercase;letter-spacing:.1em}@media (min-width: 768px){:root{--fs-2xs: 12px;--fs-xs: 13px;--fs-sm: 14px;--fs-base: 15px;--fs-lg: 18px;--fs-xl: 26px;--fs-2xl: 34px;--fs-3xl: 50px}.app-shell{flex-direction:row;align-items:flex-start;justify-content:center;padding:40px 40px 56px;gap:28px}.app-sidebar{max-width:340px;flex-shrink:0;position:sticky;top:40px}.app-panel{flex:1;max-width:520px;border-radius:24px;padding:32px 28px;gap:32px}.ring-stats-row{flex-direction:row;align-items:stretch;gap:24px}.stat-boxes{flex-direction:column;flex:1;width:auto}.ring{width:224px;height:224px}.app-footer{display:none}}