/* POXY Sky app shell — Stage 3 from poxy-dashboard.html */
html[data-theme="light"] body.poxy-sky-app-active {
  --bg:#F0F0F1;--bg-2:#E7E7E9;--rail:#EAEAEC;--glass:rgba(255,255,255,.66);--glass-strong:rgba(255,255,255,.86);
    --card:rgba(255,255,255,.72);--border:rgba(0,0,0,.09);--text:#1C1C1E;--text-strong:#121214;
    --text-dim:rgba(28,28,30,.60);--text-faint:rgba(28,28,30,.36);
    --shadow:0 1px 0 rgba(255,255,255,.8) inset,0 18px 44px rgba(0,0,0,.08);
    --btn-bg:var(--sky-800);--btn-text:#fff;--link:var(--sky-800);
}
html[data-theme="dark"] body.poxy-sky-app-active {
  --bg:#1C1C1E;--bg-2:#242426;--rail:#202022;--glass:rgba(255,255,255,.06);--glass-strong:rgba(255,255,255,.10);
    --card:rgba(255,255,255,.05);--border:rgba(255,255,255,.12);--text:#F0F0F1;--text-strong:#F7F7F8;
    --text-dim:rgba(240,240,241,.60);--text-faint:rgba(240,240,241,.34);
    --shadow:0 1px 0 rgba(255,255,255,.04) inset,0 18px 44px rgba(0,0,0,.4);
    --btn-bg:var(--sky-500);--btn-text:#fff;--link:var(--sky-300);
}
body.poxy-sky-app-active {
  font-family: var(--font);
  background: var(--bg) !important;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
/* Match DESIGN PX scale — neutralize legacy runtime zoom */
html:has(body.poxy-sky-app-active) {
  zoom: 1 !important;
}
body.poxy-sky-app-active.poxy-landing-active #poxyAppShell:not(.px-sky-app--open) {
  display: none !important;
}
body.poxy-sky-app-active #poxyLanding {
  display: none !important;
}
#poxyAppShell.px-sky-app {
  display: none;
  min-height: 100dvh;
  width: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  --rail-w: 74px;
  --r-lg: 24px;
}
#poxyAppShell.px-sky-app.px-sky-app--open {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow: hidden;
}
#poxyAppShell.px-sky-app--open .main {
  overflow: auto;
  min-height: 0;
}
#poxyAppShell .px-legacy-nav {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}
body.poxy-sky-app-active #bottomNav,
body.poxy-sky-app-active #sidebarPanel,
body.poxy-sky-app-active #sidebarBackdrop {
  display: none !important;
}
#poxyAppShell #userBar {
  display: none !important;
}
body.poxy-sky-app-active #poxyAppShell .dsh-hero-header,
body.poxy-sky-app-active #poxyAppShell .dsh-ambient-fog {
  display: none !important;
}
#poxyAppShell .st-xp-hud {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px 5px 8px;
  font-size: 12px;
}
#poxyAppShell .st-xp-hud-level {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(165deg, var(--sky-400), var(--sky-600));
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  display: grid;
  place-items: center;
}
#poxyAppShell .st-xp-hud-track {
  width: 60px;
  height: 5px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
