:root{
  --accent:#38bdf8;
  --text-main:#e5e7eb;
  --text-muted:#9ca3af;
  --font-main:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --shadow-soft:0 18px 40px rgba(0,0,0,.55);
  --page-max: 960px;
  --page-pad-x: 1.25rem;
  --header-offset: 0px;


  --hm-cell: 12px;
  --hm-gap: 3px;
  --hm-border: rgba(34,197,94,.88);
  --hm-fill: rgba(34,197,94,.55);
}

html {
  scrollbar-width: thin;
  scrollbar-color: rgba(148,163,184,.35) rgba(2,6,23,.85);
}

/* Chrome / Edge / Safari */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
*::-webkit-scrollbar-track {
  background: rgba(2,6,23,.85);
}
*::-webkit-scrollbar-thumb {
  background: rgba(148,163,184,.25);
  border-radius: 999px;
  border: 2px solid rgba(2,6,23,.85);
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(56,189,248,.35); /* accent-y hover */
}

*{box-sizing:border-box}

/* Honor the HTML 'hidden' attribute everywhere (prevents CSS display rules from overriding it) */
[hidden]{display:none !important;}

html,body{max-width:100%;overflow-x:hidden}
body{
  margin:0;padding:0;
  font-family:var(--font-main);
  background:radial-gradient(circle at top,#1e293b 0%,#020617 55%,#000 100%);
  color:var(--text-main);
  min-height:100vh;
}
.page{max-width:var(--page-max);margin:0 auto;padding:calc(1.5rem + var(--header-offset)) var(--page-pad-x) 3rem}

/* Header */
.header-bar{
  position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:20;
  width:min(calc(var(--page-max) + (2 * var(--page-pad-x))), 100%);
  margin:0;
  padding:.9rem var(--page-pad-x) .8rem;
  border-radius:0 0 1.35rem 1.35rem;
  border-left:1px solid rgba(148,163,184,.16);
  border-right:1px solid rgba(148,163,184,.16);
  background:linear-gradient(180deg, rgba(15,23,42,.92) 0%, rgba(2,6,23,.88) 100%);
  backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(148,163,184,.25);
  box-shadow:0 12px 30px rgba(0,0,0,.7);
  display:flex;flex-direction:column;gap:.7rem;
}
.header-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.header-title{display:flex;align-items:baseline;gap:.4rem}
.header-title-main{font-size:1.25rem;font-weight:650;letter-spacing:.03em;text-transform:uppercase}
.header-title-pill{
  font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;
  padding:.1rem .7rem;border-radius:999px;
  border:1px solid rgba(56,189,248,.7);
  color:#7dd3fc;
  background:radial-gradient(circle at top,rgba(56,189,248,.18),transparent 60%);
}
.date-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.4rem}
.chip-btn{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.65);
  background:radial-gradient(circle at top,#1d283a 0%,#020617 65%);
  color:var(--text-main);
  font-size:.72rem;
  padding:.25rem .8rem;
  cursor:pointer;
  display:inline-flex;align-items:center;gap:.25rem;
  transition:all .15s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.chip-btn.primary{border-color:var(--accent);color:#e0f2fe}
.chip-btn.active{border-color:var(--accent);color:#ffffff;background:radial-gradient(circle at top,rgba(56,189,248,.22),transparent 65%)}
.chip-btn.icon-only{padding-inline:.4rem;width:1.8rem;justify-content:center}
.chip-btn:hover{
  border-color:var(--accent);
  background:radial-gradient(circle at top,#0f172a 0%,#020617 65%);
  transform:translateY(-.5px);
}
.chip-btn:disabled{
  opacity:.35;
  cursor:not-allowed;
  transform:none;
}
.chip-btn:disabled:hover{
  border-color:rgba(148,163,184,.65);
  background:radial-gradient(circle at top,#1d283a 0%,#020617 65%);
  transform:none;
}

.hidden-date-input{position:absolute;opacity:0;pointer-events:none;width:0;height:0}
.settings-gear-btn{
  border-radius:999px;border:1px solid rgba(148,163,184,.65);
  background:radial-gradient(circle at top,#1d283a 0%,#020617 65%);
  color:var(--text-main);font-size:.9rem;
  padding:.25rem .6rem;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:all .15s ease;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
}
.settings-gear-btn:hover{
  border-color:var(--accent);
  background:radial-gradient(circle at top,#0f172a 0%,#020617 65%);
  transform:translateY(-.5px);
}

/* Filters */
.level-filter-row{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.1rem;user-select:none;align-items:center}
.level-filter-spacer{flex:1 1 auto}
.level-filter-btn{
  border-radius:999px;border:1px solid transparent;
  padding:.18rem .7rem;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.12em;
  cursor:pointer;color:#0f172a;
  font-weight:600;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.level-filter-btn.ALL{background:linear-gradient(135deg,#e5e7eb,#9ca3af)}
.level-filter-btn.N5{background:linear-gradient(135deg,#bbf7d0,#22c55e)}
.level-filter-btn.N4{background:linear-gradient(135deg,#bfdbfe,#3b82f6)}
.level-filter-btn.N3{background:linear-gradient(135deg,#fed7aa,#f97316)}
.level-filter-btn.N2{background:linear-gradient(135deg,#fecaca,#ef4444)}
.level-filter-btn.N1{background:linear-gradient(135deg,#e9d5ff,#a855f7)}
.level-filter-btn:not(.active){
  background:transparent !important;
  color:var(--text-main);
  border-color:rgba(148,163,184,.8);
  opacity:.6;
  transform:scale(.95);
}
.level-filter-btn.active{
  box-shadow:0 0 0 1px rgba(15,23,42,.7),0 0 20px rgba(0,0,0,.45);
  transform:translateY(-1px) scale(1.05);
  border-color:rgba(15,23,42,.9);
  opacity:1;
}

/* Panel */
.panel{
  background:radial-gradient(circle at top left,rgba(15,23,42,.9) 0%,rgba(15,23,42,.96) 40%,#020617 100%);
  border-radius:1.25rem;
  padding:1.1rem 1.4rem 1.4rem;
  box-shadow:var(--shadow-soft);
  border:1px solid rgba(15,23,42,.95);
  overflow:hidden;
}
.meta-row{
  display:flex;flex-wrap:wrap;justify-content:space-between;
  gap:.5rem;font-size:.75rem;color:var(--text-muted);margin-bottom:.8rem;
}
.meta-label{text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;color:#9ca3af}
.meta-value{color:#e5e7eb}
.empty-note{margin-top:1rem;font-size:.9rem;color:#f97316;text-align:center;padding:2.5rem}

/* Level sections */
.level-section{
  margin-bottom:1.2rem;border-radius:.9rem;overflow:hidden;
  background:rgba(30,41,59,.8);
  border:1px solid rgba(148,163,184,.3);
}
.level-N5{border-color:rgba(34,197,94,.6)}
.level-N4{border-color:rgba(59,130,246,.6)}
.level-N3{border-color:rgba(249,115,22,.7)}
.level-N2{border-color:rgba(239,68,68,.7)}
.level-N1{border-color:rgba(168,85,247,.7)}
.level-heading{
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;padding:.9rem 1.2rem;
  background:linear-gradient(90deg,rgba(15,23,42,.95),rgba(30,41,59,.8));
  border:none;font-size:.9rem;color:var(--text-main);font-weight:700;
  gap:1rem;transition:background .3s ease;
}
.level-heading:hover{background:linear-gradient(90deg,rgba(25,40,65,1),rgba(35,47,70,.9))}
.level-left{display:flex;align-items:center;gap:.6rem}
.level-pill{
  width:1.6rem;height:1.6rem;border-radius:999px;
  border:2px solid rgba(15,23,42,.9);
  box-shadow:0 0 0 1px rgba(15,23,42,.8);
  flex-shrink:0;
}
.level-N5 .level-pill{background:linear-gradient(135deg,#bbf7d0,#22c55e)}
.level-N4 .level-pill{background:linear-gradient(135deg,#bfdbfe,#3b82f6)}
.level-N3 .level-pill{background:linear-gradient(135deg,#fed7aa,#f97316)}
.level-N2 .level-pill{background:linear-gradient(135deg,#fecaca,#ef4444)}
.level-N1 .level-pill{background:linear-gradient(135deg,#e9d5ff,#a855f7)}
.level-title{letter-spacing:.08em;text-transform:uppercase}
.level-body{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .2s ease;
  padding:0 1.2rem;
}
.level-body.expanded{max-height:200000px;padding:1rem 1.2rem 1.2rem}

/* Grammar cards */
.grammar-item{
  border-radius:.75rem;
  padding:.95rem 1rem;
  margin-bottom:.75rem;
  background:linear-gradient(135deg,rgba(20,24,36,.9),rgba(15,23,42,.95));
  border:1px solid rgba(30,64,175,.4);
  transition:all .2s ease;
  box-shadow:0 2px 8px rgba(0,0,0,.2);
  position:relative;
}
.grammar-item:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(56,189,248,.3);
  border-color:rgba(56,189,248,.6);
}
.grammar-main-area{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.grammar-info{flex:1;display:flex;flex-direction:column;gap:.2rem;min-width:0}
.grammar-main{
  font-weight:800;font-size:1.08rem;
  display:flex;align-items:center;gap:.4rem;
  line-height:1.35;
  white-space:normal;overflow:visible;text-overflow:unset;
  overflow-wrap:anywhere;word-break:break-word;
}
.grammar-main a{color:inherit;text-decoration:none}
.grammar-main a:hover{color:inherit;text-decoration:underline}
.extra-link{
  width:1rem;height:1rem;display:inline-flex;align-items:center;justify-content:center;
  color:var(--accent);opacity:.8;flex-shrink:0;text-decoration:none;
}
.extra-link:hover{opacity:1}
.grammar-meaning{
  font-size:1.02rem;color:#e5e7eb;line-height:1.5;
  white-space:normal;overflow:visible;text-overflow:unset;
  overflow-wrap:anywhere;word-break:break-word;
}
.grammar-right-controls{display:flex;align-items:center;gap:.45rem;flex-shrink:0;user-select:none}

/* Score UI */
body.no-scores .score-wrap{display:none !important;}
.score-wrap{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:0;border:none;background:transparent;border-radius:999px;line-height:1;
}
.score-emoji{
  font-size:1.05rem;cursor:pointer;user-select:none;
  display:inline-flex;align-items:center;justify-content:center;
  width:1.3rem;height:1.3rem;-webkit-tap-highlight-color: transparent;
}
.score-arrow{
  display:none;border:none;background:transparent;
  color:rgba(148,163,184,.85);
  font-size:1.05rem;cursor:pointer;padding:.05rem .15rem;
  line-height:1;user-select:none;opacity:.9;-webkit-tap-highlight-color: transparent;
}
.score-wrap.editing{padding:.14rem .35rem;border:1px solid rgba(148,163,184,.4);background:rgba(2,6,23,.35)}
.score-wrap.editing .score-arrow{display:inline-flex}
.score-arrow:disabled{opacity:.25;cursor:default}
.score-arrow:not(:disabled):hover{color:var(--accent)}

.star-toggle{
  cursor:pointer;font-size:1.25rem;color:#4b5563;
  transition:color .15s ease,transform .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.star-toggle:hover{transform:scale(1.1);color:#facc15}
.star-toggle.seen{color:#facc15;text-shadow:0 0 8px rgba(250,204,21,.6)}
.srs-add-btn{
  cursor:pointer;
  font-size:1.05rem;
  width:1.7rem;
  height:1.7rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(248,250,252,.86);
  background:radial-gradient(circle at 30% 20%,rgba(248,250,252,.22),rgba(15,23,42,.96));
  box-shadow:0 0 0 1px rgba(15,23,42,.9);
  transition:transform .15s ease,box-shadow .15s ease,background .2s ease,color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.srs-add-btn:hover{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 10px 24px rgba(56,189,248,.5);
  background:radial-gradient(circle at 30% 20%,rgba(56,189,248,.5),rgba(15,23,42,.98));
  color:#f9fafb;
}


/* LEVEL-COLOURED TITLES */
.level-N5 .grammar-main, .level-N5 .grammar-main a,
.level-N5 .viewall-item-title, .level-N5 .viewall-item-title a { color:#22c55e; }
.level-N4 .grammar-main, .level-N4 .grammar-main a,
.level-N4 .viewall-item-title, .level-N4 .viewall-item-title a { color:#3b82f6; }
.level-N3 .grammar-main, .level-N3 .grammar-main a,
.level-N3 .viewall-item-title, .level-N3 .viewall-item-title a { color:#f97316; }
.level-N2 .grammar-main, .level-N2 .grammar-main a,
.level-N2 .viewall-item-title, .level-N2 .viewall-item-title a { color:#ef4444; }
.level-N1 .grammar-main, .level-N1 .grammar-main a,
.level-N1 .viewall-item-title, .level-N1 .viewall-item-title a { color:#a855f7; }

/* Notes */
.notes-section{
  margin-top:.7rem;padding-top:.6rem;
  border-top:1px dashed rgba(148,163,184,.4);
  cursor:default;
}
.notes-list{display:flex;flex-direction:column;gap:.15rem}
.note-row{
  padding:.35rem .25rem;border-top:1px dashed rgba(148,163,184,.35);
  display:grid;grid-template-columns:1fr 1fr;gap:.45rem;align-items:start;position:relative;
}
.note-row:first-child{border-top:none}
.note-field{
  width:100%;
  border:1px solid rgba(148,163,184,.45);
  border-radius:.45rem;
  background:rgba(15,23,42,.82);
  color:#f8fafc;
  font-size:.9rem;
  padding:.3rem .45rem;
  line-height:1.35;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  outline:none;
  min-height:1.65em;
}
.note-field[contenteditable="false"]{
  background:transparent;border-color:transparent;color:#e2e8f0;
  padding:.15rem 0;border-radius:0;
}
.note-field[contenteditable="true"]:empty:before{
  content:attr(data-placeholder);
  color:rgba(148,163,184,.68);
}
.notes-section.en-hidden .note-field.note-en{visibility:hidden;pointer-events:none}
.notes-footer{
  display:flex;align-items:center;justify-content:flex-start;
  gap:.35rem;margin-top:.35rem;padding-left:.15rem;flex-wrap:wrap;
}
.notes-icon-btn{
  border:none;background:transparent;cursor:pointer;
  color:rgba(148,163,184,.9);
  font-size:1.05rem;padding:.05rem .25rem;
  transition:color .2s ease, transform .15s ease;
  user-select:none;-webkit-tap-highlight-color: transparent;
}
.notes-icon-btn:hover{color:var(--accent);transform:translateY(-.5px)}
.notes-icon-btn.active{color:#3b82f6;font-weight:700}
.notes-en-toggle{font-weight:800;letter-spacing:.06em;font-size:.85rem}
.notes-en-toggle.showing{color:#3b82f6}
.notes-en-toggle:not(.showing){color:rgba(148,163,184,.75)}
.notes-add-btn{
  border-radius:999px;border:1px solid rgba(148,163,184,.65);
  background:rgba(15,23,42,.9);
  color:var(--text-main);
  font-size:.72rem;padding:.15rem .55rem;
  cursor:pointer;display:inline-flex;align-items:center;gap:.25rem;
  user-select:none;-webkit-tap-highlight-color: transparent;
}
.note-delete-btn{
  position:absolute;right:.2rem;top:.2rem;
  font-size:1rem;color:#ef4444;cursor:pointer;user-select:none;
  padding:.05rem .35rem;-webkit-tap-highlight-color: transparent;
}
.note-delete-btn:hover{color:#f87171}
.notes-empty-hint{padding:.35rem .25rem;color:rgba(148,163,184,.9);font-size:.85rem}

/* Notes import modal textarea */
.notes-import-textarea{
  width:100%;
  min-height:180px;
  max-height:45vh;
  resize:vertical;
  padding:.55rem .6rem;
  border-radius:.6rem;
  background:#0f172a;
  border:1px solid rgba(148,163,184,.4);
  color:#e5e7eb;
  outline:none;
  margin-top:.6rem;
  line-height:1.35;
}

/* Modals */
.modal-backdrop{
  position:fixed;inset:0;
  background:rgba(15,23,42,.75);
  display:flex;
  align-items:center;justify-content:center;
  /* Must sit above fixed overlays like CRAM/SRS sessions (z-index ~60). */
  z-index:200;
  padding:1rem;
}
.modal-backdrop[hidden]{display:none}
.modal{
  background:#020617;
  border-radius:.9rem;
  border:1px solid rgba(148,163,184,.5);
  padding:1rem 1.2rem 1rem;
  max-width:420px;width:100%;
  box-shadow:0 18px 40px rgba(0,0,0,.8);
  color:var(--text-main);
  font-size:.9rem;

  /* IMPORTANT: scroll if too tall */
  max-height:85vh;
  overflow:auto;
}
.modal-wide{max-width:820px}

/* SRS Overview (Stats) modal: give it more room for the heatmap chips */
#srsStatsBackdrop .modal{
  max-width:920px;
}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;gap:.8rem;flex-wrap:wrap}
.modal-title{font-weight:600;font-size:.95rem}
.modal-close-btn{border:none;background:transparent;color:var(--text-muted);cursor:pointer;font-size:1.1rem}
.modal-body{margin-top:.5rem}
.modal-actions{display:flex;gap:.5rem;margin-top:.8rem;flex-wrap:wrap}
.modal-btn{
  border-radius:.5rem;border:1px solid rgba(148,163,184,.65);
  background:rgba(15,23,42,.95);
  color:var(--text-main);
  font-size:.8rem;padding:.3rem .6rem;cursor:pointer;
  display:inline-flex;align-items:center;gap:.3rem;
  user-select:none;-webkit-tap-highlight-color: transparent;
}
.modal-btn.primary{border-color:var(--accent);color:#e0f2fe}
.modal-btn.danger{
  border-color:rgba(239,68,68,.85);
  color:rgba(254,226,226,.98);
}
.modal-btn.danger:hover{filter:brightness(1.08)}

.data-select-grid{
  display:flex;
  flex-direction:column;
  gap:.1rem;
  margin-top:.35rem;
}
.data-mode-row{
  display:flex;
  flex-direction:column;
  gap:.1rem;
}
.modal-hint{font-size:.75rem;color:rgba(148,163,184,.92);margin-top:.5rem;line-height:1.35}
.settings-section-title{
  margin-top:.9rem;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.12em;
  color:rgba(148,163,184,.9);
}
.settings-row{display:flex;align-items:center;gap:.55rem;margin-top:.6rem;user-select:none}
.settings-row input{transform:translateY(1px)}


/* Progress stats modal */
.progress-modal{max-width:860px}
.progress-stats-content{display:flex;flex-direction:column;gap:.9rem;margin-top:.2rem}
.progress-level-row{
  border-radius:.85rem;
  border:1px solid rgba(148,163,184,.28);
  background:linear-gradient(135deg,rgba(20,24,36,.9),rgba(15,23,42,.95));
  padding:.85rem .9rem;
  box-shadow:0 2px 10px rgba(0,0,0,.25);
}
.progress-level-head{
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  margin-bottom:.55rem;
}
.progress-level-title{
  font-weight:750;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:.92rem;
}
.progress-level-count{color:rgba(148,163,184,.95);font-size:.8rem}
.progress-level-pct{margin-left:auto;font-weight:700;font-size:.88rem}
.progress-bar{
  height:.75rem;
  border-radius:999px;
  background:rgba(2,6,23,.85);
  border:1px solid rgba(148,163,184,.28);
  overflow:hidden;
}
.progress-bar-fill{
  height:100%;
  width:0%;
  border-radius:999px;
  transition:width .35s cubic-bezier(.4,0,.2,1);
}
.progress-meta{
  margin-top:.55rem;
  font-size:.78rem;
  color:rgba(148,163,184,.95);
  line-height:1.35;
  display:flex;
  flex-direction:column;
  gap:.15rem;
}
.progress-bar-fill.N5{background:linear-gradient(135deg,#bbf7d0,#22c55e)}
.progress-bar-fill.N4{background:linear-gradient(135deg,#bfdbfe,#3b82f6)}
.progress-bar-fill.N3{background:linear-gradient(135deg,#fed7aa,#f97316)}
.progress-bar-fill.N2{background:linear-gradient(135deg,#fecaca,#ef4444)}
.progress-bar-fill.N1{background:linear-gradient(135deg,#e9d5ff,#a855f7)}

/* View All */
.viewall-title-row{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.viewall-filters{display:flex;align-items:center;gap:.35rem}
.viewall-filter-label{
  font-size:.78rem;color:rgba(148,163,184,.95);
  letter-spacing:.06em;text-transform:uppercase;
}
.viewall-starfilter-btn{
  border:none;background:transparent;cursor:pointer;
  font-size:1rem;color:rgba(148,163,184,.85);
  padding:.05rem .15rem .2rem;line-height:1;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
  user-select:none;-webkit-tap-highlight-color: transparent;
}
.viewall-srsfilter-btn{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase}
.viewall-starfilter-btn:hover{color:#facc15}
.viewall-starfilter-btn.active{border-bottom-color:#22c55e;color:#facc15}
.viewall-search{
  width:100%;
  padding:.45rem .6rem;
  border-radius:.5rem;
  background:#0f172a;
  border:1px solid rgba(148,163,184,.4);
  color:#e5e7eb;
  margin:.25rem 0 .9rem;
  outline:none;
}
.viewall-search::placeholder{color:rgba(148,163,184,.7)}
.viewall-level-heading{
  display:flex;align-items:center;gap:.6rem;
  padding:.65rem .9rem;
  background:linear-gradient(90deg,rgba(15,23,42,.95),rgba(30,41,59,.8));
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.viewall-level-body{
  max-height:0;overflow:hidden;
  transition:max-height .4s cubic-bezier(.4,0,.2,1),padding .2s ease;
  padding:0 .9rem;
}
.viewall-level-body.expanded{max-height:200000px;padding:.8rem .9rem .95rem}
.viewall-item{
  padding:.55rem .55rem;
  border-radius:.6rem;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.35);
  margin-bottom:.5rem;
}
.viewall-item:hover{border-color:rgba(56,189,248,.35);background:rgba(2,6,23,.5)}
.viewall-item-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  cursor:pointer;-webkit-tap-highlight-color: transparent;
}

.viewall-item-body{
  max-height:0;overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1),padding .2s ease;
  padding:0 .25rem;
}
.viewall-item-body.expanded{max-height:200000px;padding:.45rem .25rem .1rem}
.viewall-item-title{font-weight:900;font-size:.98rem;line-height:1.35;overflow-wrap:anywhere;word-break:break-word}
.viewall-item-title a{color:inherit;text-decoration:none}
.viewall-item-title a:hover{color:inherit;text-decoration:underline}
.viewall-item-meaning{color:rgba(148,163,184,.95);font-size:.88rem;line-height:1.4;margin-top:.15rem;overflow-wrap:anywhere;word-break:break-word}
.viewall-item-controls{display:flex;align-items:center;gap:.55rem;flex-shrink:0;user-select:none}
.viewall-toggle{font-size:1.15rem;color:rgba(255,255,255,.22)}
.viewall-toggle.open{color:rgba(255,255,255,.55)}
.viewall-noresults{
  padding:.8rem .6rem;color:rgba(148,163,184,.9);
  font-size:.9rem;text-align:center;border:1px dashed rgba(148,163,184,.35);
  border-radius:.7rem;background:rgba(2,6,23,.28);
}

/* Study Log */
.heatmap-panel{margin-top:1.15rem;padding-top:1rem;border-top:1px solid rgba(148,163,184,.2)}
.hm-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.55rem}
.hm-title{font-size:1rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;user-select:none}
.hm-grid-wrap{width:100%;overflow:hidden}
.hm-month-labels{margin:.15rem 0 .5rem;display:none;gap:var(--hm-gap);align-items:end;user-select:none;width:100%;overflow:hidden}
.hm-month-label{font-size:.7rem;color:rgba(148,163,184,.9);text-transform:uppercase;letter-spacing:.06em;opacity:.9;transform:translateY(1px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:2px}
.hm-grid{
  width:100%;
  display:grid;
  gap:var(--hm-gap);
  grid-auto-flow:column;
  grid-template-rows: repeat(7, var(--hm-cell));
  align-content:start;
  justify-content:start;
  overflow:hidden;
  padding:2px;
}
.hm-cell-btn{
  width:var(--hm-cell); height:var(--hm-cell);
  border-radius:3px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.25);
  cursor:pointer;
  padding:0;
  -webkit-tap-highlight-color: transparent;
  transition:transform .08s ease, border-color .15s ease, background .15s ease;
  position:relative; /* needed for goal overlay */
}
.hm-cell-btn:hover{transform:translateY(-.5px); border-color:rgba(56,189,248,.45)}
.hm-cell-btn.out{border-color:transparent;background:transparent;cursor:default;pointer-events:none}
.hm-cell-btn.visited{border-color:var(--hm-border);background:var(--hm-fill)}
.hm-cell-btn.today{box-shadow:0 0 0 2px rgba(56,189,248,.28)}
.hm-cell-btn.month-boundary{box-shadow: inset 3px 0 0 rgba(255,255,255,.22)}
.hm-cell-btn.month-boundary.visited{box-shadow: inset 3px 0 0 rgba(255,255,255,.35)}
.hm-year-controls{display:flex;align-items:center;justify-content:center;gap:.6rem;margin-top:.6rem;user-select:none}
.hm-year-label{
  font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:#e5e7eb;padding:.15rem .45rem;border-radius:.5rem;
  border:1px solid rgba(148,163,184,.25);background:rgba(2,6,23,.25);
  min-width:4.6rem;text-align:center;
}
.hm-stats{
  display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;
  margin-top:.7rem;padding-top:.65rem;border-top:1px dashed rgba(148,163,184,.28);
  color:rgba(148,163,184,.95);font-size:.85rem;user-select:none;
}
.hm-stat-label{text-transform:uppercase;letter-spacing:.10em;font-size:.72rem;color:rgba(148,163,184,.85);margin-right:.35rem}
.hm-stat-value{font-weight:900;color:#e5e7eb}

/* Heatmap palettes */
.hm-palette-options{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.55rem}
.hm-palette-btn{
  display:flex;align-items:center;gap:.5rem;
  border-radius:.7rem;border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.75);color:#e5e7eb;
  font-size:.82rem;padding:.35rem .55rem;cursor:pointer;
  user-select:none;-webkit-tap-highlight-color: transparent;
}
.hm-palette-btn:hover{border-color:rgba(56,189,248,.45)}
.hm-palette-btn.active{border-color:rgba(56,189,248,.65);box-shadow:0 0 0 1px rgba(56,189,248,.25)}
.hm-palette-swatch{
  width:1.1rem;height:1.1rem;border-radius:.35rem;
  border:2px solid var(--hm-border);background:var(--hm-fill);
  box-shadow:0 0 0 1px rgba(0,0,0,.35) inset;flex-shrink:0;
}

/* Goal overlay */
.hm-goal{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
.hm-goal-emoji{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;           /* IMPORTANT: clicking the box still works */
  line-height: 1;
  opacity: 1;
  transition: opacity 260ms ease; /* fade for cycling */
  will-change: opacity;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.65));
  font-size: calc(var(--hm-cell) * 0.95);
}
.hm-goal-emoji.fading{opacity:0}

/* Tooltip */
.hm-tooltip{
  position:fixed;left:0;top:0;
  transform:translate3d(0,0,0);
  padding:.35rem .5rem;border-radius:.55rem;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(2,6,23,.92);
  color:#e5e7eb;font-size:.78rem;
  pointer-events:none;opacity:0;z-index:9999;
  box-shadow:0 14px 30px rgba(0,0,0,.65);
  max-width:min(320px, 85vw);
  overflow-wrap:anywhere;
  white-space:pre-line; /* IMPORTANT: allow multi-line goals */
}
.hm-tooltip.show{opacity:1}

/* Study Log: Monthly totals modal */
.hm-monthly-wrap{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:1rem;
}
@media (max-width: 780px){
  .hm-monthly-wrap{grid-template-columns: 1fr;}
}
.hm-monthly-left{
  border:1px solid rgba(148,163,184,.22);
  border-radius:.8rem;
  background:rgba(2,6,23,.28);
  padding:.65rem .65rem;
  max-height:65vh;
  overflow:auto;
}
.hm-monthly-left-title{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:rgba(148,163,184,.9);
  margin-bottom:.45rem;
  user-select:none;
}
.hm-monthly-list{display:flex;flex-direction:column;gap:.35rem}
.hm-monthly-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.6rem;
  padding:.45rem .55rem;
  border-radius:.7rem;
  border:1px solid rgba(148,163,184,.20);
  background:rgba(15,23,42,.65);
  cursor:pointer;
  user-select:none;
}
.hm-monthly-item:hover{border-color:rgba(56,189,248,.45)}
.hm-monthly-item.active{border-color:rgba(56,189,248,.65);box-shadow:0 0 0 1px rgba(56,189,248,.18)}
.hm-monthly-item .m{font-weight:900;color:#e5e7eb;letter-spacing:.04em}
.hm-monthly-item .s{font-size:.78rem;color:rgba(148,163,184,.95);line-height:1.25}

.hm-monthly-right{
  border:1px solid rgba(148,163,184,.22);
  border-radius:.8rem;
  background:rgba(2,6,23,.18);
  padding:.75rem .75rem;
}
.hm-monthly-nav{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.hm-monthly-label{font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#e5e7eb}
.hm-monthly-summary{color:rgba(148,163,184,.95);font-size:.86rem;line-height:1.35}

.hm-monthly-chart-wrap{margin-top:.65rem;display:flex;flex-direction:column;gap:.65rem}
.hm-monthly-row{display:grid;grid-template-columns: 92px 1fr;gap:.55rem;align-items:end}
.hm-monthly-row-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:rgba(148,163,184,.88);user-select:none}
.hm-monthly-bars{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns: minmax(4px, 1fr);
  gap:2px;
  align-items:end;
  height:76px;
}
.hm-monthly-bar{
  border-radius:2px;
  background:rgba(148,163,184,.28);
  border:1px solid rgba(148,163,184,.18);
}
.hm-monthly-bar.zero{opacity:.18}

/* Study Log: Snake mini-game */
.hm-cell-btn.snake{
  outline:2px solid rgba(56,189,248,.35);
  outline-offset:-2px;
}
.hm-cell-btn.snake-head{
  outline-color:rgba(56,189,248,.92);
  box-shadow:0 0 0 2px rgba(56,189,248,.22), 0 0 18px rgba(56,189,248,.12);
}
.hm-snake-target{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  line-height:1;
  font-size: calc(var(--hm-cell) * 0.95);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.75));
}

/* Snake: dim studied days + hide goal markers while playing */
.hm-grid.snake-running .hm-cell-btn.visited{opacity:.15}
.hm-grid.snake-running .hm-cell-btn.snake{opacity:1}
.hm-grid.snake-running .hm-cell-btn.snake-target-cell{opacity:1}
.hm-grid.snake-running .hm-goal{display:none}

/* Snake: eat pop + rainbow celebration */
.hm-cell-btn.snake-eat{animation:hmSnakeEatPulse 320ms ease-out}
@keyframes hmSnakeEatPulse{
  0%{transform:scale(1); box-shadow:0 0 0 2px rgba(56,189,248,.22), 0 0 18px rgba(56,189,248,.12)}
  45%{transform:scale(1.08); box-shadow:0 0 0 3px rgba(56,189,248,.32), 0 0 26px rgba(56,189,248,.18)}
  100%{transform:scale(1); box-shadow:0 0 0 2px rgba(56,189,248,.22), 0 0 18px rgba(56,189,248,.12)}
}
.hm-snake-pop{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  line-height:1;
  font-size: calc(var(--hm-cell) * 1.05);
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.75));
  animation:hmSnakePop 520ms ease-out forwards;
}
@keyframes hmSnakePop{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.65)}
  25%{opacity:1; transform:translate(-50%,-60%) scale(1.15)}
  100%{opacity:0; transform:translate(-50%,-95%) scale(.9)}
}
.hm-cell-btn.snake.snake-rainbow{
  outline-color: hsl(var(--snake-hue-base), 90%, 62%);
  box-shadow: 0 0 0 2px hsla(var(--snake-hue-base), 90%, 62%, .18), 0 0 18px hsla(var(--snake-hue-base), 90%, 62%, .10);
  animation:hmSnakeRainbowHue .85s linear infinite;
  /* Phase shift along the body so the whole snake looks equally alive */
  animation-delay: calc(var(--snake-rainbow-phase, 0) * -0.06s);
}
.hm-cell-btn.snake-head.snake-rainbow{
  box-shadow:0 0 0 3px hsla(var(--snake-hue-base), 90%, 62%, .28), 0 0 22px hsla(var(--snake-hue-base), 90%, 62%, .18);
}
@keyframes hmSnakeRainbowHue{
  from{filter:hue-rotate(0deg)}
  to{filter:hue-rotate(360deg)}
}
.hm-snake-backdrop{
  position:fixed;
  inset:0;
  /* Must sit ABOVE the page so it can blur it, but BELOW the Study Log panel */
  z-index:80;
  pointer-events:none;
  background:radial-gradient(circle at top, rgba(2,6,23,.12), rgba(2,6,23,.52));
  backdrop-filter: blur(2px);
}
.hm-snake-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  pointer-events:none;
}

/* Fireworks-only overlay needs to capture clicks (for click-to-fire) */
.hm-snake-overlay.hm-fireworks-only{pointer-events:auto}

/* Fireworks-only mode (reused for CRAM daily goal celebrations) */
.hm-snake-overlay.hm-fireworks-only .hm-snake-score,
.hm-snake-overlay.hm-fireworks-only .hm-snake-center{
  display:none;
}

/* Snake win fireworks canvas */
.hm-snake-fireworks{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  opacity:0;
  transition:opacity 240ms ease-out;
}
.hm-snake-overlay.win .hm-snake-fireworks{opacity:1}

/* In fireworks-only mode, allow clicking the canvas to launch extra fireworks */
.hm-snake-overlay.hm-fireworks-only .hm-snake-fireworks{
  pointer-events:auto;
  cursor:crosshair;
}

/* Bottom congratulations text (fireworks-only mode) */
.hm-fireworks-congrats{
  position:fixed;
  left:50%;
  bottom:1.1rem;
  transform:translateX(-50%);
  max-width:min(880px, calc(100vw - 2rem));
  padding:.55rem .85rem;
  border-radius:1rem;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(2,6,23,.62);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  font-weight:900;
  letter-spacing:.03em;
  text-align:center;
  user-select:none;
  display:none;
  pointer-events:none;
  white-space:pre-line;
}
.hm-snake-overlay.hm-fireworks-only .hm-fireworks-congrats{display:block}

/* Keep the Study Log crisp while the snake blur backdrop is active */
body.snake-mode #heatmapPanel{
  position:relative;
  z-index:90;
}
.hm-snake-overlay .hm-snake-quit{
  position:fixed;
  z-index: 200;
  top:1rem;
  right:1rem;
  pointer-events:auto;
}

.hm-snake-score{
  position:fixed;
  pointer-events:none;
  bottom:1rem;
  right:1rem;
  font-weight:900;
  letter-spacing:.06em;
  padding:.35rem .6rem;
  border-radius:.65rem;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(2,6,23,.55);
  box-shadow:0 14px 30px rgba(0,0,0,.55);
  user-select:none;
}
.hm-snake-center{
  position:fixed;
  pointer-events:none;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  text-align:center;
  user-select:none;
}
.hm-snake-center-main{
  font-size:3.2rem;
  font-weight:1000;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-shadow:0 16px 40px rgba(0,0,0,.75);
}
.hm-snake-center-sub{
  margin-top:.35rem;
  font-size:.9rem;
  color:rgba(148,163,184,.95);
  max-width:min(520px, 88vw);
}
/* When playing, keep the center copy subtle */
.hm-snake-overlay.playing .hm-snake-center-main{
  font-size:1.15rem;
  opacity:.55;
}
.hm-snake-overlay.playing .hm-snake-center-sub{
  opacity:.75;
}

/* Progressive dates UI */
.progressive-wrap{
  margin-top:.55rem;
  padding:.65rem .65rem .2rem;
  border:1px dashed rgba(148,163,184,.25);
  border-radius:.7rem;
  background:rgba(2,6,23,.25);
}
.progressive-grid{display:flex;flex-direction:column;gap:.5rem;margin-top:.5rem}
.progressive-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.progressive-row .lvl{font-weight:900;letter-spacing:.08em;width:48px}
.progressive-row .today-mini{padding:.2rem .55rem;font-size:.72rem}
.progressive-row input[type="date"]{
  background:#0f172a;border:1px solid rgba(148,163,184,.4);
  color:#e5e7eb;border-radius:.5rem;padding:.25rem .45rem;
}

/* Goals list */
.hm-goals-list{display:flex;flex-direction:column;gap:.45rem;margin-top:.55rem}
.hm-goal-item{
  border:1px solid rgba(148,163,184,.22);
  background:rgba(2,6,23,.25);
  border-radius:.65rem;
  padding:.45rem .55rem;
  display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem;
}
.hm-goal-item .meta{display:flex;flex-direction:column;gap:.15rem}
.hm-goal-item .line1{font-weight:900}
.hm-goal-item .line2{color:rgba(148,163,184,.92);font-size:.82rem}
.hm-goal-item .actions{display:flex;gap:.35rem;flex-shrink:0}
.hm-goal-item .actions button{font-size:.75rem;padding:.25rem .45rem}
.hm-goal-editor{
  margin-top:.6rem;
  border:1px dashed rgba(148,163,184,.25);
  background:rgba(2,6,23,.25);
  border-radius:.7rem;
  padding:.6rem;
}
.hm-goal-editor .row{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.hm-goal-editor input{
  background:#0f172a;border:1px solid rgba(148,163,184,.4);
  color:#e5e7eb;border-radius:.5rem;padding:.25rem .45rem;
}
.hm-goal-editor input[type="text"]{flex:1;min-width:180px}
.hm-goal-editor input.emoji{width:70px;text-align:center}
.hm-goal-editor .btns{margin-top:.55rem;display:flex;gap:.45rem;flex-wrap:wrap}

/* CRAM */
.cram-list{display:flex;flex-direction:column;gap:.5rem;-webkit-tap-highlight-color: transparent;}
/* CRAM selection: search toolbar + collapsible filters */
.cram-list-toolbar{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:.15rem 0 .7rem;
  flex-wrap:wrap;
}
.cram-search{margin:0; flex:1;}
.cram-collapse-btn{
  width:2rem;
  padding:.22rem 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
#cramModalBackdrop.cram-top-collapsed .cram-controls{display:none;}

/* CRAM selection list rows: match main/viewall icon layout */
.cram-item-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:.75rem;
}
.cram-item-info{min-width:0;flex:1;}
.cram-item-controls{
  display:flex;
  align-items:center;
  gap:.35rem;
  flex-shrink:0;
}

.cram-item{
  border-radius:.75rem;
  padding:.65rem .7rem;
  background:rgba(2,6,23,.38);
  border:1px solid rgba(148,163,184,.18);
  cursor:pointer;
  transition:transform .12s ease,border-color .15s ease, background .15s ease;
}
.cram-item:hover{transform:translateY(-.5px);border-color:rgba(56,189,248,.35);background:rgba(2,6,23,.55)}
.cram-item.selected{border-color:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(255,255,255,.18), 0 0 12px rgba(255,255,255,.10)}
.cram-item.no-examples{opacity:.35;cursor:not-allowed}
.cram-item-title{font-weight:950;letter-spacing:.02em}
.cram-item-meaning{color:rgba(148,163,184,.95);font-size:.88rem;margin-top:.12rem}
.cram-item.level-N5 .cram-item-title{color:#22c55e}
.cram-item.level-N4 .cram-item-title{color:#3b82f6}
.cram-item.level-N3 .cram-item-title{color:#f97316}
.cram-item.level-N2 .cram-item-title{color:#ef4444}
.cram-item.level-N1 .cram-item-title{color:#a855f7}

.cram-flow{display:flex;flex-direction:column;gap:.6rem}
.cram-flow-section{padding:.55rem .65rem;border:1px solid rgba(148,163,184,.18);background:rgba(2,6,23,.35);border-radius:14px}
.cram-flow-title{font-weight:950;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem;color:rgba(226,232,240,.92)}
.cram-flow-actions{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.45rem}
.cram-filter-row-clean{margin:.35rem 0 0}
.cram-list-toolbar .modal-btn{padding:.45rem .7rem;white-space:nowrap}
.cram-filter-row{display:flex;gap:.8rem;flex-wrap:wrap;margin:.3rem 0 .7rem}
.cram-filter-group{display:flex;flex-direction:column;gap:.35rem;min-width:160px}
.cram-level-filters{display:flex;gap:.35rem;flex-wrap:wrap}
.cram-level-col{display:flex;flex-direction:column;gap:.25rem;align-items:stretch}
.cram-level-col .level-filter-btn{width:100%}
.cram-mini-btn{
  border-radius:.5rem;border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.75);
  color:var(--text-main);
  font-size:.7rem;padding:.22rem .45rem;cursor:pointer;
  opacity:.9;
}
.cram-mini-btn:hover{opacity:1}
.cram-mini-btn:disabled{opacity:.35;cursor:not-allowed}
.cram-bulk-row{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.6rem}
.cram-number{max-width:6.5rem}
.cram-stars{display:flex;gap:.35rem;flex-wrap:wrap}
.cram-score-range{display:flex;gap:.35rem;align-items:center}

/* SRS difficulty range (Cram selection)
   Uses two sliders (hard bound + easy bound) so it works consistently across browsers. */
.cram-diff-panel{margin-top:.35rem;display:flex;flex-direction:column;gap:.35rem}
.cram-diff-head{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
#cramSrsDifficultyText{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
.cram-diff-actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.cram-diff-sliders{display:flex;flex-direction:column;gap:.25rem;min-width:220px}
.cram-diff-range{width:100%}

.cram-diff-toprow{gap:.4rem}
.cram-diff-spacer{flex:1}
.cram-diff-dual{
  position:relative;
  width:100%;
  height:1.35rem;
  border-radius:999px;
  background:linear-gradient(to right,
    rgba(148,163,184,.25) 0%,
    rgba(148,163,184,.25) var(--min,0%),
    rgba(56,189,248,.35) var(--min,0%),
    rgba(56,189,248,.35) var(--max,100%),
    rgba(148,163,184,.25) var(--max,100%),
    rgba(148,163,184,.25) 100%);
  border:1px solid rgba(148,163,184,.25);
  box-sizing:border-box;
}
.cram-diff-dual input[type="range"]{
  position:absolute;left:0;top:0;
  width:100%;height:1.35rem;
  margin:0;background:transparent;
  pointer-events:none;
  -webkit-appearance:none;appearance:none;
}
.cram-diff-dual input[type="range"]::-webkit-slider-runnable-track{
  height:1.35rem;background:transparent;border:none;
}
.cram-diff-dual input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  pointer-events:auto;
  width:14px;height:14px;border-radius:999px;
  background:rgba(226,232,240,.95);
  border:2px solid rgba(2,6,23,.65);
  box-shadow:0 1px 6px rgba(0,0,0,.35);
  margin-top:calc((1.35rem - 14px)/2);
}
.cram-diff-dual input[type="range"]::-moz-range-track{
  height:1.35rem;background:transparent;border:none;
}
.cram-diff-dual input[type="range"]::-moz-range-thumb{
  pointer-events:auto;
  width:14px;height:14px;border-radius:999px;
  background:rgba(226,232,240,.95);
  border:2px solid rgba(2,6,23,.65);
  box-shadow:0 1px 6px rgba(0,0,0,.35);
}
.cram-diff-dual input[type="range"]:focus{outline:none}

.cram-diff-row{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem}
.cram-diff-row-label{opacity:.78;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.cram-diff-num{
  display:inline-block;
  width:5.5ch;
  text-align:right;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}
.cram-select{
  background:#0f172a;border:1px solid rgba(148,163,184,.4);
  color:#e5e7eb;border-radius:.5rem;padding:.25rem .45rem;
}
.cram-footer-row{margin-top:.35rem;display:block}
.cram-summary-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  flex-wrap:wrap;
  padding:.55rem .75rem;
  border-radius:.85rem;
  border:1px solid rgba(148,163,184,.30);
  background:rgba(15,23,42,.40);
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset;
}

.cram-session-title{
  width:100%;
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:rgba(148,163,184,.92);
  margin-bottom:.1rem;
}
.cram-emph-num{ color:#fff; font-weight:700; }
.cram-counts{display:flex;gap:.6rem 1rem;flex-wrap:wrap;align-items:center}

.cram-summary-actions{display:flex;align-items:flex-end;gap:.6rem;flex-wrap:wrap}

.cram-start-stack{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem}
.cram-footer-secondary{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.cram-footer-secondary-outside{margin-top:.45rem;width:100%}
.cram-examples-compact{display:flex;flex-direction:column;gap:.15rem;align-items:flex-start}
.cram-examples-compact .cram-number{max-width:5.2rem}

.cram-goal-compact{display:flex;flex-direction:column;gap:.15rem;align-items:flex-start}
.cram-goal-compact .cram-number{max-width:6.5rem}

.cram-selected-levels{white-space:nowrap}
.cram-level-sep{opacity:.55}
.cram-level-count{
  font-weight:900;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}
.cram-level-count.N5{color:#22c55e}
.cram-level-count.N4{color:#3b82f6}
.cram-level-count.N3{color:#f97316}
.cram-level-count.N2{color:#ef4444}
.cram-level-count.N1{color:#a855f7}

/* Started SRS levels mini filter buttons */
.cram-srs-levels{margin-top:.35rem}
.cram-srs-levels.disabled{opacity:.7}
.cram-level-mini{display:flex;gap:.35rem;flex-wrap:wrap}
.cram-mini-level{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.8);
  padding:.20rem .55rem;
  font-size:.78rem;
  cursor:pointer;
  background:transparent;
  color:var(--text-main);
  opacity:.65;
  transform:scale(.96);
  transition:all .18s cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
}
.cram-mini-level:hover{opacity:.85}
.cram-mini-level.active{
  opacity:1;
  transform:translateY(-1px) scale(1.04);
  border-color:rgba(15,23,42,.9);
  color:#0f172a;
  box-shadow:0 0 0 1px rgba(15,23,42,.65),0 0 18px rgba(0,0,0,.35);
}
.cram-mini-level.ALL.active{background:linear-gradient(135deg,#e5e7eb,#9ca3af)}
.cram-mini-level.N5.active{background:linear-gradient(135deg,#bbf7d0,#22c55e)}
.cram-mini-level.N4.active{background:linear-gradient(135deg,#bfdbfe,#3b82f6)}
.cram-mini-level.N3.active{background:linear-gradient(135deg,#fed7aa,#f97316)}
.cram-mini-level.N2.active{background:linear-gradient(135deg,#fecaca,#ef4444)}
.cram-mini-level.N1.active{background:linear-gradient(135deg,#e9d5ff,#a855f7)}

.cram-customlists{margin-top:.35rem;display:flex;flex-direction:column;gap:.35rem}
.cram-customlists-row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.cram-customlists-row select{min-width:14rem}
.cram-customlists-row .cram-text{min-width:14rem;flex:1}


.cram-star-btn{
  border-radius:999px;border:1px solid rgba(148,163,184,.35);
  background:rgba(2,6,23,.35);
  padding:.25rem .6rem;color:#e5e7eb;cursor:pointer;font-size:.78rem;
}
.cram-star-btn.active{border-color:rgba(56,189,248,.55);box-shadow:0 0 0 1px rgba(56,189,248,.2)}

.cram-session{
  position:fixed;inset:0;z-index:60;
  background:rgba(2,6,23,.92);
  display:flex;flex-direction:column;
  padding:1rem;
}
.cram-session-top{
  display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;
}
#cramSessionOverlay .cram-session-top{align-items:flex-start}

.cram-session-left{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  align-items:flex-start;
}
.cram-cardflow{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.cram-session-actions{display:flex;gap:.5rem;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.cram-session-stats{display:flex;gap:.75rem;flex-wrap:wrap}
.cram-session-stat{
  border:1px solid rgba(148,163,184,.25);
  background:rgba(15,23,42,.45);
  padding:.35rem .55rem;border-radius:.65rem;
  color:#e5e7eb;font-size:.85rem;font-weight:850;
}
.cram-card-wrap{
  margin-top:1rem;
  flex:1;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:.75rem;
}
.cram-card{
  width:min(720px, 92vw);
  min-height:240px;
  border-radius:1rem;
  border:1px solid rgba(148,163,184,.26);
  background:radial-gradient(circle at top left, rgba(15,23,42,.9), rgba(2,6,23,.85));
  box-shadow:0 18px 55px rgba(0,0,0,.75);
  padding:1.2rem 1.2rem 1.1rem;
  cursor:pointer;
  outline:none;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  position:relative;
}

/* Highlighted (colored) text inside CRAM + SRS cards should be slightly bold, not heavy */
.cram-card .jlptfiver-hl{
  font-weight:600 !important;
}

.card-font-controls{
  position:absolute;
  left:.7rem;
  bottom:.6rem;
  display:flex;
  gap:.25rem;
  z-index:5;
}
.card-font-btn{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.9);
  color: rgba(148,163,184,.55);
  padding:.12rem .4rem;
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
}
.card-font-btn:hover{
  background:rgba(30,64,175,.9);
  color: rgba(226,232,240,.95);
}

.card-ex-nav{
  position:absolute;
  right:.7rem;
  bottom:.6rem;
  display:flex;
  gap:.25rem;
  z-index:5;
}

.card-ex-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.9);
  color: rgba(148,163,184,.75);
  padding:.12rem .55rem;
  font-size:.8rem;
  line-height:1;
  font-variant-numeric: tabular-nums;
  min-width:3.2rem;
  text-align:center;
}
.card-ex-btn{
  border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.9);
  color: rgba(148,163,184,.75);
  padding:.12rem .55rem;
  font-size:.8rem;
  line-height:1;
  cursor:pointer;
}
.card-ex-btn:hover{
  background:rgba(30,64,175,.9);
  color: rgba(226,232,240,.95);
}

.srs-emoji-badge{
  font-size:1.1rem;
  margin-right:.25rem;
}
.cram-front{
  font-size:1.5rem;
  font-weight:500;
  line-height:1.45;
  overflow-wrap:anywhere;
  word-break:break-word;
}
/* cram preserve newlines */
.cram-front,.cram-back .jp,.cram-back .en{white-space:pre-line}

.cram-back{
  display:flex;flex-direction:column;gap:.55rem;
  align-items:center;justify-content:center;
  width:100%;
}
.cram-back .jp{font-size:1.3rem;font-weight:500;line-height:1.45;overflow-wrap:anywhere;word-break:break-word;line-break:anywhere}
.cram-back .en{font-size:1.05rem;color:rgba(229,231,235,.92);line-height:1.45;overflow-wrap:normal;word-break:normal;line-break:auto;hyphens:none}
.cram-back .gp{font-weight:950;letter-spacing:.06em;text-transform:uppercase;overflow-wrap:anywhere;word-break:break-word;line-break:anywhere}
.cram-back .desc{color:rgba(148,163,184,.95);max-width:560px;line-height:1.45;overflow-wrap:normal;word-break:normal;line-break:auto;hyphens:none}
.cram-actions{display:flex;gap:.6rem;flex-wrap:wrap;width:min(720px, 92vw)}
.cram-action{
  /* Make action buttons size consistently (front + back). */
  flex:1 1 calc(50% - .3rem);
  min-width:0;
  padding:.7rem 1rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(2,6,23,.35);
  color:#e5e7eb;
  cursor:pointer;
  font-weight:950;
  letter-spacing:.12em;
}
.cram-action.wrong{border-color:rgba(239,68,68,.55)}
.cram-action.right{border-color:rgba(34,197,94,.55)}
.cram-action.next{border-color:rgba(56,189,248,.55);flex:1 1 100%}
.cram-action.undo{border-color:rgba(148,163,184,.55);white-space:nowrap}
.cram-action:disabled{opacity:.3;cursor:not-allowed}

/* Flashcards: make the grammar-point link follow the JLPT level colour */
#cramCard .cram-back .gp a,
#cramCard .cram-back .gp a:visited,
#srsCard  .cram-back .gp a,
#srsCard  .cram-back .gp a:visited {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
}

#cramCard .cram-back .gp a:hover,
#cramCard .cram-back .gp a:focus-visible,
#srsCard  .cram-back .gp a:hover,
#srsCard  .cram-back .gp a:focus-visible {
  text-decoration: underline;
}
#cramCard .cram-back .gp.level-N5,
#srsCard  .cram-back .gp.level-N5 { color:#22c55e; }
#cramCard .cram-back .gp.level-N4,
#srsCard  .cram-back .gp.level-N4 { color:#3b82f6; }
#cramCard .cram-back .gp.level-N3,
#srsCard  .cram-back .gp.level-N3 { color:#f97316; }
#cramCard .cram-back .gp.level-N2,
#srsCard  .cram-back .gp.level-N2 { color:#ef4444; }
#cramCard .cram-back .gp.level-N1,
#srsCard  .cram-back .gp.level-N1 { color:#a855f7; }

/* Cram results (end of session) */
.cram-results{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.95rem;
}
.cram-results-head{display:flex;flex-direction:column;gap:.35rem;align-items:center}
.cram-results-title{font-size:1.35rem;font-weight:950}
.cram-results-stats{color:rgba(229,231,235,.92);font-weight:900}
.cram-results-msg{max-width:600px;color:rgba(148,163,184,.95);line-height:1.45}
.cram-results-wrong{width:100%;display:flex;flex-direction:column;gap:.55rem;align-items:stretch}
.cram-results-subtitle{font-weight:950;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.cram-wrong-list{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  max-height:260px;
  overflow:auto;
  padding:.15rem .05rem;
}
.cram-wrong-count{margin-left:.4rem;opacity:.75;font-weight:900;font-size:.85rem}
.cram-results-actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.cram-results-retry-controls{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap}
.cram-results-retry-controls .viewall-filter-label{margin:0}
.cram-results-exit{display:flex;justify-content:center}
.cram-results-perfect{text-align:center;color:rgba(148,163,184,.95)}


/* Save list controls (end of session) */
.cram-results-save{width:100%;display:flex;flex-direction:column;gap:.55rem;align-items:stretch}
.cram-results-save-row{display:flex;gap:.5rem;justify-content:center;align-items:center;flex-wrap:wrap}
.cram-results-save-row select,
.cram-results-save-row input{min-width:14rem;max-width:520px;flex:1}








@media (max-width:640px){
  .page{padding:1.15rem .9rem 2.5rem}
  .header-bar{margin:-1.15rem -.9rem 1rem;padding:.8rem .9rem .75rem}
  .panel{padding:1rem 1rem 1.1rem}
  .level-heading{padding:.85rem 1rem}
  .level-body{padding:0 1rem}
  .level-body.expanded{padding:1rem 1rem 1.1rem}
  .grammar-item{padding:.9rem .9rem}
  .note-row{grid-template-columns:1fr 1fr; gap:.4rem}
}
 @media (prefers-reduced-motion:reduce){
  *{transition:none ;animation:none } 
}


/* Keep modal headers/filters visible; only the results scroll */
#viewAllModal .modal,
#cramModalBackdrop .modal{
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
#viewAllModal #viewAllContent{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  margin-top:.6rem;
}
#cramModalBackdrop .modal-body{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  min-height:0;
}
#cramModalBackdrop #cramList{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  margin-top:.6rem;
}

.srs-add-btn.srs-added{
  box-shadow:0 0 0 1px rgba(16,185,129,.7),0 0 18px rgba(45,212,191,.7);
  background:radial-gradient(circle at 30% 20%,rgba(45,212,191,.5),rgba(15,23,42,.98));
}

.srs-options-row{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:1rem;
  margin:.6rem .1rem .35rem;
  flex-wrap:wrap;
}
.srs-left-col{
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.srs-mode-group{
  display:flex;
  flex-direction:column;
  gap:.25rem;
}
.srs-mode-buttons{
  display:flex;
  gap:.35rem;
  flex-wrap:wrap;
}
.srs-mode-btn.active{
  border-color:var(--accent);
  color:#e0f2fe;
}
.srs-count-group{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  min-width:150px;
}
.srs-count-row{
  display:flex;
  align-items:center;
  gap:.45rem;
}
.srs-all-btn{
  padding:.35rem .65rem;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.04em;
}
.srs-all-btn.active{
  border-color:var(--accent);
  color:#e0f2fe;
}
.srs-count-group.disabled{
  opacity:.4;
}

.srs-mode-group.disabled{
  opacity:.4;
}
#srsExamplesPerGrammar{
  max-width:120px;
}


/* SRS stats graph */
.srs-graph{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  width:100%;
  max-width:100%;
}

#srsStatsGraph{
  max-height:62vh;
  overflow-y:auto;
  padding-right:.25rem;
}

.srs-graph-section-title{
  margin-top:.25rem;
  margin-bottom:.1rem;
  color:var(--text-muted);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.srs-graph-row{
  display:flex;
  align-items:center;
  gap:.45rem;
  font-size:.78rem;
}
.srs-graph-label{
  width:80px;
  flex-shrink:0;
  color:var(--text-muted);
}

.srs-graph-fastforward-btn{
  font-size:.7rem;
  padding:.15rem .4rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(15,23,42,.98);
  color:var(--text-muted);
  cursor:pointer;
  white-space:nowrap;
}
.srs-graph-fastforward-btn:hover{
  border-color:rgba(59,130,246,.9);
  color:#e5e7eb;
  background:rgba(30,64,175,.9);
}

.srs-graph-track{
  flex:1;
  height:.6rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.96);
  overflow:hidden;
  position:relative;
}
.srs-graph-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(56,189,248,.7), rgba(59,130,246,.98));
  min-width:0;
}
.srs-graph-count{
  width:2.6rem;
  flex-shrink:0;
  text-align:center;
  font-size:.72rem;
  padding:.05rem .25rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.75);
  color:#e5e7eb;
  font-variant-numeric: tabular-nums;
}
.srs-graph-row.empty{
  opacity:.45;
}

/* SRS stats heatmap chips */
.srs-heatmap{
  display:grid;
  /* Keep chips wide enough that dates are readable */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:.35rem;
  margin-top:.05rem;
  margin-bottom:.25rem;
}
.srs-heatmap-chip{
  position:relative;
  border-radius:.8rem;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.75);
  padding:.35rem .4rem .35rem;
  min-height:56px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.18rem;
  user-select:none;
}
.srs-heatmap-chip .label{
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.srs-heatmap-chip .count{
  font-size:1.05rem;
  font-weight:900;
  line-height:1;
  font-variant-numeric: tabular-nums;
  color:#e5e7eb;
}
.srs-heatmap-chip .sub{
  font-size:.65rem;
  color:rgba(148,163,184,.92);
  line-height:1.1;
  min-height:.7rem;
  font-variant-numeric: tabular-nums;
}
.srs-heatmap-chip.empty{
  opacity:.45;
}
.srs-heatmap-chip.is-today{
  box-shadow:0 0 0 1px rgba(56,189,248,.12) inset;
}
.srs-heatmap-chip:hover{
  border-color:rgba(56,189,248,.55);
}
.srs-heatmap-now{
  position:absolute;
  top:.28rem;
  right:.28rem;
  font-size:.68rem;
  padding:.12rem .38rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.45);
  background:rgba(15,23,42,.98);
  color:var(--text-muted);
  cursor:pointer;
  white-space:nowrap;
}
.srs-heatmap-now:hover{
  border-color:rgba(59,130,246,.9);
  color:#e5e7eb;
  background:rgba(30,64,175,.9);
}

/* Heat intensity levels */
.srs-heatmap-chip.lv0{ background:rgba(15,23,42,.75); }
.srs-heatmap-chip.lv1{
  background:linear-gradient(180deg, rgba(56,189,248,.08), rgba(15,23,42,.76));
  border-color:rgba(56,189,248,.25);
}
.srs-heatmap-chip.lv2{
  background:linear-gradient(180deg, rgba(56,189,248,.14), rgba(15,23,42,.78));
  border-color:rgba(56,189,248,.35);
}
.srs-heatmap-chip.lv3{
  background:linear-gradient(180deg, rgba(59,130,246,.22), rgba(15,23,42,.80));
  border-color:rgba(59,130,246,.45);
}
.srs-heatmap-chip.lv4{
  background:linear-gradient(180deg, rgba(59,130,246,.32), rgba(15,23,42,.82));
  border-color:rgba(59,130,246,.60);
}

/* Weekly (later) chips */
.srs-weekmap{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:.35rem;
  margin-top:.05rem;
}
.srs-weekmap-chip{
  position:relative;
  border-radius:.8rem;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.75);
  padding:.35rem .4rem .35rem;
  min-height:54px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.18rem;
  user-select:none;
}
.srs-weekmap-chip .label{
  font-size:.68rem;
  letter-spacing:.04em;
  color:var(--text-muted);
}
.srs-weekmap-chip .count{
  font-size:1.0rem;
  font-weight:900;
  line-height:1;
  font-variant-numeric: tabular-nums;
  color:#e5e7eb;
}
.srs-weekmap-chip.empty{ opacity:.45; }
.srs-weekmap-chip:hover{ border-color:rgba(56,189,248,.55); }
.srs-weekmap-chip.lv0{ background:rgba(15,23,42,.75); }
.srs-weekmap-chip.lv1{
  background:linear-gradient(180deg, rgba(56,189,248,.08), rgba(15,23,42,.76));
  border-color:rgba(56,189,248,.25);
}
.srs-weekmap-chip.lv2{
  background:linear-gradient(180deg, rgba(56,189,248,.14), rgba(15,23,42,.78));
  border-color:rgba(56,189,248,.35);
}
.srs-weekmap-chip.lv3{
  background:linear-gradient(180deg, rgba(59,130,246,.22), rgba(15,23,42,.80));
  border-color:rgba(59,130,246,.45);
}
.srs-weekmap-chip.lv4{
  background:linear-gradient(180deg, rgba(59,130,246,.32), rgba(15,23,42,.82));
  border-color:rgba(59,130,246,.60);
}




/* SRS stats counts row */
.srs-counts-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.4rem;
}
.srs-count-pill{
  flex:1 1 120px;
  min-width:120px;
  padding:.45rem .7rem;
  border-radius:.75rem;
  border:1px solid rgba(148,163,184,.35);
  background:rgba(15,23,42,.96);
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.8rem;
}
.srs-count-pill .label{
  color:var(--text-muted);
}
.srs-count-pill .value{
  font-weight:600;
}

/* Disabled modal buttons */
.modal-btn.disabled,
.modal-btn:disabled{
  opacity:.4;
  cursor:default;
  pointer-events:none;
}



/* SRS level badge on flashcards */
#srsCard.cram-card{
  position:relative;
}
.srs-level-badge{
  position:absolute;
  top:.5rem;
  right:.75rem;
  min-width:1.4rem;
  height:1.4rem;
  border-radius:999px;
  border:1px solid rgba(148,163,184,.55);
  background:rgba(15,23,42,.96);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.8rem;
  font-weight:700;
  color:#e5e7eb;
  pointer-events:none;
}



.srs-toggle-stats{
  border:1px solid rgba(148,163,184,.22);
  border-radius:.9rem;
  padding:.75rem .85rem;
  background:rgba(2,6,23,.35);
}
.srs-toggle-stats .headline{
  font-weight:800;
  margin-bottom:.35rem;
}
.srs-toggle-stats .sub{
  color:var(--text-muted);
  font-size:.9rem;
  margin-bottom:.45rem;
}
.srs-toggle-stats .grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.4rem .8rem;
  font-size:.92rem;
}
.srs-toggle-stats .k{
  color:var(--text-muted);
}

.srs-toggle-stats .k[data-tip]{
  cursor:help;
  text-decoration: underline dotted rgba(148,163,184,.55);
  text-underline-offset: 2px;
}
.srs-toggle-stats .v{
  text-align:right;
  font-variant-numeric: tabular-nums;
}


/* Session completion quit button (below the card) */
.session-complete-quit{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin-top:.1rem;
}
.session-complete-quit-btn{
  min-width:160px;
  padding:.55rem 1rem;
}


/* CRAM selection: quick/filter section action bars */
.cram-flow-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.65rem;
  margin-top:.45rem;
  padding:.45rem .55rem;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.25);
  border-radius:14px;
}
.cram-flow-secondary{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  align-items:center;
  margin-top:.45rem;
}
.cram-pick-preview{
  display:flex;
  gap:.55rem;
  flex-wrap:wrap;
  align-items:center;
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
  opacity:.95;
}
.cram-pick-preview .cram-preview-main{
  font-weight:950;
  color:rgba(226,232,240,.94);
}
.cram-pick-label{
  color:rgba(148,163,184,.92);
  font-size:.86rem;
}
.cram-pick-breakdown{
  display:inline-flex;
  gap:.0rem;
  align-items:center;
  flex-wrap:wrap;
}
.cram-pick-preview .cram-emph-num{
  font-weight:700;
}

.cram-flow-bar-filter{ margin-top:.65rem; }

/* Make the total selected section + Start stand out slightly more */
.cram-summary-box .modal-hint{ font-size:.88rem; }
#cramStartBtn{ font-size:1.05rem; padding:.55rem 1.05rem; }

/* ------------------------------
   Header easter egg: JLPT Invaders
   (Long-press N5..N1 for 5s)
-------------------------------- */
body.invaders-mode{ overflow:hidden; }

.level-filter-btn.invaders-holding{
  outline:2px solid rgba(56,189,248,.85);
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(56,189,248,.18), 0 18px 45px rgba(0,0,0,.55);
}

.invaders-backdrop{
  position:fixed;
  inset:0;
  z-index:220;
  pointer-events:none;
  background:radial-gradient(circle at top, rgba(2,6,23,.10), rgba(2,6,23,.72));
  backdrop-filter: blur(3px);
}
.invaders-overlay{
  position:fixed;
  inset:0;
  z-index:240;
  pointer-events:none;
}
.invaders-overlay .invaders-canvas{
  position:fixed;
  inset:0;
}
.invaders-overlay .invaders-quit{
  position:fixed;
  top:1rem;
  right:1rem;
  pointer-events:auto;
}
.invaders-lives,
.invaders-score{
  position:fixed;
  pointer-events:none;
  font-weight:950;
  letter-spacing:.06em;
  padding:.35rem .6rem;
  border-radius:.65rem;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(2,6,23,.55);
  box-shadow:0 14px 30px rgba(0,0,0,.55);
  user-select:none;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.invaders-lives{ top:1rem; left:1rem; }
.invaders-score{ bottom:1rem; right:1rem; }

.invaders-center{
  position:fixed;
  left:50%;
  top:1rem;
  transform:translateX(-50%);
  pointer-events:none;
  padding:.35rem .65rem;
  border-radius:.75rem;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(2,6,23,.42);
  color:rgba(226,232,240,.95);
  font-weight:850;
  text-align:center;
  max-width:min(720px, 92vw);
  box-shadow:0 12px 26px rgba(0,0,0,.45);
}

.invaders-definition{
  position:fixed;
  left:50%;
  bottom:4.2rem;
  transform:translateX(-50%);
  pointer-events:none;
  padding:.55rem .8rem;
  border-radius:1rem;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(2,6,23,.55);
  color:rgba(226,232,240,.95);
  text-align:center;
  max-width:min(900px, 92vw);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  line-height:1.25;
}

/* For Invaders: keep the grammar description centered and easy to read */
body.invaders-mode .invaders-definition{
  bottom:auto;
  top:50%;
  transform:translate(-50%, -50%);
  max-width:min(920px, 88vw);
}

/* Mini-game question prompt layout */
.invaders-definition .mini-q-jp{
  font-weight:900;
  font-size:1.25rem;
  line-height:1.35;
}
.invaders-definition .mini-q-en{
  margin-top:.45rem;
  font-weight:650;
  font-size:1rem;
  line-height:1.35;
  opacity:.95;
}
.invaders-definition .jlptfiver-missing{
  font-weight:900;
  letter-spacing:.12em;
  opacity:.85;
}

/* Flashcard shown after a correct hit */
.invaders-flashcard{
  position:fixed;
  inset:0;
  z-index:265;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
.invaders-flashcard-card{
  width:min(980px, 92vw);
  max-height:min(78vh, 640px);
  overflow:auto;
  pointer-events:auto;
  padding:1.1rem 1.2rem;
  padding-bottom:2.8rem;
  border-radius:1.25rem;
  border:1px solid rgba(148,163,184,.24);
  background:rgba(2,6,23,.78);
  box-shadow:0 24px 60px rgba(0,0,0,.70);
  backdrop-filter: blur(8px);

  position:relative;}
.invaders-flashcard-title{
  font-weight:900;
  font-size:1.4rem;
  line-height:1.1;
  margin-bottom:.35rem;
  text-align:center;
}
.invaders-flashcard-desc{
  font-weight:650;
  color:rgba(226,232,240,.95);
  text-align:center;
  margin-bottom:.85rem;
}
.invaders-flashcard-jp{
  font-weight:750;
  font-size:1.15rem;
  line-height:1.35;
  margin:.5rem 0 .45rem;
  text-align:center;
}
.invaders-flashcard-en{
  font-weight:550;
  color:rgba(203,213,225,.95);
  line-height:1.35;
  text-align:center;
  margin-bottom:.85rem;
}
.invaders-flashcard-hint{
  text-align:center;
  font-weight:700;
  color:rgba(148,163,184,.95);
}


/* Mode picker shown after long-press */
.invaders-picker-backdrop{
  position:fixed;
  inset:0;
  z-index:245;
  background:rgba(2,6,23,.55);
  backdrop-filter: blur(6px);
}
.invaders-picker{
  position:fixed;
  inset:0;
  z-index:260;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:auto;
}
.invaders-picker-card{
  width:min(520px, 92vw);
  border-radius:1.25rem;
  border:1px solid rgba(148,163,184,.22);
  background:rgba(2,6,23,.72);
  box-shadow:0 26px 70px rgba(0,0,0,.72);
  padding:1rem 1.1rem;
  text-align:center;
}
.invaders-picker-title{
  font-weight:950;
  letter-spacing:.03em;
  font-size:1.15rem;
  color:rgba(226,232,240,.96);
}
.invaders-picker-sub{
  margin-top:.35rem;
  color:rgba(148,163,184,.95);
  font-size:.92rem;
}
.invaders-picker-levels{
  margin-top:.85rem;
}
.invaders-picker-levels-label{
  text-align:center;
  font-size:.85rem;
  letter-spacing:.02em;
  color:rgba(148,163,184,.95);
  margin-bottom:.5rem;
}
.invaders-picker-levels-row{
  display:flex;
  justify-content:center;
  gap:.5rem;
  flex-wrap:wrap;
}
.invaders-picker-levels-row .level-filter-btn{
  pointer-events:auto;
  min-width:56px;
  padding:.35rem .65rem;
  border-radius:.9rem;
}
.invaders-picker-btns{
  margin-top:.95rem;
  display:flex;
  gap:.65rem;
  justify-content:center;
  flex-wrap:wrap;
}
.invaders-picker-btns .chip-btn{
  pointer-events:auto;
  min-width:150px;
  padding:.6rem 1rem;
}
.invaders-picker-cancel{
  margin-top:.85rem;
  display:inline-block;
  pointer-events:auto;
  opacity:.92;
}

/* Asteroids mode wants the definition dead-center */
body.asteroids-mode .invaders-definition{
  top:50%;
  bottom:auto;
  transform:translate(-50%,-50%);
  font-size:1.12rem;
  padding:.85rem 1.05rem;
}


/* Heatmap: range editor */
.hm-range-tools{margin-top:.55rem}
.hm-range-panel{
  margin-top:.5rem;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.42);
  border-radius:.9rem;
  padding:.65rem .7rem;
}
.hm-range-row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end}
.hm-range-label{display:flex;flex-direction:column;gap:.25rem;font-size:.78rem;color:rgba(226,232,240,.92)}
.hm-range-input{
  border-radius:.55rem;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.75);
  color:var(--text-main);
  padding:.25rem .45rem;
  font-size:.8rem;
}
.hm-range-check{display:flex;align-items:center;gap:.55rem;margin-top:.55rem;user-select:none}
.hm-range-check input{transform:translateY(1px)}
.hm-range-actions{display:flex;gap:.55rem;flex-wrap:wrap;margin-top:.6rem}