:root{
  --vb-bg:#06060f;
  --vb-s1:#0e0e1a;
  --vb-s2:#13131f;
  --vb-s3:#191928;
  --vb-bd:rgba(255,255,255,0.065);
  --vb-bd2:rgba(255,255,255,0.12);
  --vb-bd3:rgba(255,255,255,0.18);
  --vb-vi:#7c6dfa;
  --vb-vi2:#a99dff;
  --vb-vi3:rgba(124,109,250,0.1);
  --vb-cy:#00cfe8;
  --vb-em:#00e07a;
  --vb-am:#ffb020;
  --vb-ro:#ff5066;
  --vb-wh:#edeeff;
  --vb-mu:rgba(237,238,255,0.44);
  --vb-mu2:rgba(237,238,255,0.22);
  --vb-fh:'Instrument Serif',serif;
  --vb-fb:'Geist',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

body.page-status{
  background:var(--vb-bg);
  color:var(--vb-wh);
  font-family:var(--vb-fb);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  color-scheme: dark;
}

/* floating icons */
body.page-status #fbg{position:fixed;inset:0;pointer-events:none;z-index:2;overflow:hidden}
body.page-status #fbg .fi{position:absolute;opacity:0;animation:vb-rise linear infinite;filter:blur(0.5px)}
@keyframes vb-rise{0%{opacity:0;transform:translateY(108vh) rotate(0deg)}8%{opacity:0.1}85%{opacity:0.1}100%{opacity:0;transform:translateY(-8vh) rotate(350deg)}}

/* Top nav */
body.page-status .top-nav{
  position:fixed;
  top:0;left:0;right:0;
  z-index:500;
  height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.35rem;
  background:rgba(6,6,15,0.9);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--vb-bd);
}
body.page-status .top-nav .nav-link{
  padding:0.38rem 0.8rem;
  border-radius:7px;
  font-size:0.82rem;
  font-weight:600;
  color:var(--vb-mu);
  text-decoration:none;
  transition:all 0.18s;
}
body.page-status .top-nav .nav-link:hover{color:var(--vb-wh);background:rgba(255,255,255,0.05)}
body.page-status .top-nav .nav-user{display:flex;gap:0.55rem;align-items:center}
body.page-status .top-nav .nav-welcome{color:var(--vb-mu);font-size:0.82rem;font-weight:600}

/* Layout */
body.page-status main.shell{
  display:flex;
  padding-top:54px;
  min-height:100vh;
  position:relative;
  z-index:1;
}
body.page-status .app-layout-shell{display:flex;width:100%}
body.page-status .app-sidebar{
  width:205px;
  background:var(--vb-s1);
  border-right:1px solid var(--vb-bd);
  padding:1.2rem 0.75rem;
  position:fixed;
  top:54px;left:0;bottom:0;
  display:flex;
  flex-direction:column;
  z-index:100;
  overflow-y:auto;
}
body.page-status .app-side-label{
  font-size:0.6rem;
  font-weight:800;
  letter-spacing:0.13em;
  text-transform:uppercase;
  color:var(--vb-mu2);
  padding:0.4rem 0.5rem;
  margin-bottom:0.12rem;
}
body.page-status .app-side-link{
  display:flex;
  align-items:center;
  gap:0.55rem;
  padding:0.55rem 0.65rem;
  border-radius:8px;
  font-size:0.83rem;
  font-weight:600;
  color:var(--vb-mu);
  text-decoration:none;
  transition:all 0.16s;
  margin-bottom:0.15rem;
}
body.page-status .app-side-link:hover{background:rgba(255,255,255,0.04);color:var(--vb-wh)}
body.page-status .app-side-link.active{
  background:rgba(124,109,250,0.12);
  color:var(--vb-vi2);
  border:1px solid rgba(124,109,250,0.18);
}
body.page-status .app-main{
  margin-left:205px;
  flex:1;
  padding:0;
  min-height:calc(100vh - 54px);
}

/* Sections */
body.page-status .section-block{
  padding:2.1rem 2.3rem;
  border-bottom:1px solid var(--vb-bd);
}
body.page-status .section-block:last-of-type{border-bottom:none}
body.page-status .eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-size:0.68rem;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--vb-vi2);
  margin-bottom:0.6rem;
}
body.page-status .eyebrow-dot{width:5px;height:5px;background:var(--vb-vi2);border-radius:50%}
body.page-status .stitle{
  font-family:var(--vb-fh);
  font-size:1.95rem;
  font-weight:400;
  letter-spacing:-0.01em;
  line-height:1.15;
  margin-bottom:0.45rem;
}
body.page-status .stitle em{font-style:italic;color:var(--vb-vi2)}
body.page-status .ssub{color:var(--vb-mu);font-size:0.9rem;max-width:560px;line-height:1.65}