#poxyAppShell .st-xp-hud-fill {
  height: 100%;
  background: var(--sky-500);
}
#poxyAppShell .st-wallet-capsule,
#poxyAppShell .balance-badge {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  padding: 7px 12px 7px 8px !important;
  box-shadow: none !important;
  max-width: none !important;
}
#poxyAppShell .st-wallet-body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  color: var(--text-strong) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
}
#poxyAppShell .st-wallet-icon {
  display: none !important;
}
#poxyAppShell .st-wallet-plus-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--glass-strong) !important;
  color: var(--text) !important;
  padding: 0 !important;
}
#poxyAppShell .st-nav-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s;
  position: relative;
}
#poxyAppShell .st-nav-icon-btn:hover {
  transform: translateY(-1px);
}
#poxyAppShell .st-nav-icon-btn .material-symbols-outlined {
  font-size: 20px;
}
#poxyAppShell .st-nav-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: #e0563a;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  padding: 0 4px;
  border: 2px solid var(--bg);
}
#poxyAppShell .stage .page,
#poxyAppShell .stage .st-spa-panel,
#poxyAppShell .stage #huntPage {
  background: transparent;
}
#poxyAppShell .poxy-stitch-dash {
  background: transparent !important;
}
body.poxy-sky-app-active.poxy-app-dark,
body.poxy-sky-app-active.poxy-stitch-dash {
  background: var(--bg) !important;
}

  /* RAIL */
  #poxyAppShell .rail{width:var(--rail-w);flex-shrink:0;background:var(--rail);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:8px;position:sticky;top:0;height:100vh;overflow-y:auto}
  #poxyAppShell .rail .logo{width:38px;height:38px;border-radius:11px;background:var(--btn-bg);display:grid;place-items:center;margin-bottom:12px;flex-shrink:0;border:none;padding:0;cursor:pointer;-webkit-appearance:none;appearance:none;font:inherit}
  #poxyAppShell .rail .logo .mk{width:60%;height:60%;background:#fff;-webkit-mask:var(--cardmask) center/contain no-repeat;mask:var(--cardmask) center/contain no-repeat}
  #poxyAppShell .rail-btn{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;cursor:pointer;color:var(--text-dim);
    border:1px solid transparent;transition:all .18s var(--ease);position:relative}
  #poxyAppShell .rail-btn svg{width:23px;height:23px}
  #poxyAppShell .rail-btn:hover{background:var(--glass-strong);color:var(--text)}
  #poxyAppShell .rail-btn.active{background:var(--btn-bg);color:#fff;border-color:var(--btn-bg);box-shadow:0 8px 20px color-mix(in srgb,var(--sky-500) 40%,transparent)}
  #poxyAppShell .rail-btn .tip{position:absolute;left:56px;top:50%;transform:translateY(-50%);background:var(--bg-2);color:var(--text);
    font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;border:1px solid var(--border);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;box-shadow:var(--shadow)}
  #poxyAppShell .rail-btn:hover .tip{opacity:1}
  #poxyAppShell .rail-spacer{flex:1}

  #poxyAppShell .main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
  #poxyAppShell .topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:15px 26px;background:var(--glass);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border-bottom:1px solid var(--border)}
  #poxyAppShell .greet{font-size:15px;font-weight:600;color:var(--text-strong)}#poxyAppShell .greet .at{color:var(--text-dim);font-weight:500}
  #poxyAppShell .top-right{display:flex;align-items:center;gap:10px}
  #poxyAppShell .balance{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:7px 15px 7px 8px;font-weight:700;font-size:15px;color:var(--text-strong)}
  #poxyAppShell .balance .coin{width:21px;height:21px;display:inline-block}#poxyAppShell .balance .coin svg{width:100%;height:100%;display:block}
  #poxyAppShell .top-icon{width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--card);color:var(--text);cursor:pointer;display:grid;place-items:center;transition:transform .15s}
  #poxyAppShell .top-icon svg{width:19px;height:19px}#poxyAppShell .top-icon:hover{transform:translateY(-1px)}
  #poxyAppShell .coin-sm{width:15px;height:15px;display:inline-block;vertical-align:-2px;margin-right:2px}#poxyAppShell .coin-sm svg{width:100%;height:100%}

  #poxyAppShell .stage{flex:1;padding:28px 26px 40px;max-width:1120px;width:100%;margin:0 auto}
  #poxyAppShell .screen{display:none}#poxyAppShell .screen.active{display:block;animation:pxSkyFade .3s var(--ease)}

  #poxyAppShell .page-head{margin-bottom:22px}
  #poxyAppShell .page-head h1{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--text-strong)}
  #poxyAppShell .page-head p{font-size:15px;color:var(--text-dim);margin-top:3px}

  #poxyAppShell .panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);overflow:hidden}
  #poxyAppShell .panel-pad{padding:22px}
  #poxyAppShell .panel-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint);margin-bottom:14px}

  #poxyAppShell .btn{font:600 14px var(--font);cursor:pointer;padding:11px 18px;border-radius:12px;border:1px solid transparent;transition:transform .15s,filter .2s;display:inline-flex;align-items:center;gap:8px}
  #poxyAppShell .btn:active{transform:scale(.97)}#poxyAppShell .btn svg{width:16px;height:16px}
  #poxyAppShell .btn-primary{background:var(--btn-bg);color:var(--btn-text)}#poxyAppShell .btn-primary:hover{filter:brightness(1.08)}
  #poxyAppShell .btn-glass{background:var(--glass-strong);color:var(--text);border-color:var(--border)}#poxyAppShell .btn-glass:hover{transform:translateY(-1px)}

  #poxyAppShell .xp-badge{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:999px;padding:5px 12px 5px 5px}
  #poxyAppShell .xp-lvl{width:28px;height:28px;border-radius:50%;background:linear-gradient(165deg,var(--sky-400),var(--sky-600));color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center;flex-shrink:0}
  #poxyAppShell .xp-bar{width:60px;height:5px;border-radius:3px;background:var(--border);overflow:hidden}
  #poxyAppShell .xp-bar i{display:block;height:100%;background:var(--sky-500);width:64%}
  @keyframes pxSkyFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media(max-width:820px){#poxyAppShell .topbar{padding:12px 16px}}
  @media(max-width:560px){
    #poxyAppShell .rail{position:fixed;bottom:0;top:auto;left:0;width:100%;height:auto;max-height:none;flex-direction:row;border-right:none;border-top:1px solid var(--border);padding:8px;z-index:40;justify-content:space-around;overflow:visible}
    #poxyAppShell.px-sky-app--open .main{margin-left:0!important;width:100%!important;padding-bottom:70px}
    #poxyAppShell .rail .logo,#poxyAppShell .rail-spacer,#poxyAppShell .rail-btn .tip{display:none}
    #poxyAppShell .stage{padding:18px 16px 30px}
  }

  /* ── Shell open: mockup flex row (sticky rail + scrolling main) ── */
  #poxyAppShell.px-sky-app--open {
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 100dvh !important;
  }
  #poxyAppShell.px-sky-app--open .main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    width: auto !important;
  }

  /* ── Rail 1:1 DESIGN PX — sticky column, spacer pins profile/settings ── */
  #poxyAppShell.px-sky-app--open .rail {
    position: sticky !important;
    top: 0 !important;
    align-self: flex-start !important;
    width: var(--rail-w) !important;
    flex-shrink: 0 !important;
    height: 100vh !important;
    height: 100svh !important;
    max-height: 100svh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 35 !important;
  }
  #poxyAppShell .rail-spacer {
    flex: 1 1 auto !important;
    min-height: 8px !important;
    width: 100% !important;
  }
  #poxyAppShell #pxSkyTopbar {
    flex-shrink: 0;
  }
  #poxyAppShell #pxSkyStage {
    flex: 1;
    min-height: 0;
  }
  /* Legacy spin .stage must not break sky stage (mockup .stage metrics) */
  #poxyAppShell #pxSkyStage.stage {
    width: 100% !important;
    max-width: 1120px !important;
    height: auto !important;
    min-height: 0 !important;
    display: block !important;
    margin: 0 auto !important;
    flex: 1 !important;
    overflow: visible !important;
    padding: 28px 26px 40px !important;
    box-sizing: border-box !important;
    align-items: initial !important;
    justify-content: initial !important;
    position: relative !important;
  }
  body.poxy-sky-app-active #pxSkyStage > .st-win-reveal:not(.is-open) {
    display: none !important;
  }

  /* ── Dashboard 1:1 overrides (mockup rail + topbar) ── */
  #poxyAppShell .rail .logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    margin-bottom: 12px !important;
    flex-shrink: 0 !important;
  }
  #poxyAppShell .rail-btn {
    width: 46px !important;
    height: 46px !important;
    border-radius: 14px !important;
    flex-shrink: 0 !important;
  }
  #poxyAppShell .top-icon {
    position: relative;
  }
  #poxyAppShell .top-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    border-radius: 9px;
    background: #E0563A;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    padding: 0 4px;
    border: 2px solid var(--bg);
  }
  #poxyAppShell #balanceBadgeGroup.balance {
    padding: 7px 15px 7px 8px !important;
  }
  body.poxy-sky-app-active #poxyAppShell .btn {
    width: auto !important;
    font-family: var(--font) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    background-image: none !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    border-radius: 12px !important;
  }
  body.poxy-sky-app-active #poxyAppShell .btn-primary {
    background: var(--btn-bg) !important;
    color: var(--btn-text) !important;
    border: 1px solid var(--btn-bg) !important;
    padding: 11px 18px !important;
    font-size: 14px !important;
  }
  body.poxy-sky-app-active #poxyAppShell .btn-primary:hover {
    transform: none !important;
    filter: brightness(1.08) !important;
  }
  body.poxy-sky-app-active #poxyAppShell .btn-glass {
    background: var(--glass-strong) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
  }
  body.poxy-sky-app-active #poxyAppShell .balance.visible {
    display: inline-flex !important;
  }