* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Georgia', serif; }

/* ── LOGIN PAGE ── */
#login-page {
  min-height: 100vh;
  background: #1a0a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}
#login-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, #3d1a6e22 0%, transparent 60%),
              radial-gradient(ellipse at 80% 80%, #8b2a4a22 0%, transparent 60%);
}
.scary-icons {
  position: absolute;
  top: 20px; right: 24px;
  font-size: 16px;
  opacity: 0.5;
  font-family: 'Courier New', monospace;
  color: #5a3a7a;
  letter-spacing: 2px;
}
.login-box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  border: 1px solid #4a2a6a;
  border-radius: 4px;
  padding: 28px 28px;
  background: #120820ee;
}
.login-header {
  font-family: 'Courier New', monospace;
  color: #e0c8ff;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 28px;
  font-weight: bold;
  border-bottom: 1px solid #4a2a6a;
  padding-bottom: 18px;
}
.login-header span { color: #c084fc; }
.login-prompt {
  font-family: 'Courier New', monospace;
  color: #7a5a9a;
  font-size: 11px;
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.login-question {
  font-family: 'Georgia', serif;
  color: #f0e0ff;
  font-size: 18px;
  margin-bottom: 20px;
  line-height: 1.5;
}
.login-question .banana { color: #fbbf24; font-style: normal; }
.login-question em { color: #ff9eb5; font-style: normal; }
.input-row {
  display: flex;
  align-items: center;
  background: #0d0618;
  border-bottom: 1px solid #4a2a6a;
  margin-bottom: 6px;
}
.input-prefix {
  font-family: 'Courier New', monospace;
  color: #9b6bbf;
  padding: 10px 12px;
  font-size: 14px;
}
.login-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #e0c8ff;
  font-family: 'Courier New', monospace;
  font-size: 16px;
  padding: 12px 4px;
  letter-spacing: 2px;
}
.login-input::placeholder { color: #4a2a6a; letter-spacing: 1px; }
.login-btn {
  width: 100%;
  padding: 11px;
  background: transparent;
  border: 1px solid #4a2a6a;
  border-radius: 3px;
  color: #9b6bbf;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  cursor: pointer;
  letter-spacing: 3px;
  transition: all 0.2s;
  margin-top: 6px;
}
.login-btn:hover { color: #e0c8ff; background: #1e0a38; border-color: #7a4aaa; }
.error-msg {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #ff6b8a;
  margin-top: 12px;
  min-height: 18px;
  letter-spacing: 1px;
}

/* desktop: bigger box */
@media (min-width: 768px) {
  .login-box {
    padding: 56px 72px;
    max-width: 680px;
  }
  .login-question {
    font-size: 26px;
    margin-bottom: 28px;
  }
  .login-header {
    font-size: 16px;
    margin-bottom: 32px;
    padding-bottom: 20px;
  }
  .login-btn {
    padding: 16px;
    font-size: 14px;
  }
  .login-input {
    font-size: 18px;
    padding: 14px 4px;
  }
  .login-prompt {
    font-size: 13px;
    margin-bottom: 12px;
  }
}

/* mobile */
@media (max-width: 767px) {
  #login-page {
    padding: 16px;
    justify-content: center;
  }
  .login-box {
    padding: 24px 20px;
  }
  .login-header {
    font-size: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  .login-prompt {
    font-size: 10px;
    margin-bottom: 6px;
  }
  .login-question {
    font-size: 17px;
    margin-bottom: 16px;
  }
  .error-msg {
    font-size: 11px;
    margin-top: 8px;
  }
}

/* ── LETTER PAGE ── */
/* ── LETTER PAGE ── */
body.letter-body {
  min-height: 100vh;
  background: #2a0a0a;
  background-image:
    radial-gradient(ellipse at 20% 30%, #4a1a1a44 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, #3a1a3a44 0%, transparent 55%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 20px;
}

.letter-box {
  max-width: 860px;
  width: 100%;
  background: #fdf6ee;
  border-radius: 2px;
  padding: 56px 80px 80px;
  position: relative;
  box-shadow:
    0 2px 8px #0006,
    inset 0 0 60px #e8d8c822;
}

/* left red margin line */
.letter-box::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 72px;
  width: 1px;
  background: #d4848455;
}

/* faint ruled lines */
.letter-box::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 31px,
    #c8b89a22 31px,
    #c8b89a22 32px
  );
  border-radius: 2px;
  pointer-events: none;
}

.letter-date {
  font-family: 'Caveat', cursive;
  font-size: 16px;
  color: #8a5a4a;
  margin-bottom: 28px;
  text-align: right;
  position: relative;
  z-index: 1;
}

.letter-content {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: #2a1a1a;
  line-height: 2em;       /* matches ruled line height */
  white-space: pre-wrap;
  position: relative;
  z-index: 1;
}

/* mobile */
@media (max-width: 600px) {
  .letter-box {
    padding: 40px 32px 48px;
  }
  .letter-box::before { left: 44px; }
  .letter-content { font-size: 19px; }
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .login-box { padding: 32px 24px; }
  .login-question { font-size: 18px; }
  .cal-body { flex-direction: column; }
  .cal-grid-wrap.shrunk { flex: unset; }
  .detail-panel.open { flex: unset; border-left: none; border-top: 1px solid #e8c8c8; }
  .detail-inner { min-width: unset; }
  .cal-nav-bar { flex-wrap: wrap; }
}