: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);
  }
}

/* === rail icon mode === */
.op-rail{
  align-items:center;
}

.rail-btn{
  position:relative;
  width:64px;
  min-height:64px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
}

.rail-btn .rail-icon{
  width:22px;
  height:22px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
  color:var(--text);
  opacity:.96;
}

.rail-btn .rail-tip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(8px);
  white-space:nowrap;
  padding:9px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(7,17,31,.96);
  color:var(--text);
  font-size:12px;
  font-weight:700;
  letter-spacing:.01em;
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
  z-index:30;
}

.rail-btn:hover .rail-tip,
.rail-btn:focus-visible .rail-tip{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}

.rail-btn:hover .rail-icon,
.rail-btn:focus-visible .rail-icon{
  color:var(--blue);
}

.rail-btn-primary .rail-icon{
  color:#fff;
}

.rail-btn-primary:hover .rail-icon,
.rail-btn-primary:focus-visible .rail-icon{
  color:#fff;
}

@media (max-width:1180px){
  .rail-btn{
    width:100%;
    min-height:56px;
  }

  .rail-btn .rail-tip{
    display:none;
  }
}

/* === canonical left tree === */
.stage-nav{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.tree-empty{
  color:var(--muted);
  font-size:12px;
}

.tree-phase-row,
.tree-cat-row,
.tree-bucket-row{
  width:100%;
  border:0;
  background:transparent;
  color:var(--text);
  text-align:left;
  cursor:pointer;
}

.tree-phase-row{
  display:grid;
  grid-template-columns:14px 28px minmax(0,1fr) 10px;
  align-items:center;
  gap:8px;
  padding:8px 6px;
  border-radius:12px;
}

.tree-phase-row:hover,
.tree-phase-row.active{
  background:rgba(255,255,255,.05);
}

.tree-arrow{
  color:var(--muted);
  font-size:11px;
  line-height:1;
}

.tree-phase-num{
  color:var(--muted);
  font:11px/1 "IBM Plex Mono", monospace;
}

.tree-phase-title{
  font-size:13px;
  font-weight:700;
  line-height:1.25;
  word-break:break-word;
}

.tree-phase-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
}

.tree-phase-dot.pass{background:var(--green)}
.tree-phase-dot.fail{background:var(--danger)}
.tree-phase-dot.running{background:var(--blue)}
.tree-phase-dot.pending{background:var(--violet)}
.tree-phase-dot.missing{background:var(--amber)}

