/* ================================================================
   OpenPush additions on top of the Studio design system.
   Phones, Dynamic Island, in-game inbox, migration wizard, delights.
   ================================================================ */

/* ---------- nav ---------- */
.nav-item.navdis{opacity:.42;cursor:default}
.nav-item.navdis:hover{background:none;color:var(--mut)}
.nav-num{width:16px;height:16px;border-radius:99px;border:1.5px solid var(--line2);display:inline-grid;
  place-items:center;font-family:var(--mono);font-size:8.5px;font-weight:600;color:var(--mut);flex:none}
.nav-item.on .nav-num{border-color:var(--signal);color:var(--signal)}
.nav-num.done{border-color:var(--grove);background:var(--grove);color:#fff}

/* ---------- phone frame ---------- */
.phonewrap{display:flex;flex-direction:column;gap:10px;align-items:center}
.phone{width:288px;background:#101012;border-radius:40px;padding:10px;flex:none;
  box-shadow:0 2px 4px rgba(22,21,17,.12),0 22px 48px rgba(22,21,17,.22)}
.screen{background:linear-gradient(180deg,#3b3358,#171522);border-radius:32px;min-height:512px;
  padding:14px 12px;position:relative;overflow:hidden;color:#fff;font-family:var(--sans)}
.island{width:110px;height:30px;background:#000;border-radius:20px;margin:2px auto 10px;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;padding:0 9px;transition:.22s cubic-bezier(.3,1.4,.5,1)}
.island.exp{width:252px;height:86px;border-radius:26px;padding:12px 14px;align-items:flex-start}
.island .mini{font-size:9px}
.island .expbody{display:none;width:100%}
.island.exp .mini{display:none}
.island.exp .expbody{display:block}
.clock{font-family:var(--serif);font-weight:600;font-size:44px;text-align:center;margin:24px 0 2px}
.pdate{text-align:center;font-size:13px;opacity:.85;margin-bottom:16px}
.notif{background:rgba(250,246,239,.94);color:var(--ink);border-radius:16px;padding:11px 13px;margin:8px 2px;
  animation:notifin .5s cubic-bezier(.3,1.3,.5,1)}
@keyframes notifin{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.notif .app{display:flex;gap:7px;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mut);margin-bottom:4px}
.appdot{width:15px;height:15px;border-radius:4px;background:var(--signal);display:inline-block;flex:none}
.notif b{font-size:12.5px;display:block}
.notif p{font-size:11.5px;color:var(--mut);line-height:1.45;margin-top:2px}
.notif.quiet{opacity:.72;outline:1.5px dashed rgba(255,255,255,.4);outline-offset:3px}
.la-lock{background:rgba(18,16,26,.86);border:1px solid rgba(255,255,255,.15);border-radius:18px;
  padding:12px 13px;margin:8px 2px;color:#fff}
.la-lock .r1{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.04em;font-weight:600}
.labar{height:7px;border-radius:6px;background:rgba(255,255,255,.16);overflow:hidden;margin-top:9px}
.labar i{display:block;height:100%;background:var(--signal);border-radius:6px;transition:width 1s}
.phnote{font-size:11px;color:var(--faint);text-align:center;max-width:288px;line-height:1.5}

/* ---------- in-game inbox ---------- */
.gamescr{background:linear-gradient(160deg,#14304a,#0d1c2c)}
.ghead{display:flex;justify-content:space-between;align-items:center;margin:4px 2px 12px}
.ghead .t{font-family:var(--serif);font-weight:600;font-size:19px}
.gbadge{background:var(--signal);color:#fff;font-family:var(--mono);font-size:9.5px;font-weight:600;
  border-radius:99px;padding:2px 8px;animation:badgepulse 2s infinite}
@keyframes badgepulse{0%{box-shadow:0 0 0 0 rgba(255,91,46,.5)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
.gitem{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:14px;
  padding:11px 12px;margin-bottom:9px}
.gitem.unread{border-left:3px solid var(--signal)}
.gitem b{font-size:12.5px}
.gitem p{font-size:11px;opacity:.75;margin:3px 0 8px;line-height:1.45}
/* .claimbtn — game-inbox claim button. Renamed from .claim to avoid colliding
   with studio.css's .claim variable-chip (review finding: alias chips got confetti). */
.claimbtn{background:var(--grove);color:#fff;border-radius:99px;padding:6px 14px;font-family:var(--mono);
  font-size:9.5px;font-weight:600;letter-spacing:.08em;transition:.15s}
.claimbtn:hover{background:var(--grove-deep)}
.claimbtn.done{background:rgba(255,255,255,.16)}

/* ---------- wizard / import ---------- */
.wizhead{display:flex;align-items:center;gap:10px;margin:2px 0 16px}
.bigcount{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1}
.importrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line);font-size:12.5px}
.importrow:last-child{border:none}
.importrow .ic{width:26px;height:26px;border-radius:7px;background:var(--card2);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--mut);flex:none}
.importrow .ic svg{width:13px;height:13px}
.importrow b.n{margin-left:auto;font-family:var(--mono);font-size:11.5px}
.importrow .ok{color:var(--grove-deep);font-weight:600}
.dropzone{border:1.5px dashed var(--line2);border-radius:var(--r-lg);padding:16px;text-align:center;
  color:var(--mut);font-size:12px;background:var(--paper);cursor:pointer}
.dropzone:hover{border-color:var(--signal);color:var(--signal)}
.dropzone b{display:block;color:var(--ink);font-size:12.5px;margin-bottom:2px}
.keyfield{display:flex;gap:8px;margin-top:8px}
.keyfield input{flex:1;border:1px solid var(--line2);border-radius:var(--r);padding:9px 11px;
  font-family:var(--mono);font-size:11px;background:var(--paper)}
.keyfield input:focus{outline:none;border-color:var(--signal)}
.validrow{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--grove-deep);font-weight:500;margin-top:8px}
.validrow svg{width:13px;height:13px}

/* ---------- confetti ---------- */
.cf{position:fixed;width:8px;height:8px;top:-12px;z-index:999;pointer-events:none;
  animation:cfall linear forwards}
@keyframes cfall{to{transform:translateY(105vh) rotate(720deg);opacity:.9}}

/* ---------- demo hub ---------- */
.hub{max-width:980px;margin:0 auto;padding:54px 28px 90px}
.hubgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.flowcard{padding:20px 22px}
.flowcard .who{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.flowcard .who .av{width:32px;height:32px;border-radius:99px;background:var(--signal-soft);
  color:var(--signal-deep);display:grid;place-items:center;font-size:11px;font-weight:700}
.flowcard .who b{display:block;font-size:13.5px}
.flowcard .who span{font-family:var(--mono);font-size:10px;color:var(--mut)}
.flowstep{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:var(--r);
  border:1px solid transparent;font-size:12.5px;font-weight:500}
.flowstep:hover{background:var(--card2);border-color:var(--line)}
.flowstep .nav-num{border-color:var(--line2)}
.flowstep small{color:var(--faint);font-weight:400;margin-left:auto;font-size:10.5px}
@media(max-width:860px){.hubgrid{grid-template-columns:1fr}}

/* ---------- form bits (composer etc.) ---------- */
.lbl{font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);display:block;margin:16px 0 7px}
.inp,select.inp,textarea.inp{width:100%;background:var(--paper);border:1px solid var(--line2);
  border-radius:var(--r);padding:9px 11px;font:inherit;color:var(--ink)}
.inp:focus{outline:none;border-color:var(--signal)}
textarea.inp{resize:vertical;min-height:62px;line-height:1.5}
.tgl{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;
  border-bottom:1px dashed var(--line)}
.tgl:last-child{border:none}
.tgl b{font-size:12.5px;font-weight:600}
.tgl small{color:var(--mut);display:block;font-size:11px;line-height:1.45;margin-top:1px}
.sw{width:34px;height:19px;border-radius:99px;background:var(--line2);position:relative;cursor:pointer;flex:none;transition:.15s}
.sw.on{background:var(--grove)}
.sw::after{content:"";position:absolute;width:15px;height:15px;border-radius:99px;background:#fff;
  top:2px;left:2px;transition:.15s;box-shadow:0 1px 2px rgba(22,21,17,.2)}
.sw.on::after{left:17px}
.varchip{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:9.5px;
  color:var(--signal-deep);border:1px solid #f3cdb9;background:var(--signal-faint);border-radius:4px;
  padding:2px 7px;cursor:pointer}
.varchip:hover{background:var(--signal-soft)}

/* ---------- misc ---------- */
.kvrow{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);padding:5px 0}
.kvrow b{color:var(--ink);font-family:var(--mono);font-size:10.5px}
.arrowlink{color:var(--signal-deep);font-weight:500;font-size:12px;cursor:pointer}
.arrowlink:hover{text-decoration:underline}
.gridcols{display:grid;grid-template-columns:1fr 330px;gap:16px;align-items:start}
body.ai-sidebar .gridcols{grid-template-columns:1fr}
@media(max-width:1000px){.gridcols{grid-template-columns:1fr}}