:root {
    color-scheme: light;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
    background: #f3f7f5;
    color: #18201d;
}

* { box-sizing: border-box; }
body { margin: 0; }
button, input { font: inherit; }

.auth-page {
    min-height: 100vh;
    background: #f3f7f5;
}

.auth-shell {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 24px;
}

.auth-panel {
    width: min(100%, 390px);
    padding: 30px;
    border: 1px solid #d7dfdc;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 18px 46px rgb(25 57 45 / 12%);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
    font-weight: 600;
}

.auth-brand span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 9px;
    background: #287b5e;
    color: #ffffff;
}

.auth-panel h1 { margin: 0 0 8px; font-size: 1.35rem; }
.auth-description, .auth-hint { color: #64716c; }
.auth-description { margin: 0 0 22px; }
.auth-hint { margin: -4px 0 18px; font-size: .875rem; }

.auth-panel form { display: grid; gap: 9px; }
.auth-panel label { margin-top: 7px; font-weight: 600; }
.auth-panel input {
    width: 100%;
    min-height: 46px;
    border: 1px solid #bdc9c4;
    border-radius: 9px;
    padding: 10px 12px;
    background: #ffffff;
    color: #18201d;
}
.auth-panel input:focus { outline: 3px solid rgb(40 123 94 / 22%); border-color: #287b5e; }

.auth-panel button {
    min-height: 46px;
    margin-top: 12px;
    border: 0;
    border-radius: 9px;
    padding: 10px 16px;
    background: #287b5e;
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
}
.auth-panel button.secondary { background: #e7eeeb; color: #244137; }

.auth-error, .auth-success {
    margin: 14px 0;
    border-radius: 9px;
    padding: 11px 12px;
}
.auth-error { background: #fbe9e9; color: #8c2f2f; }
.auth-success { background: #e3f2eb; color: #205c46; }

@media (max-width: 480px) {
    .auth-shell { padding: 14px; align-items: start; padding-top: max(56px, env(safe-area-inset-top)); }
    .auth-panel { padding: 24px 20px; }
}

.diagnostics-shell { width: min(100%, 920px); margin: 0 auto; padding: 28px 18px; }
.diagnostics-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.diagnostics-header a { color: #245f49; }
.diagnostics-panel { margin-top: 18px; border: 1px solid #d7dfdc; border-radius: 14px; padding: 22px; background: #ffffff; }
.diagnostics-warning { margin: 14px 0; border-radius: 9px; padding: 11px 12px; background: #fff4d7; color: #785b13; }
.diagnostics-list { margin: 18px 0 0; }
.diagnostics-row { display: grid; grid-template-columns: minmax(180px, 34%) 1fr; gap: 18px; padding: 14px 4px; border-top: 1px solid #e2e8e5; }
.diagnostics-row dt { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; }
.diagnostics-row dd { display: grid; gap: 3px; margin: 0; }
.diagnostics-row dd span { color: #64716c; }
.status { flex: 0 0 auto; border-radius: 999px; padding: 3px 7px; font-size: .75rem; }
.status-pass { background: #e3f2eb; color: #205c46; }
.status-warning { background: #fff4d7; color: #785b13; }
.status-fail { background: #fbe9e9; color: #8c2f2f; }

@media (max-width: 620px) {
    .diagnostics-row { grid-template-columns: 1fr; gap: 7px; }
}