:root {
    color-scheme: dark;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #0e1119;
    color: #f3f4fa;
    font-synthesis: none;
    --muted: #aeb6ca;
    --accent: #c8b0ff;
    --line: #30364a;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at top left, #252039 0, transparent 55%); }
button, input { font: inherit; }
a { color: var(--accent); }
h1, h2, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.1; letter-spacing: -.045em; margin-bottom: 1rem; }
h2 { font-size: 1.2rem; letter-spacing: -.02em; }
p { line-height: 1.65; }
.shell { width: min(100% - 2rem, 64rem); margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) 0 1.5rem; }
.eyebrow { color: var(--accent); font-size: .75rem; font-weight: 750; letter-spacing: .17em; text-transform: uppercase; margin-bottom: 1rem; }
.muted, .site-footer { color: var(--muted); }
.panel { border: 1px solid var(--line); border-radius: 1.25rem; padding: clamp(1.25rem, 4vw, 2rem); background: #181d2b; }
.login-panel { max-width: 29rem; margin: clamp(0rem, 7vh, 5rem) auto 0; }
.login-form { display: grid; gap: .65rem; margin-top: 2rem; }
label { font-size: .9rem; font-weight: 650; }
input { width: 100%; min-width: 0; padding: .85rem 1rem; margin-bottom: .65rem; border: 1px solid #59627b; border-radius: .65rem; background: #10141f; color: #fff; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .8rem 1.25rem; border: 1px solid transparent; border-radius: .7rem; background: var(--accent); color: #211235; font-weight: 750; text-decoration: none; cursor: pointer; }
.button:hover { background: #dac9ff; }
.button-secondary { background: transparent; color: #ece4ff; border-color: #68718b; }
.button-secondary:hover { background: #303448; }
:focus-visible { outline: 3px solid #f3d18d; outline-offset: 4px; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.page-header h1 { margin-bottom: .5rem; }
.page-header p:last-child { margin-bottom: 0; }
.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem; min-height: 12rem; }
.stat h2 { color: var(--muted); font-size: .9rem; font-weight: 500; margin-bottom: 0; }
.stat-value { font-size: clamp(2.5rem, 8vw, 4.5rem); line-height: 1; font-weight: 750; letter-spacing: -.06em; margin-bottom: .5rem; }
.stat-caption { color: var(--muted); font-size: .9rem; margin-bottom: 0; }
.accent { color: var(--accent); }
.fresh { color: #8de2b3; }
.recent { color: #dcb0c1; }
.older { color: #ff0000; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.date-value { display: block; margin-top: .75rem; font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.action-panel { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 2rem; }
.action-panel p { margin-bottom: 0; }
.action-panel .button { white-space: nowrap; }
.notice { padding: 1rem 1.25rem; margin-bottom: 1.5rem; border: 1px solid #528269; border-radius: .7rem; background: #162e25; color: #c6f1d8; }
.notice-error { border-color: #9e636c; background: #372028; color: #ffd5dc; }
.history-list { margin: 0; }
.history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; border-top: 1px solid var(--line); padding: 1rem 0; }
.history-row:first-child { border-top: 0; }
.history-row:last-child { padding-bottom: 0; }
.history-row dt { font-weight: 650; }
.history-row dd { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--accent); }
.history-note { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.5; margin-top: .3rem; }
.site-footer { text-align: center; font-size: .8rem; margin-top: 2rem; }

@media (max-width: 38rem) {
    .page-header { align-items: flex-start; flex-direction: column; }
    .stats-grid, .detail-grid { grid-template-columns: 1fr; }
    .stat { min-height: 10rem; }
    .action-panel { align-items: stretch; flex-direction: column; }
    .action-panel .button { width: 100%; white-space: normal; }
}