.connection-guard {
    font-family: "Open Sans", Arial, sans-serif;
    line-height: 1.6;
    text-align: left;
    backdrop-filter: blur(5px);
}
.connection-guard * { box-sizing: border-box; }
.connection-guard__panel {
    width: 540px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    background: #fff;
    color: #334155;
    border: 1px solid rgba(255,255,255,.6);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0,0,0,.32), 0 4px 16px rgba(0,0,0,.12);
}
.connection-guard__header {
    padding: 28px 28px 24px;
    background: radial-gradient(circle at top right, #fde7b3, transparent 65%), linear-gradient(135deg, #fffcf5, #fff5df);
    border-bottom: 1px solid #f5e5c6;
}
.connection-guard__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 18px;
    border: 1px solid #fff;
    border-radius: 16px;
    background: linear-gradient(145deg, #fff, #ffe6aa);
    color: #9a5707;
    font-size: 25px;
    box-shadow: 0 5px 14px rgba(154,87,7,.15);
}
.connection-guard__icon span {
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 23px;
    height: 23px;
    border: 2px solid #fff5df;
    border-radius: 50%;
    background: #9a5707;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    line-height: 19px;
}
.connection-guard__eyebrow { color: #88500d; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; }
.connection-guard #connection-title { margin: 6px 0 10px; color: #332b1e; font-size: 26px; font-weight: 700; line-height: 1.25; }
.connection-guard #connection-message { margin: 0; color: #655339; font-size: 14px; }
.connection-guard__content { padding: 24px 28px; }
.connection-guard__notice { display: flex; gap: 12px; padding: 14px 16px; background: #f0f6ff; border: 1px solid #dbe8fa; border-radius: 12px; font-size: 13px; }
.connection-guard__notice > i { margin-top: 3px; color: #3167a6; font-size: 18px; }
.connection-guard__notice strong { color: #234974; }
.connection-guard__notice p { margin: 4px 0 0; }
.connection-guard__heading { margin: 22px 0 14px; color: #1e293b; font-size: 14px; font-weight: 700; }
.connection-guard__steps { list-style: none; counter-reset: connection-step; padding: 0; margin: 0; }
.connection-guard__steps li { position: relative; counter-increment: connection-step; padding: 0 0 18px 42px; font-size: 13px; }
.connection-guard__steps li:last-child { padding-bottom: 0; }
.connection-guard__steps li::before { content: counter(connection-step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: #edf4f1; border: 1px solid #d6e6de; color: #276148; text-align: center; line-height: 26px; font-weight: 700; }
.connection-guard__steps strong { color: #263b35; }
.connection-guard__steps p { margin: 3px 0 0; color: #586779; }
.connection-guard__footer { padding: 18px 28px 22px; border-top: 1px solid #e5ebf1; background: #f8fafc; }
.connection-guard__footer > p { margin: 0 0 14px; color: #596779; font-size: 12px; }
.connection-guard__actions { display: flex; justify-content: flex-end; gap: 10px; }
.connection-guard .connection-guard__button { min-height: 42px; padding: 10px 16px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: box-shadow .15s, background .15s; }
.connection-guard .connection-guard__button--secondary { background: #fff; color: #475569; border-color: #cbd5e1; }
.connection-guard .connection-guard__button--secondary:hover { background: #edf2f7; }
.connection-guard .connection-guard__button--primary { background: linear-gradient(135deg, #287653, #19523e); color: #fff; box-shadow: 0 3px 8px rgba(25,82,62,.18); }
.connection-guard .connection-guard__button--primary:hover { background: #174b38; box-shadow: 0 4px 12px rgba(25,82,62,.25); }
.connection-guard .connection-guard__button:focus { outline: 3px solid #588ab9; outline-offset: 3px; }
@media (max-width: 480px) {
    .connection-guard__header, .connection-guard__content, .connection-guard__footer { padding: 20px; }
    .connection-guard #connection-title { font-size: 23px; }
    .connection-guard__actions { flex-direction: column; }
    .connection-guard__button { width: 100%; }
}