:root { color-scheme: dark; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html,body,#app { margin:0; height:100%; width:100%; background:#080b15; }
button { font: inherit; cursor:pointer; }
.hidden { display:none !important; }
.setup { min-height:100dvh; overflow-y:auto; padding: max(30px, env(safe-area-inset-top)) 18px max(28px, env(safe-area-inset-bottom)); color:#f8fafc; }
.setup-panel { width:100%; max-width:540px; margin:0 auto; }
.setup-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:#27233c; color:#d3c4ff; font-size:30px; margin-bottom:18px; }
h1 { margin:0 0 8px; font-size:29px; letter-spacing:-0.7px; }
.setup-intro { margin:0 0 20px; color:#b1b6c5; font-size:15px; line-height:1.5; }
.progress { color:#d3c4ff; font-weight:650; font-size:14px; margin:0 0 12px; }
.slots { display:grid; gap:9px; }
.slot { display:flex; align-items:center; gap:10px; background:#151927; border:1px solid #303447; border-radius:13px; padding:12px; min-height:66px; }
.slot-number { flex:none; display:grid; place-items:center; width:33px; height:33px; background:#242b3d; color:#d6dcee; border-radius:10px; font-size:14px; font-weight:700; }
.slot-copy { min-width:0; flex:1; }
.slot-title { display:block; font-size:14px; font-weight:640; }
.slot-state { display:block; color:#a2aabb; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:3px; }
.select-btn { flex:none; background:#34314a; border:1px solid #615779; color:#f7f5ff; font-size:13px; font-weight:640; border-radius:9px; padding:10px 12px; }
.select-btn:disabled { opacity:.45; }
.primary { width:100%; border:none; border-radius:14px; min-height:51px; background:#a28cef; color:#0b0a12; font-weight:750; font-size:16px; margin-top:14px; }
.primary:disabled { background:#343849; color:#8d94a6; cursor:not-allowed; }
.feedback { margin:9px 0 0; min-height:18px; font-size:13px; color:#ffc6c6; }
.help { color:#8f98a9; font-size:12px; line-height:1.5; margin:13px 2px 0; }
.viewer { position:fixed; inset:0; background:#000; touch-action:pan-y; }
.scroller { position:absolute; inset:0; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain; touch-action:pan-y; scrollbar-width:none; }
.scroller::-webkit-scrollbar { display:none; }
.scroller img { display:block; width:100%; height:auto; min-height:100dvh; object-fit:contain; object-position:top; user-select:none; -webkit-user-select:none; -webkit-user-drag:none; }
.hotspots { position:fixed; bottom:0; left:0; right:0; height:calc(68px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); display:flex; z-index:5; }
.hotspots button { flex:1; min-width:0; height:100%; border:0; padding:0; margin:0; background:transparent; opacity:0; }
.settings-hotspot { position:fixed; top:calc(8px + env(safe-area-inset-top)); right:0; width:44px; height:44px; z-index:6; border:0; background:transparent; opacity:0; touch-action:manipulation; }