:root{
  --paper:#F6F1E6;
  --paper2:#EFE8D8;
  --line:#DDD2B4;
  --ink:#242220;
  --ink-soft:#5b5648;
  --indigo:#33465C;
  --indigo-soft:#5B7086;
  --seal:#B8413A;
  --seal-soft:#D98A83;
  --gold:#B98A31;
  --good:#4C6B4F;
  --good-soft:#DCE7DC;
  --bad:#B8413A;
  --bad-soft:#F3DEDC;
  --radius:10px;
  --shadow:0 1px 2px rgba(36,34,32,.06), 0 6px 20px -8px rgba(36,34,32,.18);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
  color:var(--ink);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 27px, rgba(90,80,50,.05) 27px, rgba(90,80,50,.05) 28px),
    repeating-linear-gradient(90deg, transparent, transparent 27px, rgba(90,80,50,.05) 27px, rgba(90,80,50,.05) 28px),
    var(--paper);
  min-height:100vh;
}
.wrap{max-width:980px;margin:0 auto;padding:20px 18px 80px;}
.masthead{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 4px 22px;border-bottom:2px solid var(--ink);margin-bottom:22px;
}
.brand{display:flex;align-items:baseline;gap:12px;}
.brand .seal{
  width:44px;height:44px;border-radius:50%;border:2.5px solid var(--seal);color:var(--seal);
  display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;
  font-weight:800;font-size:18px;flex:none;transform:rotate(-6deg);
}
.brand h1{font-family:'Shippori Mincho',serif;font-weight:800;font-size:28px;margin:0;letter-spacing:.5px;}
.brand .sub{font-size:12px;color:var(--ink-soft);font-family:'JetBrains Mono',monospace;letter-spacing:.03em;}
.streak{font-family:'JetBrains Mono',monospace;font-size:13px;text-align:right;color:var(--ink-soft);}
.streak b{color:var(--seal);font-size:16px;}

nav.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:24px;}
nav.tabs button{
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:13.5px;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  padding:8px 16px;border-radius:999px;cursor:pointer;transition:.15s;
}
nav.tabs button.active{background:var(--ink);color:var(--paper);}
nav.tabs button:hover:not(.active){background:var(--paper2);}

.card{
  background:#fffdf8;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 24px;margin-bottom:18px;
}
.card h2{font-family:'Shippori Mincho',serif;font-size:21px;margin:0 0 4px;}
.card h3{font-family:'Shippori Mincho',serif;font-size:16px;margin:18px 0 8px;color:var(--indigo);}
.muted{color:var(--ink-soft);font-size:13.5px;}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:680px){.grid2,.grid3{grid-template-columns:1fr;}}

.stat-box{background:var(--paper2);border-radius:var(--radius);padding:14px 16px;}
.stat-box .num{font-family:'JetBrains Mono',monospace;font-size:26px;font-weight:700;color:var(--indigo);}
.stat-box .lbl{font-size:12px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.05em;}

.week-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px;}
.week-pill{
  border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;cursor:pointer;
  background:#fff;position:relative;transition:.15s;
}
.week-pill:hover{border-color:var(--indigo);}
.week-pill.current{border-color:var(--seal);background:var(--seal-soft);}
.week-pill .wk{font-family:'Shippori Mincho',serif;font-weight:800;font-size:15px;}
.week-pill .cnt{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-soft);}
.week-pill .stamp{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--seal);color:var(--seal);font-size:10px;display:flex;align-items:center;justify-content:center;
  font-weight:800;transform:rotate(-10deg);background:rgba(255,255,255,.6);}

button.primary, .btn{
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:14px;
  background:var(--ink);color:var(--paper);border:none;border-radius:8px;padding:11px 20px;
  cursor:pointer;transition:.15s;
}
button.primary:hover,.btn:hover{background:var(--indigo);}
button.secondary{
  font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:13.5px;
  background:transparent;color:var(--ink);border:1.5px solid var(--ink);border-radius:8px;padding:9px 16px;cursor:pointer;
}
button.secondary:hover{background:var(--paper2);}
button:disabled{opacity:.45;cursor:not-allowed;}