/* Promotion type grid */
body.page-status .campaign-type-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--vb-bd);
  border:1px solid var(--vb-bd);
  border-radius:14px;
  overflow:hidden;
  margin-top:1.6rem;
}
body.page-status .ct-card{
  background:var(--vb-s1);
  padding:1.45rem;
  position:relative;
  overflow:hidden;
  transition:background 0.22s;
}
body.page-status .ct-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(124,109,250,0.05),transparent);
  opacity:0;
  transition:opacity 0.22s;
}
body.page-status .ct-card:hover{background:var(--vb-s2)}
body.page-status .ct-card:hover::before{opacity:1}
body.page-status .ct-card::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:0;
  height:2px;
  background:transparent;
  transition:background 0.22s;
}
body.page-status .ct-card:hover::after{background:var(--vb-vi)}
body.page-status .ct-badge{
  position:absolute;
  top:1rem;right:1rem;
  font-size:0.62rem;
  font-weight:800;
  letter-spacing:0.07em;
  text-transform:uppercase;
  padding:0.18rem 0.5rem;
  border-radius:4px;
}
body.page-status .ctb-hot{background:rgba(0,224,122,0.1);color:var(--vb-em)}
body.page-status .ctb-pop{background:rgba(124,109,250,0.1);color:var(--vb-vi2)}
body.page-status .ct-icon{font-size:2rem;margin-bottom:0.85rem;display:block}
body.page-status .ct-title{font-size:1rem;font-weight:800;margin-bottom:0.35rem}
body.page-status .ct-desc{font-size:0.82rem;color:var(--vb-mu);line-height:1.55;margin-bottom:1.1rem}
body.page-status .ct-platforms{display:flex;flex-wrap:wrap;gap:0.3rem;margin-bottom:1.2rem}
body.page-status .ct-platforms .cp-icon{
  width:18px;
  height:18px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 1px 6px rgba(0,0,0,0.35));
}
body.page-status .ct-btn{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  padding:0.55rem 1.2rem;
  background:var(--vb-vi);
  color:#fff;
  border:none;
  border-radius:8px;
  font-family:var(--vb-fb);
  font-size:0.84rem;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
  transition:all 0.2s;
  box-shadow:0 3px 14px rgba(124,109,250,0.25);
  position:relative;
  z-index:1;
}
body.page-status .ct-btn:hover{background:var(--vb-vi2);transform:translateY(-1px);box-shadow:0 5px 20px rgba(124,109,250,0.38)}

/* Progress toolbar */
body.page-status .prog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:1.6rem;
  margin-bottom:1.05rem;
  flex-wrap:wrap;
  gap:0.8rem;
}
body.page-status .filter-row{display:flex;gap:0.45rem;align-items:center;flex-wrap:wrap}
body.page-status .filter-pill{
  display:flex;
  align-items:center;
  gap:0.35rem;
  padding:0.4rem 0.9rem;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--vb-bd2);
  border-radius:999px;
  font-size:0.78rem;
  font-weight:700;
  color:var(--vb-mu);
  cursor:pointer;
  transition:all 0.18s;
  user-select:none;
}
body.page-status .filter-pill:hover{border-color:var(--vb-bd3);color:var(--vb-wh)}
body.page-status .filter-pill.on{background:rgba(124,109,250,0.1);border-color:var(--vb-vi);color:var(--vb-vi2)}
body.page-status .sort-select{
  padding:0.4rem 0.9rem;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--vb-bd2);
  border-radius:8px;
  color:var(--vb-mu);
  font-family:var(--vb-fb);
  font-size:0.78rem;
  outline:none;
  cursor:pointer;
}
body.page-status .sort-select:focus{border-color:var(--vb-vi)}

