#v2board-site-status { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: auto; padding: 40px 24px; color: #17211d; background: #f4f7f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif; }
#v2board-site-status .site-status-shell { display: grid; grid-template-columns: 220px minmax(0, 560px); align-items: center; gap: 64px; width: min(100%, 900px); }
#v2board-site-status.site-status-error .site-status-shell { grid-template-columns: minmax(0, 560px); justify-items: center; text-align: center; }
#v2board-site-status .site-status-visual { position: relative; display: grid; width: 220px; aspect-ratio: 1; place-items: center; overflow: hidden; border: 1px solid rgba(154, 103, 19, .36); border-radius: 50%; }
#v2board-site-status .site-status-visual::before { position: absolute; inset: 17px; border: 1px dashed rgba(154, 103, 19, .55); border-radius: 50%; content: ""; }
#v2board-site-status .site-status-visual::after { position: absolute; inset: 46px; border: 1px solid rgba(154, 103, 19, .28); border-radius: 50%; content: ""; }
#v2board-site-status .site-status-orbit { position: absolute; top: 50%; left: calc(50% + 28px); width: 64px; height: 12px; border-top: 1px solid #9a6713; border-radius: 50%; opacity: .8; transform: translateX(-18px); animation: v2board-site-status-signal 3s ease-in-out infinite; }
#v2board-site-status .site-status-signal { position: absolute; width: 6px; height: 6px; background: #9a6713; border-radius: 50%; animation: v2board-site-status-pulse 2.8s ease-in-out infinite; }
#v2board-site-status .site-status-signal-one { top: 34%; left: 26%; }
#v2board-site-status .site-status-signal-two { right: 26%; bottom: 34%; animation-delay: 1.1s; }
#v2board-site-status .site-status-mark { position: relative; z-index: 1; display: grid; width: 78px; height: 78px; place-items: center; color: #9a6713; background: #f9edcc; border: 1px solid rgba(154, 103, 19, .38); border-radius: 50%; font-size: 34px; line-height: 1; }
#v2board-site-status.site-status-shutdown .site-status-visual { border-color: rgba(185, 78, 84, .36); }
#v2board-site-status.site-status-shutdown .site-status-visual::before { border-color: rgba(185, 78, 84, .55); }
#v2board-site-status.site-status-shutdown .site-status-visual::after { border-color: rgba(185, 78, 84, .28); }
#v2board-site-status.site-status-shutdown .site-status-orbit { left: calc(50% - 42px); width: 24px; border-top-color: #b94e54; opacity: .55; transform: none; animation: none; }
#v2board-site-status.site-status-shutdown .site-status-signal { background: #b94e54; animation-duration: 3.2s; }
#v2board-site-status.site-status-shutdown .site-status-mark { color: #b94e54; background: #fae2e1; border-color: rgba(185, 78, 84, .38); }
#v2board-site-status .site-status-copy { min-width: 0; max-width: 560px; }
#v2board-site-status .site-status-kicker { color: #9a6713; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
#v2board-site-status.site-status-shutdown .site-status-kicker { color: #b94e54; }
#v2board-site-status h1 { margin: 13px 0 0; color: inherit; font-size: 48px; letter-spacing: 0; line-height: 1.1; }
#v2board-site-status .site-status-message { max-width: 500px; margin: 17px 0 0; color: #71807a; font-size: 14px; line-height: 1.9; }
#v2board-site-status .site-status-recovery { max-width: 500px; margin-top: 24px; padding: 15px 16px 16px; border: 1px solid rgba(33, 57, 47, .16); }
#v2board-site-status .site-status-recovery-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; color: #71807a; font-size: 12px; }
#v2board-site-status .site-status-recovery-time { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
#v2board-site-status .site-status-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
#v2board-site-status .site-status-countdown-unit { display: flex; align-items: baseline; justify-content: center; gap: 5px; min-width: 0; padding: 9px 6px; border-left: 1px solid rgba(33, 57, 47, .16); }
#v2board-site-status .site-status-countdown-unit:first-child { border-left: 0; }
#v2board-site-status .site-status-countdown-unit strong { color: #9a6713; font-family: "DM Mono", ui-monospace, monospace; font-size: 22px; font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: 0; }
#v2board-site-status .site-status-countdown-unit small { color: #71807a; font-size: 11px; }
#v2board-site-status .site-status-countdown-pending { color: #71807a; font-size: 13px; }
#v2board-site-status .site-status-recovery-note { margin: 11px 0 0; color: #9a6713; font-size: 12px; }
#v2board-site-status.site-status-shutdown .site-status-countdown-unit strong, #v2board-site-status.site-status-shutdown .site-status-recovery-note { color: #b94e54; }
#v2board-site-status .site-status-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
#v2board-site-status button, #v2board-site-status a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 8px; font: inherit; font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; }
#v2board-site-status button { color: #fff; background: #9a6713; border: 0; }
#v2board-site-status button:disabled { cursor: wait; opacity: .6; }
#v2board-site-status a { color: #4b5a53; background: transparent; border: 1px solid #cbd8d1; }
#v2board-site-status button:focus-visible, #v2board-site-status a:focus-visible { outline: 3px solid #0665d0; outline-offset: 3px; }
@keyframes v2board-site-status-signal { 0%, 100% { opacity: .35; transform: translateX(-18px); } 50% { opacity: 1; transform: translateX(10px); } }
@keyframes v2board-site-status-pulse { 0%, 100% { opacity: .28; transform: scale(.75); } 50% { opacity: 1; transform: scale(1); } }
@media (max-width: 640px) { #v2board-site-status { padding: 32px 20px; } #v2board-site-status .site-status-shell { grid-template-columns: 1fr; gap: 34px; justify-items: center; text-align: center; } #v2board-site-status .site-status-visual { width: 184px; } #v2board-site-status .site-status-mark { width: 68px; height: 68px; } #v2board-site-status .site-status-copy { width: min(100%, 520px); } #v2board-site-status h1 { font-size: 36px; } #v2board-site-status .site-status-message { margin-right: auto; margin-left: auto; } #v2board-site-status .site-status-recovery { margin-right: auto; margin-left: auto; text-align: left; } #v2board-site-status .site-status-actions { justify-content: center; } }
@media (max-width: 400px) { #v2board-site-status .site-status-countdown { gap: 2px; } #v2board-site-status .site-status-countdown-unit { gap: 3px; padding-right: 3px; padding-left: 3px; } #v2board-site-status .site-status-countdown-unit strong { font-size: 18px; } #v2board-site-status .site-status-countdown-unit small { font-size: 10px; } }
@media (prefers-reduced-motion: reduce) { #v2board-site-status .site-status-orbit, #v2board-site-status .site-status-signal { animation: none; } }
@media (prefers-color-scheme: dark) { #v2board-site-status { color: #f0f6f2; background: #111714; } #v2board-site-status .site-status-message, #v2board-site-status .site-status-recovery-head, #v2board-site-status .site-status-countdown-unit small { color: #98aaa0; } #v2board-site-status .site-status-recovery, #v2board-site-status .site-status-countdown-unit { border-color: #405248; } #v2board-site-status a { color: #c1cec7; border-color: #405248; } #v2board-site-status.site-status-maintenance .site-status-mark { color: #eebd6a; background: #4a3917; } #v2board-site-status.site-status-maintenance .site-status-countdown-unit strong, #v2board-site-status.site-status-maintenance .site-status-recovery-note { color: #eebd6a; } #v2board-site-status.site-status-shutdown .site-status-mark { color: #f4a09d; background: #4b292c; } }