:root{
  --w: 220px;
  --bg: rgba(18,18,18,.62);
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 45px rgba(0,0,0,.40);

  /* ✅ safe area gap (iphone notch) */
  --safeX: env(safe-area-inset-left, 0px);
  --safeY: env(safe-area-inset-top, 0px);
}
*{box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
body{margin:0;background:#0f0f0f}

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

/* fallback */
.hidden{display:none!important}
.frameFallback{
  position:fixed; inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#0f0f0f;
  z-index:999998;
}
.fallbackCard{max-width:420px;color:#fff;padding:18px;border-radius:16px;background:#1c1c1c}
.fallbackTitle{font-weight:800;margin-bottom:12px}

/* ✅ popup root (mobile drag) */
.popup-root{
  position:fixed;
  left: calc(12px + var(--safeX));
  top:  calc(12px + var(--safeY));
  z-index:999999;

  /* ✅ mobile drag fix */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* popup card */
.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;
}

/* ✅ drag handle must block scrolling */
.topbar{
  display:flex;align-items:center;gap:8px;
  padding:6px 6px 5px;
  border-bottom:1px solid rgba(255,255,255,.06);

  cursor:grab;

  /* ✅ THIS is key */
  touch-action: none;
  -webkit-user-select:none;
  user-select:none;
}
.topbar:active{cursor:grabbing}

.titleTiny{
  flex:1;
  font-size:11px;font-weight:900;letter-spacing:.4px;
  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,.closeBtn{
  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:900;
  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}
.closeBtn{width:26px;padding:0;font-size:14px;line-height:18px}

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

/* inputs/buttons compact */
.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:900;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}

.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:.3px}

/* colorful 3D */
.vPeriod{font-size:13px;color:#6ee7ff;text-shadow:0 0 14px rgba(110,231,255,.35)}
.vTime{font-size:13px;color:#ffd84a;text-shadow:0 0 14px rgba(255,216,74,.35)}
.vSignal{font-size:17px;letter-spacing:.8px;text-transform:uppercase}

/* Big/Small style */
.sigBig{color:#7CFF6B;text-shadow:0 0 16px rgba(124,255,107,.40)}
.sigSmall{color:#ff7ad9;text-shadow:0 0 16px rgba(255,122,217,.40)}

/* launcher */
.launcher{
  position:fixed;
  left: calc(12px + var(--safeX));
  top:  calc(12px + var(--safeY));
  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:900;
  cursor:pointer;
  backdrop-filter: blur(10px);

  /* ✅ prevents tap delay / scroll conflict */
  touch-action: manipulation;
}

@media (max-width: 420px){
  :root{ --w: 205px; } /* ✅ আরও কমপ্যাক্ট */
  .popup-root{
    left: calc(10px + var(--safeX));
    top:  calc(10px + var(--safeY));
  }
  .launcher{
    left: calc(10px + var(--safeX));
    top:  calc(10px + var(--safeY));
  }

  .view{padding:7px 7px 9px}
  .grid{padding:8px}
  .vSignal{font-size:16px}
}