*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#f5f7fa;color:#1a1a2e;line-height:1.5;min-height:100vh}.monitor-app{display:flex;flex-direction:column;min-height:100vh}.container{max-width:800px;width:100%;margin:0 auto;padding:24px 16px;flex:1}.header{background:#1a1a2e;color:#fff;padding:0 16px;height:48px;display:flex;align-items:center}.header-inner{max-width:800px;width:100%;margin:0 auto}.header-brand{font-weight:600;font-size:16px;letter-spacing:.5px}.card{background:#fff;border-radius:8px;box-shadow:0 1px 3px #00000014;padding:24px;margin-bottom:16px}.monitor-name{font-size:22px;font-weight:700;margin-bottom:2px}.project-name{color:#6b7280;font-size:14px;margin-bottom:20px}.summary-row{display:flex;gap:40px}.summary-item{display:flex;flex-direction:column}.summary-value{font-size:28px;font-weight:700;color:#1a1a2e;line-height:1.2}.summary-value.summary-time{font-size:16px;font-weight:600;color:#6b7280}.summary-label{font-size:12px;color:#9ca3af;text-transform:uppercase;letter-spacing:.5px;margin-top:2px}.empty-card{text-align:center;color:#6b7280;padding:40px 24px}.variable-label{font-size:16px;font-weight:600;margin-bottom:16px;color:#1a1a2e}.no-data{color:#9ca3af;font-size:14px}.groups{display:flex;flex-direction:column;gap:8px}.group-row{display:grid;grid-template-columns:140px 1fr 60px 54px;align-items:center;gap:12px;font-size:14px}.group-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#374151}.group-bar-container{height:20px;background:#f0f0f5;border-radius:4px;overflow:hidden}.group-bar{height:100%;background:#3b5bdb;border-radius:4px;min-width:2px;transition:width .4s ease}.group-count{text-align:right;color:#374151;font-variant-numeric:tabular-nums}.group-share{text-align:right;color:#6b7280;font-variant-numeric:tabular-nums}.loading-card{display:flex;flex-direction:column;align-items:center;padding:60px 24px}.loading-spinner{width:32px;height:32px;border:3px solid #e5e7eb;border-top-color:#3b5bdb;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:16px}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:#6b7280;font-size:14px}.error-card{text-align:center;padding:48px 24px}.error-card h2{font-size:18px;font-weight:600;margin-bottom:8px;color:#1a1a2e}.error-card p{color:#6b7280;font-size:14px}.footer{text-align:center;padding:24px 16px;color:#9ca3af;font-size:12px}@media (max-width: 600px){.container{padding:16px 12px}.card{padding:16px}.monitor-name{font-size:18px}.summary-row{gap:24px}.summary-value{font-size:22px}.group-row{grid-template-columns:100px 1fr 50px 48px;gap:8px;font-size:13px}}