:root {
  --parchment-dark: #c9a96e;
  --leather-dark: #5c3a1e;
  --ink: #1a0e08;
  --ink-muted: #3d2314;
  --ember: #c0622a;
  --gold: #b8860b;
  --gold-light: #daa520;
  --moss: #344a26;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #3a4728;
  background-image: radial-gradient(ellipse at 20% 10%, #4a5e3a 0%, transparent 50%), radial-gradient(ellipse at 80% 90%, #2c3820 0%, transparent 50%);
  min-height: 100vh;
  font-family: 'Crimson Text', Georgia, serif;
  color: var(--ink);
  padding: 0 12px 40px;
}

.page-top { max-width: 820px; margin: 0 auto; position: relative; z-index: 10; }
.banner-title { position: absolute; top: clamp(8px, 2vw, 18px); left: 4px; z-index: 30; }
.banner-title h1 { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 5vw, 3.2rem); font-weight: 700; color: #fdf6e3; text-shadow: 3px 3px 10px rgba(0,0,0,0.99), 0 0 32px rgba(192,98,42,0.7); line-height: 1.1; }
.banner-title p { font-family: 'Crimson Text', Georgia, serif; font-style: italic; color: #eeddb8; font-size: clamp(0.85rem, 2.2vw, 1.4rem); text-shadow: 1px 1px 6px rgba(0,0,0,0.99); margin-top: clamp(3px, 0.8vw, 7px); }

.app-shell { max-width: 820px; margin: 0 auto; position: relative; }

.main-frame {
  background: linear-gradient(180deg, #c98a52 0%, #d4a06a 4%, #e2bf8e 14%, #efd8b0 27%, #f5e6c8 50%, #fdf6e3 100%);
  border: 5px solid var(--leather-dark);
  border-radius: 18px;
  box-shadow: inset 0 6px 16px rgba(44,24,16,0.16), 0 10px 40px rgba(0,0,0,0.5);
  position: relative;
  overflow: visible;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 36px;
}

.main-frame::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-light), var(--gold), var(--gold-light), transparent);
  opacity: 0.6;
  border-radius: 2px;
  z-index: 1;
  pointer-events: none;
}

.dragon-in-frame { position: absolute; left: -5px; right: -5px; z-index: 20; line-height: 0; pointer-events: none; }
.dragon-in-frame img { width: 100%; height: auto; display: block; filter: contrast(1.03) saturate(0.95); border-radius: 13px 13px 0 0; visibility: hidden; }

.personality-popup {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-160px) scale(0.85);
  z-index: 1000;
  pointer-events: none;
  text-align: center;
}
.personality-popup.show { animation: scrollDrop 3.8s cubic-bezier(0.22,1,0.36,1) forwards; }

@keyframes scrollDrop {
  0%   { transform: translateX(-50%) translateY(-160px) scale(0.85); opacity: 0; }
  14%  { transform: translateX(-50%) translateY(30px)   scale(1.04); opacity: 1; }
  22%  { transform: translateX(-50%) translateY(20px)   scale(1);    opacity: 1; }
  72%  { transform: translateX(-50%) translateY(20px)   scale(1);    opacity: 1; }
  100% { transform: translateX(-50%) translateY(-110px) scale(0.88); opacity: 0; }
}

.personality-inner {
  background: linear-gradient(160deg, #fdf0cc 0%, #f5dfa0 40%, #e8c870 100%);
  border: 3px solid var(--gold);
  border-radius: 12px;
  padding: 16px 36px 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.4);
  min-width: 240px;
}
.personality-icon { font-size: 2rem; line-height: 1; margin-bottom: 6px; display: block; }
.personality-text { font-family: 'Cinzel', serif; font-size: 1.05rem; font-weight: 700; color: var(--leather-dark); letter-spacing: 0.04em; white-space: nowrap; }

