:root {
    --terracotta: #BF603A;
    --terracotta-dark: #6F3D2D;
    --peach: #F2A06F;
    --cream: #FFF8F3;
    --green: #2E7D57;
    --yellow: #F2DA2E;
    --ink: #33241F;
    --muted: #76655D;
    --line: rgba(111, 61, 45, .14);
    --shadow: 0 22px 65px rgba(73, 38, 27, .18);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--cream);
}

.maintenance-page { overflow: hidden; }
.maintenance-shell {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 40px 24px 220px;
    background:
        radial-gradient(circle at 15% 20%, rgba(242, 218, 46, .15), transparent 26%),
        radial-gradient(circle at 85% 25%, rgba(46, 125, 87, .12), transparent 28%),
        linear-gradient(150deg, #fffaf6 0%, #fff0e7 60%, #f9e2d5 100%);
}

.maintenance-card {
    position: relative;
    z-index: 3;
    width: min(680px, 94vw);
    text-align: center;
    padding: 34px 42px 38px;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 28px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(14px);
}

.school-logo { width: 104px; height: auto; filter: drop-shadow(0 8px 16px rgba(64,38,28,.12)); }
.school-logo.small { width: 76px; }
.eyebrow { margin-top: 14px; color: var(--terracotta); font-weight: 800; letter-spacing: .16em; font-size: .78rem; }
h1 { margin: 8px 0 12px; font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.04; letter-spacing: -.035em; }
.lead { margin: 0 auto; max-width: 560px; color: var(--muted); font-size: 1.08rem; line-height: 1.7; }
.small-note { color: #8c7c74; font-size: .88rem; line-height: 1.55; margin: 18px auto 0; max-width: 520px; }
.status-pill { display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; padding: 9px 14px; border-radius: 999px; background: rgba(191,96,58,.1); color: var(--terracotta-dark); font-weight: 750; font-size: .9rem; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta); box-shadow: 0 0 0 0 rgba(191,96,58,.45); animation: pulse 1.8s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(191,96,58,0); } 100% { box-shadow: 0 0 0 0 rgba(191,96,58,0); } }

.school-building { position: absolute; z-index: 2; left: 50%; bottom: -12px; width: min(1120px, 110vw); transform: translateX(-50%); pointer-events: none; user-select: none; }
.ambient { position: absolute; border-radius: 50%; filter: blur(3px); opacity: .48; animation: float 7s ease-in-out infinite; }
.ambient-one { width: 160px; height: 160px; left: 7%; top: 8%; border: 24px solid rgba(191,96,58,.13); }
.ambient-two { width: 110px; height: 110px; right: 8%; top: 15%; background: rgba(46,125,87,.10); animation-delay: -2s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(8deg); } }

.internal-page { min-height: 100vh; background: linear-gradient(145deg, #fffaf6, #f7e4da); }
.internal-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 20px; }
.internal-shell.wide { padding-block: 40px; }
.internal-card { width: min(560px, 100%); background: white; border: 1px solid var(--line); border-radius: 24px; padding: 30px; box-shadow: var(--shadow); }
.wide .internal-card { width: min(980px, 100%); }
.internal-card h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.internal-card p { color: var(--muted); line-height: 1.6; }
.access-form { display: grid; gap: 10px; margin-top: 22px; }
.access-form label { font-weight: 750; }
.access-form input { width: 100%; border: 1px solid #dacbc4; border-radius: 12px; padding: 13px 14px; font: inherit; outline: none; }
.access-form input:focus { border-color: var(--terracotta); box-shadow: 0 0 0 4px rgba(191,96,58,.10); }
button, .button-link { border: 0; border-radius: 12px; padding: 12px 16px; font: inherit; font-weight: 800; cursor: pointer; text-decoration: none; text-align: center; }
.access-form button, .button-link { background: var(--terracotta); color: white; }
.button-secondary, .button-link.secondary { background: #f6ece7; color: var(--terracotta-dark); }
.alert { padding: 12px 14px; border-radius: 12px; margin: 14px 0; }
.alert-error, .field-error { color: #9b2f27; background: #fff0ee; }
.field-error { background: transparent; font-size: .85rem; }
.foundation-header { display: flex; gap: 20px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.foundation-header .eyebrow { margin-top: 0; }
.foundation-header h1 { margin-bottom: 5px; }
.foundation-header p { margin: 0; }
.quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.quick-card { display: flex; flex-direction: column; gap: 8px; min-height: 130px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: #fffaf7; text-decoration: none; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.quick-card:not(.static):hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(86,49,35,.09); }
.quick-card span { color: var(--muted); font-size: .9rem; line-height: 1.45; word-break: break-word; }
.health-list { display: grid; gap: 10px; margin: 24px 0; }
.health-row { display: grid; grid-template-columns: 12px 180px 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px; }
.health-dot { width: 9px; height: 9px; border-radius: 50%; }
.health-row.ok .health-dot { background: var(--green); }
.health-row.fail .health-dot { background: #b53b32; }
.health-detail { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.health-status { font-size: .78rem; font-weight: 850; }
.health-row.ok .health-status { color: var(--green); }
.health-row.fail .health-status { color: #b53b32; }
.actions-row { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 760px) {
    .maintenance-shell { padding: 28px 16px 175px; }
    .maintenance-card { padding: 26px 20px 30px; border-radius: 22px; }
    .school-logo { width: 86px; }
    .school-building { width: 155vw; bottom: -4px; }
    .quick-grid { grid-template-columns: 1fr; }
    .foundation-header { align-items: flex-start; }
    .health-row { grid-template-columns: 12px 1fr auto; }
    .health-detail { grid-column: 2 / -1; }
}