/* ============================================================
   demo.css - showcase chrome ONLY (top strip, tab bar, x-ray
   toggle, slot labels, toast). No mirrored-page styles and no
   sponsor-unit styles live here.
   ============================================================ */

.demo-strip{
  background:#384050;color:#fff;font:600 11px/1.4 "DM Sans",system-ui,sans-serif;
  letter-spacing:.4px;text-align:center;padding:7px 14px;
}
.demo-strip strong{color:#D8B868;font-weight:700;}

.demo-tabbar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:99990;
  display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:center;
  background:rgba(42,49,64,.96);border:1px solid rgba(216,184,104,.45);
  border-radius:999px;padding:5px 8px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  max-width:calc(100vw - 16px);
  font-family:"DM Sans",system-ui,sans-serif;
}
.demo-tabbar a{
  color:#e7eaf0;text-decoration:none;font-size:11.5px;font-weight:600;
  letter-spacing:.3px;padding:6px 9px;border-radius:999px;white-space:nowrap;
}
.demo-tabbar a:hover{background:rgba(255,255,255,.12);color:#fff;}
.demo-tabbar a.demo-tab-active{background:#D8B868;color:#2a3140;}
.demo-xray-btn{
  border:1px solid #D8B868;background:transparent;color:#D8B868;cursor:pointer;
  font:700 11.5px "DM Sans",system-ui,sans-serif;letter-spacing:.3px;
  border-radius:999px;padding:6px 11px;margin-left:4px;white-space:nowrap;
}
.demo-xray-btn:hover{background:rgba(216,184,104,.15);}
body.demo-xray .demo-xray-btn{background:#D8B868;color:#2a3140;}
@media (max-width:700px){
  .demo-tabbar{bottom:76px;border-radius:16px;padding:4px 6px;gap:0;}
  .demo-tabbar a{font-size:10.5px;padding:5px 7px;}
  .demo-xray-btn{font-size:10.5px;padding:5px 9px;margin-left:2px;}
}

/* ---- X-ray: outline every injected sponsor unit + slot label ---- */
body.demo-xray [data-slot]{
  outline:2px dashed #D8B868 !important;outline-offset:3px;position:relative;
}
body.demo-xray [data-slot]::before{
  content:attr(data-slot);
  position:absolute;top:-22px;left:0;z-index:9000;
  background:#D8B868;color:#2a3140;
  font:700 10px/1 "DM Sans",system-ui,sans-serif;letter-spacing:.8px;text-transform:uppercase;
  padding:4px 8px;border-radius:4px;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}

/* ---- Toast ---- */
.demo-toast{
  position:fixed;left:50%;transform:translateX(-50%) translateY(8px);bottom:64px;z-index:99999;
  background:#2a3140;color:#fff;border-left:3px solid #D8B868;
  font:600 13px/1.4 "DM Sans",system-ui,sans-serif;
  padding:10px 16px;border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;
  max-width:calc(100vw - 32px);text-align:center;
}
.demo-toast.demo-toast-show{opacity:1;transform:translateX(-50%) translateY(0);}
@media (max-width:700px){
  .demo-toast{bottom:132px;}
}