@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Baskerville:wght@400;700&display=swap');

:root {
  --ink: #282624; --muted: #66615c; --accent: #955c2a; --accent-dark: #76451e;
  --line: #e5d9ca; --paper: #fbf8f3; --panel: #fffdf9; --soft: #f3eadf;
  --level-a1-start: #3cab62; --level-a1-end: #2e7f48; --level-a1-shadow: rgba(46, 127, 72, .28);
  --level-a2-start: #52ae69; --level-a2-end: #417f46; --level-a2-shadow: rgba(65, 127, 70, .28);
  --level-b1-start: #8da63e; --level-b1-end: #6d8630; --level-b1-shadow: rgba(109, 134, 48, .28);
  --level-b2-start: #c59a2f; --level-b2-end: #a67222; --level-b2-shadow: rgba(166, 114, 34, .28);
  --level-c1-start: #d97738; --level-c1-end: #b2552c; --level-c1-shadow: rgba(178, 85, 44, .28);
  --level-c2-start: #d74d43; --level-c2-end: #a92e2c; --level-c2-shadow: rgba(169, 46, 44, .28);
  font-family: 'DM Sans', Arial, sans-serif; color: var(--ink); background: var(--paper);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 35% 30%, #fffdfa 0, var(--paper) 70%); }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.serif { font-family: 'Libre Baskerville', Georgia, serif; }
.site-header { height: 76px; border-bottom: 1px solid var(--line); background: rgba(255,253,249,.88); }
.header-inner { width: min(1310px, calc(100% - 64px)); height: 100%; margin: auto; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; font: 22px 'Libre Baskerville', Georgia, serif; white-space: nowrap; }
.book-logo { width: 42px; height: 42px; display: block; object-fit: contain; flex: 0 0 auto; }
.main-nav { display: flex; align-self: stretch; gap: 34px; margin: 0 auto; }
.main-nav a { display: flex; align-items: center; position: relative; }
.main-nav a.active { color: var(--accent-dark); font-weight: 600; }
.main-nav a.active::after { content: ''; position: absolute; height: 3px; left: 0; right: 0; bottom: 0; background: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 23px; }
.icon-button { border: 0; background: transparent; padding: 8px; font-size: 22px; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #eee2d3; font-family: Georgia, serif; }
.container { width: min(1310px, calc(100% - 64px)); margin: 36px auto; }
.page-title { font: 52px/1.1 'Libre Baskerville', Georgia, serif; margin: 0 0 8px; font-weight: 400; }
.subtitle { margin: 0 0 26px; color: #3e3a36; }
.error { color: #a6312a !important; }
.success { color: #2f6b34 !important; }
.button { border: 1px solid var(--accent); border-radius: 5px; padding: 11px 20px; background: linear-gradient(#a66b35, #875020); color: white; font-weight: 600; }
.button.secondary { color: var(--accent-dark); background: transparent; border-color: #cfb99e; }
.empty-state { padding: 70px 20px; text-align: center; border: 1px dashed #ccb496; border-radius: 6px; color: var(--muted); }
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--level-start, #8da63e), var(--level-end, #6d8630));
  box-shadow: 0 12px 22px var(--level-shadow, rgba(109, 134, 48, .28));
  color: white;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
.difficulty-badge.level-a1 { --level-start: var(--level-a1-start); --level-end: var(--level-a1-end); --level-shadow: var(--level-a1-shadow); }
.difficulty-badge.level-a2 { --level-start: var(--level-a2-start); --level-end: var(--level-a2-end); --level-shadow: var(--level-a2-shadow); }
.difficulty-badge.level-b1 { --level-start: var(--level-b1-start); --level-end: var(--level-b1-end); --level-shadow: var(--level-b1-shadow); }
.difficulty-badge.level-b2 { --level-start: var(--level-b2-start); --level-end: var(--level-b2-end); --level-shadow: var(--level-b2-shadow); }
.difficulty-badge.level-c1 { --level-start: var(--level-c1-start); --level-end: var(--level-c1-end); --level-shadow: var(--level-c1-shadow); }
.difficulty-badge.level-c2 { --level-start: var(--level-c2-start); --level-end: var(--level-c2-end); --level-shadow: var(--level-c2-shadow); }
@media (max-width: 900px) {
  .site-header { height: auto; }
  .header-inner, .container { width: min(100% - 32px, 700px); }
  .header-inner {
    height: auto;
    min-height: 76px;
    padding: 14px 0 12px;
    flex-wrap: wrap;
    row-gap: 12px;
  }
  .main-nav {
    display: flex;
    order: 3;
    flex: 1 1 100%;
    gap: 10px;
    margin: 0;
    padding-bottom: 4px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid #dcc8b1;
    border-radius: 999px;
    background: rgba(255,253,249,.94);
  }
  .main-nav a.active {
    border-color: #c89d71;
    background: var(--soft);
  }
  .main-nav a.active::after { display: none; }
  .header-actions {
    margin-left: auto;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .page-title { font-size: 40px; }
}

@media (max-width: 700px) {
  .brand { gap: 10px; font-size: 20px; }
  .book-logo { width: 38px; height: 38px; }
  .main-nav a { min-height: 38px; padding: 0 12px; font-size: 14px; }
}