:root { color-scheme: light; }
body { background: #f5f8fb; color: #192d42; min-height: 100vh; }
.app-shell { max-width: 780px; padding: 28px 16px 70px; }
.app-header { display: flex; align-items: start; justify-content: space-between; margin-bottom: 22px; }
.app-header h1, .login-panel h1 { font-size: clamp(1.55rem, 4vw, 2.15rem); letter-spacing: -.035em; font-weight: 700; margin: 0; }
.eyebrow { color: #46778c; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 700; margin-bottom: 6px; }
.surface { background: #fff; border: 1px solid #e4ebf0; border-radius: 18px; padding: 20px; box-shadow: 0 6px 24px rgba(33, 63, 86, .045); }
.date-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.form-label { font-size: .86rem; font-weight: 600; color: #465f70; margin-bottom: 5px; }
.form-control { min-height: 46px; }
.date-control { cursor: pointer; }
.date-input-wrap { position: relative; }
.date-display {
  position: absolute;
  inset: 1px 3.25rem 1px 1px;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-left: .75rem;
  border-radius: .3rem 0 0 .3rem;
  background: #fff;
  color: #212529;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.date-control:focus + .date-display { background: #fff; }
.date-format-hint { color: #617482; font-size: .76rem; margin: 8px 0 0; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }
.actions .btn { min-height: 46px; font-weight: 600; }
.btn-primary { background-color: #176d89; border-color: #176d89; }
.btn-primary:hover { background-color: #105872; border-color: #105872; }
.btn-outline-primary { color: #176d89; border-color: #176d89; }
.result-block { margin-top: 18px; padding-top: 10px; padding-bottom: 10px; }
.result-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; font-size: .96rem; }
.result-row span:last-child, .result-row strong:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.result-row + .result-row { border-top: 1px solid #f0f3f5; }
.result-final { border-top: 2px solid #d7e4ea !important; padding-top: 17px; margin-top: 6px; font-size: 1.08rem; }
.updated { color: #617482; font-size: .79rem; margin: 12px 4px; text-align: right; }
.loading-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(245,248,251,.88); display: grid; place-items: center; padding: 20px; }
.loading-box { background: white; border-radius: 18px; padding: 34px 24px; text-align: center; box-shadow: 0 15px 45px rgba(25,45,66,.16); width: min(100%, 330px); }
.loading-title { font-size: 1.1rem; font-weight: 700; margin: 15px 0 3px; }
.login-panel, .error-page { max-width: 420px; margin: 9vh auto; }
@media (min-width: 650px) { .app-shell { padding-top: 54px; } .surface { padding: 26px 30px; } .date-grid { grid-template-columns: 1fr 1fr; } .actions { max-width: 360px; margin-left: auto; } }