* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: #f8fafc; color: #0f172a; font-family: Arial, sans-serif; line-height: 1.6; }
a { color: #2563eb; }
a:focus-visible { outline: 3px solid #60a5fa; outline-offset: 4px; }
.layout { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.sidebar { padding: 28px 20px; background: #0f172a; color: #ffffff; }
.brand { color: #ffffff; font-size: 26px; font-weight: bold; text-decoration: none; }
.brand span { color: #93c5fd; }
.workspace { color: #cbd5e1; margin: 4px 0 32px; }
nav .active { display: block; padding: 10px 14px; background: #2563eb; color: #ffffff; border-radius: 8px; text-decoration: none; }
.menu-note { margin: 24px 0 8px; color: #cbd5e1; font-size: 12px; }
.future-menu { list-style: none; padding: 0; margin: 0; color: #cbd5e1; }
.future-menu li { padding: 8px 14px; }
.back-link { display: inline-block; margin-top: 28px; color: #93c5fd; font-size: 14px; }
main { width: 100%; max-width: 1440px; padding: clamp(20px, 4vw, 48px); }
.eyebrow { color: #2563eb; font-size: 12px; font-weight: bold; letter-spacing: 1px; }
h1 { font-size: 32px; line-height: 1.2; margin: 8px 0; }
h2 { font-size: 20px; margin: 0 0 16px; }
h3 { font-size: 16px; margin: 0 0 16px; }
p { margin: 0 0 12px; }
header > p:last-child, .card > p, footer { color: #475569; }
.notice { margin: 28px 0; padding: 18px 20px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px; color: #1e40af; }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { padding: 24px; border: 1px solid #e2e8f0; border-radius: 12px; background: #ffffff; overflow-wrap: anywhere; }
.card .placeholder { color: #0f172a; font-weight: bold; }
.card p:last-child { margin-bottom: 0; }
.details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
footer { margin-top: 32px; font-size: 13px; }
.skip-link { position: absolute; left: 16px; top: -100px; padding: 12px; background: white; z-index: 1; }
.skip-link:focus { top: 16px; }
.auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.auth-card { max-width: 520px; padding: clamp(24px, 5vw, 40px); background: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; }
.auth-intro, .auth-help { color: #475569; }
.auth-fields { display: grid; gap: 10px; }
.auth-fields label { font-weight: bold; }
.auth-fields input { min-width: 0; width: 100%; padding: 12px; border: 1px solid #94a3b8; border-radius: 8px; color: #0f172a; background: #ffffff; font: inherit; }
.auth-fields input::placeholder { color: #64748b; }
.auth-fields > input { margin-bottom: 10px; }
.auth-fields button { padding: 12px; font: inherit; border-radius: 8px; }
.auth-fields input:focus-visible, .auth-fields button:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.password-field { display: grid; gap: 8px; }
.password-field button { justify-self: start; border: 1px solid #cbd5e1; background: #f8fafc; color: #1d4ed8; cursor: pointer; font-size: 14px; }
.password-field button:hover { background: #eff6ff; }
.login-button:disabled { margin-top: 14px; background: #e2e8f0; color: #475569; border: 1px solid #cbd5e1; cursor: not-allowed; }
.auth-help { margin: 20px 0; font-size: 14px; }
.login-button { margin-top: 14px; border: 1px solid #2563eb; background: #2563eb; color: white; cursor: pointer; }
.login-button:hover:not(:disabled) { background: #1d4ed8; }
.auth-error { color: #991b1b; background: #fef2f2; border-color: #fecaca; }
.session-gate { margin: 48px auto; padding: 24px; max-width: 560px; }
.account-email { color: #cbd5e1; overflow-wrap: anywhere; font-size: 14px; }
.logout-button { padding: 10px 16px; border: 1px solid #64748b; border-radius: 8px; color: white; background: transparent; cursor: pointer; font: inherit; }
.logout-button:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.logout-button:disabled { opacity: 0.6; cursor: wait; }
.logout-error { color: #fecaca; font-size: 14px; margin: 12px 0; }
@media (min-width: 1280px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { padding: 20px; }
  .workspace { margin-bottom: 16px; }
  .future-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 14px; }
  .future-menu li { padding: 6px 0; }
  .back-link { margin-top: 16px; }
  .stats, .details { grid-template-columns: minmax(0, 1fr); }
}