* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07090d; color: #e6ebf5; font: 14px/1.4 "Microsoft JhengHei", "PingFang TC", "Noto Sans TC", system-ui, sans-serif; overflow: hidden; }

#shell { display: flex; height: 100%; gap: 10px; padding: 10px; }
.side { flex: 1 1 0; min-width: 0; background: #11151d; border: 1px solid #252d3d; border-radius: 12px; overflow: hidden; }
.side iframe { width: 100%; height: 100%; border: 0; display: block; background: #11151d; }

#center { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 0; }
#toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
#toolbar button { height: 30px; padding: 0 12px; border: 1px solid #2c3548; border-radius: 8px; background: #171d29; color: #cfd8ea; cursor: pointer; font: inherit; }
#toolbar button:hover { border-color: #4aa3ff; }
#toolbar .tg { display: none; }
body.drawer #toolbar .tg { display: inline-block; }
#phoneWrap { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; }
#phone { background: #000; border: 8px solid #20242e; border-radius: 30px; box-shadow: 0 0 0 2px #3a4152, 0 12px 40px rgba(0, 0, 0, .6); overflow: hidden; position: relative; }
#phone iframe { width: 100%; height: 100%; border: 0; display: block; background: #0f131b; }

/* 窄螢幕：兩側後台改為可切換的抽屜 */
body.drawer #shell { padding: 6px; }
body.drawer #center { flex: 1 1 auto; }
body.drawer .side { position: fixed; top: 6px; bottom: 6px; width: min(94vw, 560px); z-index: 20; display: none; box-shadow: 0 0 40px rgba(0, 0, 0, .8); }
body.drawer #leftPane { left: 6px; }
body.drawer #rightPane { right: 6px; }
body.drawer .side.open { display: block; }
@media (max-width: 520px) {
  #phone { border-width: 0; border-radius: 0; box-shadow: none; }
  #toolbar { display: none; }
  #shell { padding: 0; }
}