:root{
  --bg:#07101f;
  --bg-2:#0b1730;
  --panel:#0f1d3d;
  --panel-2:#13264f;
  --line:rgba(138,167,255,.18);
  --line-2:rgba(138,167,255,.28);
  --text:#eef3ff;
  --muted:#9fb0dc;
  --soft:#c8d3f4;
  --blue:#6ea8ff;
  --cyan:#6be7da;
  --violet:#9a8cff;
  --amber:#ffcf70;
  --green:#6fe3a3;
  --danger:#ff8d8d;
  --shadow:0 18px 50px rgba(0,0,0,.28);
  --radius:20px;
}

*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  min-height:100%;
  background:
    radial-gradient(circle at 20% 0%, rgba(60,112,255,.14), transparent 30%),
    radial-gradient(circle at 100% 0%, rgba(107,231,218,.10), transparent 28%),
    linear-gradient(180deg,#06101f 0%, #071223 25%, #07101f 100%);
  color:var(--text);
  font:14px/1.45 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

button{font:inherit}
pre{margin:0}
a{color:inherit;text-decoration:none}

.op-shell{
  display:grid;
  grid-template-columns:290px minmax(0,1fr) 360px;
  min-height:100vh;
  gap:0;
}

.op-sidebar,
.op-drawer{
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  min-width:0;
  scrollbar-width:thin;
  scrollbar-color:rgba(138,167,255,.22) transparent;
}

.op-sidebar::-webkit-scrollbar,
.op-drawer::-webkit-scrollbar,
.pipeline-board::-webkit-scrollbar,
.row-table::-webkit-scrollbar,
.json-viewer::-webkit-scrollbar{
  width:10px;
}

.op-sidebar::-webkit-scrollbar-thumb,
.op-drawer::-webkit-scrollbar-thumb,
.pipeline-board::-webkit-scrollbar-thumb,
.row-table::-webkit-scrollbar-thumb,
.json-viewer::-webkit-scrollbar-thumb{
  background:rgba(138,167,255,.22);
  border-radius:999px;
}

.op-sidebar{
  border-right:1px solid var(--line);
  background:rgba(4,10,22,.72);
  backdrop-filter:blur(14px);
  padding:22px 16px 24px;
}

.op-main{
  min-width:0;
  width:100%;
  padding:24px;
}

.op-drawer{
  border-left:1px solid var(--line);
  background:rgba(5,11,24,.48);
  padding:24px 18px;
}

.card,
.drawer-card{
  background:linear-gradient(180deg,rgba(16,31,64,.92),rgba(11,24,49,.92));
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
}

.card{
  padding:18px;
  min-width:0;
}

.drawer-card{
  height:100%;
  padding:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

.brand{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-start;
  margin-bottom:20px;
}

.brand-logo{
  display:block;
  width:190px;
  max-width:100%;
  height:auto;
}

.brand-subtitle{
  margin:0;
  color:var(--muted);
  font-size:12px;
}

.side-block + .side-block{
  margin-top:18px;
}

.side-label{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
  margin:0 0 10px;
}

.sidebar-donut-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:160px;
}

.op-sidebar .sidebar-donut-wrap .donut{
  width:148px;
  height:148px;
}

.op-sidebar .sidebar-donut-wrap .donut svg{
  width:148px;
  height:148px;
}

.op-sidebar .sidebar-donut-wrap .donut-center strong{
  font-size:28px;
}

.op-sidebar .sidebar-donut-wrap .donut-center span{
  font-size:11px;
}

.pill-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pill,
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:700;
  font-size:12px;
  line-height:1;
  text-align:center;
}

.pill-row-compact .pill{
  min-height:30px;
  padding:0 10px;
  font-size:12px;
}

