:root{
  --paper: #F2EDE3;
  --paper-card: #FBF8F1;
  --ink: #2B2118;
  --ink-soft: #6B5D4C;
  --teal: #3D6B63;
  --teal-dark: #2A4B45;
  --rust: #B5622B;
  --tab: #D9C9A3;
  --line: #DAD0BC;
  --stamp: #8B9A8C;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  background-image:radial-gradient(circle at 1px 1px, rgba(43,33,24,0.05) 1px, transparent 0);
  background-size:18px 18px;
  color:var(--ink);
  font-family:'IBM Plex Mono', monospace;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Source Serif 4', serif;}

.app{
  max-width:430px;
  margin:0 auto;
  min-height:100vh;
  background:var(--paper);
  display:flex;
  flex-direction:column;
  padding-bottom:64px; /* spazio per bottom-nav */
  position:relative;
}

.topbar{padding:22px 20px 14px; border-bottom:1px solid var(--line);}
.topbar .kicker{font-size:11px; color:var(--ink-soft); margin:0 0 2px;}
.topbar h1{margin:0; font-size:26px; font-weight:700;}
.topbar h1 span{color:var(--rust);}
.topbar h1 .version{
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  font-weight:500;
  color:var(--ink-soft);
  vertical-align:middle;
  margin-left:4px;
}

.view{display:none; padding:18px 20px 32px;}
.view.active{display:block;}

.stats-strip{display:flex; gap:10px; margin-bottom:16px;}
.stat{flex:1; background:var(--paper-card); border:1px solid var(--line); padding:10px 12px; border-radius:2px;}
.stat .n{font-family:'Source Serif 4',serif; font-size:22px; font-weight:700;}
.stat .l{font-size:10px; color:var(--ink-soft);}

.drawers{display:flex; gap:8px; margin-bottom:18px; overflow-x:auto; padding-bottom:2px;}
.drawer-tab{
  flex:0 0 auto; padding:8px 14px; background:var(--tab);
  border-radius:3px 3px 0 0; font-size:12px; cursor:pointer;
  border-bottom:3px solid transparent;
}
.drawer-tab.active{background:var(--paper-card); border-bottom:3px solid var(--rust); font-weight:600;}

.card-row{display:flex; flex-direction:column; gap:10px;}
.index-card{
  background:var(--paper-card); border:1px solid var(--line); border-left:4px solid var(--teal);
  border-radius:2px; padding:13px 14px; display:flex; justify-content:space-between;
  align-items:center; gap:10px; cursor:pointer;
}
.index-card.grammar{border-left-color:var(--rust);}
.index-card .num{font-size:10px; color:var(--ink-soft); letter-spacing:0.04em;}
.index-card .title{font-family:'Source Serif 4', serif; font-size:15.5px; margin:2px 0 6px; line-height:1.25;}
.index-card .meta{font-size:10.5px; color:var(--ink-soft); display:flex; gap:10px;}

.due-badge{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  border:1.5px dashed var(--stamp); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:600; color:var(--teal-dark);
}
.due-badge.done{border-style:solid; border-color:var(--teal); background:var(--teal); color:#fff;}

.lesson-head{margin-bottom:16px;}
.lesson-head .cat{font-size:10.5px; color:var(--rust); letter-spacing:0.03em;}
.lesson-head h2{margin:2px 0 0; font-size:21px;}

.progress-line{height:3px; background:var(--line); border-radius:2px; margin-bottom:20px; overflow:hidden;}
.progress-line span{display:block; height:100%; background:var(--rust); width:0%; transition:width .3s;}

.flip-wrap{perspective:1200px; height:270px; margin-bottom:16px;}
.flip-card{
  position:relative; width:100%; height:100%;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d; cursor:pointer;
}
.flip-card.flipped{transform:rotateY(180deg);}
.face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:4px;
  border:1px solid var(--line); background:var(--paper-card); padding:22px;
  display:flex; flex-direction:column; justify-content:center;
  box-shadow:3px 3px 0 var(--tab);
}
.face.back{transform:rotateY(180deg); background:#fff;}
.face .eyebrow{font-size:10px; color:var(--ink-soft); margin-bottom:10px;}
.face .term{font-family:'Source Serif 4',serif; font-size:30px; font-weight:700;}
.face .sub{font-size:12px; color:var(--ink-soft); margin-top:8px;}
.face .def{font-size:16px; line-height:1.5; margin-bottom:14px;}
.face .example{font-size:13px; color:var(--teal-dark); border-left:2px solid var(--teal); padding-left:10px;}

.tap-hint{text-align:center; font-size:10.5px; color:var(--ink-soft); margin-top:-8px; margin-bottom:16px;}

.grade-row{display:flex; gap:8px;}
.grade-row button{
  flex:1; padding:12px 0; border-radius:3px; border:1px solid var(--line);
  background:var(--paper-card); font-family:'IBM Plex Mono', monospace; font-size:11.5px;
  cursor:pointer; color:var(--ink);
}
.grade-row button.hard{border-color:var(--rust); color:var(--rust);}
.grade-row button.good{border-color:var(--teal); color:var(--teal-dark);}
.grade-row button.easy{background:var(--teal); border-color:var(--teal); color:#fff;}

.reader h2{font-size:20px; margin-bottom:4px;}
.reader .cat{font-size:10.5px; color:var(--rust);}
.reader p{font-size:14.5px; line-height:1.65; color:var(--ink);}
.video-link{
  display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--teal-dark);
  text-decoration:none; border-bottom:1px dashed var(--teal-dark); margin-bottom:16px;
}

.review-list{display:flex; flex-direction:column; gap:8px;}
.review-row{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--paper-card); border:1px solid var(--line); padding:10px 12px; border-radius:2px;
}
.review-row .name{font-size:13px;}
.ticks{display:flex; gap:4px;}
.tick{width:16px; height:16px; border-radius:50%; border:1.5px solid var(--stamp);}
.tick.on{background:var(--teal); border-color:var(--teal);}

.section-label{font-size:11px; color:var(--ink-soft); margin:4px 0 10px; display:flex; align-items:center; gap:8px;}
.section-label::after{content:""; flex:1; height:1px; background:var(--line);}

.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:430px; display:flex; background:var(--paper-card);
  border-top:1px solid var(--line);
}
.bottom-nav button{
  flex:1; border:none; background:none; padding:14px 0; font-family:'IBM Plex Mono', monospace;
  font-size:12px; color:var(--ink-soft); cursor:pointer;
}
.bottom-nav button.active{color:var(--ink); font-weight:600; border-top:2px solid var(--rust);}