:root{
  --shsp-accent:#57f3ff;
  --shsp-ink:#d7f9ff;
  --shsp-bg:#05060a;
  --shsp-border:rgba(87,243,255,.18);
  --shsp-card:rgba(10,13,20,.78);
  --shsp-shadow:0 20px 60px rgba(0,0,0,.65);

  /* Shell sizing */
  --shsp-adminbar: 0px;
  --shsp-shell-pad: 44px; /* top + bottom breathing room */
  --shsp-safe-top: env(safe-area-inset-top, 0px);
  --shsp-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Better box sizing inside shell */
.shsp-desktop, .shsp-desktop *{ box-sizing: border-box; }

html,body{
  background: var(--shsp-bg) !important;
  color: var(--shsp-ink);
}

/* WP admin bar height */
body.admin-bar{ --shsp-adminbar: 32px; }
@media (max-width: 782px){
  body.admin-bar{ --shsp-adminbar: 46px; }
}

/* Keep the page from scrolling (monitor scrolls internally) */
body.shsp-desktop-on{
  overflow:hidden !important;
}

/* Desktop shell wrapper */
.shsp-desktop{
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  display:flex;
  justify-content:center;
  align-items:flex-start;

  padding-top: calc(16px + var(--shsp-adminbar) + var(--shsp-safe-top));
  padding-bottom: calc(16px + var(--shsp-safe-bottom));
  padding-left: 12px;
  padding-right: 12px;
}

/* Background */
.shsp-desktop-bg{
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(87,243,255,.10), transparent 55%),
    radial-gradient(900px 600px at 15% 80%, rgba(0,120,255,.08), transparent 60%),
    linear-gradient(180deg, #04050a, #05060a 50%, #020309);
  z-index:0;
}
.shsp-desktop-bg:before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px;
  opacity:.25;
  mix-blend-mode: overlay;
}

/* Monitor frame */
.shsp-monitor{
  position:relative;
  z-index:1;
  width: 100%;
  max-width: 1100px;

  height: calc(
    100dvh
    - var(--shsp-adminbar)
    - var(--shsp-shell-pad)
    - var(--shsp-safe-top)
    - var(--shsp-safe-bottom)
  );
  height: calc(
    100vh
    - var(--shsp-adminbar)
    - var(--shsp-shell-pad)
    - var(--shsp-safe-top)
    - var(--shsp-safe-bottom)
  );

  margin: 0 auto;
  border-radius: 18px;
  border: 1px solid rgba(87,243,255,.22);
  background: rgba(0,0,0,.35);
  box-shadow: var(--shsp-shadow);
  overflow: hidden;

  display:flex;
  flex-direction:column;

  /* TYPO RESET (prevents theme from exploding fonts) */
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}
.shsp-monitor h1,.shsp-monitor h2,.shsp-monitor h3,.shsp-monitor h4{
  margin: 0 0 10px;
  line-height: 1.2;
  font-weight: 700;
}
.shsp-monitor p{ margin: 0 0 12px; }
.shsp-monitor a{ color: var(--shsp-accent); text-decoration: none; }
.shsp-monitor a:hover{ text-decoration: underline; }

