:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; background: #05070b; color: #eef3fb; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #05070b; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; touch-action: none; }
#stage canvas { outline: none; }
.panel {
  position: fixed; z-index: 10; left: 50%; top: 50%; width: min(420px, calc(100% - 28px));
  transform: translate(-50%, -50%); padding: 24px; border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px; background: rgba(16,23,36,.94); box-shadow: 0 30px 100px rgba(0,0,0,.55);
  backdrop-filter: blur(18px);
}
.panel::before { content: ''; position: absolute; inset: -120px -80px auto; height: 220px; background: radial-gradient(circle, rgba(31,193,164,.18), transparent 68%); pointer-events: none; }
h1 { margin: 0 0 10px; font-size: 34px; letter-spacing: -.04em; }
.eyebrow { margin: 0 0 5px; color: #58d9c2; font-size: 11px; font-weight: 850; letter-spacing: .18em; }
#stateText { min-height: 24px; margin-bottom: 20px; color: #aab6ca; }
label { display: block; margin: 11px 0 7px; color: #9ca9bd; font-size: 12px; font-weight: 750; }
input { width: 100%; height: 46px; padding: 0 13px; border: 1px solid #334057; border-radius: 12px; background: #0b111d; color: white; font: inherit; outline: none; }
input:focus { border-color: #46cdb6; box-shadow: 0 0 0 3px rgba(70,205,182,.12); }
button { border: 0; border-radius: 12px; background: #243149; color: white; font: inherit; font-weight: 780; }
.panel button { width: 100%; height: 48px; margin-top: 18px; background: linear-gradient(135deg, #24b39a, #157f77); }
button:disabled { opacity: .45; }
.tip { margin: 13px 0 0; color: #68758a; font-size: 11px; text-align: center; }
#toolbar { position: fixed; z-index: 20; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 6px; transform: translateX(-50%); padding: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 15px; background: rgba(10,15,24,.84); backdrop-filter: blur(14px); }
#toolbar button { min-width: 52px; height: 42px; padding: 0 11px; font-size: 12px; }
#mobileKeyboard { position: fixed; left: 50%; bottom: -10px; width: 2px; height: 2px; opacity: .01; z-index: -1; }
#toast { position: fixed; z-index: 30; left: 50%; top: max(15px, env(safe-area-inset-top)); transform: translateX(-50%); width: max-content; max-width: calc(100% - 28px); padding: 10px 14px; border-radius: 999px; background: rgba(24,34,51,.94); color: #dfe8f6; font-size: 12px; box-shadow: 0 8px 35px rgba(0,0,0,.4); }
.hidden { display: none !important; }