.stats-tally { display: flex; gap: 0; flex-wrap: wrap; margin-bottom: 12px; background: rgba(139,94,60,0.08); border: 1px solid var(--parchment-dark); border-radius: 10px; overflow: hidden; }
.tally-item { flex: 1; min-width: 80px; padding: 10px 12px; text-align: center; border-right: 1px solid rgba(201,169,110,0.4); cursor: default; user-select: none; pointer-events: none; }
.tally-item:last-child { border-right: none; }
.tally-count { font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700; color: var(--leather-dark); line-height: 1; display: block; }
.tally-label { font-family: 'Crimson Text', serif; font-size: 0.7rem; color: var(--ink-muted); font-style: italic; letter-spacing: 0.04em; display: block; margin-top: 2px; }
.tally-item.t-total   { border-top: 3px solid var(--gold); }
.tally-item.t-reading { border-top: 3px solid var(--ember); }
.tally-item.t-done    { border-top: 3px solid var(--moss); }
.tally-item.t-dnf     { border-top: 3px solid #7a7060; }

.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; background: rgba(139,94,60,0.08); border: 1px solid var(--parchment-dark); border-radius: 10px; padding: 10px 14px; }
.btn-primary { background: linear-gradient(135deg, var(--leather-dark) 0%, #3e2008 100%); color: #f5e6c8; border: 1px solid var(--gold); border-radius: 8px; padding: 8px 16px; font-family: 'Cinzel', serif; font-size: 0.8rem; cursor: pointer; letter-spacing: 0.04em; box-shadow: 0 2px 6px rgba(0,0,0,0.2); transition: filter 0.15s, transform 0.1s; white-space: nowrap; }
.btn-primary:hover { filter: brightness(1.18); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.toolbar-divider { width: 1px; height: 28px; background: var(--parchment-dark); flex-shrink: 0; }
.control-group { display: flex; align-items: center; gap: 6px; }
.control-group label { font-family: 'Cinzel', serif; font-size: 0.72rem; color: var(--ink-muted); letter-spacing: 0.04em; font-weight: 600; white-space: nowrap; }
select { background: rgba(253,246,227,0.85); border: 1px solid var(--parchment-dark); border-radius: 6px; padding: 6px 8px; font-family: 'Crimson Text', Georgia, serif; font-size: 0.9rem; color: var(--ink); cursor: pointer; font-weight: 600; }
.toolbar-bc { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.toolbar-bc label { font-family: 'Cinzel', serif; font-size: 0.72rem; color: var(--ink-muted); letter-spacing: 0.03em; font-weight: 600; white-space: nowrap; }
.toggle-group { display: flex; border-radius: 6px; overflow: hidden; border: 1px solid var(--parchment-dark); }
.toggle-group button { background: rgba(253,246,227,0.7); border: none; padding: 5px 12px; font-family: 'Cinzel', serif; font-size: 0.75rem; color: var(--ink-muted); cursor: pointer; transition: background 0.15s, color 0.15s; letter-spacing: 0.03em; }
.toggle-group button.active { background: linear-gradient(135deg, var(--leather-dark), #3e2008); color: #f5e6c8; }
.book-club-note { font-style: italic; font-size: 0.8rem; color: var(--ink-muted); font-weight: 600; white-space: nowrap; }

.book-list { display: flex; flex-direction: column; gap: 12px; }
.empty-state { text-align: center; padding: 36px 20px; font-style: italic; color: var(--ink-muted); font-size: 1.05rem; font-weight: 600; }

.book-card { background: rgba(253,246,227,0.75); border: 1px solid var(--parchment-dark); border-radius: 10px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: start; transition: box-shadow 0.15s; position: relative; }
.book-card:hover { box-shadow: 0 3px 14px rgba(44,24,16,0.2); }
.book-card.status-reading   { border-left: 5px solid var(--ember); }
.book-card.status-completed { border-left: 5px solid var(--moss); }
.book-card.status-dnf       { border-left: 5px solid #7a7060; }
.book-card.status-want      { border-left: 5px solid var(--gold); }
.book-info { grid-column: 1; }
.book-title-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.book-title { font-family: 'Cinzel', serif; font-size: 1rem; font-weight: 700; color: var(--ink); }
.book-club-badge { background: var(--gold); color: #2c1800; font-family: 'Cinzel', serif; font-size: 0.63rem; padding: 2px 9px; border-radius: 20px; letter-spacing: 0.04em; font-weight: 700; white-space: nowrap; }
.book-meta { font-size: 0.95rem; color: var(--ink-muted); margin-top: 3px; font-weight: 600; }
.book-meta span { margin-right: 10px; }
.book-status-row { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.status-badge { font-family: 'Cinzel', serif; font-size: 0.72rem; padding: 3px 12px; border-radius: 20px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; }
.status-want      { background: rgba(184,134,11,0.18); color: #6b4c00; border: 1px solid rgba(184,134,11,0.3); }
.status-reading   { background: rgba(192,98,42,0.15);  color: #7a2e00; border: 1px solid rgba(192,98,42,0.3); }
.status-completed { background: rgba(52,74,38,0.15);   color: #243318; border: 1px solid rgba(52,74,38,0.3); }
.status-dnf       { background: rgba(100,90,80,0.12);  color: #4a3f35; border: 1px solid rgba(100,90,80,0.25); }
.star-display { color: var(--gold); font-size: 1rem; letter-spacing: 1px; }
.book-actions { grid-column: 2; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.btn-icon { background: rgba(92,58,30,0.1); border: 1px solid var(--parchment-dark); border-radius: 6px; padding: 5px 12px; font-size: 0.76rem; font-family: 'Cinzel', serif; color: var(--ink-muted); cursor: pointer; white-space: nowrap; transition: background 0.15s; letter-spacing: 0.03em; font-weight: 600; }
.btn-icon:hover { background: rgba(92,58,30,0.2); color: var(--ink); }

.delete-confirm { position: absolute; inset: 0; background: rgba(253,240,210,0.97); border-radius: 10px; display: flex; align-items: center; justify-content: center; gap: 12px; z-index: 10; border: 2px solid var(--ember); padding: 12px 16px; flex-wrap: wrap; }
.delete-confirm-text { font-family: 'Cinzel', serif; font-size: 0.82rem; font-weight: 600; color: var(--ink-muted); letter-spacing: 0.03em; }
.btn-confirm-yes { background: linear-gradient(135deg, #8b2500, var(--ember)); color: #fdf6e3; border: 1px solid #8b2500; border-radius: 6px; padding: 5px 14px; font-family: 'Cinzel', serif; font-size: 0.75rem; cursor: pointer; font-weight: 700; letter-spacing: 0.04em; transition: filter 0.15s; }
.btn-confirm-yes:hover { filter: brightness(1.15); }
.btn-confirm-no { background: rgba(92,58,30,0.1); border: 1px solid var(--parchment-dark); border-radius: 6px; padding: 5px 14px; font-family: 'Cinzel', serif; font-size: 0.75rem; color: var(--ink-muted); cursor: pointer; font-weight: 600; letter-spacing: 0.03em; transition: background 0.15s; }
.btn-confirm-no:hover { background: rgba(92,58,30,0.2); }

.modal-overlay { position: fixed; inset: 0; background: rgba(44,24,16,0.7); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal { background: linear-gradient(145deg, #fdf6e3 0%, #f5e6c8 100%); border: 2px solid #8b5e3c; border-radius: 16px; padding: 28px 28px 24px; width: 100%; max-width: 480px; box-shadow: 0 16px 48px rgba(0,0,0,0.55); }
.modal h2 { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--parchment-dark); letter-spacing: 0.05em; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-family: 'Cinzel', serif; font-size: 0.72rem; color: var(--ink-muted); letter-spacing: 0.06em; font-weight: 700; margin-bottom: 5px; }
.form-group input, .form-group select { width: 100%; background: rgba(253,246,227,0.9); border: 1px solid var(--parchment-dark); border-radius: 7px; padding: 9px 12px; font-family: 'Crimson Text', Georgia, serif; font-size: 1rem; color: var(--ink); font-weight: 600; }
.form-group input:focus, .form-group select:focus { outline: 2px solid var(--ember); outline-offset: 1px; }
.star-picker { display: flex; gap: 6px; margin-top: 3px; }
.star-picker button { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #cbb87a; transition: color 0.1s, transform 0.1s; padding: 0 2px; line-height: 1; }
.star-picker button.lit { color: var(--gold-light); }
.star-picker button:hover { transform: scale(1.2); }
.book-club-check { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.book-club-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ember); cursor: pointer; }
.book-club-check label { font-family: 'Crimson Text', serif; font-size: 0.95rem; color: var(--ink-muted); cursor: pointer; font-weight: 600; }
.modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--parchment-dark); }
.btn-cancel { background: none; border: 1px solid var(--parchment-dark); border-radius: 8px; padding: 8px 18px; font-family: 'Cinzel', serif; font-size: 0.78rem; color: var(--ink-muted); cursor: pointer; font-weight: 600; letter-spacing: 0.04em; }
.btn-cancel:hover { background: rgba(92,58,30,0.08); }
.loading { text-align: center; padding: 36px; font-style: italic; color: var(--ink-muted); font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.06em; font-weight: 600; }

@media (max-width: 560px) {
  .main-frame { padding-left: 14px; padding-right: 14px; }
  .toolbar { flex-direction: column; align-items: flex-start; }
  .toolbar-bc { margin-left: 0; }
  .toolbar-divider { display: none; }
  .book-card { grid-template-columns: 1fr; }
  .book-actions { grid-column: 1; flex-direction: row; flex-wrap: wrap; margin-top: 8px; }
  .tally-item { min-width: 70px; padding: 8px 8px; }
  .tally-count { font-size: 1.2rem; }
}