*,*:before,*:after{box-sizing:border-box}body{margin:0;background:#121212;color:#e0e0e0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh}#root{min-height:100vh}.card{position:relative;background:#1e1e1e;border:1px solid #2e2e2e;border-radius:12px;padding:20px;cursor:pointer;transition:border-color .2s,transform .15s;display:flex;flex-direction:column;align-items:center;gap:12px;-webkit-user-select:none;user-select:none}.card:hover{border-color:#4a4a4a;transform:translateY(-2px)}.indicator{position:absolute;top:14px;right:14px;width:10px;height:10px;border-radius:50%}.indicator--off{background:#555}.card__image{width:80px;height:80px;background:#2a2a2a;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:8px}.card__image svg{width:100%;height:100%}.card__info{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;overflow:hidden}.card__name{font-size:14px;font-weight:600;color:#e0e0e0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}.card__guid{font-size:11px;color:#666;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;font-family:monospace}.list-page{padding:32px;box-sizing:border-box}.list-page--empty{height:100vh;display:flex;align-items:center;justify-content:center}.list-page__title{font-size:24px;font-weight:700;color:#e0e0e0;margin:0 0 28px}.list-page__empty{color:#aaa;font-size:15px}.list-page__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}.material-ring{display:flex;flex-direction:column;align-items:center;gap:8px}.material-ring__label{font-size:13px;color:#888}.material-ring__circle-wrap{position:relative;display:flex;align-items:center;justify-content:center}.material-ring__value{position:absolute;font-size:13px;font-weight:600;color:#e0e0e0}.periphery-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px}.periphery-item{display:flex;align-items:center;justify-content:space-between;gap:8px}.periphery-item__label{font-size:12px;color:#888}.periphery-item__tag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:4px;letter-spacing:.04em;flex-shrink:0}.tag--on{background:#14532d;color:#4ade80}.tag--off{background:#1f1f1f;color:#555}.detail-page{padding:32px;height:100vh;box-sizing:border-box;display:flex;flex-direction:column}.detail-page__back{background:none;border:none;color:#888;font-size:14px;cursor:pointer;padding:0;margin-bottom:24px;align-self:flex-start;transition:color .15s}.detail-page__back:hover{color:#ccc}.detail-page__header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px;gap:16px;flex-shrink:0}.detail-page__header-left{display:flex;flex-direction:column;gap:4px}.detail-page__name{font-size:22px;font-weight:700;color:#e0e0e0;margin:0}.detail-page__guid{font-size:12px;color:#555;font-family:monospace}.detail-page__indicator{width:12px;height:12px;border-radius:50%;flex-shrink:0;margin-top:6px}.indicator--on{background:#4ade80;box-shadow:0 0 6px #4ade80aa}.indicator--off{background:#444}.detail-page__body{display:grid;grid-template-columns:1fr 1fr;gap:16px;flex:1;min-height:0}.detail-page__left{display:flex;flex-direction:column;gap:24px;min-height:0}.detail-page__rings{display:flex;gap:24px}.detail-page__panel{display:flex;flex-direction:column;gap:12px;min-height:0}.panel__title-row{display:flex;align-items:center;justify-content:space-between}.panel__title{font-size:12px;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.08em}.panel__clear{background:none;border:none;color:#555;font-size:12px;cursor:pointer;padding:0;transition:color .15s}.panel__clear:hover{color:#aaa}.detail-page__status-block{display:flex;flex-direction:column;gap:6px}.detail-page__status-row{display:flex;align-items:baseline;gap:8px}.detail-page__status-label{font-size:13px;color:#888;white-space:nowrap}.detail-page__status-text{font-size:13px;font-weight:600;color:#e0e0e0}.detail-page__status-time{font-size:11px;color:#555;font-family:monospace}.detail-page__log{flex:1;overflow-y:auto;background:#111;border:1px solid #2a2a2a;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px}.detail-page__log-empty{color:#444;font-size:13px;align-self:center;margin-top:20px}.log-entry{display:flex;gap:10px;align-items:baseline}.log-entry__index{font-size:11px;color:#444;font-family:monospace;min-width:20px;text-align:right;flex-shrink:0}.log-entry__text{font-size:12px;color:#b0b0b0;font-family:monospace;word-break:break-all;line-height:1.5}