@font-face{
font-family:OpsSans;
src:local("Inter"),local("Arial");
font-display:swap
}
:root{
color-scheme:dark;
--bg:#0a111a;
--panel:#111d2b;
--panel2:#162536;
--line:#2a3d52;
--ink:#eef4fc;
--muted:#a8bbce;
--accent:#8be1b5;
--danger:#ffb0af;
--warn:#f3cf88;
--focus:#b5d7ff;
font-family:OpsSans,system-ui,sans-serif;
font-size:16px;
line-height:1.55;
background:var(--bg);
color:var(--ink)
}
*{
box-sizing:border-box
}
body{
margin:0
}
a{
color:var(--accent);
text-underline-offset:.2em
}
button,input,select,textarea{
font:inherit
}
button,a,input,select,textarea,summary{
outline-offset:4px
}
:focus-visible{
outline:3px solid var(--focus)
}
button{
cursor:pointer
}
button:disabled{
opacity:.5;
cursor:not-allowed
}
button,input,select,textarea{
border:1px solid var(--line);
border-radius:7px
}
input,select,textarea{
color:var(--ink);
background:var(--bg);
padding:.65rem .75rem;
max-width:100%;
width:100%
}
input[type=checkbox]{
width:auto
}
textarea{
min-height:104px;
resize:vertical
}
button,.ops-button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.35rem;
background:var(--panel2);
color:var(--ink);
padding:.6rem .95rem;
font-weight:650;
text-decoration:none;
min-height:43px
}
button:hover:enabled,.ops-button:hover{
border-color:var(--accent)
}
button.ops-primary{
background:var(--accent);
border-color:var(--accent);
color:#0c231a
}
button.ops-danger{
color:var(--danger)
}
button.ops-small{
font-size:.86rem;
padding:.3rem .65rem;
min-height:34px
}
button[aria-pressed=true]{
border-color:var(--accent);
color:var(--accent);
background:#173129
}
.ops-skip{
position:absolute;
top:-100px;
left:1rem;
padding:1rem;
background:var(--panel);
z-index:3
}
.ops-skip:focus{
top:1rem
}
.ops-header,.ops-footer{
display:flex;
align-items:center;
justify-content:space-between;
gap:1.5rem;
padding:1.4rem max(1.5rem,calc((100vw - 1320px)/2));
border-bottom:1px solid var(--line)
}
.ops-brand{
color:var(--ink);
font-weight:800;
letter-spacing:.12em;
text-decoration:none;
white-space:nowrap
}
.ops-brand span{
display:block;
font-size:.7rem;
letter-spacing:.16em;
color:var(--muted);
font-weight:500
}
.ops-header nav,.ops-footer{
display:flex;
flex-wrap:wrap;
gap:1.4rem
}
.ops-header nav a,.ops-footer a{
font-size:.9rem;
color:var(--muted)
}
.ops-shell{
max-width:1320px;
margin:auto;
padding:2rem 1.5rem 4rem
}
.ops-intro{
max-width:850px;
padding:1rem 0 2rem
}
.ops-eyebrow{
font-size:.76rem;
font-weight:700;
letter-spacing:.16em;
color:var(--accent);
margin:0 0 .8rem
}
h1{
font-size:clamp(2rem,4vw,3.3rem);
line-height:1.13;
letter-spacing:-.04em;
margin:.3rem 0 1rem
}
h2{
font-size:1.25rem;
margin:0 0 .7rem
}
h3{
font-size:1.04rem;
margin:.3rem 0 .8rem
}
p{
margin:.5rem 0 1rem
}
.ops-intro p:last-child{
color:var(--muted);
font-size:1.08rem;
max-width:700px
}
.ops-status{
min-height:1.8rem;
color:var(--accent);
overflow-wrap:anywhere
}
.ops-status[data-tone=error]{
color:var(--danger)
}
.ops-status[data-tone=warning]{
color:var(--warn)
}
.ops-card{
padding:1.35rem;
background:var(--panel);
border:1px solid var(--line);
border-radius:12px;
min-width:0
}
.ops-card+.ops-card{
margin-top:1rem
}
.ops-auth{
max-width:650px
}
.ops-muted,.ops-help,.ops-empty{
color:var(--muted)
}
.ops-help{
font-size:.85rem;
margin:.35rem 0 .6rem
}
.ops-empty{
padding:1rem;
border:1px dashed var(--line);
border-radius:7px
}
.ops-toolbar{
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
gap:.8rem;
margin-bottom:1.2rem
}
.ops-toolbar .ops-field{
margin:0;
min-width:230px;
flex:1;
max-width:520px
}
.ops-toolbar p{
margin:0
}
.ops-toolbar-actions,.ops-actions{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:.6rem
}
.ops-tabs{
display:flex;
gap:.4rem;
flex-wrap:wrap;
border-bottom:1px solid var(--line);
padding-bottom:1rem;
margin-bottom:1.2rem
}
.ops-tabs button{
background:transparent
}
.ops-tabs button[aria-current=page]{
color:var(--accent);
border-color:var(--accent)
}
.ops-titlebar{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:1rem;
margin-bottom:1rem
}
.ops-titlebar p{
color:var(--muted);
margin:.25rem 0 0
}
.ops-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1rem
}
.ops-grid>.ops-card+.ops-card{
margin:0
}
.ops-grid-wide{
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)
}
.ops-field{
display:block;
margin:0 0 .9rem
}
.ops-field>span{
display:block;
font-size:.88rem;
font-weight:650;
margin-bottom:.35rem
}
.ops-field input[type=checkbox]+span{
display:inline;
margin-left:.5rem
}
.ops-fields{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
column-gap:1rem
}
.ops-fields>.ops-span{
grid-column:1/-1
}
.ops-form{
margin-top:.7rem
}
.ops-form>.ops-actions{
margin-top:1rem
}
.ops-tag,.ops-badge{
display:inline-block;
border:1px solid var(--line);
border-radius:20px;
color:var(--muted);
padding:.15rem .6rem;
font-size:.75rem;
line-height:1.5;
white-space:nowrap
}
.ops-badge[data-tone=positive]{
border-color:#347454;
color:var(--accent)
}
.ops-badge[data-tone=warning]{
border-color:#81663d;
color:var(--warn)
}
.ops-badge[data-tone=error]{
border-color:#86494c;
color:var(--danger)
}
.ops-metrics{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:.8rem;
margin-bottom:1rem
}
.ops-metric{
padding:1rem;
background:var(--panel);
border:1px solid var(--line);
border-radius:9px
}
.ops-metric strong{
display:block;
font-size:1.8rem;
font-variant-numeric:tabular-nums;
line-height:1.2
}
.ops-metric span{
font-size:.8rem;
color:var(--muted)
}
.ops-table-wrap{
overflow:auto;
max-width:100%;
border:1px solid var(--line);
border-radius:8px
}
.ops-table{
border-collapse:collapse;
width:100%;
font-size:.88rem
}
.ops-table th{
text-align:left;
color:var(--muted);
font-weight:600;
background:var(--bg);
white-space:nowrap
}
.ops-table th,.ops-table td{
padding:.7rem .8rem;
border-bottom:1px solid var(--line);
vertical-align:top
}
.ops-table tr:last-child td{
border-bottom:0
}
.ops-table td{
overflow-wrap:anywhere;
max-width:420px
}
.ops-table td:first-child{
max-width:300px
}
.ops-table .ops-actions{
flex-wrap:nowrap
}
.ops-record{
border-top:1px solid var(--line);
padding:1rem 0
}
.ops-record:first-child{
border-top:0;
padding-top:0
}
.ops-record:last-child{
padding-bottom:0
}
.ops-record-head{
display:flex;
justify-content:space-between;
gap:.8rem;
align-items:flex-start;
margin-bottom:.4rem
}
.ops-record-head h3{
margin:0
}
.ops-record p{
overflow-wrap:anywhere
}
.ops-meta{
font-size:.8rem;
color:var(--muted);
overflow-wrap:anywhere
}
.ops-details{
margin-top:1rem
}
.ops-details>summary,.ops-guide>summary{
cursor:pointer;
font-weight:650
}
.ops-details[open]>summary{
margin-bottom:.9rem
}
.ops-code{
padding:.9rem;
border:1px solid var(--line);
border-radius:7px;
background:var(--bg);
white-space:pre-wrap;
overflow-wrap:anywhere;
font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;
max-height:480px;
overflow:auto;
tab-size:2
}
.ops-json-input{
font:13px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
min-height:210px
}
.ops-split{
display:grid;
grid-template-columns:minmax(280px,.7fr) minmax(0,1.7fr);
gap:1rem
}
.ops-split>.ops-card+.ops-card{
margin:0
}
.ops-stream-list{
display:flex;
flex-direction:column;
gap:.5rem
}
.ops-stream-list button{
justify-content:space-between;
text-align:left;
width:100%;
flex-wrap:wrap;
overflow-wrap:anywhere
}
.ops-stream-list button span{
display:block
}
.ops-stream-list button .ops-meta{
font-weight:400
}
.ops-divider{
border:0;
border-top:1px solid var(--line);
margin:1.2rem 0
}
.ops-loading{
color:var(--muted);
padding:1rem
}
.ops-error{
padding:1rem;
border:1px solid #86494c;
color:var(--danger);
border-radius:8px
}
.ops-note{
padding:.8rem 1rem;
border-left:3px solid var(--accent);
background:var(--bg);
margin:.9rem 0;
color:var(--muted)
}
.ops-warning{
border-color:var(--warn)
}
.ops-kv{
display:grid;
grid-template-columns:minmax(100px,.7fr) minmax(0,2fr);
gap:.4rem 1rem;
font-size:.9rem
}
.ops-kv dt{
color:var(--muted)
}
.ops-kv dd{
margin:0;
overflow-wrap:anywhere
}
.ops-guide{
margin-top:2.5rem;
border-top:1px solid var(--line);
padding-top:1.5rem;
color:var(--muted)
}
.ops-guide-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:1.5rem;
margin-top:1.5rem
}
.ops-guide h2{
font-size:1rem;
color:var(--ink)
}
.ops-footer{
border-top:1px solid var(--line);
border-bottom:0;
color:var(--muted);
font-size:.8rem
}
.ops-token{
font:13px/1.7 ui-monospace,monospace;
overflow-wrap:anywhere;
color:var(--warn);
user-select:all
}
.ops-pagination{
margin-top:1rem
}
.ops-count{
font-size:.86rem;
color:var(--muted)
}
.ops-hidden{
display:none!important
}
@media(max-width:900px){
.ops-split,.ops-grid-wide{
grid-template-columns:1fr
}
.ops-metrics{
grid-template-columns:repeat(2,minmax(0,1fr))
}
.ops-header{
align-items:flex-start
}
.ops-header nav{
gap:.7rem
}
.ops-shell{
padding:1.5rem 1rem 3rem
}
.ops-card{
padding:1rem
}
}
@media(max-width:580px){
.ops-grid,.ops-fields,.ops-guide-grid{
grid-template-columns:1fr
}
.ops-titlebar{
flex-direction:column
}
.ops-header{
flex-direction:column;
padding:1rem
}
.ops-tabs{
gap:.3rem
}
.ops-tabs button{
font-size:.85rem;
padding:.5rem .65rem
}
.ops-toolbar{
align-items:stretch
}
.ops-toolbar .ops-field{
min-width:100%
}
.ops-metric strong{
font-size:1.5rem
}
.ops-card{
border-radius:8px
}
.ops-kv{
grid-template-columns:1fr
}
.ops-kv dd{
margin-bottom:.5rem
}
}
@media(prefers-reduced-motion:no-preference){
button,a{
transition:border-color .12s,color .12s,background-color .12s
}
}
@media print{
.ops-header,.ops-footer,.ops-tabs,.ops-actions,.ops-guide,.ops-auth{
display:none
}
body,:root{
background:white;
color:black
}
.ops-card{
background:white;
border-color:#aaa
}
.ops-meta,.ops-muted{
color:#333
}
}