.flash-stage{display:flex;flex-direction:column;align-items:center;gap:18px;padding:10px 0 4px;}
.flashcard{
  width:100%;max-width:420px;height:220px;position:relative;perspective:1200px;cursor:pointer;
}
.flashcard .inner{position:relative;width:100%;height:100%;transition:transform .5s;transform-style:preserve-3d;}
.flashcard.flipped .inner{transform:rotateY(180deg);}
.flashcard .face{
  position:absolute;inset:0;backface-visibility:hidden;border-radius:14px;border:1.5px solid var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;
  background:#fffdf8;
}
.flashcard .face.back{transform:rotateY(180deg);background:var(--indigo);color:#fff;border-color:var(--indigo);}
.flashcard .jp{font-family:'Shippori Mincho',serif;font-size:40px;font-weight:700;}
.flashcard .romaji{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--ink-soft);margin-top:8px;}
.flashcard .face.back .romaji{color:#d9e0e8;}
.flashcard .meaning{font-size:20px;font-weight:700;}
.flashcard .tag{position:absolute;top:10px;left:12px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;color:var(--gold);}
.flash-controls{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.flash-progress{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ink-soft);}

.qitem{border-bottom:1px solid var(--line);padding:16px 0;}
.qitem:last-child{border-bottom:none;}
.qnum{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:.05em;}
.qtext{font-family:'Shippori Mincho',serif;font-size:19px;margin:6px 0 12px;line-height:1.5;}
.qpassage{font-size:14.5px;background:var(--paper2);border-radius:8px;padding:12px 14px;margin-bottom:10px;line-height:1.8;}
.opts label{
  display:block;border:1.5px solid var(--line);border-radius:8px;padding:10px 14px;margin-bottom:7px;
  cursor:pointer;font-size:14.5px;transition:.12s;
}
.opts label:hover{border-color:var(--indigo);}
.opts input{margin-right:10px;}
.opts label.correct{border-color:var(--good);background:var(--good-soft);}
.opts label.wrong{border-color:var(--bad);background:var(--bad-soft);}
.qnote{font-size:12.5px;color:var(--ink-soft);margin-top:8px;padding-left:2px;}

.result-hero{text-align:center;padding:20px 0 10px;}
.result-hero .score{font-family:'Shippori Mincho',serif;font-size:56px;font-weight:800;color:var(--seal);}
.result-hero .frac{font-family:'JetBrains Mono',monospace;font-size:15px;color:var(--ink-soft);}
.sectionbar{display:flex;justify-content:space-between;font-size:13px;padding:6px 0;border-bottom:1px dashed var(--line);}

table.mistakes{width:100%;border-collapse:collapse;font-size:14px;}
table.mistakes th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:2px solid var(--ink);padding:6px 8px;}
table.mistakes td{padding:8px;border-bottom:1px solid var(--line);}
.box-pips span{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--line);margin-right:2px;}
.box-pips span.on{background:var(--good);}

.pillbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.pillbar button{font-size:12.5px;padding:6px 13px;}
.hist-bar{display:flex;align-items:flex-end;gap:6px;height:90px;margin-top:10px;}
.hist-bar .col{flex:1;background:var(--indigo);border-radius:3px 3px 0 0;position:relative;min-height:2px;}
.hist-bar .col .v{position:absolute;top:-16px;left:0;right:0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;}
footer{text-align:center;font-size:11.5px;color:var(--ink-soft);margin-top:40px;font-family:'JetBrains Mono',monospace;}
.empty{text-align:center;padding:40px 10px;color:var(--ink-soft);}
.empty .seal-lg{width:64px;height:64px;border-radius:50%;border:3px solid var(--line);margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-family:'Shippori Mincho',serif;font-size:26px;color:var(--line);}
.subnav{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap;}
.subnav button{font-family:'Zen Kaku Gothic New',sans-serif;font-size:12.5px;font-weight:700;padding:7px 14px;
  border-radius:999px;border:1.5px solid var(--indigo);background:transparent;color:var(--indigo);cursor:pointer;}
.subnav button.active{background:var(--indigo);color:#fff;}
.modenav{display:flex;gap:8px;margin-bottom:4px;}
.modenav button.active{background:var(--ink);color:var(--paper);}
table.kanagrid{border-collapse:collapse;width:100%;margin:8px 0 18px;}
table.kanagrid td{border:1px solid var(--line);text-align:center;padding:8px 2px;min-width:44px;}
table.kanagrid td.empty-cell{border:none;}
table.kanagrid td.mastered{background:var(--good-soft);}
table.kanagrid .kchar{font-family:'Shippori Mincho',serif;font-size:21px;display:block;line-height:1.2;}
table.kanagrid .kroma{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--ink-soft);display:block;}
table.kanji-table{width:100%;border-collapse:collapse;font-size:14px;}
table.kanji-table th{text-align:left;font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;
  color:var(--ink-soft);border-bottom:2px solid var(--ink);padding:6px 8px;}
