@font-face{font-family:'Nunito';src:url("../fonts/nunito-nQjjZd5.woff2") format('woff2');font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Nunito';src:url("../fonts/nunito-italic-GtS_7Xz.woff2") format('woff2');font-weight:200 1000;font-style:italic;font-display:swap}
:root{
  --paper:#ffffff;--panna:#f2f5f9;--line:#dde4ec;--ink:#1b2a3a;--muted:#687a8e;
  --mare:#1c7ae0;--mare-deep:#155fb0;
  --limone:#ffc400;--limone-deep:#d9a400;
  --basilico:#2bb46a;--basilico-deep:#1f8f52;
  --pomodoro:#e5463c;--pomodoro-deep:#b8322a;
  --mare-text:var(--mare-deep);--limone-text:#5a4500;--basilico-text:var(--basilico-deep);--pomodoro-text:var(--pomodoro-deep);
  --lv:var(--mare);
  --mare-tint:color-mix(in srgb,var(--mare) 14%,var(--paper));
  --limone-tint:color-mix(in srgb,var(--limone) 22%,var(--paper));
  --basilico-tint:color-mix(in srgb,var(--basilico) 16%,var(--paper));
  --pomodoro-tint:color-mix(in srgb,var(--pomodoro) 14%,var(--paper));
  --lv-tint:color-mix(in srgb,var(--lv) 14%,var(--paper));
  --r-btn:16px;--r-card:20px;--tabbar:calc(64px + env(safe-area-inset-bottom));
  --bg:var(--paper);--fg:var(--ink);--accent:var(--mare);--card:var(--paper);--border:var(--line);
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0f1a26;--panna:#172536;--line:#27394d;--ink:#ecf1f7;--muted:#97a8ba;--mare:#3b8fea;--mare-deep:#1f66b8;--mare-text:#8dc1f8;--limone-text:#ffd84d;--basilico-text:#6fdfa3;--pomodoro-text:#ff9a90;}
}
[data-key=personal]{--lv:#687a8e;--lv-tint:color-mix(in srgb,var(--lv) 14%,var(--paper))}
[data-key=a1]{--lv:#3fa21c;--lv-tint:color-mix(in srgb,var(--lv) 14%,var(--paper))}
[data-key=a2]{--lv:#1097a1;--lv-tint:color-mix(in srgb,var(--lv) 14%,var(--paper))}
[data-key=b1]{--lv:#1c7ae0;--lv-tint:color-mix(in srgb,var(--lv) 14%,var(--paper))}
[data-key=b2]{--lv:#7c5ce6;--lv-tint:color-mix(in srgb,var(--lv) 14%,var(--paper))}
[data-key=c1]{--lv:#e07a00;--lv-tint:color-mix(in srgb,var(--lv) 14%,var(--paper))}
[data-key=c2]{--lv:#d7263d;--lv-tint:color-mix(in srgb,var(--lv) 14%,var(--paper))}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Nunito,ui-rounded,system-ui,-apple-system,sans-serif;
  font-size:17px;line-height:1.45;font-weight:600;-webkit-font-smoothing:antialiased}
main{max-width:40rem;margin:0 auto;padding:1rem 1.1rem calc(var(--tabbar) + 1.5rem)}
body.reading main{padding-bottom:calc(2rem + env(safe-area-inset-bottom))}
body.has-dock main{padding-bottom:calc(9.5rem + env(safe-area-inset-bottom))}
h1{font-size:1.65rem;font-weight:900;line-height:1.2;margin:.4rem 0 .9rem;letter-spacing:-.01em}
h2{font-size:1.25rem;font-weight:800;line-height:1.3;margin:1.5rem 0 .6rem}
a{color:var(--mare);text-decoration:none;font-weight:700}
p{margin:.6rem 0}
small{font-weight:700}
kbd{font:inherit;font-size:.85em;font-weight:800;background:var(--panna);border:1.5px solid var(--line);border-radius:6px;padding:0 .35em}
.num{color:var(--muted);font-size:.85rem;font-weight:700;font-variant-numeric:tabular-nums}
.protocol,.note{color:var(--muted);font-size:.95rem;font-weight:600}
:focus-visible{outline:3px solid var(--limone);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important}}

/* ---- bottom tab bar ---- */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper);border-top:2px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom)}
nav.tabs .inner{max-width:40rem;margin:0 auto;display:flex}
nav.tabs a.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:.45rem 0 .4rem;
  color:var(--muted);font-size:.72rem;font-weight:800}
nav.tabs a.tab svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  padding:3px 12px;border-radius:12px;box-sizing:content-box}
nav.tabs a.tab.active{color:var(--mare)}
nav.tabs a.tab.active svg{background:var(--mare-tint)}
body.reading nav.tabs{display:none}

/* ---- buttons: solid bottom edge, press down ---- */
.btn,button.mark,.flash .choices button,.pbtn{appearance:none;-webkit-appearance:none;font:inherit;font-weight:800;font-size:1rem;line-height:1.2;
  color:var(--ink);background:var(--paper);border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r-btn);
  padding:.65rem 1rem;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  transition:transform .08s,border-bottom-width .08s,background .12s}
