* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #fff; color: #102757; }
.brand-page { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 24px; padding: 32px; }
.brand-artwork { display: block; width: auto; max-width: 100%; height: auto; max-height: 58vh; object-fit: contain; }
.info-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: min(980px, 100%); }
.site-footer { width: min(980px, 100%); }
.server-status, .time-status, .countdown-status { padding: 18px 20px; border: 1px solid #d9dde2; color: #102757; font-family: Arial, sans-serif; }
.control-panel { display: flex; min-height: 82px; flex-direction: column; justify-content: center; gap: 10px; padding: 14px 16px; border: 1px solid #d9dde2; color: #102757; font-family: Arial, sans-serif; }
.control-panel .status-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 0; }
.nuclear-power-panel { align-items: center; text-align: center; }
.decommissioning-panel { align-items: center; text-align: center; }
.hospitals-panel { align-items: center; text-align: center; }
.control-toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
.control-toggle .status-detail { margin-top: 4px; }
.toggle-button { display: inline-flex; align-items: center; gap: 7px; border: 0; padding: 0; background: transparent; color: #102757; font: inherit; font-size: .78rem; cursor: pointer; }
.toggle-button span:first-child { width: 28px; height: 16px; position: relative; border-radius: 10px; background: #b8b8b7; }
.toggle-button span:first-child::after { width: 12px; height: 12px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: #fff; content: ''; transition: transform .2s ease; }
.toggle-button[aria-pressed="true"] span:first-child { background: #168b63; }
.toggle-button[aria-pressed="true"] span:first-child::after { transform: translateX(12px); }
.control-panel input[type="range"] { width: 100%; accent-color: #168b63; cursor: pointer; }
.control-panel output { color: #168b63; font-size: .78rem; letter-spacing: 0; }
.contact-link { margin: -8px 0 0; font-family: Arial, sans-serif; font-size: .78rem; text-align: center; }
.contact-link a { color: #102757; letter-spacing: .14em; text-decoration: underline; text-decoration-color: #168b63; text-underline-offset: 4px; }
.contact-link a:focus-visible { outline: 2px solid #168b63; outline-offset: 4px; }
.dark-mode { background: #101827; color: #edf3f4; }
.dark-mode .server-status, .dark-mode .time-status, .dark-mode .countdown-status, .dark-mode .control-panel { border-color: #344457; color: #edf3f4; }
.dark-mode .status-label, .dark-mode .status-detail, .dark-mode .time-status h2 small, .dark-mode .countdown-status h2 small { color: #aab8c0; }
.dark-mode .toggle-button, .dark-mode .contact-link a { color: #edf3f4; }
.server-status { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.status-label { margin: 0 0 8px; color: #168b63; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; }
.dark-mode .status-label { color: #e9749c; }
.server-status h1 { display: flex; align-items: center; gap: 9px; margin: 0; font-size: 1.05rem; font-weight: 600; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: #b8b8b7; }
.status-dot.online { background: #168b63; }
.status-dot.offline { background: #c44848; }
.status-detail { margin: 6px 0 0; color: #595e63; font-size: .78rem; }
.server-status button { border: 1px solid #102757; padding: 10px 14px; background: #102757; color: #fff; cursor: pointer; font: inherit; font-size: .78rem; white-space: nowrap; }
.server-status button:disabled { cursor: wait; opacity: .65; }
.time-status h2, .countdown-status h2 { margin: 0; font-size: 1.55rem; font-weight: 600; }
.time-status h2 small { color: #595e63; font-size: .7rem; font-weight: 400; letter-spacing: .12em; }
.countdown-status h2 small { color: #595e63; font-size: .7rem; font-weight: 400; letter-spacing: .08em; }
@media (max-width: 900px) { .info-panels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .brand-page { padding: 20px; } .info-panels { grid-template-columns: 1fr; } .server-status { align-items: flex-start; flex-direction: column; gap: 16px; } }