/* 公共基础与组件；业务页面只负责布局。 */
* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
@supports selector(::-webkit-scrollbar) {
 * { scrollbar-width: auto; scrollbar-color: auto; }
 ::-webkit-scrollbar { width: 10px; height: 10px; }
 ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
 ::-webkit-scrollbar-thumb { min-height: 32px; border: 3px solid transparent; border-radius: 999px; background: var(--scrollbar-thumb); background-clip: padding-box; }
 ::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover); }
}
@media (forced-colors: active) {
 * { scrollbar-color: auto; }
 ::-webkit-scrollbar-thumb { background-color: CanvasText; }
}
body { margin: 0; color: var(--ink); background: var(--page-background); font: 14px / 1.6 var(--font-ui); }
[hidden] { display: none !important; }
a { color: var(--accent); text-underline-offset: 3px; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; }
button, .button-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 8px 16px; border: 1px solid transparent; border-radius: var(--radius-control); background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; line-height: 22px; text-decoration: none; cursor: pointer; }
button:hover:not(:disabled), .button-link:hover { background: var(--accent-hover); }
button:disabled { opacity: .45; cursor: not-allowed; }
.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.secondary:hover:not(:disabled) { background: var(--surface-subtle); border-color: #aebfc8; }
.text-button { min-height: 32px; padding: 4px 8px; border: 0; background: transparent; color: var(--accent); font-size: 13px; font-weight: 500; white-space: nowrap; }
.text-button:hover:not(:disabled) { background: var(--accent-soft); }
.danger-button { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.danger-button:hover:not(:disabled) { background: #fce7e3; }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
label { display: grid; gap: var(--space-2); color: var(--ink); font-size: 13px; font-weight: 500; }
input:not([type="checkbox"]), select, textarea { width: 100%; min-width: 0; min-height: var(--control-height); padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); color: var(--ink); background: var(--surface); line-height: 22px; }
input::placeholder, textarea::placeholder { color: #81949e; }
input:disabled, select:disabled, textarea:disabled { color: var(--muted); background: var(--surface-subtle); cursor: not-allowed; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
textarea { display: block; resize: vertical; }
input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.check-label { display: flex; align-items: center; gap: var(--space-2); font-weight: 400; cursor: pointer; }
small, .muted, .form-hint, .footer-note { color: var(--muted); }
small, .form-hint, .footer-note { font-size: 12px; line-height: 20px; }
.notice { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-subtle); color: var(--ink); font-size: 13px; font-weight: 400; line-height: 22px; overflow-wrap: anywhere; }
.notice:empty { display: none; }
.error { color: var(--danger); }
.notice.error { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-line); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 5px; background: #eef2f4; color: #576e7b; font-size: 12px; font-weight: 500; line-height: 20px; white-space: nowrap; }
.badge[data-tone="good"] { color: var(--success); background: var(--success-soft); }
.badge[data-tone="warning"] { color: var(--warning); background: var(--warning-soft); }
.badge[data-tone="error"] { color: var(--danger); background: var(--danger-soft); }
.badge[data-tone="active"] { color: var(--info); background: var(--info-soft); }
summary { cursor: pointer; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 三档弹窗：small 连接 / 默认任务 / wide 浏览器画面。 */
.ui-dialog { --dialog-width: 760px; width: min(var(--dialog-width), calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-dialog); background: var(--surface); color: var(--ink); box-shadow: var(--dialog-shadow); }
.ui-dialog[open] { display: flex; flex-direction: column; }
.ui-dialog--small { --dialog-width: 460px; }
.ui-dialog--wide { --dialog-width: 1100px; }
.ui-dialog::backdrop { background: #15313e70; }
html:has(.ui-dialog[open]) { overflow: hidden; }
.ui-dialog .dialog-heading { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; margin: 0; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.ui-dialog .dialog-heading > div { min-width: 0; }
.ui-dialog .dialog-heading h2 { margin: 0; color: var(--ink); font-size: 18px; font-weight: 600; line-height: 26px; overflow-wrap: anywhere; }
.ui-dialog .eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 12px; font-weight: 400; letter-spacing: 0; }
.ui-dialog .dialog-close { flex: 0 0 auto; width: 32px; height: 32px; min-height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 24px; font-weight: 400; line-height: 1; }
.ui-dialog .dialog-close:hover:not(:disabled) { color: var(--ink); background: #edf2f4; }
.ui-dialog .dialog-close[aria-busy="true"] { position: relative; }
.ui-dialog .dialog-close[aria-busy="true"] > span { visibility: hidden; }
.ui-dialog .dialog-close[aria-busy="true"]::after { content: ""; position: absolute; inset: 8px; border: 2px solid var(--line); border-right-color: var(--accent); border-radius: 50%; animation: ui-spin 1s linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ui-dialog .dialog-close[aria-busy="true"]::after { animation: none; } }
.ui-dialog .dialog-body { min-height: 0; padding: 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.ui-dialog .dialog-form { display: flex; flex-direction: column; min-height: 0; margin: 0; }
.ui-dialog .dialog-body > :first-child { margin-top: 0; }
.ui-dialog .dialog-body > :last-child { margin-bottom: 0; }
.ui-dialog p { margin: 12px 0; font-size: 13px; line-height: 22px; overflow-wrap: anywhere; }
.ui-dialog h3 { margin: 24px 0 8px; font-size: 14px; font-weight: 600; line-height: 22px; }
.ui-dialog label { margin: 0; }
.ui-dialog form > label, .ui-dialog .dialog-body > label { margin-top: 16px; }
.ui-dialog form > label:first-child { margin-top: 0; }
.ui-dialog .dialog-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: 12px; margin: 0; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.ui-dialog .dialog-body .dialog-actions { margin-top: 20px; padding: 16px 0 0; }
.dialog-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ui-dialog .login-tools { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ui-dialog .login-tools label { flex: 1 1 200px; }
.ui-dialog small { display: block; margin-top: 12px; }
.ui-dialog pre { max-height: 420px; margin: 12px 0 0; overflow: auto; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-subtle); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px / 1.7 var(--font-code); }
.ui-dialog #login-screen, .ui-dialog #page-screen { display: block; max-width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-control); background: var(--surface-subtle); }
.ui-dialog #page-screen { width: 100%; }
.ui-dialog #login-screen { touch-action: none; user-select: none; }
.ui-dialog #login-screen[data-live="false"] { cursor: wait; }
.ui-dialog #login-screen.dragging { cursor: grabbing; }
.ui-dialog .live-connection { min-height: 22px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ui-dialog .live-connection[data-state="live"] { color: var(--success); }
.ui-dialog .live-connection[data-state="error"] { color: var(--danger); }
.ui-dialog #page-url { color: var(--muted); font: 12px / 1.7 var(--font-code); overflow-wrap: anywhere; }
.ui-dialog #operation-frame { display: block; width: 100%; height: min(70dvh, 760px); min-height: 320px; border: 0; }
.embedded-operation > main, .embedded-operation .dialog-heading { display: none; }
.embedded-operation .ui-dialog { width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
.embedded-operation .ui-dialog .dialog-body { padding: 8px; }
.operation-page > main { max-width: 960px; margin: auto; padding: 40px 24px; }
.operation-page > main h1 { font-size: 26px; font-weight: 600; }
.operation-page #operation-hint { color: var(--muted); font-size: 13px; }
@media (max-width: 600px) {
 .ui-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: var(--radius-panel); }
 .ui-dialog .dialog-heading { min-height: 64px; padding: 14px 16px; }
 .ui-dialog .dialog-body { padding: 16px; }
 .ui-dialog .dialog-actions { padding: 12px 16px; flex-wrap: wrap; }
 .ui-dialog .dialog-actions button { flex: 1 1 auto; }
 .ui-dialog .dialog-body .dialog-actions { padding-top: 16px; }
 .ui-dialog .login-tools label { flex-basis: 100%; }
 .ui-dialog .login-tools button { flex: 1 1 auto; }
 .ui-dialog .dialog-toolbar button { flex: 1 1 auto; }
}