:root{--bg: #f6f7f9;--surface: #ffffff;--surface-2: #f0f2f5;--border: #e2e6ec;--text: #1b1f24;--text-muted: #6a737d;--primary: #2f6df1;--primary-fg: #ffffff;--ok: #1f9d55;--warn: #c47f17;--fail: #c4332b;--radius: 8px;--shadow: 0 1px 2px rgba(20, 27, 38, .04), 0 1px 8px rgba(20, 27, 38, .05);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Sarabun,IBM Plex Sans Thai,sans-serif}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;height:100%;background:var(--bg);color:var(--text)}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button{font:inherit;background:transparent;border:1px solid var(--border);border-radius:var(--radius);padding:.4rem .8rem;cursor:pointer;color:var(--text)}button.primary{background:var(--primary);color:var(--primary-fg);border-color:var(--primary)}button.primary:hover{filter:brightness(.95)}.app-shell{min-height:100%;display:flex;flex-direction:column}.app-shell header{background:var(--surface);border-bottom:1px solid var(--border);padding:.9rem 1.5rem;display:flex;align-items:center;justify-content:space-between}.app-shell header h1{margin:0;font-size:1.05rem;font-weight:600}.app-shell header .env{font-size:.75rem;color:var(--text-muted)}.app-shell main{flex:1;padding:1.5rem;max-width:1180px;width:100%;margin:0 auto}.catalog h2{margin:0 0 1rem;font-size:1.25rem}.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1rem}.service-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem 1.2rem;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.75rem;transition:transform .06s ease,box-shadow .06s ease}.service-card:hover{transform:translateY(-1px);box-shadow:0 2px 4px #141b260f,0 6px 22px #141b2614}.service-card .head{display:flex;align-items:center;gap:.7rem}.service-card .icon{color:var(--primary);flex-shrink:0}.service-card .title{font-size:1.05rem;font-weight:600}.service-shell h2 svg{color:var(--primary);flex-shrink:0}.service-card .desc{color:var(--text-muted);font-size:.9rem;line-height:1.4}.service-card .footer{display:flex;align-items:center;justify-content:space-between;padding-top:.5rem;border-top:1px dashed var(--border)}.service-card .footer .meta{font-size:.8rem;color:var(--text-muted)}.pill{display:inline-flex;align-items:center;gap:.35rem;padding:.15rem .55rem;border-radius:999px;font-size:.78rem;font-weight:500;background:var(--surface-2);color:var(--text-muted)}.pill.ok{background:#1f9d551f;color:var(--ok)}.pill.degraded{background:#c47f171f;color:var(--warn)}.pill.down{background:#c4332b1f;color:var(--fail)}.pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.service-shell .crumb{color:var(--text-muted);font-size:.85rem;margin-bottom:.5rem}.service-shell h2{margin:0 0 .25rem;font-size:1.35rem;display:flex;gap:.6rem;align-items:center}.service-shell .sub{color:var(--text-muted);margin-bottom:1.2rem}.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--border);margin-bottom:1.25rem}.tabs a{padding:.55rem .85rem;color:var(--text-muted);border-bottom:2px solid transparent;font-size:.93rem;text-decoration:none}.tabs a:hover{color:var(--text)}.tabs a.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:500}.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1rem 1.2rem;box-shadow:var(--shadow)}.panel+.panel{margin-top:1rem}.panel h3{margin:0 0 .5rem;font-size:1rem}pre.json{background:#0f172a;color:#d8e1ec;border-radius:var(--radius);padding:1rem 1.1rem;overflow:auto;font-size:.85rem;line-height:1.5;margin:0}.kv{display:grid;grid-template-columns:160px 1fr;gap:.4rem 1rem;font-size:.9rem}.kv dt{color:var(--text-muted)}.kv dd{margin:0}.placeholder{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);padding:2rem;text-align:center;color:var(--text-muted)}.placeholder h3{margin:0 0 .5rem;color:var(--text);font-size:1.1rem}.muted{color:var(--text-muted)}.error{color:var(--fail)}