/* 在线调试页样式 */
html:has(.af-pg-body) { height: 100%; }
.af-pg-body { height: 100%; overflow: hidden; display: flex; flex-direction: column; }
.af-pg-body .af-header { flex-shrink: 0; }
.pg { flex: 1; min-height: 0; display: flex; flex-direction: column; background: #0b1020; }

.pg-toolbar { display: flex; gap: 10px; align-items: center; padding: 10px 14px; background: #fff; border-bottom: 1px solid var(--af-line); flex-wrap: wrap; position: relative; z-index: 20; }
.pg-search { position: relative; flex: 1 1 280px; max-width: 460px; display: flex; align-items: center; }
.pg-search > .af-ico { position: absolute; left: 12px; color: var(--af-muted); pointer-events: none; }
.pg-search input { width: 100%; height: 34px; padding: 0 12px 0 34px; border: 1px solid var(--af-line); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--af-bg-soft); }
.pg-search input:focus { outline: 0; border-color: var(--af-primary); background: #fff; box-shadow: 0 0 0 3px rgba(91, 71, 255, .14); }
.pg-results { position: absolute; top: 40px; left: 0; right: 0; max-height: 360px; overflow-y: auto; background: #fff; border: 1px solid var(--af-line); border-radius: 12px; box-shadow: var(--af-shadow-lg); padding: 6px; margin: 0; list-style: none; z-index: 30; }
.pg-results li { padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
.pg-results li:hover, .pg-results li[aria-selected="true"] { background: #eef0ff; color: var(--af-primary-dark); }
.pg-results li small { color: var(--af-muted); font-family: var(--af-mono); font-size: 11.5px; flex-shrink: 0; }
.pg-results .pg-empty { cursor: default; color: var(--af-muted); }
.pg-results .pg-empty:hover { background: none; color: var(--af-muted); }
.pg-field { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--af-muted); }
.pg-field input { width: 130px; height: 34px; padding: 0 10px; border: 1px solid var(--af-line); border-radius: 8px; font-family: var(--af-mono); font-size: 13px; }
.pg-select { height: 34px; padding: 0 8px; border: 1px solid var(--af-line); border-radius: 8px; background: #fff; font-size: 13.5px; font-family: inherit; color: var(--af-ink); }
.pg-switch { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--af-text); cursor: pointer; user-select: none; }

.pg-mtabs { display: none; background: #fff; border-bottom: 1px solid var(--af-line); }
.pg-mtabs button { flex: 1; height: 42px; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--af-muted); border-bottom: 2px solid transparent; font-family: inherit; }
.pg-mtabs button[aria-selected="true"] { color: var(--af-primary); border-color: var(--af-primary); }

.pg-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); }
.pg-left { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-right: 1px solid #1e2742; }
.pg-right { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: radial-gradient(600px 400px at 50% 0, #1a2347, #0b1020); }

/* 编辑器：textarea 叠加在高亮层之上 */
.pg-editor { position: relative; flex: 1; min-height: 120px; overflow: hidden; background: #0b1020; font-family: var(--af-mono); font-size: 13.5px; line-height: 21px; --gw: 48px; }
.pg-gutter { position: absolute; top: 0; left: 0; bottom: 0; width: var(--gw); padding: 14px 8px 14px 0; text-align: right; color: #4b587c; background: #0b1020; border-right: 1px solid #1a2240; user-select: none; overflow: hidden; z-index: 3; white-space: pre; }
.pg-gutter div { height: 21px; }
.pg-gutter .is-err { color: #fff; background: #b91c1c; border-radius: 3px; }
.pg-hl, .pg-editor textarea { position: absolute; top: 0; left: var(--gw); right: 0; bottom: 0; margin: 0; padding: 14px 16px; border: 0; font: inherit; line-height: inherit; letter-spacing: 0; tab-size: 2; white-space: pre; word-wrap: normal; overflow: auto; }
.pg-hl { color: #d6deeb; background: transparent; pointer-events: none; overflow: hidden; }
.pg-hl code { font: inherit; background: none; color: inherit; padding: 0; display: block; }
.pg-editor textarea { background: transparent; color: transparent; caret-color: #fff; resize: none; outline: 0; z-index: 2; -webkit-text-fill-color: transparent; }
.pg-editor textarea::selection { background: rgba(130, 170, 255, .35); -webkit-text-fill-color: transparent; }

/* 控制台 */
.pg-console { flex-shrink: 0; height: 176px; display: flex; flex-direction: column; background: #080c19; border-top: 1px solid #1e2742; }
.pg-console.is-collapsed { height: 34px; }
.pg-console-bar { display: flex; align-items: center; gap: 12px; padding: 0 12px; height: 34px; flex-shrink: 0; background: #0f1630; color: #8b97b8; font-size: 12.5px; }
.pg-console-bar button { background: none; border: 0; color: #cbd5e1; font-size: 12.5px; cursor: pointer; font-family: inherit; padding: 0; }
.pg-console-bar button:hover { color: #fff; }
.pg-console-bar .pg-hint { flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-badge { background: #dc2626; color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; margin-left: 4px; }
.pg-log { list-style: none; margin: 0; padding: 6px 0; overflow-y: auto; flex: 1; font-family: var(--af-mono); font-size: 12.5px; }
.pg-log li { padding: 3px 14px; color: #cbd5e1; border-bottom: 1px solid #10162b; white-space: pre-wrap; word-break: break-all; }
.pg-log li time { color: #4b587c; margin-right: 8px; }
.pg-log li.is-error { color: #fecaca; background: rgba(220, 38, 38, .12); }
.pg-log li.is-warn { color: #fde68a; background: rgba(245, 158, 11, .08); }
.pg-log li.is-sys { color: #7dd3fc; }
.pg-log:empty::before { content: "暂无输出。运行时的 console.log 与错误会显示在这里。"; display: block; padding: 8px 14px; color: #4b587c; }

/* 手机预览 */
.pg-devbar { display: flex; gap: 10px; justify-content: center; padding: 10px; flex-shrink: 0; }
.pg-stage { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; padding-bottom: 12px; }
.pg-phone { position: relative; width: 390px; height: 844px; border-radius: 44px; background: #fff; border: 10px solid #1c2440; box-shadow: 0 0 0 2px #2a3560, 0 30px 70px rgba(0, 0, 0, .5); transform-origin: top center; flex-shrink: 0; overflow: hidden; }
.pg-phone iframe { width: 100%; height: 100%; border: 0; background: #fff; display: block; }
.pg-notch { position: absolute; top: 0; left: 50%; width: 120px; height: 22px; margin-left: -60px; background: #1c2440; border-radius: 0 0 16px 16px; z-index: 2; pointer-events: none; }

.pg-status { flex-shrink: 0; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 5px 14px; background: #0f1630; color: #6b7ba3; font-size: 12px; border-top: 1px solid #1e2742; }
.pg-status a { color: #8b97b8; }

@media (max-width: 900px) {
  .pg-mtabs { display: flex; }
  .pg-main { grid-template-columns: 1fr; }
  .pg-main[data-view="code"] .pg-right { display: none; }
  .pg-main[data-view="view"] .pg-left { display: none; }
  .pg-field span, .pg-hint { display: none; }
  .pg-toolbar { gap: 8px; padding: 8px 10px; }
  .pg-search { flex-basis: 100%; max-width: none; }
  .pg-console { height: 140px; }
}