.browser-panel {
  --browser-border: #e1e8e3;
  box-sizing: border-box;
  width: min(1280px, 95vw); max-width: 95vw;
  height: min(960px, 92dvh); max-height: 92dvh;
  margin: auto; padding: 0; overflow: hidden;
  border: 1px solid var(--browser-border); border-radius: 14px;
  background: #fff; color: #243730;
  font: 16px/1.6 "Microsoft YaHei", "PingFang SC", "Segoe UI", sans-serif;
  box-shadow: 0 24px 90px #0b211b35;
}
.browser-panel[open] { display: flex; flex-direction: column; }
.browser-panel::backdrop { background: #162a2473; backdrop-filter: blur(4px); }
.browser-panel * { box-sizing: border-box; }
.browser-panel button, .browser-panel input, .browser-panel select { font: inherit; }
.browser-panel button { cursor: pointer; }
.browser-panel button:disabled { cursor: wait; opacity: .5; }
.browser-header { display: flex; align-items: center; gap: 12px; padding: 20px 24px 0; flex-shrink: 0; }
.browser-header h2 { margin: 0; font-size: 17px; font-weight: 600; }
.browser-connection { margin-left: auto; color: #87918b; font-size: 16px; white-space: nowrap; }
.browser-connection[data-state=connected] { color: #478064; }
.browser-connection[data-state=error] { color: #a17440; }
.browser-panel .browser-close { min-height: 30px; width: 30px; padding: 0; border: 0; background: transparent; color: #8a958f; box-shadow: none; font: 24px/1 sans-serif; }
.browser-current-step { margin: 8px 24px 16px; color: #6c8073; font-size: 16px; flex-shrink: 0; }
.browser-stage { display: flex; flex-direction: column; flex: 1; min-height: 0; margin: 0 24px; border: 1px solid var(--browser-border); border-radius: 9px; overflow: hidden; background: #edf1ee; }
.browser-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 35px; min-height: 35px; padding: 0 10px; border-bottom: 1px solid var(--browser-border); background: #fff; }
.browser-page-switch[hidden] { display: none; }
.browser-panel #browser-pages { min-height: 26px; height: 26px; max-width: 150px; padding: 1px 24px 1px 8px; border: 0; color: #708176; background-color: #f5f8f6; font-size: 16px; }
.browser-panel #browser-fit, .browser-panel #browser-reload { min-height: 26px; height: 26px; padding: 2px 4px; border: 0; background: transparent; color: #6c8073; box-shadow: none; font-size: 16px; }
.browser-viewport { position: relative; flex: 1; min-height: 0; overflow: auto; }
#browser-screen { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; outline: none; }
#browser-screen:focus-visible { outline: 2px solid #80b29b; outline-offset: -2px; }
.browser-viewport.is-zoomed #browser-screen { width: auto; height: auto; max-width: none; object-fit: fill; }
.browser-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; background: #f5f8f5; text-align: center; }
.browser-placeholder[hidden] { display: none; }
.browser-placeholder strong { color: #61766a; font-size: 16px; font-weight: 500; }
.browser-placeholder p { margin: 0; color: #96a198; font-size: 16px; }
.browser-loader { width: 26px; height: 26px; margin-bottom: 5px; border: 2px solid #dce8df; border-top-color: #5e997c; border-radius: 50%; animation: browser-spin 1s linear infinite; }
@keyframes browser-spin { to { transform: rotate(360deg); } }
.browser-status { margin: 10px 24px 0; color: #966c3d; font-size: 16px; flex-shrink: 0; }
.browser-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; flex-shrink: 0; }
.browser-tools { display: flex; align-items: center; gap: 18px; }
.browser-panel .browser-tool { position: relative; margin: 0; padding: 0; border: 0; background: transparent; }
.browser-tool summary { min-height: 0; padding: 0; border: 0; cursor: pointer; color: #7a8a80; font-size: 16px; list-style: none; }
.browser-tool summary::-webkit-details-marker { display: none; }
.browser-tool[open] summary { color: #21775c; }
.browser-tool-content { position: absolute; bottom: calc(100% + 14px); left: 0; z-index: 2; width: 320px; max-width: calc(95vw - 48px); max-height: 45dvh; overflow-y: auto; padding: 16px; border: 1px solid var(--browser-border); border-radius: 10px; background: #fff; box-shadow: 0 8px 30px #173a2226; color: #6c8073; font-size: 16px; }
#browser-verification-help .browser-tool-content { left: -62px; }
.browser-tool-content ul { margin: 0; padding-left: 16px; }
.browser-tool-content li + li { margin-top: 10px; }
.browser-tool-content label { display: block; margin-bottom: 10px; font-size: 16px; }
.browser-input-row { display: flex; gap: 8px; }
.browser-panel #browser-text { flex: 1; min-width: 0; width: 100%; min-height: 36px; padding: 8px 10px; font-size: 16px; border: 1px solid var(--browser-border); }
.browser-input-row button { min-height: 36px; padding: 7px 12px; border: 1px solid var(--browser-border); background: #f3f7f4; color: #527960; box-shadow: none; }
.browser-panel #browser-resume { min-height: 40px; padding: 9px 23px; border: 1px solid #21775c; background: #21775c; color: #fff; font-size: 16px; box-shadow: none; white-space: nowrap; }
@media (max-width: 700px) {
  .browser-panel { width: 96vw; max-width: 96vw; height: 95dvh; max-height: 95dvh; border-radius: 12px; }
  .browser-header { padding: 14px 14px 0; gap: 8px; }
  .browser-header h2 { font-size: 16px; }
  .browser-connection { font-size: 16px; }
  .browser-current-step { margin: 7px 14px 12px; font-size: 16px; }
  .browser-stage { margin: 0 12px; }
  .browser-status { margin: 8px 14px 0; font-size: 16px; }
  .browser-footer { padding: 13px 14px; gap: 10px; }
  .browser-tools { gap: 14px; }
  .browser-tool summary { font-size: 16px; }
  .browser-tool-content { max-width: calc(96vw - 28px); }
  .browser-panel #browser-resume { padding: 9px 18px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .browser-loader { animation: none; } }