@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

* { box-sizing: border-box; }

body {
  margin: 0;
  background: radial-gradient(ellipse 80% 50% at 50% -10%, #241a1e 0%, #0a0809 55%), #0a0809;
  color: #e8e1d6;
  font-family: 'Cormorant Garamond', serif;
}

.undertow-root {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 56px 20px 96px;
}
.undertow-inner { width: 100%; max-width: 620px; }

@media (max-width: 720px) {
  .undertow-root { padding: 40px 16px 72px; }
}
@media (max-width: 420px) {
  .undertow-root { padding: 28px 12px 56px; }
  .title { font-size: 1.6rem; }
  .subtitle { font-size: 0.9rem; }
  .composer { padding: 16px; }
  .entry { padding: 20px 16px 16px 22px; }
  .body-input, .entry-body { font-size: 1.02rem; }
  .title-input { font-size: 1.02rem; }
  .mood-btn { font-size: 0.68rem; padding: 4px 10px 4px 7px; }
  .entry-meta { flex-direction: column; align-items: flex-start; gap: 3px; }
  .seal { width: 24px; height: 24px; top: -8px; left: -8px; }
}

.header { text-align: center; margin-bottom: 40px; position: relative; }
.flame-wrap {
  font-size: 22px;
  margin-bottom: 6px;
  animation: flicker 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { .flame-wrap { animation: none; } }
@keyframes flicker {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  25% { opacity: 0.9; transform: scale(1.04) translateY(-1px); }
  50% { opacity: 0.55; transform: scale(0.97); }
  75% { opacity: 0.85; transform: scale(1.02); }
}
.title {
  font-family: 'Cinzel Decorative', serif;
  font-size: 2.1rem;
  letter-spacing: 0.04em;
  margin: 0;
  text-shadow: 0 0 24px rgba(124, 31, 46, 0.35);
}
.subtitle { font-style: italic; color: #948a86; font-size: 1rem; margin-top: 6px; letter-spacing: 0.02em; }
.divider { display: flex; align-items: center; gap: 10px; margin: 22px auto 0; width: 220px; }
.divider .line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #3a2e30, transparent); }
.divider .dot { width: 5px; height: 5px; border-radius: 50%; background: #7c1f2e; box-shadow: 0 0 8px rgba(124,31,46,0.8); }

.status-note { text-align: center; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; color: #6b4a4a; margin-bottom: 20px; }

.unlock-row { text-align: center; margin: 18px 0 36px; }
.unlock-link {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; letter-spacing: 0.03em;
  color: #4a3a3e; background: none; border: none; cursor: pointer;
}
.unlock-link:hover { color: #8a6a6e; }
.unlock-form { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; }
.unlock-input {
  background: #15111a; border: 1px solid #2a2126; border-radius: 2px; color: #e8e1d6;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; padding: 7px 10px; outline: none; width: 160px;
}
.unlock-input:focus { border-color: #4a3a3e; }
.unlock-go {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; background: none;
  border: 1px solid #7c1f2e; color: #e8b8bd; padding: 7px 12px; border-radius: 2px; cursor: pointer;
}
.unlock-go:hover { background: #7c1f2e; color: #f3e6e8; }
.unlock-error { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: #b3684f; margin-top: 8px; }

.composer { background: #15111a; border: 1px solid #2a2126; border-radius: 4px; padding: 22px; margin-bottom: 44px; }
.mood-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.mood-btn {
  display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid #2f2530;
  border-radius: 999px; padding: 5px 12px 5px 8px; cursor: pointer; font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.03em; color: #948a86; transition: border-color 0.15s, color 0.15s;
}
.mood-btn:hover { color: #e8e1d6; border-color: #4a3a3e; }
.mood-btn.active { color: #e8e1d6; border-color: var(--mood-color); background: color-mix(in srgb, var(--mood-color) 14%, transparent); }
.mood-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mood-color); box-shadow: 0 0 6px var(--mood-color); }

.title-input {
  width: 100%; background: transparent; border: none; border-bottom: 1px solid #2a2126; color: #e8e1d6;
  font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; font-style: italic; padding: 6px 2px 10px;
  margin-bottom: 12px; outline: none;
}
.title-input::placeholder { color: #5c5250; }
.body-input {
  width: 100%; min-height: 120px; background: transparent; border: none; color: #e8e1d6;
  font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; line-height: 1.6; resize: vertical; outline: none;
}
.body-input::placeholder { color: #5c5250; font-style: italic; }
.composer-footer { display: flex; justify-content: flex-end; margin-top: 10px; }
.submit-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: #1c1015; border: 1px solid #7c1f2e; color: #e8b8bd; padding: 9px 18px; border-radius: 2px; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.submit-btn:hover:not(:disabled) { background: #7c1f2e; color: #f3e6e8; }
.submit-btn:disabled { opacity: 0.4; cursor: default; }

.empty-state { text-align: center; color: #6b6660; font-style: italic; padding: 40px 0; font-size: 1.05rem; }

.entry { position: relative; background: #17121a; border: 1px solid #241c22; border-radius: 2px; padding: 24px 24px 20px 30px; margin-bottom: 22px; }
.seal {
  position: absolute; top: -10px; left: -10px; width: 30px; height: 30px;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--seal-color) 85%, white 15%), var(--seal-color) 70%);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 0 4px rgba(0,0,0,0.3);
}
.entry-meta { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.entry-date { font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem; letter-spacing: 0.03em; color: #948a86; }
.entry-mood-label { color: var(--seal-color); }
.entry-title { font-style: italic; font-size: 1.2rem; color: #e8e1d6; margin: 0 0 6px; }
.entry-body { font-size: 1.1rem; line-height: 1.65; color: #d8cfc4; white-space: pre-wrap; }
.entry-footer { display: flex; justify-content: flex-end; margin-top: 10px; }
.release-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; letter-spacing: 0.03em; color: #4a3a3e;
  background: none; border: none; cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s;
}
.entry:hover .release-btn { opacity: 1; }
.release-btn:hover { color: #b3684f; }
@media (hover: none) { .release-btn { opacity: 0.55; padding: 6px 2px; } }

.confirm-bar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 10px; font-family: 'IBM Plex Mono', monospace; font-size: 0.7rem; }
.confirm-text { color: #948a86; }
.confirm-yes { color: #b3684f; background: none; border: none; cursor: pointer; }
.confirm-no { color: #6b6660; background: none; border: none; cursor: pointer; }

.login-card {
  background: #15111a; border: 1px solid #2a2126; border-radius: 4px; padding: 28px;
  max-width: 320px; margin: 0 auto 40px; display: flex; flex-direction: column; gap: 12px;
}
.login-input {
  width: 100%; background: #0f0c11; border: 1px solid #2a2126; border-radius: 2px; color: #e8e1d6;
  font-family: 'IBM Plex Mono', monospace; font-size: 0.85rem; padding: 10px 12px; outline: none;
}
.login-input:focus { border-color: #4a3a3e; }
.login-input.small { padding: 7px 9px; font-size: 0.72rem; }
.login-btn { width: 100%; }

.top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
.owner-badge { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: #b3924f; letter-spacing: 0.03em; }

.admin-panel { margin-bottom: 30px; border-bottom: 1px solid #241c22; padding-bottom: 20px; }
.admin-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.submit-btn.small { padding: 7px 12px; font-size: 0.68rem; }
.admin-error { font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem; color: #b3684f; margin-bottom: 10px; }
.user-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid #1e181d; font-family: 'IBM Plex Mono', monospace; font-size: 0.72rem;
}
.user-row .uname { color: #d8cfc4; }
.user-row .uname.revoked { color: #6b6660; text-decoration: line-through; }
.user-actions { display: flex; gap: 10px; }
.user-actions button {
  background: none; border: none; cursor: pointer; font-family: 'IBM Plex Mono', monospace; font-size: 0.68rem;
  color: #4a3a3e;
}
.user-actions button:hover { color: #b3684f; }
.user-actions .restore-btn { color: #3d6b63; }
.user-actions .restore-btn:hover { color: #5aa598; }