/* Top chrome */
.shsp-monitor-top{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  background: rgba(5,6,10,.92);
  border-bottom: 1px solid rgba(87,243,255,.12);
}
.shsp-led{
  width:10px; height:10px; border-radius:50%;
  background: var(--shsp-accent);
  box-shadow: 0 0 18px rgba(87,243,255,.55);
}
.shsp-top-strip{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.shsp-top-title{
  margin-left:auto;
  letter-spacing:.18em;
  font-size:12px;
  text-transform:uppercase;
  opacity:.9;
}
.shsp-pill{
  border:1px solid rgba(87,243,255,.14);
  background: rgba(0,0,0,.35);
  padding:6px 10px;
  border-radius: 10px;
  font-size:12px;
  opacity:.95;
  white-space: nowrap;
}
.shsp-pill b{ color: var(--shsp-accent); }

/* Dock */
.shsp-monitor-dock{
  display:flex; align-items:center; gap:14px;
  padding: 12px 14px;
  background: rgba(10,13,20,.65);
  border-bottom: 1px solid rgba(87,243,255,.10);
}
.shsp-dock-left{ min-width: 240px; }
.shsp-dock-label{
  font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color: var(--shsp-accent);
}
.shsp-dock-sub{ font-size:12px; opacity:.85; margin-top:3px; }

.shsp-dock-player{ margin-left:auto; width: 420px; max-width: 100%; }
.shsp-dock-player--yt iframe{
  width:100%;
  aspect-ratio: 16/9;
  border-radius: 12px;
  border: 1px solid rgba(87,243,255,.18);
  background:#000;
}
.shsp-dock-player--audio audio{
  width:100%;
  border-radius: 12px;
}

/* ✅ Dock auto-collapse (missing in your current file) */
.shsp-monitor-dock.shsp-dock--collapsed{
  padding: 10px 14px;
}
.shsp-monitor-dock.shsp-dock--collapsed .shsp-dock-player{
  display:none !important;
}
.shsp-monitor-dock.shsp-dock--collapsed .shsp-dock-left{
  min-width: unset;
}

/* Screen */
.shsp-monitor-frame{
  position:relative;
  background: rgba(0,0,0,.25);
  flex:1;
  min-height: 0;

  /* ✅ critical: make content flex-based so scroll NEVER breaks */
  display:flex;
  flex-direction:column;
}

/* ✅ Internal scrolling viewport (robust) */
.shsp-monitor-content{
  position:relative;
  z-index:2;

  padding: 14px 14px 18px;

  flex: 1;            /* ✅ replaces fragile height:100% */
  min-height: 0;      /* ✅ required for overflow scroll in flex parents */
  overflow:auto;

  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-color: rgba(87,243,255,.35) rgba(0,0,0,.18); /* Firefox */
  scrollbar-width: thin;
}

/* Nice scroll bar (Webkit) */
.shsp-monitor-content::-webkit-scrollbar{ width: 10px; }
.shsp-monitor-content::-webkit-scrollbar-thumb{
  background: rgba(87,243,255,.18);
  border-radius: 10px;
  border: 2px solid rgba(0,0,0,.35);
}
.shsp-monitor-content::-webkit-scrollbar-track{ background: rgba(0,0,0,.18); }

/* Screen overlays */
.shsp-monitor-scan,
.shsp-monitor-noise,
.shsp-monitor-vignette{
  position:absolute; inset:0; pointer-events:none;
}
.shsp-monitor-scan{
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.035),
    rgba(255,255,255,.035) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 6px
  );
  opacity:.20;
  mix-blend-mode: overlay;
}
.shsp-monitor-noise{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  opacity:.08;
  mix-blend-mode: soft-light;
}
.shsp-monitor-vignette{
  background: radial-gradient(ellipse at center,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.40) 70%,
    rgba(0,0,0,.72) 100%);
}

/* Bottom chrome */
.shsp-monitor-bottom{
  display:flex; gap:12px; align-items:center;
  padding: 10px 14px;
  background: rgba(5,6,10,.94);
  border-top: 1px solid rgba(87,243,255,.12);
}
.shsp-bottom-left, .shsp-bottom-right{
  display:flex; gap:10px; flex-wrap:wrap;
}
.shsp-bottom-right{ margin-left:auto; }
.shsp-mini{
  font-size:12px;
  opacity:.85;
  border:1px solid rgba(87,243,255,.10);
  background: rgba(0,0,0,.30);
  padding:6px 10px;
  border-radius: 10px;
}

/* IMPORTANT: remove WordPress chrome entirely */
body.shsp-desktop-on .site-header,
body.shsp-desktop-on .site-footer,
body.shsp-desktop-on .main-navigation,
body.shsp-desktop-on .inside-header,
body.shsp-desktop-on .inside-site-info{
  display:none !important;
}
body.shsp-desktop-on .site,
body.shsp-desktop-on #page,
body.shsp-desktop-on .site-content{
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.shsp-desktop-on .inside-article{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Loading state for SPA swaps */
html.shsp-loading .shsp-monitor{ filter: saturate(.95); }
html.shsp-loading .shsp-monitor-content{ opacity:.65; }

/* Mobile layout */
@media (max-width: 900px){
  .shsp-dock-left{ min-width: 160px; }
  .shsp-dock-player{ width: 100%; }
  .shsp-monitor-dock{ flex-direction:column; align-items:stretch; }
  .shsp-dock-player{ margin-left:0; }
  .shsp-monitor-content{ padding: 12px 12px 16px; }
}