:root {
  --paper: #F6F1E4;
  --paper-dark: #1C1A14;
  --ink: #2B2620;
  --ink-dark: #EDE7D8;
  --rule: #C9432E;
  --line: #B9AE95;
  --line-dark: #4A4436;
  --accent: #2C4A3E;
  --accent-dark: #7FBFA0;
  --amber: #A9660B;
  --amber-dark: #E5A63C;
  --danger: #C9432E;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: var(--paper-dark);
    --ink: var(--ink-dark);
    --line: var(--line-dark);
  }
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
}
a { color: inherit; text-decoration: none; }
.app {
  max-width: 480px; margin: 0 auto; min-height: 100vh;
  padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 24px);
  display: flex; flex-direction: column;
}

/* topbar */
.topbar { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.brand { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 700; letter-spacing: -0.5px; }
.brand span { color: var(--rule); }
.back { font-size: 14px; opacity: 0.6; }
.deckname { font-size: 13px; letter-spacing: 0.04em; opacity: 0.7; text-align: right; max-width: 55%; }
.logout-link { font-size: 13px; opacity: 0.5; }

/* progress row */
.progress-row { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; opacity: 0.65; }
.progress-bar { flex: 1; height: 2px; background: var(--line); position: relative; }
.progress-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--rule); transition: width .25s ease; }
.review-link { white-space: nowrap; opacity: 0.8; }

/* study stage */
.stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 8px 0 20px; min-height: 320px; }
.empty { text-align: center; opacity: 0.6; font-size: 15px; line-height: 1.6; padding: 40px 10px; }
.empty b { display: block; font-size: 17px; margin-bottom: 6px; opacity: 0.9; }

.card { width: 100%; aspect-ratio: 5/6; max-height: 420px; position: relative; cursor: pointer; perspective: 1400px; }
.card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.4,.15,.2,1); }
.card.flipped .card-inner { transform: rotateY(180deg); }
.face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; padding: 34px 26px;
  box-shadow: 0 1px 0 var(--line);
}
.face::before { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; width: 0; border-left: 1.5px solid var(--rule); opacity: 0.5; }
.face-text { font-family: Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1.45; text-align: center; max-height: 100%; overflow-y: auto; }
.face-back { transform: rotateY(180deg); }
.face-tag { position: absolute; top: 14px; left: 44px; font-family: monospace; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.4; }

/* controls */
.controls { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.know-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
button { font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 13px 10px; cursor: pointer; }
button:active { transform: scale(0.98); }
.btn-learning { border-color: var(--amber); color: var(--amber); }
.btn-know { border-color: var(--accent); color: var(--accent); }
@media (prefers-color-scheme: dark) {
  .btn-know { color: var(--accent-dark); border-color: var(--accent-dark); }
  .btn-learning { color: var(--amber-dark); border-color: var(--amber-dark); }
}
.nav-row { display: flex; gap: 10px; }
.nav-row button { flex: 1; opacity: 0.75; }
.btn-add { width: 100%; border-style: dashed; opacity: 0.75; margin-top: 6px; }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* deck list (menu glowne) */
.section-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; margin: 22px 0 10px; }
.deck-tile {
  display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px 16px; margin-bottom: 10px; position: relative;
}
.deck-tile.pinned { border-left: 3px solid var(--rule); }
.deck-tile.review-tile { border-left: 3px solid var(--amber); }
.deck-tile-name { font-family: Georgia, serif; font-size: 17px; margin-bottom: 4px; }
.deck-tile-stats { font-size: 12px; opacity: 0.55; font-family: monospace; }
.deck-list { display: flex; flex-direction: column; }
.deck-row { display: flex; align-items: stretch; gap: 8px; margin-bottom: 10px; }
.deck-row .deck-tile { flex: 1; margin-bottom: 0; }
.icon-btn { width: 42px; flex-shrink: 0; font-size: 15px; opacity: 0.6; }
.icon-btn.danger { color: var(--danger); opacity: 0.8; }

/* sheet modal */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); display: none; align-items: flex-end; justify-content: center; z-index: 10; }
.sheet-backdrop.open { display: flex; }
.sheet { width: 100%; max-width: 480px; background: var(--paper); border-radius: 16px 16px 0 0; padding: 22px 20px calc(env(safe-area-inset-bottom) + 22px); border-top: 1px solid var(--line); }
.sheet h3 { margin: 0 0 16px; font-family: Georgia, serif; font-size: 19px; }
.sheet-message { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0 0 16px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.55; margin-bottom: 6px; }
.field textarea, .field input, .field select { width: 100%; font-family: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; resize: none; }
.field textarea { min-height: 60px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 6px; }
.sheet-actions button { flex: 1; }
.form-error { color: var(--danger); font-size: 13px; margin-bottom: 8px; }

/* login / pin pad */
.pin-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.pin-title { font-family: Georgia, serif; font-size: 22px; margin-bottom: 28px; }
.dots { display: flex; gap: 14px; margin-bottom: 18px; }
.dots span { width: 12px; height: 12px; border-radius: 50%; border: 1px solid var(--line); }
.dots span.filled { background: var(--ink); border-color: var(--ink); }
.pin-error { color: var(--danger); font-size: 13px; margin-bottom: 14px; }
.keypad { display: grid; grid-template-columns: repeat(3, 64px); gap: 14px; margin-top: 10px; }
.keypad button { width: 64px; height: 64px; border-radius: 50%; font-size: 20px; font-weight: 500; }
.keypad button.empty-key { border: none; background: none; }