table.kanji-table td{padding:7px 8px;border-bottom:1px solid var(--line);}
table.kanji-table .kchar-lg{font-family:'Shippori Mincho',serif;font-size:23px;}
input.searchbox{font-family:'Zen Kaku Gothic New',sans-serif;font-size:13.5px;padding:9px 13px;border-radius:8px;
  border:1.5px solid var(--ink);width:100%;max-width:340px;margin-bottom:14px;background:#fff;color:var(--ink);}
select{
  font-family:'Zen Kaku Gothic New',sans-serif;font-size:13.5px;padding:8px 12px;border-radius:8px;
  border:1.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;
}
.timer{font-family:'JetBrains Mono',monospace;font-size:13px;background:var(--ink);color:var(--paper);
  padding:5px 12px;border-radius:20px;}

/* ---------- UI Components & Product Refinements ---------- */
#confettiCanvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; }

.header-right { display: flex; align-items: center; gap: 12px; }
.user-badge {
  display: flex; align-items: center; gap: 8px; background: #fffdf8;
  border: 1.5px solid var(--ink); border-radius: 20px; padding: 5px 12px;
  cursor: pointer; font-size: 13px; font-weight: 700; transition: .15s;
}
.user-badge:hover { background: var(--paper2); border-color: var(--indigo); }
.user-avatar { font-size: 16px; }
.user-lvl { font-family: 'JetBrains Mono', monospace; font-size: 10px; background: var(--gold); color: #fff; padding: 2px 6px; border-radius: 10px; }
.sound-toggle {
  background: transparent; border: 1.5px solid var(--ink-soft); border-radius: 50%;
  width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 16px; transition: .15s;
}
.sound-toggle:hover { background: var(--paper2); border-color: var(--ink); }

.modal-overlay {
  position: fixed; inset: 0; background: rgba(36,34,32,0.6); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.modal-card {
  background: #fffdf8; border: 2px solid var(--ink); border-radius: 14px; width: 100%; max-width: 520px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25); max-height: 90vh; overflow-y: auto; padding: 24px; text-align: left;
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h2 { font-family: 'Shippori Mincho', serif; margin: 0; font-size: 22px; }
.modal-close { background: transparent; border: none; font-size: 20px; cursor: pointer; color: var(--ink-soft); }
.profile-card {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  border: 1.5px solid var(--line); border-radius: 10px; margin-bottom: 10px; background: #fff; transition: .15s;
}
.profile-card.active { border-color: var(--seal); background: var(--seal-soft); }
.prof-avatar { font-size: 24px; margin-right: 12px; }
.prof-info { flex: 1; }
.prof-name { font-weight: 700; font-size: 15px; }
.prof-sub { font-size: 11px; color: var(--ink-soft); font-family: 'JetBrains Mono', monospace; }
.avatar-picker { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.av-opt {
  font-size: 22px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 8px;
  cursor: pointer; background: #fff; transition: .15s;
}
.av-opt:hover, .av-opt.selected { border-color: var(--seal); background: var(--paper2); }

.hm-wrap { margin-top: 14px; background: var(--paper2); border-radius: 10px; padding: 14px 16px; border: 1px solid var(--line); }
.hm-grid { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; }
.hm-cell { aspect-ratio: 1; border-radius: 3px; background: #e0d8c3; transition: transform .1s; cursor: pointer; }
.hm-cell:hover { transform: scale(1.25); }
.hm-cell.lvl-0 { background: #e0d8c3; }
.hm-cell.lvl-1 { background: #a8d0a8; }
.hm-cell.lvl-2 { background: #6ba86e; }
.hm-cell.lvl-3 { background: #3d8041; }
.hm-cell.lvl-4 { background: #1e5222; }
.hm-footer { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft); margin-top: 8px; font-family: 'JetBrains Mono', monospace; }
.hm-legend { display: flex; align-items: center; gap: 3px; }
.hm-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.hm-legend i.lvl-0 { background: #e0d8c3; }
.hm-legend i.lvl-1 { background: #a8d0a8; }
.hm-legend i.lvl-2 { background: #6ba86e; }
.hm-legend i.lvl-3 { background: #3d8041; }
.hm-legend i.lvl-4 { background: #1e5222; }

.xp-card { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--paper2); border-radius: 10px; padding: 12px 16px; margin-top: 12px; border: 1px solid var(--line); }
.xp-info { flex: 1; }
.xp-title { font-size: 13px; font-weight: 700; color: var(--indigo); }
.xp-bar-outer { height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.xp-bar-inner { height: 100%; background: var(--gold); transition: width .3s ease; }
.speaker-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--ink);
  cursor: pointer; margin-left: 6px; font-size: 13px; transition: .15s; vertical-align: middle;
}
.speaker-btn:hover { background: var(--paper2); border-color: var(--indigo); transform: scale(1.1); }
.kbd-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink-soft); margin-top: 10px; text-align: center; }

/* Badges & Motivational Stats */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
.badge-card {
  border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 10px; text-align: center;
  background: #fff; position: relative; transition: .15s;
}
.badge-card.unlocked { border-color: var(--gold); background: #fffdf0; box-shadow: 0 2px 8px rgba(185,138,49,0.15); }
.badge-card.locked { opacity: 0.45; filter: grayscale(1); }
.badge-icon { font-size: 26px; margin-bottom: 4px; }
.badge-title { font-weight: 700; font-size: 12px; margin-bottom: 2px; color: var(--ink); }
.badge-desc { font-size: 10px; color: var(--ink-soft); font-family: 'JetBrains Mono', monospace; line-height: 1.2; }
.badge-tag { position: absolute; top: 4px; right: 6px; font-size: 9px; font-weight: 700; color: var(--gold); }