/* MoonLens Web: desktop phone frame + browser-only tweaks. Loaded after styles.css. */
html,body{height:100%}
#shell{position:relative;height:100%;width:100%;margin:0 auto;overflow:hidden;transform:translateZ(0);background:var(--bg)}
@media (min-width:521px){
  html,body{background:radial-gradient(1200px 700px at 50% -10%,#0E1A3A 0%,#05070F 60%) fixed,#05070F}
  #shell{max-width:480px;height:min(100%,980px);top:max(0px,calc((100% - 980px)/2));border-left:1px solid var(--line);border-right:1px solid var(--line);box-shadow:0 30px 120px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.02)}
}
@media (min-width:521px) and (min-height:1000px){#shell{border-radius:28px;border:1px solid var(--line)}}
.wext{display:flex;align-items:center;justify-content:center;gap:8px}
.wext svg{width:18px;height:18px}
.wexti{width:28px;height:28px;border-radius:8px;flex:none}
.ioshint{position:absolute;left:12px;right:12px;bottom:calc(var(--nav-h) + 12px);z-index:60;display:flex;align-items:center;gap:10px;background:var(--surface2);border:1px solid var(--line2);border-radius:14px;padding:12px 14px;font-size:13px;color:var(--text);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.ioshint span{flex:1;min-width:0}
.ioshint button{flex:none;background:none;border:1px solid var(--line2);color:var(--silver);border-radius:9px;padding:6px 10px;font-size:12px}
@media (hover:hover){.row:hover{background:var(--surface)}button{cursor:pointer}}