:root {
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #20312c;
  background: #f4f5ef;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; }

button, textarea, select, input { font: inherit; }

button { cursor: pointer; }

#app { max-width: 1150px; margin: 0 auto; padding: 28px 22px 60px; }

.site-header { display: flex; justify-content: space-between; align-items: start; gap: 24px; margin-bottom: 30px; }

h1 { font-size: clamp(2rem, 5vw, 3.3rem); letter-spacing: -.045em; margin: 0 0 6px; }

h2 { font-size: 1.08rem; margin: 0 0 16px; }

.subtitle, .storage-note, .due { color: #62736a; }

.subtitle { margin: 0; }

.toolbar { display: flex; gap: 8px; flex-wrap: wrap; }
.nav-link { display: inline-flex; align-items: center; text-decoration: none; }

.deck-label { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 650; }
.deck-select { min-width: 120px; max-width: 220px; padding: 9px 10px; border: 1px solid #bdcfc1; border-radius: 9px; background: #fff; color: #20312c; }
.deck-select:focus-visible { outline: 2px solid #367954; outline-offset: 1px; }
.management-intro { margin-bottom: 20px; }
.management-intro h2 { font-size: 1.5rem; margin-bottom: 5px; }
.management-page { max-width: 900px; }
.management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.management-intro + .management-panel { margin-bottom: 18px; }
.management-panel { background: #fff; border: 1px solid #d9e2da; border-radius: 18px; box-shadow: 0 8px 26px #244c3010; padding: 24px; min-width: 0; }
.management-panel h2 { margin-bottom: 12px; }
.management-page > .management-panel { margin-top: 18px; }
.management-label { display: block; font-size: .9rem; font-weight: 650; margin-bottom: 14px; }
.management-label input { display: block; width: 100%; margin-top: 7px; padding: 10px; border: 1px solid #bdcfc1; border-radius: 9px; }
.management-label input:focus-visible { outline: 2px solid #367954; outline-offset: 1px; }
.management-panel .deck-label { display: flex; flex-direction: column; align-items: start; }
.management-panel .deck-select { width: 100%; max-width: none; margin-top: 7px; }
.deck-count { margin: 12px 0 0; }
.management-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.management-panel .account-email { display: block; margin-bottom: 14px; overflow-wrap: anywhere; }
.management-panel > .button + .button { margin-left: 9px; }

.account-email { align-self: center; color: #526b59; font-size: .88rem; }

.file-input { display: none; }

.layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(270px, 1fr); gap: 22px; align-items: start; }

.study-column { display: grid; gap: 14px; }

.study-card, .add-form, .card-list { background: #fff; border: 1px solid #d9e2da; border-radius: 18px; box-shadow: 0 8px 26px #244c3010; }

.study-card { min-height: 420px; padding: clamp(24px, 5vw, 44px); display: flex; flex-direction: column; align-items: start; }

.eyebrow { color: #5c745f; font-size: .78rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; margin: 0 0 22px; }

.card-text { font-size: clamp(1.4rem, 3vw, 2.2rem); line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-text img { max-width: 100%; height: auto; }
.card-text pre { white-space: pre-wrap; overflow-wrap: anywhere; }

.answer { width: 100%; border-top: 1px solid #dfe8df; margin-top: 30px; padding-top: 26px; }

.answer .card-text { font-size: clamp(1.25rem, 2.5vw, 1.8rem); }

.grammar-xray { border-top: 1px solid #dfe8df; margin-top: 20px; padding-top: 16px; }
.grammar-xray-title { color: #5c745f; font-size: .48em; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.grammar-phrase { font-size: .82em; line-height: 1.8; margin-top: 8px; }
.grammar-translation { color: #62736a; font-size: .65em; line-height: 1.45; margin: 0 0 10px; white-space: normal; }
.grammar-token { display: inline-block; white-space: nowrap; font-weight: 700; }
.grammar-token sup { font-size: .52em; font-weight: 400; margin-left: 2px; vertical-align: super; }
.grammar-focus { background: #fff1a8; border: 2px solid #433900; border-radius: 6px; padding: 0 3px; }

.grammar-key { background: #fff; border: 1px solid #d9e2da; border-radius: 14px; padding: 18px 22px; box-shadow: 0 8px 26px #244c3010; }
.grammar-key h2 { font-size: .86rem; margin: 0 0 10px; }
.grammar-key-row { display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: .82rem; line-height: 1.5; }
.grammar-key-row + .grammar-key-row { margin-top: 7px; }
.grammar-case { font-weight: 750; }
.grammar-nom { color: #008000; }
.grammar-acc { color: #ff0000; }
.grammar-ins { color: #ffa500; }
.grammar-gen { color: #800080; }
.grammar-loc { color: #0000ff; }
.grammar-dat { color: #00ced1; }
.grammar-voc { color: #808080; }
.grammar-key-note { color: #62736a; font-size: .75rem; margin: 9px 0 0; }
.grammar-focus-key { background: #fff1a8; border: 1px solid #433900; border-radius: 4px; padding: 0 4px; }

.ratings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; margin-top: 32px; }

.button { border: 0; border-radius: 10px; background: #265b42; color: #fff; padding: 11px 16px; font-weight: 650; }

.button:hover, .button:focus-visible { background: #17432e; }

.button.secondary { background: #e4eee6; color: #244e38; }

.button.secondary:hover, .button.secondary:focus-visible { background: #cee1d2; }

.reveal { margin-top: 36px; }

.rating.again { background: #a64842; }

.rating.hard { background: #ad7137; }

.rating.good { background: #28634a; }

.rating.easy { background: #2f657b; }

.due { font-size: .88rem; margin: auto 0 0; padding-top: 32px; }
.move-label { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: .82rem; color: #62736a; }

.empty { color: #6b7c70; margin: auto; text-align: center; width: 100%; }

.sidebar { display: grid; gap: 18px; }

.add-form, .card-list { padding: 22px; }

.add-form label, .edit-card label { display: block; font-size: .9rem; font-weight: 650; margin: 0 0 14px; }

.add-form textarea, .edit-card textarea { display: block; width: 100%; margin-top: 6px; padding: 10px; border: 1px solid #bdcfc1; border-radius: 9px; resize: vertical; min-height: 58px; }

.add-form textarea:focus-visible, .edit-card textarea:focus-visible { outline: 2px solid #367954; outline-offset: 1px; }
.format-hint { color: #62736a; font-size: .82rem; margin: 0 0 14px; }

.card-list { max-height: 360px; overflow: auto; }

.list-card { display: block; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 10px; color: #273b30; overflow-wrap: anywhere; }

.list-card:hover, .list-card:focus-visible { background: #edf5ee; }

.list-card.selected { background: #e7f1e8; border-color: #c5ddca; }

.notice { background: #fff4da; border: 1px solid #e8ce86; border-radius: 9px; padding: 12px 14px; }

.login-form { max-width: 460px; margin: 60px auto; padding: 32px; background: #fff; border: 1px solid #d9e2da; border-radius: 18px; box-shadow: 0 8px 26px #244c3010; }

.login-form label { display: block; font-weight: 650; margin: 24px 0 16px; }

.login-form input { display: block; width: 100%; margin-top: 8px; padding: 11px; border: 1px solid #bdcfc1; border-radius: 9px; }

.login-form .button { margin-right: 8px; margin-bottom: 8px; }

.button:disabled { opacity: .55; cursor: wait; }

.storage-note { font-size: .85rem; margin-top: 22px; }

@media (max-width: 760px) {
  .site-header { flex-direction: column; }
  .layout { grid-template-columns: 1fr; }
  .management-grid { grid-template-columns: 1fr; }
  .study-card { min-height: 350px; }
  .ratings { grid-template-columns: repeat(2, 1fr); }
}

.card-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.edit-card .button { margin-right: 10px; margin-bottom: 8px; }
.button.danger { background: #f4e5e2; color: #873a32; }
.button.danger:hover, .button.danger:focus-visible { background: #ecd1cd; }