.tree-cats{
  margin:4px 0 8px 22px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tree-cat-row{
  display:grid;
  grid-template-columns:14px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:10px;
}

.tree-cat-row:hover,
.tree-cat-row.active{
  background:rgba(255,255,255,.04);
}

.tree-cat-title{
  font-size:12px;
  color:var(--soft);
  line-height:1.3;
  word-break:break-word;
}

.tree-buckets{
  margin:4px 0 8px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.tree-bucket-row{
  padding:4px 8px;
  border-radius:8px;
}

.tree-bucket-row:hover,
.tree-bucket.active .tree-bucket-row{
  background:rgba(110,168,255,.08);
}

.tree-bucket-title{
  font:11px/1.3 "IBM Plex Mono", monospace;
  color:var(--muted);
  word-break:break-word;
}

.tree-items{
  margin:4px 0 0 10px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.tree-item{
  display:grid;
  grid-template-columns:8px minmax(0,1fr);
  gap:8px;
  align-items:start;
  padding:2px 0;
}

.tree-item-dot{
  width:5px;
  height:5px;
  margin-top:6px;
  border-radius:999px;
  background:rgba(255,255,255,.20);
}

.tree-item-title{
  font-size:11px;
  line-height:1.35;
  color:var(--muted);
  word-break:break-word;
}


/* rail right compact */
.rail{
  width:84px !important;
  min-width:84px !important;
  padding:18px 10px !important;
}

.rail-actions,
.rail-stack,
.right-rail,
.panel-rail{
  gap:10px !important;
}

.rail-btn{
  width:56px !important;
  height:56px !important;
  min-width:56px !important;
  min-height:56px !important;
  padding:0 !important;
  border-radius:16px !important;
  position:relative;
  overflow:visible !important;
}

.rail-btn svg,
.rail-btn img,
.rail-btn i{
  width:22px !important;
  height:22px !important;
  font-size:22px !important;
}

/* tooltip controlado e rápido */
.rail-btn::after{
  content:attr(data-tooltip);
  position:absolute;
  right:calc(100% + 10px);
  top:50%;
  transform:translateY(-50%) translateX(6px);
  background:rgba(7,16,31,.96);
  color:#eef3ff;
  border:1px solid rgba(138,167,255,.22);
  border-radius:10px;
  padding:7px 10px;
  font-size:12px;
  line-height:1.2;
  white-space:nowrap;
  box-shadow:0 12px 28px rgba(0,0,0,.28);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .12s ease, transform .12s ease, visibility .12s ease;
  z-index:9999;
}

.rail-btn::before{
  content:"";
  position:absolute;
  right:calc(100% + 4px);
  top:50%;
  transform:translateY(-50%);
  border-width:6px 0 6px 6px;
  border-style:solid;
  border-color:transparent transparent transparent rgba(7,16,31,.96);
  opacity:0;
  visibility:hidden;
  transition:opacity .12s ease, visibility .12s ease;
  pointer-events:none;
  z-index:9998;
}

.rail-btn:hover::after,
.rail-btn:hover::before,
.rail-btn:focus-visible::after,
.rail-btn:focus-visible::before{
  opacity:1;
  visibility:visible;
}

.rail-btn:hover::after,
.rail-btn:focus-visible::after{
  transform:translateY(-50%) translateX(0);
}

/* evita delay ruim do tooltip nativo */
.rail-btn[title]{
  cursor:pointer;
}

/* --- rail compact override: 30% menor que o ajuste anterior --- */
.rail{
  width:68px !important;
  min-width:68px !important;
  padding:12px 8px !important;
}

.rail-btn{
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  border-radius:14px !important;
}

.rail-btn svg,
.rail-btn img,
.rail-btn i{
  width:16px !important;
  height:16px !important;
  font-size:16px !important;
}

.rail > * + *,
.right-rail > * + *,
.rail-stack > * + *,
.rail-actions > * + *{
  margin-top:10px !important;
}

.rail-btn::after{
  font-size:11px !important;
  padding:6px 9px !important;
  right:calc(100% + 8px) !important;
}

/* --- rail tooltip layer fix --- */
.rail{
  position:relative !important;
  z-index:50 !important;
  overflow:visible !important;
}

.rail-btn{
  position:relative !important;
  overflow:visible !important;
  z-index:1;
}

.rail-btn:hover,
.rail-btn:focus-visible{
  z-index:60 !important;
}

.rail-btn::after{
  right:calc(100% + 12px) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:99999 !important;
  max-width:none !important;
  overflow:visible !important;
}

.rail-btn::before{
  right:calc(100% + 6px) !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  z-index:99998 !important;
}

.main,
.panel-main,
.shell,
.panel-shell,
.content,
.center,
.center-pane{
  overflow:visible !important;
}


/* --- force custom rail tooltip, kill native behavior visually --- */
.rail{
  position:relative !important;
  z-index:80 !important;
  overflow:visible !important;
}

.rail-btn{
  position:relative !important;
  overflow:visible !important;
}

.rail-btn::after{
  content:attr(data-tooltip) !important;
  position:absolute !important;
  right:calc(100% + 10px) !important;
  left:auto !important;
  top:50% !important;
  transform:translateY(-50%) translateX(-4px) !important;
  background:rgba(7,16,31,.98) !important;
  color:#eef3ff !important;
  border:1px solid rgba(138,167,255,.25) !important;
  border-radius:10px !important;
  padding:6px 10px !important;
  font-size:12px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  z-index:999999 !important;
  box-shadow:0 12px 28px rgba(0,0,0,.28) !important;
  transition:opacity .10s ease, transform .10s ease, visibility .10s ease !important;
}

.rail-btn::before{
  content:"" !important;
  position:absolute !important;
  right:calc(100% + 4px) !important;
  left:auto !important;
  top:50% !important;
  transform:translateY(-50%) !important;
  border-width:6px 0 6px 6px !important;
  border-style:solid !important;
  border-color:transparent transparent transparent rgba(7,16,31,.98) !important;
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  z-index:999998 !important;
  transition:opacity .10s ease, visibility .10s ease !important;
}

.rail-btn:hover::after,
.rail-btn:hover::before,
.rail-btn:focus-visible::after,
.rail-btn:focus-visible::before{
  opacity:1 !important;
  visibility:visible !important;
}

.rail-btn:hover::after,
.rail-btn:focus-visible::after{
  transform:translateY(-50%) translateX(0) !important;
}