/* Campaign table */
body.page-status #userCampaigns.campaign-table{border:1px solid var(--vb-bd);border-radius:13px;overflow:hidden}
body.page-status #userCampaigns .ct-head{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr 90px;
  padding:0.75rem 1.05rem;
  background:rgba(255,255,255,0.02);
  border-bottom:1px solid var(--vb-bd);
  font-size:0.7rem;
  font-weight:800;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--vb-mu2);
}
body.page-status #userCampaigns .ct-row{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr 1fr 90px;
  padding:0.95rem 1.05rem;
  border-bottom:1px solid var(--vb-bd);
  align-items:center;
  transition:background 0.18s;
}
body.page-status #userCampaigns .ct-row:last-child{border-bottom:none}
body.page-status #userCampaigns .ct-row:hover{background:rgba(255,255,255,0.025)}
body.page-status #userCampaigns .cr-name{display:flex;align-items:center;gap:0.7rem}
body.page-status #userCampaigns .cr-plat-icon{font-size:1.45rem;flex-shrink:0}
body.page-status #userCampaigns .cr-title{font-size:0.9rem;font-weight:800;margin-bottom:0.1rem}
body.page-status #userCampaigns .cr-meta{font-size:0.72rem;color:var(--vb-mu)}
body.page-status #userCampaigns .cr-stat{font-size:0.9rem;font-weight:800}
body.page-status #userCampaigns .cr-stat-sub{font-size:0.7rem;color:var(--vb-mu);margin-top:0.08rem}
body.page-status #userCampaigns .status-pill{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
  padding:0.22rem 0.6rem;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:900;
  white-space:nowrap;
}
body.page-status #userCampaigns .sp-live{background:rgba(0,224,122,0.1);color:var(--vb-em);border:1px solid rgba(0,224,122,0.2)}
body.page-status #userCampaigns .sp-paused{background:rgba(255,176,32,0.1);color:var(--vb-am);border:1px solid rgba(255,176,32,0.2)}
body.page-status #userCampaigns .sp-review{background:rgba(124,109,250,0.1);color:var(--vb-vi2);border:1px solid rgba(124,109,250,0.2)}
body.page-status #userCampaigns .sp-ended{background:rgba(255,255,255,0.05);color:var(--vb-mu);border:1px solid var(--vb-bd2)}
body.page-status #userCampaigns .sp-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
body.page-status #userCampaigns .spd-live{background:var(--vb-em);box-shadow:0 0 5px var(--vb-em);animation:vb-blink 1.8s ease-in-out infinite}
body.page-status #userCampaigns .spd-paused{background:var(--vb-am)}
body.page-status #userCampaigns .spd-review{background:var(--vb-vi2)}
body.page-status #userCampaigns .spd-ended{background:var(--vb-mu2)}
@keyframes vb-blink{0%,100%{opacity:1}50%{opacity:0.35}}
body.page-status #userCampaigns .mini-prog{height:4px;background:rgba(255,255,255,0.07);border-radius:2px;overflow:hidden;margin-top:0.3rem;width:86px}
body.page-status #userCampaigns .mp-fill{height:100%;border-radius:2px;transition:width 0.5s}
body.page-status #userCampaigns .row-action{display:flex;gap:0.4rem;justify-content:flex-start}
body.page-status #userCampaigns .ra-btn{
  width:28px;height:28px;
  border-radius:6px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--vb-bd);
  color:var(--vb-mu);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.8rem;
  cursor:pointer;
  transition:all 0.16s;
  text-decoration:none;
}
body.page-status #userCampaigns .ra-btn:hover{background:rgba(124,109,250,0.1);border-color:var(--vb-vi);color:var(--vb-vi2)}

/* Tools grid (style existing <details>) */
body.page-status .tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.6rem}
body.page-status details.tool-card{
  background:var(--vb-s1);
  border:1px solid var(--vb-bd);
  border-radius:13px;
  overflow:hidden;
  transition:border-color 0.22s,transform 0.22s;
}
body.page-status details.tool-card:hover{border-color:var(--vb-bd2);transform:translateY(-2px)}
body.page-status details.tool-card > summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.1rem 1.15rem;
  cursor:pointer;
  user-select:none;
}
body.page-status details.tool-card > summary::-webkit-details-marker{display:none}
body.page-status details.tool-card .tool-left{display:flex;align-items:center;gap:0.7rem}
body.page-status details.tool-card .tool-icon{
  width:34px;height:34px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  flex-shrink:0;
  background:rgba(124,109,250,0.1);
  border:1px solid rgba(124,109,250,0.2);
}
body.page-status details.tool-card .tool-title{font-size:0.9rem;font-weight:900;margin-bottom:0.1rem}
body.page-status details.tool-card .tool-sub{font-size:0.75rem;color:var(--vb-mu);line-height:1.4}
body.page-status details.tool-card .tool-toggle{
  width:26px;height:26px;
  border-radius:50%;
  background:rgba(255,255,255,0.05);
  border:1px solid var(--vb-bd2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:0.85rem;
  color:var(--vb-mu);
  transition:all 0.2s;
  flex-shrink:0;
}
body.page-status details.tool-card[open] .tool-toggle{
  background:rgba(124,109,250,0.12);
  border-color:var(--vb-vi);
  color:var(--vb-vi2);
  transform:rotate(45deg);
}
body.page-status details.tool-card .tool-body{padding:0 1.15rem 1.15rem;border-top:1px solid var(--vb-bd)}
body.page-status details.tool-card .tool-body .tool-body-inner{padding-top:1rem;font-size:0.85rem;color:var(--vb-mu);line-height:1.65}

/* Make form controls inside tool cards match theme */
body.page-status details.tool-card input,
body.page-status details.tool-card select,
body.page-status details.tool-card textarea{
  background:rgba(255,255,255,0.04);
  border:1px solid var(--vb-bd2);
  border-radius:8px;
  color:var(--vb-wh);
}

/* Responsive */
@media(max-width:768px){
  body.page-status .app-sidebar{display:none}
  body.page-status .app-main{margin-left:0}
  body.page-status .section-block{padding:1.5rem 1.1rem}
  body.page-status .campaign-type-grid{grid-template-columns:1fr}
  body.page-status .tools-grid{grid-template-columns:1fr}
  body.page-status #userCampaigns .ct-head,
  body.page-status #userCampaigns .ct-row{grid-template-columns:2fr 1fr 1fr 1fr}
  body.page-status #userCampaigns .hide-sm{display:none}
}