:root { color-scheme: light; --ink:#102d40; --muted:#59707f; --line:#dce6eb; --canvas:#f5f8fa; --panel:#fff; --teal:#076488; --teal-dark:#064a67; --code:#0b1f2b; }
* { box-sizing:border-box; }
html { scroll-padding-top:5.5rem; }
body { margin:0; min-width:320px; background:var(--canvas); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; line-height:1.55; }
.umec-api-header { position:sticky; top:0; z-index:20; min-height:4.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem clamp(1rem,4vw,4rem); background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 13px rgba(5,35,52,.09); }
.umec-api-brand { display:inline-flex; align-items:center; gap:.75rem; min-width:0; color:var(--ink); font-size:1rem; font-weight:720; text-decoration:none; }
.umec-api-brand img { display:block; width:auto; height:2.3rem; max-width:min(34vw,11.5rem); object-fit:contain; }
.umec-api-brand span { color:#486574; white-space:nowrap; }
.umec-api-header nav { display:flex; align-items:center; gap:.15rem; flex-wrap:wrap; justify-content:flex-end; }
.umec-api-header nav a { color:#315566; border-radius:.45rem; font-weight:650; padding:.55rem .7rem; text-decoration:none; }
.umec-api-header nav a:hover,.umec-api-header nav a[aria-current="page"] { background:#e9f4f8; color:var(--teal-dark); }
.umec-api-header nav .language { border:1px solid #a9c5d1; margin-left:.25rem; }
.api-shell { width:min(100% - 2rem,100rem); margin-inline:auto; padding:clamp(1.25rem,3vw,3.25rem) 0 4rem; }
.api-intro { max-width:62rem; }
.eyebrow { margin:0 0:.3rem; color:var(--teal); font-size:.82rem; font-weight:760; letter-spacing:.09em; text-transform:uppercase; }
h1,h2,h3 { color:#0c3047; line-height:1.18; }
h1 { margin:.1rem 0 .75rem; font-size:clamp(2rem,4vw,3.3rem); letter-spacing:-.035em; }
.api-intro > p:not(.eyebrow) { margin:0; color:#405b6b; font-size:1.06rem; }
.api-facts { display:flex; gap:.75rem; flex-wrap:wrap; margin:1.5rem 0 2rem; }
.api-facts div { min-width:10rem; padding:.75rem 1rem; background:#eaf4f7; border:1px solid #d4e6ec; border-radius:.7rem; }
.api-facts dt { color:var(--teal-dark); font-weight:800; }.api-facts dd { margin:.1rem 0 0; color:#52707d; font-size:.86rem; }
.api-layout { display:grid; grid-template-columns:minmax(17rem,23rem) minmax(0,1fr); align-items:start; gap:1.25rem; }
.api-catalog,.operation-detail,.api-guidance { background:var(--panel); border:1px solid var(--line); border-radius:.8rem; box-shadow:0 5px 18px rgba(16,45,64,.05); }
.api-catalog { position:sticky; top:5.5rem; max-height:calc(100vh - 6.5rem); overflow:auto; padding:1rem; }
.api-catalog label { display:block; margin-bottom:.45rem; color:#284b5d; font-size:.9rem; font-weight:720; }
.api-catalog input { width:100%; min-height:2.75rem; padding:.6rem .7rem; background:#fff; border:1px solid #a9c5d1; border-radius:.5rem; color:var(--ink); font:inherit; }
.api-catalog input:focus { outline:3px solid rgba(7,100,136,.2); border-color:var(--teal); }
.filter-status { min-height:1.2rem; margin:.6rem 0 .35rem; color:var(--muted); font-size:.84rem; }
.operation-list { display:grid; gap:.35rem; }
.operation-button { width:100%; display:grid; grid-template-columns:4.4rem minmax(0,1fr); gap:.55rem; align-items:center; padding:.58rem; color:inherit; background:transparent; border:1px solid transparent; border-radius:.5rem; text-align:left; font:inherit; cursor:pointer; }
.operation-button:hover,.operation-button[aria-current="true"] { border-color:#c6dde6; background:#edf7fa; }
.operation-button small { overflow:hidden; color:#486574; font-size:.79rem; text-overflow:ellipsis; white-space:nowrap; }
.method { display:inline-flex; align-items:center; justify-content:center; min-height:1.65rem; padding:.15rem .3rem; border-radius:.32rem; color:#fff; background:#52717e; font-size:.7rem; font-weight:800; letter-spacing:.03em; }
.method.get { background:#16835e; }.method.post { background:#126eaa; }.method.put,.method.patch { background:#976312; }.method.delete { background:#b23b45; }
.operation-detail { min-width:0; padding:clamp(1rem,2.6vw,2rem); }
.operation-detail header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding-bottom:1rem; border-bottom:1px solid var(--line); }
.operation-detail h2 { margin:0 0 .35rem; font-size:clamp(1.35rem,2.3vw,2rem); overflow-wrap:anywhere; }
.operation-detail .summary { margin:0; color:#496472; }.operation-detail .path { overflow-wrap:anywhere; color:#274b5d; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.operation-detail h3 { margin:1.65rem 0 .65rem; font-size:1.08rem; }
.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(16rem,.72fr); gap:1.25rem; }
.code-block { position:relative; margin:0; padding:1rem; overflow:auto; color:#e8f3f8; background:var(--code); border-radius:.6rem; font: .84rem/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; }
.code-label { display:block; margin:0 0 .45rem; color:#58717f; font-size:.8rem; font-weight:750; text-transform:uppercase; letter-spacing:.07em; }
table { width:100%; border-collapse:collapse; font-size:.92rem; } th,td { padding:.65rem; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; } th { color:#3d5c6b; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; } td { overflow-wrap:anywhere; } code { padding:.13rem .3rem; color:#0f4e69; background:#eaf3f6; border-radius:.25rem; font: .88em ui-monospace,SFMono-Regular,Consolas,monospace; }
.response-list { display:grid; gap:.65rem; }.response { padding:.7rem .8rem; border:1px solid var(--line); border-radius:.5rem; }.status { display:inline-block; min-width:3rem; margin-right:.5rem; color:#126a4a; font-weight:820; }.status.error { color:#a2333b; }
.empty-state,.load-error { margin:0; padding:2rem 0; color:var(--muted); }.load-error { color:#9c2634; }.api-guidance { margin-top:1.25rem; padding:clamp(1rem,2.6vw,2rem); }.api-guidance h2 { margin-top:0; }.guidance-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }.guidance-grid section { min-width:0; padding:1rem; background:#f7fafb; border-radius:.55rem; }.guidance-grid h3 { margin:.1rem 0 .4rem; font-size:1rem; }.guidance-grid p { margin:0; color:#48616f; }
@media (max-width:900px) { .api-layout { grid-template-columns:1fr; }.api-catalog { position:static; max-height:none; }.operation-list { grid-template-columns:repeat(2,minmax(0,1fr)); }.guidance-grid { grid-template-columns:1fr; } }
@media (max-width:620px) { .umec-api-header { align-items:flex-start; flex-direction:column; }.umec-api-brand span { display:none; }.umec-api-header nav { width:100%; justify-content:flex-start; }.umec-api-header nav a { min-height:2.75rem; display:inline-flex; align-items:center; }.api-shell { width:min(100% - 1rem,100rem); }.operation-list { grid-template-columns:1fr; }.detail-grid { grid-template-columns:1fr; }.operation-detail header { flex-direction:column; }.api-facts { gap:.5rem; }.api-facts div { min-width:calc(50% - .25rem); flex:1; } }