.connection-check { width: min(640px, calc(100vw - 28px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #323232; border-radius: 22px; color: #f4f4f4; background: #141414; }
.connection-check::backdrop { background: rgb(0 0 0 / 68%); backdrop-filter: blur(4px); }
.connection-check .modal-card { display: flex; flex-direction: column; width: 100%; max-height: calc(100dvh - 42px); margin: 0; background: transparent; border: 0; overflow: hidden; }
.connection-check .modal-header { flex-shrink: 0; gap: 16px; align-items: flex-start; }
.connection-check .modal-header p { color: #bdbdbd; }
.connection-check h2 { line-height: 1.25; }
.connection-check form { display: flex; flex-direction: column; min-height: 0; }
.connection-check .modal-body { display: block; min-height: 0; padding-top: 4px; overflow-y: auto; }
.connection-fields { display: grid; gap: 16px; }
.connection-fields label { display: grid; gap: 8px; color: #dedede; font-size: 13px; font-weight: 600; }
.connection-fields select { width: 100%; min-width: 0; padding: 12px 14px; border: 1px solid #383838; border-radius: 12px; background: #1d1d1d; color: #f4f4f4; font: inherit; text-overflow: ellipsis; }
.connection-check :focus-visible { outline: 2px solid #f58c45; outline-offset: 3px; }
.connection-note { margin: 16px 0 0; color: #a9a9a9; font-size: 12px; line-height: 1.65; }
.connection-result { margin-top: 22px; padding-top: 20px; border-top: 1px solid #333; }
.connection-result h3 { font-size: 16px; line-height: 1.45; }
.connection-result p { margin-top: 10px; font-size: 13px; line-height: 1.6; color: #c6c6c6; }
.connection-steps { display: grid; gap: 10px; list-style: none; margin: 16px 0; padding: 0; }
.connection-steps li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; line-height: 1.5; }
.connection-steps li::before { content: '✓'; flex-shrink: 0; color: #b8d4c0; }
.connection-steps li[data-level="error"]::before { content: '!'; color: #f5a66c; font-weight: 700; }
.connection-result .connection-action { color: #f0f0f0; }
.connection-result .connection-meta { overflow-wrap: anywhere; color: #aaa; font-size: 12px; }
.connection-result details { margin-top: 18px; }
.connection-result summary { cursor: pointer; color: #c9c9c9; font-size: 12px; padding: 4px 0; }
.connection-report { margin-top: 10px; padding: 12px; white-space: pre-wrap; overflow-wrap: anywhere; background: #0d0d0d; border-radius: 10px; font-size: 11px; line-height: 1.6; color: #bdbdbd; user-select: text; }
.connection-check .modal-actions { flex-shrink: 0; flex-wrap: wrap; gap: 10px; }
.connection-check .modal-actions .button { border-radius: 12px; }
.connection-check [hidden] { display: none !important; }
@media (max-width: 520px) { .connection-check .modal-header, .connection-check .modal-body, .connection-check .modal-actions { padding-left: 18px; padding-right: 18px; } .connection-check h2 { font-size: 21px; } .connection-check .modal-actions .button { flex: 1; } }