/* Quantum sync window — laconic public face (10–12) */
.qsync-strip{pointer-events:none;
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:none;align-items:center;justify-content:center;gap:10px;
  padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;
  background:linear-gradient(180deg,rgba(27,29,76,.94),rgba(30,58,95,.88));
  color:#eef3fb;font:500 13px/1.35 "Inter KUBIT","SF Pro Display","Segoe UI",system-ui,sans-serif;
  letter-spacing:.01em;backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transform:translateY(-110%);opacity:0;
  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease;
}
.qsync-strip.is-on{display:flex;transform:translateY(0);opacity:1}
.qsync-strip[data-mode="connected"]{background:linear-gradient(180deg,rgba(22,74,58,.95),rgba(27,29,76,.9))}
.qsync-dot{
  width:8px;height:8px;border-radius:50%;flex:0 0 auto;
  background:#7dd3b0;box-shadow:0 0 0 0 rgba(125,211,176,.55);
  animation:qsyncPulse 1.8s ease-out infinite;
}
.qsync-strip[data-mode="linking"] .qsync-dot{background:#9db4ff;box-shadow:0 0 0 0 rgba(157,180,255,.5)}
.qsync-strip[data-mode="idle"],
.qsync-strip[data-mode="offline"]{display:none}
.qsync-strip strong{font-weight:600;margin-right:6px}
.qsync-strip span{opacity:.92}
@keyframes qsyncPulse{
  0%{box-shadow:0 0 0 0 rgba(125,211,176,.55)}
  70%{box-shadow:0 0 0 10px rgba(125,211,176,0)}
  100%{box-shadow:0 0 0 0 rgba(125,211,176,0)}
}

/* First-page sync veil (language entry) */
.qsync-veil{
  display:none;margin:0 auto 18px;max-width:480px;
  padding:16px 18px 15px;border-radius:16px;
  border:1px solid rgba(38,59,150,.18);
  background:
    radial-gradient(120% 80% at 10% 0%,rgba(125,211,176,.12),transparent 55%),
    linear-gradient(145deg,#f7f9fd 0%,#eef2f8 100%);
  box-shadow:0 10px 28px rgba(17,25,34,.06);
  text-align:left;
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.22,1,.36,1);
}
.qsync-veil.is-on{display:block;opacity:1;transform:translateY(0)}
.qsync-veil .qsync-kicker{
  display:flex;align-items:center;gap:8px;
  font:600 11px/1 "IBM Plex Mono","Cascadia Mono",ui-monospace,monospace;
  letter-spacing:.08em;text-transform:uppercase;color:#263b96;margin:0 0 8px;
}
.qsync-veil h2{
  margin:0 0 6px;font:500 clamp(18px,4.2vw,22px)/1.25 "Inter KUBIT","SF Pro Display",system-ui,sans-serif;
  letter-spacing:-.02em;color:#1b1d4c;
}
.qsync-veil p{margin:0;font:400 14px/1.45 system-ui,sans-serif;color:#5a6878}
.qsync-veil .qsync-meta{
  margin-top:10px;font:500 11px/1.2 "IBM Plex Mono",ui-monospace,monospace;color:#7a8796;
}

/* Toast notify */
.qsync-toast{
  position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,18px);z-index:70;
  max-width:min(420px,calc(100vw - 28px));
  padding:14px 16px;border-radius:14px;
  background:rgba(17,25,34,.94);color:#f4f7fb;
  box-shadow:0 16px 40px rgba(17,25,34,.28);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);
  font:400 13px/1.4 system-ui,sans-serif;
}
.qsync-toast.is-on{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.qsync-toast b{display:block;font-weight:600;margin-bottom:3px;letter-spacing:-.01em}
.qsync-toast button{
  appearance:none;margin-top:8px;border:0;background:transparent;color:#9db4ff;
  font:600 12px/1 system-ui,sans-serif;cursor:pointer;padding:0;
}

body.qsync-active .screen{padding-top:calc(88px + env(safe-area-inset-top,0px))}
body.qsync-active .demo-tag{top:calc(46px + env(safe-area-inset-top,0px))}