.btn:active,button.mark:active,.flash .choices button:active,.pbtn:active{transform:translateY(2px);border-bottom-width:2px}
.btn.primary,.flash .typedrow button.mark,button.mark.next,#flipbtn,#timerbtn{background:var(--mare);border-color:var(--mare-deep);color:#fff}
.marks button.mark.on{background:var(--basilico);border-color:var(--basilico-deep);color:#fff}
.btn.good,button.mark.good,#knowrow button:first-child{background:var(--basilico);border-color:var(--basilico-deep);color:#fff}
.btn.bad,#knowrow button:last-child{background:var(--pomodoro);border-color:var(--pomodoro-deep);color:#fff}
.btn.wide{display:block;width:100%}
.flash .helpbar button.mark{border-color:transparent;background:transparent;color:var(--mare);padding:.5rem .6rem}
.flash .helpbar button.mark:active{transform:none;border-bottom-width:4px;background:var(--mare-tint)}
button:disabled{opacity:.55;cursor:default}

/* ---- chips ---- */
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0}
.chips label,.chip,.lvtab{font:inherit;font-weight:800;font-size:.9rem;line-height:1.2;background:var(--panna);color:var(--ink);
  border:0;border-radius:999px;padding:.45rem .85rem;cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.chips label.on,.chip.active{background:var(--mare);color:#fff}
.lvtab.on{background:var(--lv);color:#fff}
/* single-select = radio dot, multi-select = check box, presets = outlined buttons */
.chips.one label,.chips.many label{display:inline-flex;align-items:center;gap:.45rem;padding-left:.6rem}
.chips.one label::before,.chips.many label::before{content:"";flex:none;width:1.05rem;height:1.05rem;box-sizing:border-box;
  border:2px solid var(--muted);background:var(--paper)}
.chips.one label::before{border-radius:50%}
.chips.many label::before{border-radius:5px}
.chips.one label.on::before{border-color:#fff;background:#fff;box-shadow:inset 0 0 0 3px var(--mare)}
.chips.many label.on::before{border-color:#fff;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%231c7ae0' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.chips.act label{background:var(--paper);border:2px solid var(--line);border-bottom-width:4px;color:var(--mare);border-radius:14px;padding:.4rem .8rem}
.chips.act label:active{transform:translateY(2px);border-bottom-width:2px}
.flash .glabel small{font-weight:700;color:var(--muted);opacity:.85;margin-left:.15rem}
.flash .glabel .gcount{float:right;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---- Storie: hero, tiles, levels, books ---- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:.4rem 0 1rem}
.tiles:empty{display:none}
.tile{background:var(--panna);border-radius:14px;padding:.55rem .7rem .5rem}
.tile b{display:block;font-size:1.35rem;font-weight:900;line-height:1.1;font-variant-numeric:tabular-nums}
.tile b small{font-size:.8rem;color:var(--muted);font-weight:800}
.tile span{font-size:.75rem;font-weight:700;color:var(--muted)}
.hero{margin:0 0 1.2rem}
.hero a{display:block;color:var(--ink);background:var(--lv-tint);border:2px solid var(--lv);border-bottom-width:5px;
  border-radius:var(--r-card);padding:.9rem 1.1rem 1rem}
.hero a:active{transform:translateY(3px);border-bottom-width:2px}
.hero .hlv{display:inline-block;background:var(--lv);color:#fff;font-size:.72rem;font-weight:900;border-radius:999px;padding:.15rem .6rem;margin-right:.45rem;vertical-align:middle}
.hero .hk{font-size:.8rem;font-weight:800;color:var(--muted);vertical-align:middle}
.hero .ht{display:block;font-size:1.4rem;font-weight:900;line-height:1.2;margin:.4rem 0 .05rem}
.hero .hb{display:block;color:var(--muted);font-size:.95rem}
.hero .hrow{display:flex;align-items:center;gap:.7rem;margin-top:.9rem;flex-wrap:wrap}
.hero .hrow .btn{display:inline-block}
.hero .hpos{font-size:.85rem;font-weight:800;color:var(--muted)}
.lvtabs{display:flex;gap:.45rem;overflow-x:auto;padding:.1rem 0 .6rem;margin:0 -1.1rem;padding-left:1.1rem;padding-right:1.1rem;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.lvtabs::-webkit-scrollbar{display:none}
.lvtab{flex:0 0 auto}
.lvsec{display:none}
h2.level{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap}
h2.level small{font-size:.85rem;color:var(--muted);font-weight:700}
ul.books{list-style:none;padding:0;margin:0}
ul.books li{margin:.7rem 0}
ul.books a{display:block;color:var(--ink);border:2px solid var(--line);border-bottom-width:5px;border-radius:var(--r-card);
  padding:.9rem 1rem .9rem 1.25rem;position:relative;overflow:hidden}
ul.books a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:9px;background:var(--lv)}
ul.books a:active{transform:translateY(3px);border-bottom-width:2px}
.btitle{display:block;font-size:1.15rem;font-weight:900;line-height:1.2}
.bsub{display:block;color:var(--muted);font-size:.9rem;margin-top:.1rem}
.bbar{display:block;height:10px;border-radius:999px;background:var(--panna);margin:.7rem 0 .45rem;overflow:hidden}
.bbar i{display:block;height:100%;width:0;background:var(--lv);border-radius:999px;transition:width .3s}
.bmeta{display:flex;gap:.9rem;min-height:1.1rem}
.backrow{margin:.2rem 0 .3rem}
.bookview{display:none}

/* ---- chapter path ---- */
ul.story-list{list-style:none;padding:0;margin:.2rem 0 0}
ul.story-list li{position:relative}
ul.story-list li+li::before{content:'';position:absolute;left:21px;top:-9px;height:14px;width:4px;background:var(--line);border-radius:2px}
ul.story-list a{display:flex;align-items:center;gap:.8rem;padding:.5rem .1rem;color:var(--ink);text-decoration:none;position:relative;z-index:1}
ul.story-list .node{flex:0 0 46px;width:46px;height:46px;border-radius:50%;background:var(--panna);color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:900;border:3px solid var(--panna);font-variant-numeric:tabular-nums}
li.read .node{background:var(--basilico);border-color:var(--basilico);color:#fff;font-size:0}
li.read .node::after{content:'✓';font-size:1.25rem}
li.listened:not(.read) .node{border-color:var(--basilico);background:var(--paper);color:var(--basilico)}
li.next .node{border-color:var(--lv);background:var(--paper);color:var(--lv);box-shadow:0 0 0 5px var(--lv-tint)}
ul.story-list .title{flex:1;font-weight:800;line-height:1.25}
li.next .title::after{content:'Continua';display:inline-block;margin-left:.5rem;background:var(--lv);color:#fff;font-size:.68rem;font-weight:900;border-radius:999px;padding:.1rem .5rem;vertical-align:middle}
ul.story-list .meta{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:flex-end;max-width:42%}
ul.story-list .meta .num{background:var(--panna);border-radius:999px;padding:.1rem .5rem;font-size:.75rem;font-weight:800;color:var(--muted)}
ul.story-list .meta .num:empty{display:none}
ul.story-list .meta .pos{color:var(--mare)}
ul.story-list .ear{font-size:.8rem;opacity:.75}
li.listened .ear{display:none}
.read-toggle{display:none}

/* ---- chapter page ---- */
.top{display:flex;align-items:center;gap:.7rem;margin:.1rem 0 .4rem}
.top a.back{display:inline-flex;align-items:center;justify-content:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:var(--panna);color:var(--ink);font-size:1.5rem;font-weight:900;line-height:1}
.top .where{flex:1;font-size:.9rem;font-weight:800;color:var(--muted)}
.bookbar{height:8px;border-radius:999px;background:var(--panna);overflow:hidden;margin:.2rem 0 1rem}
.bookbar i{display:block;height:100%;background:var(--lv);border-radius:999px}
body.reading h1{font-size:1.9rem;margin:.2rem 0 .8rem}
.timerbox{margin:.4rem 0 1.2rem}
#timerbtn{display:block;width:100%;font-size:1.05rem;padding:.8rem 1rem}
.timerline{display:flex;align-items:center;gap:.9rem;margin-top:.6rem;min-height:1.2rem}
#timerdisp{font-size:1.3rem;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums}
#timerdisp:empty{display:none}
#timercancel{color:var(--muted);font-size:.9rem}
#hltoggle{margin-top:.6rem;font-size:.9rem;padding:.45rem .8rem}
#timerresult{margin-top:.5rem;font-weight:700}
#timerresult:empty{display:none}
.story-text p{font-size:1.15rem;font-weight:500;line-height:1.65;margin:1em 0;max-width:34em}
.has-audio .sent{cursor:pointer;border-radius:4px}
.sent.now{background:var(--limone-tint);box-shadow:0 0 0 3px var(--limone-tint)}
mark.hl{background:var(--limone-tint);color:inherit;border-bottom:2px solid var(--limone);border-radius:3px;cursor:pointer}

/* audio dock */
.player{position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--paper);border-top:2px solid var(--line);
  padding:.55rem 1rem calc(.6rem + env(safe-area-inset-bottom))}
.player .inner{max-width:40rem;margin:0 auto}
.prow{display:flex;align-items:center;gap:.55rem}
.pbtn{font-size:.85rem;padding:.5rem .6rem;border-radius:12px}
.pbtn.big{flex:0 0 54px;width:54px;height:54px;border-radius:50%;padding:0;font-size:1.3rem;background:var(--mare);border-color:var(--mare-deep);color:#fff}
#ptime{margin-left:auto;font-size:.85rem}
#resumehint{font-size:.78rem;color:var(--muted);font-weight:700;flex-basis:100%}
#resumehint:empty{display:none}
.player input[type=range]{accent-color:var(--mare);margin:0}
#seek{width:100%;margin:.35rem 0 0}
.player .rate{display:flex;align-items:center;gap:.6rem;font-size:.78rem;color:var(--muted);font-weight:800;margin-top:.1rem}
.player .rate input{flex:1}
.player .rate b{color:var(--ink);min-width:3.2em;font-variant-numeric:tabular-nums}

/* selection bar + translate popup */
#hlbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tabbar) + .8rem);z-index:30;display:none;gap:.4rem;
  max-width:94vw;background:var(--ink);padding:.35rem;border-radius:999px}
body.reading #hlbar{bottom:1.2rem}
body.has-dock #hlbar{bottom:calc(9.6rem + env(safe-area-inset-bottom))}
#hlbar button.mark{border:0;border-radius:999px;padding:.55rem .95rem;background:var(--ink);color:#fff;max-width:60vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hlbar #trbtn{background:var(--limone);color:#1b2a3a}
#trpop{display:none;position:fixed;left:1rem;right:1rem;bottom:1.2rem;z-index:31;max-width:38rem;margin:0 auto;background:var(--paper);
  border:2px solid var(--line);border-bottom-width:5px;border-radius:var(--r-card);padding:1rem 2.6rem 1rem 1.1rem;max-height:50vh;overflow:auto}
body.has-dock #trpop{bottom:calc(9.6rem + env(safe-area-inset-bottom))}
#trpop .it{color:var(--muted);font-size:.9rem;margin-bottom:.4rem}
#trpop .en{font-weight:700}
#trpop .bubble-x{position:absolute;right:.6rem;top:.5rem}

/* sections (details) */
details{border:0;border-top:2px solid var(--line);padding:.2rem 0 .6rem;margin:1rem 0 0;background:none}
summary{list-style:none;cursor:pointer;font-weight:800;font-size:1.1rem;padding:.65rem 0;display:flex;align-items:center;justify-content:space-between;gap:.6rem;-webkit-tap-highlight-color:transparent}
summary::-webkit-details-marker{display:none}
summary::after{content:'';flex:0 0 auto;width:10px;height:10px;border-right:3px solid var(--muted);border-bottom:3px solid var(--muted);transform:rotate(45deg);margin:0 8px 4px 0;transition:transform .15s}
details[open] > summary::after{transform:rotate(-135deg);margin-bottom:-4px}
details.howto summary{font-size:.95rem;color:var(--muted)}
details.howto{margin-top:1.6rem}
.flash details.settings + details.howto{border-top:0;margin-top:.4rem}
#qlist{padding-left:1.3rem;font-weight:600;margin:.3rem 0 .6rem}
#qlist li{margin:.3rem 0}
.bubble{background:var(--panna);border-radius:16px;padding:.7rem 2.2rem .7rem .9rem;margin:.5rem 0;position:relative;border-left:5px solid var(--limone)}
.bubble.submitted{border-left-color:var(--basilico)}
.bubble-q{font-size:.85rem;color:var(--muted);font-weight:700;margin-bottom:.2rem}
.bubble-x{position:absolute;right:.5rem;top:.35rem;border:0;background:transparent;font:inherit;font-size:1.3rem;font-weight:800;color:var(--muted);cursor:pointer;padding:.2rem .4rem}
.bubble .num{display:block;margin-top:.25rem}
#qchips{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.6rem 0}
textarea{width:100%;font:inherit;font-weight:600;border:2px solid var(--line);border-radius:14px;padding:.7rem .9rem;background:var(--panna);color:var(--ink);resize:vertical}
textarea:focus,input:focus{outline:none;border-color:var(--mare)}
.actrow{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin:.6rem 0}
.actrow .num:empty{display:none}
ul.words{list-style:none;padding:0;margin:.3rem 0 0;columns:2;column-gap:1.3rem;font-size:.95rem}
ul.words li{break-inside:avoid;padding:.25rem 0;border-bottom:1.5px solid var(--line)}
.marks{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.4rem 0 .4rem}
.marks div{text-align:center}
.marks button.mark{width:100%;padding:.7rem .5rem;font-size:.95rem}
.marks a{display:inline-block;font-size:.8rem;color:var(--muted);margin-top:.4rem}
.chapnav-bar{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:1.2rem 0 .5rem}
.chapnav-bar a.chapnav{display:block;border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r-btn);padding:.65rem .9rem;color:var(--ink);font-weight:800;line-height:1.2}
.chapnav-bar a.chapnav:active{transform:translateY(2px);border-bottom-width:2px}
.chapnav-bar a.chapnav.nx{grid-column:2;text-align:right}
.chapnav small{display:block;color:var(--muted);font-size:.72rem;font-weight:800;margin-bottom:.1rem}

/* pull to refresh pill */
#ptr{position:fixed;top:-3rem;left:50%;transform:translateX(-50%);z-index:40;background:var(--ink);color:var(--paper);font-size:.85rem;font-weight:800;border-radius:999px;padding:.4rem .9rem;opacity:.9;pointer-events:none}
#ptr.on{background:var(--mare)}

/* ---- Verbi + Flashcard ---- */
.flash .deckbar{display:flex;gap:.6rem;align-items:center;margin:.2rem 0 .6rem;flex-wrap:wrap}
.flash .deckbar label{display:none}
.flash select{flex:1 1 12rem;font:inherit;font-weight:800;font-size:1rem;padding:.6rem 2.4rem .6rem .9rem;border:2px solid var(--line);border-bottom-width:4px;
  border-radius:var(--r-btn);appearance:none;-webkit-appearance:none;color:var(--ink);
  background:var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23687a8e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right .8rem center}
.flash .deckhead{margin:.2rem 0 .1rem}
.flash .deckhead b{display:block;font-size:1.05rem;font-weight:900}
.flash .deckhead span{color:var(--muted);font-size:.9rem}
.flash .model:empty{display:none}
.flash .summary-pills{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.flash details.settings{border-top:0;border-bottom:2px solid var(--line);margin:0 0 .4rem;padding:0 0 .5rem}
.flash details.settings > summary{font-size:1rem}
.flash .grp{margin:.2rem 0 .4rem}
.flash .glabel{display:block;font-size:.78rem;font-weight:800;color:var(--muted);margin:.5rem 0 .1rem}
.flash .card{position:relative;border:2px solid var(--line);border-bottom-width:5px;border-radius:var(--r-card);padding:1.5rem 1.1rem 1.1rem;margin:.9rem 0;text-align:center;overflow:hidden}
.flash .prompt{font-size:1.6rem;font-weight:900;line-height:1.15;letter-spacing:-.01em;overflow-wrap:anywhere}
.flash .prompt.big{font-size:2.2rem}
.flash .sub{color:var(--muted);margin:.3rem 0 .5rem;font-weight:700}
.flash .sub:empty{display:none}
.flash .tenseline{margin:.3rem 0 .9rem;font-weight:700;color:var(--muted)}
.flash .tenseline:empty{display:none}
.flash .tenseline b{display:inline-block;background:var(--mare-tint);color:var(--mare);border-radius:999px;padding:.2rem .7rem;font-weight:900;margin-right:.3rem}
.flash .typedrow{display:flex;flex-direction:column;gap:.6rem;margin:.6rem 0}
.flash .typedrow input{width:100%;font:inherit;font-size:1.25rem;font-weight:700;text-align:center;padding:.75rem .9rem;border:2px solid var(--line);
  border-radius:var(--r-btn);background:var(--panna);color:var(--ink)}
.flash .typedrow input.hit{border-color:var(--basilico);background:var(--basilico-tint)}
.flash .typedrow input.miss{border-color:var(--pomodoro);background:var(--pomodoro-tint)}
.flash .typedrow button.mark{width:100%;font-size:1.05rem;padding:.8rem 1rem}
#tuttirow{flex-direction:row;margin:.4rem 0 .2rem}
#tuttirow input{text-align:left;font-size:1rem;padding:.6rem .8rem}
#tuttirow button.mark{width:auto;padding:.6rem 1rem;font-size:1rem}
.flash .feedback{text-align:left;background:var(--panna);border-radius:12px;padding:.7rem .9rem;margin:.6rem 0;font-weight:800}
.flash .feedback:empty{display:none}
.flash .card:has(input.miss) .feedback{background:var(--pomodoro-tint);color:var(--pomodoro-text)}
.flash .toast{position:absolute;left:0;right:0;bottom:0;background:var(--basilico);color:#fff;font-weight:900;font-size:1.05rem;padding:.7rem 1rem;
  transform:translateY(100%);opacity:0;transition:transform .18s,opacity .18s;z-index:2}
.flash .toast.on{transform:none;opacity:1}
.flash .choices{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin:.6rem 0}
.flash .choices:empty{display:none}
.flash .choices button{font-size:1.15rem;min-width:5.5rem}
.flash .choices.stack{flex-direction:column}
.flash .choices.stack button{width:100%;text-align:left}
.flash .choices button.right{background:var(--basilico);border-color:var(--basilico-deep);color:#fff}
.flash .choices button.wrong{background:var(--pomodoro);border-color:var(--pomodoro-deep);color:#fff}
.flash .flipback{font-size:1.4rem;font-weight:800;margin:.6rem 0;padding-top:.7rem;border-top:2px dashed var(--line)}
.flash .helpbar{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;margin:.5rem 0 0}
#fliprow{flex-direction:column;gap:.6rem}
.bigbtn{width:100%;font-size:1.1rem;padding:.8rem 1rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.flash .hints{text-align:left;white-space:pre-line;background:var(--limone-tint);border-radius:12px;padding:.6rem .9rem;margin:.6rem 0;font-weight:700}
.flash .hints div+div{margin-top:.3rem}
.flash .why{text-align:left;white-space:pre-line;background:var(--mare-tint);border-radius:12px;padding:.6rem .9rem;margin:.6rem 0;font-weight:700}
.flash .why b{font-weight:900;color:var(--mare-text);margin-right:.35rem}
.flash .reveal{border-top:2px solid var(--line);margin-top:.9rem;padding-top:.8rem;text-align:left}
.flash .answer{font-size:1.5rem;font-weight:900;line-height:1.2}
.flash .meaning{color:var(--muted)}
.flash .hook{margin:.4rem 0;font-weight:600}
.flash .hook b{color:var(--mare)}
.flash .example{font-style:italic;color:var(--muted);margin:.3rem 0}
.flash .actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:.8rem}
.flash .actions .next{margin-left:auto}
.flash .actions .gap.on{background:var(--limone);border-color:var(--limone-deep);color:#1b2a3a}
.flash .focustag{position:absolute;top:.6rem;left:.6rem;background:var(--limone);color:#1b2a3a;font-size:.7rem;font-weight:900;border-radius:999px;padding:.15rem .55rem}
.flash .stats{color:var(--muted);font-size:.9rem;font-weight:700;text-align:center;margin:.4rem 0}
.flash .stattab{width:100%;border-collapse:collapse;font-size:.9rem}
.flash .stattab th,.flash .stattab td{text-align:left;padding:.35rem .3rem;border-bottom:1.5px solid var(--line)}
.flash .stattab tr.focus td{background:var(--limone-tint)}
#tuttibox{text-align:left}
#tuttibox textarea{margin:.4rem 0}

/* ---- Symfony port additions (account link in the tab bar, login/account pages) ---- */
nav.tabs a.tab{min-width:0;flex:1 1 0}
nav.tabs a.tab.who.active{color:var(--mare)}
nav.tabs a.tab span{max-width:100%;padding:0 .25rem;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feedback.page{background:var(--basilico-tint);color:var(--basilico-text);border-radius:12px;padding:.7rem .9rem;margin:.2rem 0 .8rem;font-weight:800}
.feedback.page.err{background:var(--pomodoro-tint);color:var(--pomodoro-text)}
.flash .feedback.err{background:var(--pomodoro-tint);color:var(--pomodoro-text)}
.flash .feedback.ok{background:var(--basilico-tint);color:var(--basilico-text)}
.flash .card.form{text-align:left}
.flash .card.form .typedrow input{text-align:left;font-size:1.05rem}
.flash .card.form .typedrow input:disabled{color:var(--muted);background:var(--panna)}
.flash .card.form .glabel{margin:.7rem 0 .25rem}
.flash .card.form .note{margin:.8rem 0 0}
.flash .card.form .hp{position:absolute;left:-200vw;top:0;width:1px;height:1px;overflow:hidden}
.devlist{list-style:none;padding:0;margin:.4rem 0}
.devlist li{border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r-btn);padding:.7rem .9rem;margin:.6rem 0;
  display:flex;gap:.7rem;align-items:center;justify-content:space-between}
.devlist .dinfo{min-width:0}
.devlist .dname{display:block;font-weight:800;overflow-wrap:anywhere}
.devlist .dname .chip{display:inline-block;font-size:.7rem;padding:.1rem .5rem;margin-left:.4rem;background:var(--basilico);color:#fff;vertical-align:middle;cursor:default}
.devlist .num{display:block}
.devlist form{flex:0 0 auto;margin:0}
.devlist .btn{font-size:.85rem;padding:.45rem .8rem}

/* ==== tablet + desktop (iPad portrait 768+, landscape 1024+, laptops/desktops 1180+) ==== */
:root{--side:0px}
nav.tabs .brand{display:none}
@media (hover:hover) and (pointer:fine){
  a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
  nav.tabs a.tab:hover,ul.books a:hover,ul.story-list a:hover,.hero a:hover,.chapnav-bar a.chapnav:hover,.brand:hover{text-decoration:none}
  nav.tabs a.tab:hover{color:var(--ink)}
  nav.tabs a.tab:hover svg{background:var(--panna)}
  nav.tabs a.tab.active:hover{color:var(--mare)}
  nav.tabs a.tab.active:hover svg{background:var(--mare-tint)}
  .btn:hover,button.mark:hover,.flash .choices button:hover,.pbtn:hover{border-color:color-mix(in srgb,var(--line) 60%,var(--muted))}
  .btn.primary:hover,.flash .typedrow button.mark:hover,button.mark.next:hover,#flipbtn:hover,#timerbtn:hover,.pbtn.big:hover{background:var(--mare-deep);border-color:var(--mare-deep)}
  .btn.good:hover,button.mark.good:hover,#knowrow button:first-child:hover{background:var(--basilico-deep);border-color:var(--basilico-deep)}
  .btn.bad:hover,#knowrow button:last-child:hover{background:var(--pomodoro-deep);border-color:var(--pomodoro-deep)}
  .flash .helpbar button.mark:hover{background:var(--mare-tint);border-color:transparent}
  .chips label:hover:not(.on),.chip:hover:not(.active),.lvtab:hover:not(.on){background:color-mix(in srgb,var(--panna) 70%,var(--line))}
  ul.books a:hover,.chapnav-bar a.chapnav:hover,.devlist li:hover{border-color:color-mix(in srgb,var(--line) 50%,var(--muted))}
  ul.story-list a:hover .title{color:var(--mare)}
  .hero a:hover{filter:brightness(.97)}
  summary:hover{color:var(--mare)}
}

/* iPad portrait and up: left icon rail instead of the bottom bar, wider column */
@media (min-width:768px){
  :root{--side:5.5rem;--tabbar:0px}
  body{padding-left:var(--side)}
  main{max-width:46rem;padding:2rem 2.5rem 3rem}
  .flash .card{margin-top:1.6rem}
  .flash details.settings{margin-bottom:0}
  h1{margin-bottom:1.4rem}
  body.reading main{padding-bottom:2.5rem}
  body.has-dock main{padding-bottom:9.5rem}
  nav.tabs{top:0;bottom:0;right:auto;width:var(--side);border-top:0;border-right:2px solid var(--line);padding:0;
    overflow-y:auto;scrollbar-width:none}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs .inner{max-width:none;margin:0;flex-direction:column;align-items:stretch;height:100%;padding:.6rem 0}
  nav.tabs .brand{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.6rem 0 1rem;color:var(--ink);font-weight:900;font-size:.72rem}
  nav.tabs .brand img{width:40px;height:40px;border-radius:12px}
  nav.tabs .brand span{display:none}
  nav.tabs a.tab{flex:0 0 auto;padding:.55rem 0;font-size:.7rem}
  nav.tabs a.tab.who{margin-top:auto;padding-bottom:1rem}
  nav.tabs a.tab span{padding:0 .3rem}
  body.reading nav.tabs{display:block}
  .player{left:var(--side)}
  .player .inner{max-width:46rem;padding:0 1rem}
  #hlbar{left:calc(50% + var(--side)/2)}
  #ptr{left:calc(50% + var(--side)/2)}
  #trpop{left:calc(var(--side) + 1rem)}
  .lvtabs{margin:0;padding-left:0;padding-right:0}
  ul.books{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
  ul.books li{margin:0}
  ul.books a{height:100%}
  .flash .card.form,.login .card.form{max-width:32rem}
  .devlist,.account-actions{max-width:40rem}
  h1{font-size:1.9rem}
  body.reading h1{font-size:2.2rem}
  .story-text p{font-size:1.2rem}
  .marks button.mark{font-size:1rem}
}

/* laptops and desktops: full sidebar with labels, two-column reader and drills */
@media (min-width:1180px){
  :root{--side:15rem}
  main{max-width:50rem;padding:2.5rem 3.5rem 3.5rem}
  nav.tabs .inner{padding:1rem .9rem}
  nav.tabs .brand{flex-direction:row;justify-content:flex-start;gap:.7rem;padding:.4rem .6rem 1.4rem;font-size:1.25rem;letter-spacing:-.01em}
  nav.tabs .brand span{display:inline}
  nav.tabs a.tab{flex-direction:row;justify-content:flex-start;gap:.8rem;padding:.55rem .6rem;border-radius:14px;font-size:.98rem;font-weight:800;margin:.1rem 0}
  nav.tabs a.tab svg{padding:0;width:26px;height:26px;border-radius:0}
  nav.tabs a.tab.active{background:var(--mare-tint)}
  nav.tabs a.tab.active svg{background:transparent}
  nav.tabs a.tab:hover svg{background:transparent}
  nav.tabs a.tab span{padding:0;white-space:nowrap}
  nav.tabs a.tab.who{padding-bottom:.55rem;margin-bottom:.4rem}
  /* drills: settings column on the left, the card stays centered on the right */
  /* the card is the point of the page: it takes the width; settings are a narrow side column until the window is wide */
  .flash:has(.drill-side){display:grid;grid-template-columns:minmax(15rem,17rem) minmax(0,1fr);column-gap:3.5rem;align-items:start;margin-top:3rem}
  .drill-main{max-width:44rem}
  main:has(.drill-side) h1{margin-bottom:0}
  main:has(.drill-side){max-width:96rem}

  .drill-side{position:sticky;top:1.2rem;max-height:calc(100vh - 2.4rem);overflow-y:auto;scrollbar-width:thin;padding-right:.2rem}
  .drill-side details.settings{border-bottom:0}
  .drill-side details.settings > summary{pointer-events:none}
  .drill-side details.settings > summary::after{display:none}
  .drill-main{min-width:0;padding-top:.3rem}
  .drill-side .chips{gap:.4rem}
  .drill-side .chips label{font-size:.85rem;padding:.4rem .7rem;padding-left:.55rem}
  .drill-main .card{margin-top:0}
  .drill-side details.settings > summary{padding-top:0}
  .flash .deckhead{margin-bottom:.4rem}
  .flash .deckbar{flex-direction:column;align-items:stretch}
  .flash .deckbar label{display:block;font-size:.78rem;font-weight:800;color:var(--muted)}
  .flash .deckbar select{flex:none;width:100%}
  .flash .deckbar #dirbtn{align-self:flex-start}
  /* home: hero and progress tiles side by side */
  main:has(.hero){max-width:56rem}
  .hero a{padding:1.2rem 1.4rem 1.3rem}
}

/* 1280+: the reader gets a second column (questions, words, marks) beside the text */
@media (min-width:1280px){
  /* reader: text left, questions + words + marks in a sticky right column */
  body.reading main{max-width:76rem;display:grid;grid-template-columns:minmax(0,1fr) 21rem;column-gap:3rem;align-items:start}
  body.reading .read-main{min-width:0}
  body.reading .read-side{position:sticky;top:1.2rem;max-height:calc(100vh - 2.4rem);overflow-y:auto;padding-right:.2rem;scrollbar-width:thin}
  body.has-dock .read-side{max-height:calc(100vh - 9.5rem - 1.2rem)}
  .read-side details:first-child{border-top:0;margin-top:0;padding-top:0}
  .read-side .marks{grid-template-columns:1fr;gap:.5rem;margin-top:1.2rem}
  .read-side .chapnav-bar{grid-template-columns:1fr;margin-top:1rem}
  .read-side .chapnav-bar a.chapnav.nx{grid-column:1;text-align:left}
  .read-side ul.words{columns:1}
  .story-text p{font-size:1.25rem;max-width:36em}
  .player{right:0}
  .player .inner{max-width:76rem;padding:0 2.5rem}
}

/* 1440+: room for a wider settings column and a gap that scales with the window */
@media (min-width:1440px){
  .flash:has(.drill-side){grid-template-columns:minmax(20rem,26rem) minmax(0,44rem);column-gap:clamp(5rem,9vw,12rem)}
  .drill-side .chips{gap:.45rem}
  .drill-side .chips label{font-size:.9rem;padding:.45rem .85rem;padding-left:.6rem}
}

/* wide desktops: a little more air, text never wider than a comfortable measure */
@media (min-width:1600px){
  body{font-size:18px}
  main{padding:2.5rem 3rem 3rem}
  body.reading main{column-gap:4rem;max-width:80rem}
}

/* ---- Coniuga: verb lookup sheet ---- */
.search{position:relative;margin:.2rem 0 .8rem}
.search .glabel{display:block;font-size:.78rem;font-weight:800;color:var(--muted);margin:.3rem 0 .2rem}
.search input{width:100%;font:inherit;font-size:1.15rem;font-weight:700;padding:.75rem 1rem;border:2px solid var(--line);border-bottom-width:4px;
  border-radius:var(--r-btn);background:var(--panna);color:var(--ink);-webkit-appearance:none;appearance:none}
.search input:focus{border-color:var(--mare);background:var(--paper)}
.search #qcount{margin:.35rem 0 0;min-height:1.1rem}
.azbar{display:flex;flex-wrap:wrap;gap:.25rem;margin:.2rem 0 1rem}
.azbar a{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;border-radius:10px;background:var(--panna);color:var(--ink);font-weight:900;font-size:.85rem}
.azbar a:hover{background:var(--mare-tint);text-decoration:none}
.azsec{margin:0 0 1.1rem;scroll-margin-top:1rem}
.azsec h3{font-size:1.1rem;font-weight:900;margin:0 0 .4rem;padding:.2rem 0;border-bottom:2px solid var(--line);display:flex;align-items:baseline;gap:.5rem}
.azsec h3 .num{font-size:.78rem}
.vindex{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:.15rem .9rem}
.vindex a{display:flex;align-items:baseline;gap:.45rem;padding:.3rem .5rem;border-radius:10px;color:var(--ink);min-width:0}
.vindex a b{font-weight:800;white-space:nowrap}
.vindex a span{color:var(--muted);font-size:.82rem;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vindex a.irr b::after,.vlegend i{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--limone);box-shadow:0 0 0 1.5px var(--limone-text);margin-left:.4rem;vertical-align:middle}
.vlegend{display:flex;align-items:center;gap:.45rem;margin:0 0 .7rem;color:var(--muted);font-size:.85rem;font-weight:700}
.vlegend i{margin:0 .1rem 0 .15rem}
.vindex a:hover{background:var(--panna);text-decoration:none}
.lookup .backrow{margin:0 0 .5rem}
.flash .card.vhead{text-align:left;padding:1.2rem 1.2rem 1rem;margin-top:.4rem}
.vhead .prompt{text-align:left}
.vhead .sub{text-align:left;margin:.1rem 0 .6rem}
.vhead .tags{display:flex;flex-wrap:wrap;gap:.4rem}
.vhead .tags .chip{cursor:default;font-size:.8rem;padding:.3rem .7rem}
.chip.irrchip{background:var(--limone-tint);color:var(--limone-text)}
.chip.okchip{background:var(--basilico-tint);color:var(--basilico-text)}
.vhead .vlinks{margin:.9rem 0 0;font-size:.9rem}
.vhead #empty{margin:0}
.sheet{display:grid;grid-template-columns:1fr;gap:1.1rem 1.6rem;margin-top:1rem}
.tbox{border:2px solid var(--line);border-bottom-width:4px;border-radius:var(--r-btn);overflow:hidden;background:var(--paper)}
.tbox h3{margin:0;font-size:1rem;font-weight:900;padding:.55rem .8rem;background:var(--panna);display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.tbox h3 .chip{font-size:.7rem;padding:.15rem .55rem;cursor:default}
.conj{width:100%;border-collapse:collapse;font-size:.98rem}
.conj th{text-align:left;color:var(--muted);font-weight:800;width:5.6rem;padding:.38rem .8rem;vertical-align:top}
.conj td{padding:.38rem .8rem .38rem .2rem;font-weight:700;overflow-wrap:anywhere}
.conj tr+tr th,.conj tr+tr td{border-top:1.5px solid var(--line)}
.conj .alt{color:var(--muted);font-weight:600}
.conj td.none{color:var(--muted);font-weight:600;padding:.6rem .8rem}
@media (min-width:768px){
  .sheet{grid-template-columns:1fr 1fr}
}
@media (min-width:1180px){
  body.lookup .drill-main{max-width:62rem}
  .drill-side .search{margin-top:.1rem}
}
@media (min-width:1600px){
  .sheet{grid-template-columns:1fr 1fr 1fr}
}