:root{
  /* popup size (very small like screenshot) */
  --w: 210px;
  --bg: rgba(18,18,18,.62);
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 45px rgba(0,0,0,.40);
}

*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
html,body{height:100%}
body{margin:0;background:#0f0f0f;overflow:hidden}

/* iframe full screen */
.ref-frame{
  position:fixed; inset:0;
  width:100%; height:100%;
  border:0;
}

.hidden{display:none!important}

/* Popup root (draggable) */
.popup-root{
  position:fixed;
  left:12px;
  top:12px;
  z-index:999999;
  /* IMPORTANT: allow pointer events drag + prevent page scroll on drag */
  touch-action:none;
}

.popup{
  width:var(--w);
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  overflow:hidden;
  user-select:none;
}

/* Topbar */
.topbar{
  display:flex;align-items:center;gap:8px;
  padding:6px 6px 5px;
  border-bottom:1px solid rgba(255,255,255,.06);
  cursor:grab;
}
.topbar:active{cursor:grabbing}

.titleTiny{
  flex:1;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.35px;
  color:#fff;
  text-shadow:
    0 1px 0 rgba(0,0,0,.70),
    0 0 10px rgba(255,216,74,.25),
    0 0 18px rgba(110,231,255,.18);
}

.topBtns{display:flex;gap:5px}
.modeBtn,.minBtn{
  height:20px;
  padding:0 7px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:10px;
  font-weight:1000;
  cursor:pointer;
}
.modeBtn.active{
  border-color: rgba(110,231,255,.45);
  box-shadow: 0 0 12px rgba(110,231,255,.22);
}
.minBtn{width:26px;padding:0;font-size:14px;line-height:18px}

.view{padding:8px 8px 10px}

/* Login */
.input{
  width:100%;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  padding:0 10px;
  background:rgba(255,255,255,.08);
  color:#fff;
  outline:none;
}
.input::placeholder{color:rgba(255,255,255,.55)}

.btn{
  display:block;
  width:100%;
  height:30px;
  border:0;
  border-radius:10px;
  margin-top:7px;
  font-weight:1000;
  cursor:pointer;
  text-decoration:none;
  line-height:30px;
  text-align:center;
  font-size:12px;
}
.btn-primary{background:linear-gradient(180deg,#ffe06a,#f1c40f);color:#111}
.btn-secondary{background:linear-gradient(180deg,#ff7ad9,#ffd84a);color:#111}
.msg{margin-top:6px;color:#ffdfdf;font-size:11px;min-height:14px}

/* Compact status card */
.grid{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.06);
  border-radius:11px;
  padding:9px;
  display:grid;
  grid-template-columns: 1fr auto;
  row-gap:6px;
  align-items:center;
}
.k{font-size:11px;color:rgba(255,255,255,.65)}
.muted{color:rgba(255,255,255,.50)}
.v{text-align:right;font-weight:1000;letter-spacing:.25px}

/* 3D colorful values */
.vPeriod{
  font-size:13px;
  color:#6ee7ff;
  text-shadow:0 0 14px rgba(110,231,255,.38), 0 1px 0 rgba(0,0,0,.6);
}
.vTime{
  font-size:13px;
  color:#ffd84a;
  text-shadow:0 0 14px rgba(255,216,74,.38), 0 1px 0 rgba(0,0,0,.6);
}

/* Big / Small: glowing + “win win” feel */
.vSignal{
  font-size:18px;
  letter-spacing:.8px;
  text-transform:uppercase;
}

.sigBig{
  color:#7CFF6B;
  text-shadow:0 0 18px rgba(124,255,107,.42), 0 2px 0 rgba(0,0,0,.55);
  animation: glowPulse 1.15s ease-in-out infinite;
}

.sigSmall{
  /* Small text slightly bigger as requested */
  font-size:19px;
  color:#ff7ad9;
  text-shadow:0 0 20px rgba(255,122,217,.46), 0 2px 0 rgba(0,0,0,.55);
  animation: winGlow 0.95s ease-in-out infinite;
}

@keyframes glowPulse{
  0%,100%{filter:drop-shadow(0 0 0 rgba(124,255,107,.0)); transform:translateY(0)}
  50%{filter:drop-shadow(0 0 10px rgba(124,255,107,.30)); transform:translateY(-.3px)}
}

@keyframes winGlow{
  0%,100%{filter:drop-shadow(0 0 0 rgba(255,122,217,.0)); transform:scale(1)}
  50%{filter:drop-shadow(0 0 14px rgba(255,122,217,.38)); transform:scale(1.03)}
}

/* Launcher */
.launcher{
  position:fixed;
  left:12px; top:12px;
  z-index:999999;
  width:44px;height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  color:#fff;
  font-size:18px;
  font-weight:1000;
  cursor:pointer;
  backdrop-filter: blur(10px);
}

@media (max-width: 420px){
  :root{ --w: 200px; }
  .popup-root{ left:10px; top:10px; }
  .launcher{ left:10px; top:10px; }
}