.pill.pass,.badge.pass{border-color:rgba(111,227,163,.35);color:#9af0c0;background:rgba(111,227,163,.12)}
.pill.fail,.badge.fail{border-color:rgba(255,141,141,.35);color:#ffc0c0;background:rgba(255,141,141,.12)}
.pill.missing,.badge.missing{border-color:rgba(255,207,112,.35);color:#ffe0a3;background:rgba(255,207,112,.12)}
.pill.running,.badge.running{border-color:rgba(110,168,255,.35);color:#c7dcff;background:rgba(110,168,255,.12)}
.pill.pending,.badge.pending{border-color:rgba(154,140,255,.35);color:#d7d0ff;background:rgba(154,140,255,.12)}
.badge-blue{border-color:rgba(110,168,255,.35);color:#c7dcff;background:rgba(110,168,255,.12)}
.badge-violet{border-color:rgba(154,140,255,.35);color:#d7d0ff;background:rgba(154,140,255,.12)}

.stage-nav{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.stage-btn{
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  background:#0b1730;
  color:var(--text);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:start;
  transition:.15s ease;
}

.stage-btn:hover,
.stage-btn.active{
  border-color:rgba(110,168,255,.45);
  background:#11214a;
  box-shadow:0 0 0 1px rgba(142,162,255,.18) inset;
}

.stage-btn strong{
  display:block;
  font-size:15px;
  line-height:1.22;
  margin:0 0 5px;
  word-break:break-word;
}

.stage-btn small{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.eyebrow{
  color:var(--blue);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  margin:0 0 10px;
}

.hero h1{
  margin:0 0 8px;
  font-size:42px;
  line-height:1.02;
  letter-spacing:-.03em;
}

.hero p{
  margin:0;
  color:var(--muted);
  max-width:880px;
  font-size:17px;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
  max-width:460px;
}

.btn{
  border:1px solid var(--line);
  background:rgba(12,22,48,.86);
  color:var(--text);
  padding:11px 14px;
  border-radius:14px;
  font-weight:600;
  box-shadow:var(--shadow);
  min-height:44px;
}

.btn-primary{
  background:linear-gradient(180deg,#4f93ff,#3272df);
  border-color:transparent;
}

.btn-secondary:hover{
  background:rgba(255,255,255,.07);
}

.layer-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-bottom:18px;
}

.top-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:18px;
}

.runtime-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:18px;
}

.workspace-grid{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:18px;
}

.card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.card-title{
  color:var(--muted);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.16em;
}

.stat-card h2{
  margin:0 0 8px;
  font-size:30px;
  line-height:1.1;
}

.muted{
  color:var(--muted);
}

.layer-list,
.step-list{
  list-style:none;
  padding:0;
  margin:0;
}

.layer-list li,
.step-list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 0;
  border-top:1px solid rgba(138,167,255,.10);
}

.layer-list li:first-child,
.step-list li:first-child{
  border-top:0;
}

.donut-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:168px;
}

.donut{
  width:170px;
  height:170px;
  display:grid;
  place-items:center;
  position:relative;
  color:var(--blue);
}

.donut svg{
  width:170px;
  height:170px;
  transform:rotate(-90deg);
}

.donut-center{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}

.donut-center strong{
  font-size:30px;
  line-height:1;
}

.donut-center span{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
}

.mini-metric-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.metric-box{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.025);
}

.metric-label{
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:11px;
  margin-bottom:8px;
}

.metric-value{
  font-size:22px;
  font-weight:800;
}

.metric-sub{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.4;
}

.pipeline-board{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:360px;
  overflow:auto;
  padding-right:4px;
}

.pipeline-item{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.025);
}

.pipeline-item h4{
  margin:0 0 8px;
  font-size:16px;
  line-height:1.25;
}

.pipeline-item p{
  margin:0 0 10px;
  color:var(--muted);
}

.pipeline-kv{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.subcategory-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.subcard{
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  background:rgba(255,255,255,.025);
}

.subcard h3{
  margin:0 0 10px;
  font-size:18px;
  line-height:1.2;
}

.sub-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.sub-stats{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.row-table{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:calc(100vh - 340px);
  overflow:auto;
  padding-right:4px;
}

.row-item{
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  background:rgba(255,255,255,.025);
  cursor:pointer;
}

.row-item h4{
  margin:0 0 8px;
  font-size:17px;
  line-height:1.25;
}

.row-item p{
  margin:0 0 10px;
  color:var(--muted);
}

.row-kv{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.op-drawer{
  display:block;
}

.json-viewer{
  flex:1;
  overflow:auto;
  background:#07111f;
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  color:#bfd3f6;
  white-space:pre-wrap;
  word-break:break-word;
  min-height:calc(100% - 44px);
  font:12px/1.55 "IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media (max-width: 1480px){
  .op-shell{
    grid-template-columns:280px minmax(0,1fr);
  }
  .op-drawer{
    grid-column:1 / -1;
    position:relative;
    top:auto;
    height:auto;
    padding:0 24px 24px;
    border-left:0;
    border-top:1px solid var(--line);
    background:transparent;
  }
  .drawer-card{
    min-height:320px;
  }
}

@media (max-width: 1180px){
  .layer-grid,
  .top-grid,
  .runtime-grid,
  .workspace-grid,
  .subcategory-grid,
  .mini-metric-grid{
    grid-template-columns:1fr;
  }
  .hero{
    flex-direction:column;
  }
  .hero-actions{
    justify-content:flex-start;
    max-width:none;
  }
}

@media (max-width: 1080px){
  .op-shell{
    grid-template-columns:1fr;
  }
  .op-sidebar,
  .op-drawer{
    position:relative;
    top:auto;
    height:auto;
  }
  .op-sidebar{
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .op-drawer{
    padding:24px;
    border-top:1px solid var(--line);
  }
  .hero h1{
    font-size:34px;
  }
}

/* === UI3 NAV RESTORE === */

.op-shell{
  grid-template-columns:290px minmax(0,1fr) 120px 360px;
}

.op-rail{
  border-left:1px solid var(--line);
  background:rgba(5,11,24,.36);
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}

.rail-btn{
  width:100%;
  min-height:54px;
  border:1px solid var(--line);
  background:rgba(12,22,48,.86);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  font-weight:700;
  font-size:12px;
  line-height:1.2;
  text-align:center;
  cursor:pointer;
  box-shadow:var(--shadow);
}

.rail-btn:hover{
  background:rgba(255,255,255,.07);
}

.rail-btn-primary{
  background:linear-gradient(180deg,#4f93ff,#3272df);
  border-color:transparent;
}

.rail-sep{
  width:100%;
  height:1px;
  background:var(--line);
  margin:4px 0;
}

.hero-actions{
  display:none !important;
}

.side-block-tree{
  min-height:320px;
}

.stage-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.stage-btn{
  width:100%;
  text-align:left;
  border:1px solid var(--line);
  background:#0b1730;
  color:var(--text);
  border-radius:14px;
  padding:12px;
  cursor:pointer;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:8px;
  transition:.15s ease;
}

.stage-btn:hover,
.stage-btn.active{
  border-color:rgba(110,168,255,.45);
  background:#11214a;
  box-shadow:0 0 0 1px rgba(142,162,255,.18) inset;
}

.stage-btn strong{
  display:block;
  font-size:14px;
  line-height:1.22;
  margin:0 0 4px;
  word-break:break-word;
}

.stage-btn small{
  display:block;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

@media (max-width: 1580px){
  .op-shell{
    grid-template-columns:280px minmax(0,1fr) 104px;
  }

  .op-drawer{
    grid-column:1 / -1;
    position:relative;
    top:auto;
    height:auto;
    padding:0 24px 24px;
    border-left:0;
    border-top:1px solid var(--line);
    background:transparent;
  }

  .drawer-card{
    min-height:320px;
  }
}

@media (max-width: 1180px){
  .op-shell{
    grid-template-columns:1fr;
  }

  .op-sidebar,
  .op-rail,
  .op-drawer{
    position:relative;
    top:auto;
    height:auto;
  }

  .op-sidebar{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .op-rail{
    border-left:0;
    border-top:1px solid var(--line);
    height:auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .op-drawer{
    padding:24px;
    border-top:1px solid var(--line);
  }
}