:root{
  --bg:#f7f7f7;
  --card:#ffffff;
  --card2:#f1f7ec;
  --text:#4b4b4b;
  --muted:#777777;
  --primary:#58cc02;
  --primary-dark:#46a302;
  --primary-soft:#d7ffb8;
  --primary-pale:#efffe4;
  --blue:#1cb0f6;
  --blue-dark:#168fca;
  --blue-soft:#ddf4ff;
  --success:#58cc02;
  --danger:#ff4b4b;
  --danger-dark:#d93b3b;
  --danger-soft:#ffe1e1;
  --warn:#ffc800;
  --warn-dark:#d9aa00;
  --warn-soft:#fff4c0;
  --purple:#ce82ff;
  --line:#e5e5e5;
  --line-strong:#d7d7d7;
  --shadow:0 3px 0 #e5e5e5,0 8px 22px rgba(75,75,75,.07);
}

*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  font-family:din-round,ui-rounded,"Nunito",Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 10% 0%,rgba(88,204,2,.08) 0,transparent 25%),
    radial-gradient(circle at 100% 10%,rgba(28,176,246,.08) 0,transparent 22%),
    var(--bg);
  color:var(--text);
  min-height:100vh;
  padding-bottom:96px;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}

.topbar{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  border-bottom:2px solid #eeeeee;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.1px;color:var(--primary-dark)}
.brand-mark{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;
  background:var(--primary);color:white;font-size:1.12rem;font-weight:950;
  border-bottom:4px solid var(--primary-dark);
  transform:translateY(-1px);
}
.icon-btn{
  width:44px;height:44px;border:2px solid var(--line);background:white;display:grid;place-items:center;
  border-radius:14px;box-shadow:0 2px 0 var(--line);transition:.15s ease;
}
.icon-btn:hover{transform:translateY(-1px);border-color:#cfcfcf}
.icon-btn:active{transform:translateY(1px);box-shadow:none}

.app-shell{width:min(1040px,100%);margin:0 auto;padding:24px 16px}
.hero{
  padding:24px;border-radius:26px;background:linear-gradient(135deg,#e5ffd2 0%,#f5ffed 48%,#ddf4ff 100%);
  border:2px solid #c8edac;box-shadow:0 4px 0 #b8e397;margin-bottom:22px;position:relative;overflow:hidden;
}
.hero:after{content:'あ';position:absolute;right:18px;bottom:-32px;font-size:8rem;font-weight:950;color:rgba(88,204,2,.08);pointer-events:none}
.eyebrow{font-size:.77rem;text-transform:uppercase;letter-spacing:.14em;color:var(--primary-dark);font-weight:950}
.hero h1,.page-title{margin:7px 0 8px;font-size:clamp(1.65rem,5vw,2.55rem);line-height:1.08;color:#3c3c3c}
.muted{color:var(--muted)}
.kicker{color:var(--blue-dark);font-weight:900}

.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.level-card,.card{
  background:var(--card);border:2px solid var(--line);border-bottom-width:4px;border-radius:22px;padding:18px;
  box-shadow:0 5px 18px rgba(75,75,75,.045);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.level-card:hover,.card:hover{border-color:#d1d1d1;transform:translateY(-2px);box-shadow:0 4px 0 #dcdcdc,0 9px 22px rgba(75,75,75,.06)}
.level-card{min-height:132px;position:relative;overflow:hidden;border-color:#c8edac;border-bottom-color:#acd987;background:linear-gradient(145deg,#fff 0%,#f3ffe9 100%)}
.level-card:after{content:'語';position:absolute;right:4px;bottom:-25px;font-size:6rem;font-weight:950;color:rgba(88,204,2,.075)}
.level-name{font-size:1.7rem;font-weight:950;color:var(--primary-dark)}
.level-meta{margin-top:8px;color:var(--muted);font-size:.9rem}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:25px 2px 12px}
.section-head h2{margin:0;font-size:1.13rem;color:#3c3c3c}

.btn{
  border:2px solid var(--line);border-bottom-width:4px;border-radius:15px;padding:11px 16px;font-weight:900;cursor:pointer;
  display:inline-flex;gap:8px;align-items:center;justify-content:center;background:white;color:var(--text);
  transition:transform .08s ease,box-shadow .08s ease,border-color .12s ease;
}
.btn:hover{border-color:#d1d1d1;transform:translateY(-1px)}
.btn:active{border-bottom-width:2px;transform:translateY(2px)}
.btn-primary{background:var(--primary);border-color:var(--primary);border-bottom-color:var(--primary-dark);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.05)}
.btn-primary:hover{background:#61d80a;border-color:#61d80a;border-bottom-color:var(--primary-dark)}
.btn-success{background:var(--blue);border-color:var(--blue);border-bottom-color:var(--blue-dark);color:#fff}
.btn-danger{background:#fff;border-color:#ffbaba;border-bottom-color:#ff8f8f;color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft);border-color:#ff9d9d;border-bottom-color:#ff7c7c}
.btn-block{width:100%}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}
.fab-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}

.searchbar{display:flex;gap:9px;background:white;border:2px solid var(--line);padding:8px;border-radius:17px;box-shadow:0 2px 0 #ededed}
.searchbar:focus-within{border-color:#b9e58f;box-shadow:0 2px 0 #9fd871,0 0 0 3px rgba(88,204,2,.08)}
.searchbar input{flex:1;background:transparent;border:0;color:var(--text);outline:0;padding:6px 8px;font-size:1rem;min-width:0}
.searchbar input::placeholder{color:#a9a9a9}
.searchbar button{border:0;border-bottom:3px solid var(--primary-dark);border-radius:12px;padding:9px 14px;background:var(--primary);color:white;font-weight:900;cursor:pointer}

.form-card{background:white;border:2px solid var(--line);border-bottom-width:4px;border-radius:22px;padding:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:.88rem;font-weight:900;color:#5d5d5d}
.input,.select,.textarea{
  width:100%;border:2px solid var(--line);border-bottom-width:3px;border-radius:14px;background:#fff;color:var(--text);
  padding:12px 13px;outline:none;font:inherit;transition:.15s ease;
}
.input:focus,.select:focus,.textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(28,176,246,.10)}
.textarea{min-height:90px;resize:vertical}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.check{display:flex;align-items:center;gap:9px;background:#fafafa;border:2px solid var(--line);border-radius:13px;padding:10px 11px;font-weight:750}
.check:has(input:checked){background:var(--primary-pale);border-color:#b8e68f;color:#478e13}
.check input{accent-color:var(--primary);width:17px;height:17px}

.list{display:flex;flex-direction:column;gap:10px}
.list-item{
  background:white;border:2px solid var(--line);border-bottom-width:4px;padding:14px;border-radius:18px;
  display:flex;gap:12px;align-items:center;justify-content:space-between;
}
.list-item:hover{border-color:#d1d1d1}
.word-main{min-width:0}
.jp{font-size:1.4rem;font-weight:950;letter-spacing:.03em;color:#3c3c3c}
.romaji{font-size:.82rem;color:#8a8a8a;margin-top:2px;font-weight:650}
.meaning{margin-top:5px;color:#555;font-weight:700}
.tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.tag,.badge{font-size:.72rem;font-weight:850;padding:5px 9px;border-radius:999px;background:var(--blue-soft);color:#1686bb;border:1.5px solid #b8e5fa}
.badge.success{background:var(--primary-pale);color:#4a9b11;border-color:#bde69c}
.badge.danger{background:var(--danger-soft);color:#d93b3b;border-color:#ffc1c1}
.badge.warn{background:var(--warn-soft);color:#a98200;border-color:#ffe06a}
.badge.neutral{background:#f1f1f1;color:#777;border-color:#dddddd}
.mini-actions{display:flex;gap:6px}
.mini-actions a,.mini-actions button{
  width:37px;height:37px;display:grid;place-items:center;border-radius:11px;background:#fff;border:2px solid var(--line);color:#666;cursor:pointer
}
.mini-actions a:hover,.mini-actions button:hover{border-color:#b9e58f;background:var(--primary-pale)}

.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.stat{background:#fff;border:2px solid var(--line);border-bottom-width:4px;border-radius:18px;padding:14px}
.stat:nth-child(4n+1){border-color:#bde69c;border-bottom-color:#a6d57f;background:#f8fff2}
.stat:nth-child(4n+2){border-color:#b8e5fa;border-bottom-color:#98d8f7;background:#f5fcff}
.stat:nth-child(4n+3){border-color:#ffe06a;border-bottom-color:#ebc33f;background:#fffdf3}
.stat:nth-child(4n+4){border-color:#ffc1c1;border-bottom-color:#f5a1a1;background:#fff8f8}
.stat b{font-size:1.55rem;display:block;color:#3c3c3c}
.stat span{font-size:.75rem;color:var(--muted);font-weight:700}

.flash{padding:12px 14px;border-radius:14px;margin-bottom:14px;border:2px solid;font-weight:750}
.flash.success{background:var(--primary-pale);border-color:#bde69c;color:#478e13}
.flash.error{background:var(--danger-soft);border-color:#ffc1c1;color:#c93838}
.flash.info{background:var(--blue-soft);border-color:#b8e5fa;color:#167eae}
.empty{padding:30px 18px;text-align:center;color:var(--muted);border:2px dashed #d8d8d8;border-radius:18px;background:#fff}

.bottom-nav{
  position:fixed;left:50%;bottom:10px;transform:translateX(-50%);width:min(640px,calc(100% - 20px));height:72px;
  border:2px solid var(--line);border-bottom-width:4px;background:rgba(255,255,255,.97);backdrop-filter:blur(18px);
  border-radius:22px;display:grid;grid-template-columns:repeat(5,1fr);z-index:30;box-shadow:0 8px 24px rgba(75,75,75,.10);overflow:hidden;
}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#929292;font-weight:800;transition:.12s ease}
.bottom-nav a:hover{background:#f7f7f7;color:var(--primary-dark)}
.bottom-nav span{font-size:1.22rem}
.bottom-nav small{font-size:.65rem}
.bottom-nav .nav-play{color:var(--primary-dark);background:var(--primary-pale);border-left:1px solid #dcf5c8;border-right:1px solid #dcf5c8}

.quiz-wrap{max-width:720px;margin:0 auto}
.progress-track{height:14px;background:#e5e5e5;border-radius:99px;overflow:hidden;margin:10px 0 22px}
.progress-fill{height:100%;background:var(--primary);border-radius:99px;box-shadow:inset 0 -3px 0 rgba(70,163,2,.35)}
.question-card{background:#fff;border:2px solid var(--line);border-bottom-width:5px;border-radius:28px;padding:24px;box-shadow:0 10px 26px rgba(75,75,75,.06)}
.question-label{font-size:.78rem;color:#999;text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.question-prompt{font-size:clamp(2rem,9vw,4rem);font-weight:950;text-align:center;margin:26px 0 30px;word-break:break-word;color:#3c3c3c}
.question-prompt.english{font-size:clamp(1.55rem,7vw,2.8rem)}
.answers{display:grid;gap:11px}
.answer-btn{
  width:100%;text-align:left;border:2px solid var(--line);border-bottom-width:4px;background:#fff;color:#4b4b4b;padding:15px 16px;
  border-radius:16px;font-size:1rem;font-weight:900;cursor:pointer;transition:.1s ease;
}
.answer-btn:hover{border-color:var(--blue);background:var(--blue-soft);color:#157eae;transform:translateY(-1px)}
.answer-btn:active{border-bottom-width:2px;transform:translateY(2px)}
.answer-index{display:inline-grid;place-items:center;width:29px;height:29px;border-radius:9px;background:#f1f1f1;border:1px solid #dedede;margin-right:10px;color:#777;font-weight:950}
.answer-btn:hover .answer-index{background:#fff;border-color:#aadaf1;color:#168fca}
.feedback-icon{font-size:4rem;text-align:center}
.feedback-title{text-align:center;font-size:2rem;font-weight:950;color:#3c3c3c}
.feedback-answer{text-align:center;padding:15px;background:#f7f7f7;border:2px solid var(--line);border-radius:16px;margin:16px 0;font-weight:800}
.score-ring{
  width:160px;height:160px;border-radius:50%;margin:20px auto;display:grid;place-items:center;
  background:conic-gradient(var(--primary) var(--pct),#e5e5e5 0);position:relative;
}
.score-ring:after{content:'';position:absolute;inset:14px;border-radius:50%;background:#fff}
.score-ring div{z-index:1;text-align:center}
.score-ring b{font-size:2rem;color:#3c3c3c}
.score-ring small{display:block;color:var(--muted);font-weight:700}

table{width:100%;border-collapse:collapse}
.table-wrap{overflow:auto;border:2px solid var(--line);border-bottom-width:4px;border-radius:18px;background:#fff}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.07em;color:#777;background:#f7f7f7;font-weight:950}
td{font-size:.9rem;color:#555}
.range-line{display:flex;gap:12px;align-items:center}
.range-line input[type=range]{flex:1;accent-color:var(--primary)}
.note{padding:12px 14px;border-left:4px solid var(--blue);background:var(--blue-soft);border-radius:0 12px 12px 0;color:#3f7189;font-size:.9rem;font-weight:700}

@media(max-width:720px){
  .grid-3{grid-template-columns:1fr}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:1fr}
  .field.full{grid-column:auto}
  .question-card{padding:18px}
  .app-shell{padding:18px 13px}
  .fab-row{grid-template-columns:1fr}
  .check-grid{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr 1fr}
}
@media(max-width:420px){
  .grid-2{grid-template-columns:1fr}
  .level-card{min-height:106px}
  .topbar{padding:0 13px}
  .brand span:last-child{font-size:.94rem}
  .bottom-nav{height:68px}
}