body { display:flex; }
.service-card { background:var(--bg-2); border:1px solid var(--border); border-radius:var(--r); padding:22px; margin-bottom:16px; }
.service-card h2 { font-size:1rem; margin:0 0 12px; }
.service-card p, .service-note { color:var(--text-3); font-size:.8rem; line-height:1.65; }
.service-form { display:grid; gap:14px; max-width:480px; }
.service-form label { display:grid; gap:7px; font-size:.8rem; }
.service-form input { width:100%; padding:10px 12px; border:1px solid var(--border); background:var(--bg-3); color:var(--white); border-radius:8px; font:inherit; }
.service-actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.service-message { margin-top:14px; font-size:.8rem; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; }
.service-message[data-error="true"] { color:var(--red,#f87171); }
.service-codes { padding:16px; background:var(--bg-3); border:1px dashed var(--green); border-radius:8px; font:14px/1.8 var(--mono); white-space:pre-wrap; user-select:all; }
.service-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; }
.service-metric { padding:14px; border:1px solid var(--border); border-radius:8px; background:var(--bg-3); }
.service-metric strong { display:block; margin-bottom:7px; font-size:.85rem; }
.service-metric span { font-size:.75rem; color:var(--text-3); line-height:1.6; }
.service-metric[data-state="ok"] strong { color:var(--green); }
.service-metric[data-state="warn"] strong { color:#fbbf24; }
.service-table-wrap { overflow:auto; }
.service-table { width:100%; border-collapse:collapse; font-size:.75rem; }
.service-table td, .service-table th { padding:12px 8px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.service-table th { color:var(--text-3); }
.service-event { padding:16px 0; border-bottom:1px solid var(--border); }
.service-event:last-child { border-bottom:0; }
.service-event h3 { font-size:.88rem; margin:0 0 6px; }
.service-event p { margin:4px 0 10px; }
.service-event.unread { border-left:2px solid var(--green); padding-left:14px; }
[hidden] { display:none!important; }
@media(max-width:600px) { .service-card { padding:16px; } .service-grid { grid-template-columns:1fr; } }