:root{
  --ag-green:#58b64b;
  --ag-green-dark:#2f8a36;
  --ag-blue:#4aa5ea;
  --ag-purple:#a474df;
  --ag-pink:#f07ca3;
  --ag-gold:#f1b844;
  --ag-ink:#1f2937;
  --ag-muted:#64748b;
  --ag-line:rgba(89,122,98,.16);
  --ag-card:rgba(255,255,255,.84);
  --ag-glass:rgba(255,255,255,.70);
  --ag-shadow:0 18px 50px rgba(65,94,78,.14);
}

#jlpt180-ag-root,
#jlpt180-ag-root *{box-sizing:border-box}

#jlpt180-ag-root{
  width:100%;
  color:var(--ag-ink);
  font-family:Inter,"Noto Sans JP",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    linear-gradient(180deg,rgba(255,255,255,.36),rgba(246,255,250,.76)),
    url("bg-desktop.webp") center/cover no-repeat;
  padding:18px;
  overflow:hidden;
}

#jlpt180-ag-root .ag-shell{
  width:min(100%,1760px);
  height:clamp(720px,calc(100vh - 128px),900px);
  min-height:720px;
  margin:0 auto;
  display:grid;
  grid-template-columns:248px minmax(0,1fr);
  gap:18px;
}

.ag-sidebar,
.ag-main{
  border:1px solid var(--ag-line);
  background:var(--ag-glass);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:var(--ag-shadow);
}

.ag-sidebar{
  border-radius:28px;
  padding:18px;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.ag-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
}

.ag-brand img{
  width:48px;
  height:48px;
  object-fit:contain;
}

.ag-brand b{
  display:block;
  font-size:22px;
  letter-spacing:-.03em;
}

.ag-brand span{
  display:inline-flex;
  margin-top:2px;
  padding:2px 8px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(135deg,var(--ag-green),#8bd76d);
  font-size:11px;
  font-weight:800;
}

.ag-menu{
  display:grid;
  gap:7px;
}

.ag-menu a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  padding:0 13px;
  border-radius:14px;
  color:#3f4b5f;
  text-decoration:none!important;
  font-weight:750;
  font-size:14px;
  transition:.18s ease;
}

.ag-menu a span{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  color:#60806d;
}

.ag-menu a:hover,
.ag-menu a.is-active{
  background:linear-gradient(135deg,rgba(88,182,75,.18),rgba(88,182,75,.08));
  color:#245b29;
}

.ag-user-card{
  margin-top:auto;
  border:1px solid var(--ag-line);
  background:rgba(255,255,255,.62);
  border-radius:22px;
  padding:14px;
  min-height:178px;
  overflow:hidden;
  position:relative;
}

.ag-user-card img{
  position:absolute;
  right:-16px;
  bottom:-10px;
  width:126px;
  height:126px;
  object-fit:contain;
}

.ag-user-card small{
  color:var(--ag-muted);
  font-weight:800;
}

.ag-user-card b{
  display:block;
  margin-top:7px;
  font-size:26px;
}

.ag-mini-progress{
  width:120px;
  height:8px;
  margin-top:14px;
  border-radius:999px;
  background:#dceee1;
  overflow:hidden;
}

.ag-mini-progress i,
.ag-decks i,
.ag-progress i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--ag-green),#a7df72);
}

.ag-main{
  border-radius:30px;
  padding:24px;
  overflow:auto;
  min-width:0;
}

.ag-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}

.ag-eyebrow{
  margin:0 0 4px;
  color:#64748b;
  font-size:13px;
  font-weight:650;
}

.ag-topbar h1{
  margin:0;
  font-size:26px;
  line-height:1.12;
  letter-spacing:-.03em;
}

.ag-actions{
  display:flex;
  gap:8px;
}

.ag-actions button{
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--ag-line);
  background:rgba(255,255,255,.72);
  cursor:pointer;
}

.ag-hero{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  min-height:136px;
  margin-bottom:18px;
  padding-right:120px;
}

.ag-stat-card{
  border:1px solid var(--ag-line);
  background:rgba(255,255,255,.75);
  border-radius:20px;
  padding:17px 18px;
  min-width:0;
  box-shadow:0 10px 28px rgba(66,96,78,.07);
}

.ag-stat-card span{
  display:block;
  color:#596579;
  font-size:13px;
  font-weight:850;
}

.ag-stat-card b{
  display:block;
  margin-top:10px;
  font-size:25px;
  line-height:1;
  letter-spacing:-.02em;
}

.ag-stat-card small{
  display:block;
  margin-top:8px;
  color:#597069;
  font-size:12px;
  font-weight:700;
}

.ag-stat-card.fire b{color:#ef7048}
.ag-stat-card.xp b{color:#5c7fe7}
.ag-stat-card.level b{color:#e3a928}
.ag-stat-card.cards b{color:#3a9660}

.ag-hero-mascot{
  position:absolute;
  right:0;
  bottom:-12px;
  width:150px;
  height:150px;
  object-fit:contain;
}

.ag-board,
.ag-panel{
  border:1px solid var(--ag-line);
  background:rgba(255,255,255,.76);
  border-radius:24px;
  padding:18px;
  box-shadow:0 12px 32px rgba(66,96,78,.07);
}

.ag-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:15px;
}

.ag-section-head h2,
.ag-panel h2{
  margin:0;
  font-size:19px;
  line-height:1.2;
  letter-spacing:-.02em;
}

.ag-section-head p{
  margin:4px 0 0;
  color:#64748b;
  font-size:13px;
}

.ag-section-head button,
.ag-panel button{
  border:1px solid rgba(88,182,75,.25);
  background:rgba(255,255,255,.72);
  color:#2f8a36;
  border-radius:999px;
  padding:9px 14px;
  font-weight:850;
  cursor:pointer;
}

.ag-steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  position:relative;
}

.ag-step{
  position:relative;
  min-height:208px;
  padding:16px 13px 13px;
  text-align:center;
  border:1px solid rgba(88,182,75,.18);
  border-radius:21px;
  background:linear-gradient(180deg,rgba(255,255,255,.84),rgba(248,255,249,.78));
  overflow:hidden;
}

.ag-step em{
  position:absolute;
  top:10px;
  left:10px;
  display:grid;
  place-items:center;
  width:31px;
  height:31px;
  border-radius:999px;
  font-style:normal;
  color:#fff;
  font-weight:900;
  background:linear-gradient(135deg,var(--ag-green),#9bd96f);
  box-shadow:0 6px 16px rgba(88,182,75,.25);
}

.ag-step img{
  width:66px;
  height:66px;
  object-fit:contain;
  margin-top:14px;
}

.ag-step h3{
  margin:8px 0 5px;
  font-size:16px;
}

.ag-step p{
  min-height:36px;
  margin:0;
  color:#64748b;
  font-size:12px;
  line-height:1.42;
}

.ag-step b{
  display:block;
  margin:8px 0 12px;
  font-size:13px;
}

.ag-step a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:35px;
  border-radius:999px;
  text-decoration:none!important;
  color:#fff;
  background:linear-gradient(180deg,#62bd49,#3ca43e);
  font-size:12px;
  font-weight:900;
}

.ag-step[data-step="vocab"] em{background:linear-gradient(135deg,#4aa5ea,#79c8ff)}
.ag-step[data-step="grammar"] em{background:linear-gradient(135deg,#a474df,#caa8ff)}
.ag-step[data-step="quiz"] em{background:linear-gradient(135deg,#f07ca3,#ffb4c8)}
.ag-step.reward em{background:linear-gradient(135deg,#f1b844,#ffd86e)}

.ag-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:1.15fr .78fr .58fr;
  gap:14px;
}

.ag-section-head.compact{
  margin-bottom:12px;
}

.ag-section-head.compact h2{
  font-size:18px;
}

.ag-decks{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.ag-decks div{
  border:1px solid var(--ag-line);
  background:rgba(252,255,253,.78);
  border-radius:16px;
  padding:13px;
}

.ag-decks b,
.ag-decks span{
  display:block;
}

.ag-decks b{
  font-size:13px;
}

.ag-decks span{
  margin:5px 0 9px;
  color:#64748b;
  font-size:12px;
}

.ag-decks i{
  height:6px;
  background:linear-gradient(90deg,var(--ag-green),#72b9f1);
}

.ag-activity ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.ag-activity li{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:8px;
  padding:11px;
  border-radius:16px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--ag-line);
}

.ag-activity li span{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:#eef9ee;
}

.ag-activity li b{
  font-size:13px;
}

.ag-activity li em{
  font-style:normal;
  color:#2f8a36;
  font-weight:850;
  font-size:12px;
}

.ag-goal{
  text-align:center;
}

.ag-ring{
  width:106px;
  height:106px;
  border-radius:999px;
  margin:12px auto;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center,#fff 58%,transparent 59%),
    conic-gradient(var(--ag-green) 0 calc(var(--ag-goal-percent, 60) * 1%),#e3efe5 0 100%);
}

.ag-ring b,
.ag-ring span{
  grid-area:1/1;
}

.ag-ring b{
  font-size:24px;
}

.ag-ring span{
  transform:translateY(25px);
  color:#64748b;
  font-size:12px;
  font-weight:800;
}

.ag-goal p{
  margin:0 auto;
  color:#64748b;
  font-size:13px;
  line-height:1.55;
}

.ag-mobile-preview{
  border-radius:30px;
  padding:18px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  align-content:center;
  gap:14px;
  overflow:hidden;
}

.ag-phone{
  width:100%;
  max-width:154px;
  height:335px;
  margin:auto;
  border:7px solid #171923;
  border-radius:32px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.8),rgba(251,255,253,.94)),
    url("bg-mobile.webp") center/cover no-repeat;
  box-shadow:0 20px 42px rgba(20,35,30,.2);
  overflow:hidden;
  padding:13px 11px;
  position:relative;
  font-size:10px;
}

.ag-phone header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:12px;
  font-weight:900;
  margin-bottom:10px;
}

.ag-phone-mascot{
  position:absolute;
  right:4px;
  top:36px;
  width:62px;
  height:62px;
  object-fit:contain;
}

.ag-phone-card{
  margin-top:43px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.78);
  border:1px solid var(--ag-line);
}

.ag-phone-card h3{
  margin:8px 0;
  font-size:13px;
}

.ag-phone-card p{
  display:flex;
  justify-content:space-between;
  margin:9px 0;
  padding-bottom:7px;
  border-bottom:1px solid rgba(88,182,75,.12);
}

.ag-phone button{
  width:100%;
  min-height:35px;
  margin-top:12px;
  border:0;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(180deg,#62bd49,#3ca43e);
  font-weight:900;
}

.ag-progress{
  height:7px;
  border-radius:999px;
  background:#e4efe7;
  overflow:hidden;
  margin-bottom:12px;
  position:relative;
}

.ag-progress span{
  position:absolute;
  right:0;
  top:9px;
  color:#64748b;
  font-size:9px;
}

.ag-flashcard{
  margin-top:18px;
  min-height:200px;
  border-radius:20px;
  border:1px solid var(--ag-line);
  background:rgba(255,255,255,.82);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  position:relative;
  padding:16px 10px;
}

.ag-flashcard button{
  position:absolute;
  top:8px;
  right:8px;
  width:24px;
  min-height:24px;
  margin:0;
  color:#f0a640;
  background:#fff7df;
}

.ag-flashcard ruby{
  font-size:25px;
  font-weight:900;
}

.ag-flashcard rt{
  font-size:8px;
}

.ag-flashcard small{
  color:#64748b;
  line-height:1.35;
}

.ag-answer-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
}

.ag-answer-row button{
  min-height:28px;
  font-size:9px;
  padding:0;
}

.ag-answer-row button:first-child{background:#f6a15b}
.ag-answer-row button:nth-child(2){background:#ef6c62}
.ag-answer-row button:nth-child(3){background:#58b64b}

.ag-quiz-score{
  width:104px;
  height:104px;
  margin:28px auto 20px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle,#fff 58%,transparent 59%),
    conic-gradient(var(--ag-gold) 0 80%,#edf1e5 80% 100%);
}

.ag-quiz-score b,
.ag-quiz-score span{
  grid-area:1/1;
}

.ag-quiz-score b{
  font-size:21px;
}

.ag-quiz-score span{
  transform:translateY(23px);
  color:#64748b;
  font-size:9px;
}

.ag-reward-box{
  padding:12px;
  border-radius:18px;
  background:rgba(255,250,229,.84);
  border:1px solid rgba(241,184,68,.22);
  text-align:center;
}

.ag-reward-box img{
  width:50px;
  height:50px;
  object-fit:contain;
}

.ag-reward-box b{
  display:block;
  margin:4px 0;
  color:#c8881f;
  font-size:15px;
}

.ag-reward-box p{
  margin:0;
  color:#64748b;
}

@media (max-width:1280px){
  #jlpt180-ag-root .ag-shell{
    grid-template-columns:220px minmax(0,1fr);
  }
  .ag-mobile-preview{
    display:none;
  }
}

@media (max-width:820px){
  #jlpt180-ag-root{
    min-height:100vh;
    padding:0;
    background:
      linear-gradient(180deg,rgba(255,255,255,.36),rgba(246,255,250,.76)),
      url("bg-mobile.webp") center/cover no-repeat;
    overflow:visible;
  }
  #jlpt180-ag-root .ag-shell{
    display:block;
    width:100%;
    height:auto;
    min-height:100vh;
    padding:0 14px 86px;
  }
  .ag-sidebar,
  .ag-mobile-preview{
    display:none;
  }
  .ag-main{
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    padding:16px 0 0;
    overflow:visible;
  }
  .ag-topbar{
    align-items:center;
    margin-bottom:12px;
  }
  .ag-eyebrow{
    font-size:12px;
    max-width:260px;
  }
  .ag-topbar h1{
    font-size:22px;
  }
  .ag-actions button{
    width:38px;
    height:38px;
  }
  .ag-hero{
    grid-template-columns:repeat(2,1fr);
    padding-right:92px;
    min-height:164px;
    gap:10px;
  }
  .ag-stat-card{
    border-radius:18px;
    padding:13px;
  }
  .ag-stat-card span{
    font-size:11px;
  }
  .ag-stat-card b{
    font-size:22px;
  }
  .ag-hero-mascot{
    width:112px;
    height:112px;
    bottom:-4px;
  }
  .ag-board,
  .ag-panel{
    border-radius:22px;
    padding:14px;
    background:rgba(255,255,255,.82);
  }
  .ag-section-head{
    align-items:flex-start;
  }
  .ag-section-head button{
    display:none;
  }
  .ag-steps{
    grid-template-columns:1fr;
    gap:10px;
  }
  .ag-step{
    min-height:96px;
    display:grid;
    grid-template-columns:44px 52px 1fr auto;
    grid-template-rows:auto auto;
    align-items:center;
    gap:0 8px;
    text-align:left;
    padding:12px;
  }
  .ag-step em{
    position:static;
    grid-row:1/3;
    width:36px;
    height:36px;
  }
  .ag-step img{
    grid-row:1/3;
    width:48px;
    height:48px;
    margin:0;
  }
  .ag-step h3{
    margin:0;
    font-size:15px;
  }
  .ag-step p{
    min-height:0;
    font-size:11px;
  }
  .ag-step b{
    grid-column:4;
    grid-row:1;
    margin:0;
    white-space:nowrap;
    font-size:12px;
  }
  .ag-step a{
    grid-column:4;
    grid-row:2;
    min-width:78px;
    min-height:32px;
  }
  .ag-grid{
    grid-template-columns:1fr;
    gap:12px;
    margin-top:12px;
  }
  .ag-decks{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-shell{
    padding-left:12px;
    padding-right:12px;
  }
  .ag-hero{
    padding-right:0;
  }
  .ag-hero-mascot{
    display:none;
  }
  .ag-stat-card{
    min-height:86px;
  }
  .ag-step{
    grid-template-columns:38px 46px minmax(0,1fr);
  }
  .ag-step b,
  .ag-step a{
    grid-column:3;
  }
  .ag-step b{
    grid-row:3;
    margin-top:7px;
  }
  .ag-step a{
    grid-row:4;
    margin-top:7px;
    width:130px;
  }
}


/* v002 fix: remove desktop mobile mockup panel */
.ag-mobile-preview{display:none!important;}


/* v003: real browser desktop fit based on 1905x1018 screenshot */
@media (min-width:821px){
  #jlpt180-ag-root{
    padding:10px 12px!important;
    overflow:visible!important;
  }
  #jlpt180-ag-root .ag-shell{
    width:min(100%,1488px)!important;
    max-width:1488px!important;
    height:auto!important;
    min-height:0!important;
    grid-template-columns:220px minmax(0,1fr)!important;
    gap:12px!important;
  }
  #jlpt180-ag-root .ag-sidebar{
    width:220px!important;
    padding:14px!important;
    border-radius:24px!important;
  }
  #jlpt180-ag-root .ag-brand{
    margin-bottom:14px!important;
  }
  #jlpt180-ag-root .ag-brand img{
    width:42px!important;
    height:42px!important;
  }
  #jlpt180-ag-root .ag-brand b{
    font-size:20px!important;
  }
  #jlpt180-ag-root .ag-menu{
    gap:4px!important;
  }
  #jlpt180-ag-root .ag-menu a{
    min-height:38px!important;
    padding:0 11px!important;
    font-size:13px!important;
    border-radius:13px!important;
  }
  #jlpt180-ag-root .ag-user-card{
    min-height:138px!important;
    padding:12px!important;
    border-radius:18px!important;
  }
  #jlpt180-ag-root .ag-user-card img{
    width:100px!important;
    height:100px!important;
  }
  #jlpt180-ag-root .ag-user-card b{
    font-size:22px!important;
  }
  #jlpt180-ag-root .ag-main{
    padding:18px 20px!important;
    border-radius:24px!important;
    overflow:visible!important;
  }
  #jlpt180-ag-root .ag-topbar{
    margin-bottom:12px!important;
    align-items:center!important;
  }
  #jlpt180-ag-root .ag-eyebrow{
    font-size:12px!important;
    margin-bottom:4px!important;
  }
  #jlpt180-ag-root .ag-topbar h1{
    font-size:25px!important;
  }
  #jlpt180-ag-root .ag-actions button{
    width:36px!important;
    height:36px!important;
    border-radius:12px!important;
  }
  #jlpt180-ag-root .ag-hero{
    min-height:104px!important;
    gap:10px!important;
    margin-bottom:12px!important;
    padding-right:104px!important;
  }
  #jlpt180-ag-root .ag-stat-card{
    min-height:96px!important;
    padding:12px 14px!important;
    border-radius:17px!important;
  }
  #jlpt180-ag-root .ag-stat-card span{
    font-size:12px!important;
  }
  #jlpt180-ag-root .ag-stat-card b{
    margin-top:7px!important;
    font-size:24px!important;
  }
  #jlpt180-ag-root .ag-stat-card small{
    margin-top:6px!important;
    font-size:11px!important;
  }
  #jlpt180-ag-root .ag-hero-mascot{
    width:122px!important;
    height:122px!important;
    right:-4px!important;
    bottom:-10px!important;
  }
  #jlpt180-ag-root .ag-board,
  #jlpt180-ag-root .ag-panel{
    padding:14px!important;
    border-radius:22px!important;
  }
  #jlpt180-ag-root .ag-section-head{
    margin-bottom:12px!important;
  }
  #jlpt180-ag-root .ag-section-head h2,
  #jlpt180-ag-root .ag-panel h2{
    font-size:18px!important;
  }
  #jlpt180-ag-root .ag-section-head p{
    font-size:12px!important;
  }
  #jlpt180-ag-root .ag-section-head button{
    padding:8px 13px!important;
    font-size:13px!important;
  }
  #jlpt180-ag-root .ag-steps{
    gap:10px!important;
  }
  #jlpt180-ag-root .ag-step{
    min-height:162px!important;
    padding:12px 10px 10px!important;
    border-radius:18px!important;
  }
  #jlpt180-ag-root .ag-step em{
    width:28px!important;
    height:28px!important;
    font-size:13px!important;
  }
  #jlpt180-ag-root .ag-step img{
    width:52px!important;
    height:52px!important;
    margin-top:10px!important;
  }
  #jlpt180-ag-root .ag-step h3{
    margin:5px 0 4px!important;
    font-size:15px!important;
  }
  #jlpt180-ag-root .ag-step p{
    min-height:30px!important;
    font-size:11px!important;
    line-height:1.32!important;
  }
  #jlpt180-ag-root .ag-step b{
    margin:5px 0 8px!important;
    font-size:12px!important;
  }
  #jlpt180-ag-root .ag-step a{
    min-height:31px!important;
    font-size:11px!important;
  }
  #jlpt180-ag-root .ag-grid{
    grid-template-columns:1.08fr .82fr .62fr!important;
    gap:10px!important;
    margin-top:12px!important;
  }
  #jlpt180-ag-root .ag-decks{
    gap:8px!important;
  }
  #jlpt180-ag-root .ag-decks div,
  #jlpt180-ag-root .ag-activity li{
    padding:10px!important;
    border-radius:14px!important;
  }
  #jlpt180-ag-root .ag-ring{
    width:84px!important;
    height:84px!important;
    margin:8px auto!important;
  }
  #jlpt180-ag-root .ag-ring b{
    font-size:20px!important;
  }
  #jlpt180-ag-root .ag-ring span{
    transform:translateY(21px)!important;
    font-size:10px!important;
  }
  #jlpt180-ag-root .ag-goal p{
    font-size:12px!important;
  }
}

@media (min-width:821px) and (max-width:1400px){
  #jlpt180-ag-root .ag-shell{
    grid-template-columns:200px minmax(0,1fr)!important;
    gap:10px!important;
  }
  #jlpt180-ag-root .ag-sidebar{width:200px!important;}
  #jlpt180-ag-root .ag-main{padding:16px!important;}
  #jlpt180-ag-root .ag-step{min-height:154px!important;}
  #jlpt180-ag-root .ag-step img{width:46px!important;height:46px!important;}
  #jlpt180-ag-root .ag-step h3{font-size:14px!important;}
  #jlpt180-ag-root .ag-step p{font-size:10.5px!important;}
}


/* v004 real-browser compact layout: target PC viewport after browser/toolbars */
@media (min-width:821px){
  #jlpt180-ag-root{
    padding:22px 16px 18px!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }

  #jlpt180-ag-root .ag-shell{
    width:min(100%,1500px)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    grid-template-columns:216px minmax(0,1fr)!important;
    gap:14px!important;
    align-items:start!important;
  }

  .ag-sidebar{
    min-height:720px!important;
    max-height:calc(100vh - 132px)!important;
    padding:14px!important;
    border-radius:24px!important;
  }

  .ag-brand{
    gap:10px!important;
    margin-bottom:14px!important;
  }

  .ag-brand img{
    width:42px!important;
    height:42px!important;
  }

  .ag-brand b{
    font-size:20px!important;
  }

  .ag-menu{
    gap:4px!important;
  }

  .ag-menu a{
    min-height:40px!important;
    padding:0 12px!important;
    border-radius:13px!important;
    font-size:13px!important;
  }

  .ag-user-card{
    min-height:132px!important;
    padding:12px!important;
    border-radius:18px!important;
  }

  .ag-user-card img{
    width:88px!important;
    height:88px!important;
    right:-8px!important;
    bottom:-8px!important;
  }

  .ag-user-card b{
    font-size:22px!important;
  }

  .ag-main{
    padding:16px 18px 18px!important;
    border-radius:26px!important;
    overflow:visible!important;
  }

  .ag-topbar{
    align-items:center!important;
    margin-bottom:10px!important;
  }

  .ag-eyebrow{
    font-size:12px!important;
    margin-bottom:2px!important;
  }

  .ag-topbar h1{
    font-size:24px!important;
    line-height:1.1!important;
  }

  .ag-actions button{
    width:38px!important;
    height:38px!important;
  }

  .ag-hero{
    min-height:92px!important;
    margin-bottom:12px!important;
    gap:10px!important;
    padding-right:94px!important;
  }

  .ag-stat-card{
    min-height:86px!important;
    padding:12px 14px!important;
    border-radius:17px!important;
  }

  .ag-stat-card span{
    font-size:12px!important;
    line-height:1.25!important;
  }

  .ag-stat-card b{
    margin-top:6px!important;
    font-size:23px!important;
  }

  .ag-stat-card small{
    margin-top:5px!important;
    font-size:11px!important;
  }

  .ag-hero-mascot{
    width:108px!important;
    height:108px!important;
    right:2px!important;
    bottom:-4px!important;
  }

  .ag-board{
    padding:14px!important;
    border-radius:22px!important;
  }

  .ag-section-head{
    margin-bottom:10px!important;
  }

  .ag-section-head h2,
  .ag-panel h2{
    font-size:18px!important;
  }

  .ag-section-head p{
    font-size:12px!important;
    margin-top:2px!important;
  }

  .ag-section-head button,
  .ag-panel button{
    padding:7px 12px!important;
    font-size:12px!important;
  }

  .ag-steps{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .ag-step{
    min-height:132px!important;
    padding:10px 10px 11px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-rows:30px 38px auto 22px 30px!important;
    align-items:center!important;
    text-align:center!important;
  }

  .ag-step em{
    position:absolute!important;
    top:9px!important;
    left:9px!important;
    width:28px!important;
    height:28px!important;
    font-size:13px!important;
  }

  .ag-step img{
    width:42px!important;
    height:42px!important;
    margin:0 auto!important;
  }

  .ag-step h3{
    margin:0!important;
    font-size:15px!important;
    line-height:1.15!important;
  }

  .ag-step p{
    min-height:0!important;
    height:32px!important;
    overflow:hidden!important;
    font-size:11px!important;
    line-height:1.35!important;
  }

  .ag-step b{
    margin:0!important;
    font-size:12px!important;
    line-height:1!important;
  }

  .ag-step a{
    min-height:30px!important;
    font-size:12px!important;
  }

  .ag-grid{
    margin-top:12px!important;
    grid-template-columns:1fr .82fr .62fr!important;
    gap:12px!important;
  }

  .ag-panel{
    padding:14px!important;
    border-radius:20px!important;
  }

  .ag-decks{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }

  .ag-decks div{
    padding:10px!important;
    border-radius:14px!important;
  }

  .ag-decks b{
    font-size:12px!important;
  }

  .ag-decks span{
    font-size:11px!important;
    margin:4px 0 7px!important;
  }

  .ag-activity ul{
    gap:8px!important;
  }

  .ag-activity li{
    padding:9px!important;
    grid-template-columns:30px 1fr auto!important;
  }

  .ag-activity li span{
    width:30px!important;
    height:30px!important;
  }

  .ag-ring{
    width:92px!important;
    height:92px!important;
    margin:8px auto!important;
  }

  .ag-ring b{
    font-size:22px!important;
  }

  .ag-goal p{
    font-size:12px!important;
  }
}

@media (min-width:821px) and (max-height:820px){
  .ag-sidebar{
    min-height:0!important;
  }
  .ag-user-card{
    display:none!important;
  }
  .ag-steps{
    gap:8px!important;
  }
  .ag-step{
    min-height:122px!important;
    grid-template-rows:24px 34px auto 18px 28px!important;
  }
  .ag-step img{
    width:36px!important;
    height:36px!important;
  }
  .ag-step p{
    height:28px!important;
  }
}

@media (min-width:1500px){
  #jlpt180-ag-root .ag-shell{
    width:min(100%,1560px)!important;
  }
}


/* v005: full-bleed browser layout + route selection */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding:28px clamp(18px,2vw,34px) 34px!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    min-height:auto!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    width:100%!important;
    max-width:none!important;
    min-height:calc(100vh - 96px)!important;
    height:auto!important;
    margin:0!important;
    grid-template-columns:224px minmax(0,1fr)!important;
    gap:16px!important;
  }

  html body #jlpt180-ag-root .ag-main{
    min-height:calc(100vh - 96px)!important;
    padding:18px 20px 20px!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    min-height:calc(100vh - 96px)!important;
    max-height:none!important;
  }

  .ag-route-switcher{
    display:grid!important;
    grid-template-columns:minmax(260px,1fr) auto auto!important;
    align-items:center!important;
    gap:12px!important;
    margin:0 0 12px!important;
    padding:12px 14px!important;
    border:1px solid var(--ag-line)!important;
    border-radius:20px!important;
    background:linear-gradient(135deg,rgba(238,252,232,.88),rgba(235,248,255,.72))!important;
    box-shadow:0 10px 28px rgba(66,96,78,.06)!important;
  }

  .ag-route-current span,
  .ag-route-current small{
    display:block!important;
  }

  .ag-route-current span{
    color:#64748b!important;
    font-size:11px!important;
    font-weight:850!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
  }

  .ag-route-current b{
    display:block!important;
    margin:2px 0 2px!important;
    font-size:16px!important;
    line-height:1.15!important;
  }

  .ag-route-current i{
    font-style:normal!important;
  }

  .ag-route-current small{
    color:#64748b!important;
    font-size:12px!important;
    line-height:1.25!important;
  }

  .ag-route-levels{
    display:flex!important;
    gap:6px!important;
    padding:4px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.68)!important;
    border:1px solid rgba(88,182,75,.16)!important;
  }

  .ag-route-levels button,
  .ag-route-change{
    border:0!important;
    cursor:pointer!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  .ag-route-levels button{
    width:42px!important;
    height:32px!important;
    border-radius:999px!important;
    color:#49705a!important;
    background:transparent!important;
  }

  .ag-route-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#62bd49,#3ca43e)!important;
    box-shadow:0 8px 18px rgba(88,182,75,.24)!important;
  }

  .ag-route-change{
    min-height:38px!important;
    padding:0 16px!important;
    border-radius:999px!important;
    color:#fff!important;
    background:linear-gradient(180deg,#62bd49,#3ca43e)!important;
  }

  .ag-route-modal[hidden]{
    display:none!important;
  }

  .ag-route-modal{
    position:fixed!important;
    inset:0!important;
    z-index:999999!important;
    display:grid!important;
    place-items:center!important;
    padding:20px!important;
    background:rgba(17,24,39,.32)!important;
    backdrop-filter:blur(8px)!important;
  }

  .ag-route-dialog{
    width:min(560px,calc(100vw - 36px))!important;
    border-radius:26px!important;
    border:1px solid rgba(88,182,75,.22)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,255,250,.94))!important;
    box-shadow:0 28px 80px rgba(15,35,25,.24)!important;
    padding:22px!important;
    position:relative!important;
  }

  .ag-route-dialog h2{
    margin:0 0 6px!important;
    font-size:24px!important;
    letter-spacing:-.03em!important;
  }

  .ag-route-dialog p{
    margin:0 0 16px!important;
    color:#64748b!important;
  }

  .ag-route-close{
    position:absolute!important;
    top:14px!important;
    right:14px!important;
    width:36px!important;
    height:36px!important;
    border-radius:999px!important;
    border:1px solid var(--ag-line)!important;
    background:#fff!important;
    cursor:pointer!important;
    font-size:24px!important;
    line-height:1!important;
  }

  .ag-route-options{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .ag-route-options button{
    min-height:104px!important;
    border-radius:18px!important;
    border:1px solid rgba(88,182,75,.18)!important;
    background:rgba(255,255,255,.76)!important;
    cursor:pointer!important;
    padding:12px!important;
    text-align:left!important;
  }

  .ag-route-options button:hover{
    border-color:rgba(88,182,75,.48)!important;
    box-shadow:0 12px 28px rgba(88,182,75,.12)!important;
  }

  .ag-route-options b{
    display:block!important;
    color:#2f8a36!important;
    font-size:22px!important;
  }

  .ag-route-options span{
    display:block!important;
    margin-top:6px!important;
    color:#64748b!important;
    font-size:12px!important;
    line-height:1.35!important;
  }
}

@media (min-width:821px) and (max-height:820px){
  html body #jlpt180-ag-root{
    padding-top:18px!important;
    padding-bottom:22px!important;
  }

  html body #jlpt180-ag-root .ag-shell,
  html body #jlpt180-ag-root .ag-main,
  html body #jlpt180-ag-root .ag-sidebar{
    min-height:auto!important;
  }

  .ag-route-switcher{
    padding:9px 12px!important;
    margin-bottom:9px!important;
  }

  .ag-route-current small{
    display:none!important;
  }
}

@media (max-width:820px){
  .ag-route-switcher{
    margin:0 0 12px!important;
    padding:12px!important;
    border:1px solid var(--ag-line)!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.82)!important;
  }

  .ag-route-current span,
  .ag-route-current small{
    display:block!important;
  }

  .ag-route-current span{
    color:#64748b!important;
    font-size:11px!important;
    font-weight:850!important;
  }

  .ag-route-current b{
    display:block!important;
    font-size:16px!important;
  }

  .ag-route-current i{
    font-style:normal!important;
  }

  .ag-route-levels{
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:6px!important;
    margin-top:10px!important;
  }

  .ag-route-levels button,
  .ag-route-change{
    min-height:38px!important;
    border-radius:999px!important;
    border:0!important;
    font-weight:900!important;
  }

  .ag-route-levels button{
    background:#edf7ed!important;
    color:#3d6b45!important;
  }

  .ag-route-levels button.is-active,
  .ag-route-change{
    color:#fff!important;
    background:linear-gradient(180deg,#62bd49,#3ca43e)!important;
  }

  .ag-route-change{
    width:100%!important;
    margin-top:8px!important;
  }

  .ag-route-modal[hidden]{
    display:none!important;
  }

  .ag-route-modal{
    position:fixed!important;
    inset:0!important;
    z-index:999999!important;
    display:grid!important;
    place-items:center!important;
    padding:16px!important;
    background:rgba(17,24,39,.32)!important;
  }

  .ag-route-dialog{
    width:100%!important;
    border-radius:24px!important;
    background:#fff!important;
    padding:18px!important;
    position:relative!important;
  }

  .ag-route-close{
    position:absolute!important;
    top:12px!important;
    right:12px!important;
    width:34px!important;
    height:34px!important;
    border-radius:999px!important;
    border:1px solid var(--ag-line)!important;
    background:#fff!important;
    font-size:22px!important;
  }

  .ag-route-options{
    display:grid!important;
    gap:8px!important;
  }

  .ag-route-options button{
    min-height:58px!important;
    border-radius:16px!important;
    border:1px solid var(--ag-line)!important;
    background:#f8fff8!important;
    text-align:left!important;
    padding:10px 12px!important;
  }

  .ag-route-options b{
    display:block!important;
    color:#2f8a36!important;
    font-size:18px!important;
  }

  .ag-route-options span{
    display:block!important;
    color:#64748b!important;
    font-size:12px!important;
  }
}


/* v006: compact visual scale ~85% on real PC browser */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    padding:20px clamp(16px,1.7vw,28px) 26px!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    grid-template-columns:190px minmax(0,1fr)!important;
    gap:12px!important;
    min-height:calc(100vh - 92px)!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    min-height:calc(100vh - 92px)!important;
    padding:12px!important;
    border-radius:21px!important;
  }

  .ag-brand{
    gap:8px!important;
    margin-bottom:12px!important;
  }

  .ag-brand img{
    width:36px!important;
    height:36px!important;
  }

  .ag-brand b{
    font-size:18px!important;
  }

  .ag-brand span{
    font-size:10px!important;
    padding:2px 7px!important;
  }

  .ag-menu{
    gap:3px!important;
  }

  .ag-menu a{
    min-height:35px!important;
    padding:0 10px!important;
    border-radius:12px!important;
    font-size:12px!important;
    gap:8px!important;
  }

  .ag-menu a span{
    width:20px!important;
    height:20px!important;
  }

  .ag-user-card{
    min-height:112px!important;
    padding:10px!important;
    border-radius:16px!important;
  }

  .ag-user-card b{
    font-size:19px!important;
  }

  .ag-user-card img{
    width:76px!important;
    height:76px!important;
  }

  html body #jlpt180-ag-root .ag-main{
    min-height:calc(100vh - 92px)!important;
    padding:14px 16px 16px!important;
    border-radius:23px!important;
  }

  .ag-topbar{
    margin-bottom:8px!important;
  }

  .ag-eyebrow{
    font-size:11px!important;
  }

  .ag-topbar h1{
    font-size:21px!important;
  }

  .ag-actions button{
    width:32px!important;
    height:32px!important;
    border-radius:11px!important;
  }

  .ag-hero{
    min-height:78px!important;
    margin-bottom:10px!important;
    gap:8px!important;
    padding-right:82px!important;
  }

  .ag-stat-card{
    min-height:72px!important;
    padding:10px 12px!important;
    border-radius:15px!important;
  }

  .ag-stat-card span{
    font-size:10.5px!important;
  }

  .ag-stat-card b{
    margin-top:4px!important;
    font-size:20px!important;
  }

  .ag-stat-card small{
    margin-top:3px!important;
    font-size:10px!important;
  }

  .ag-hero-mascot{
    width:90px!important;
    height:90px!important;
    bottom:-3px!important;
  }

  .ag-route-switcher{
    grid-template-columns:minmax(220px,1fr) auto auto!important;
    gap:9px!important;
    margin-bottom:9px!important;
    padding:9px 11px!important;
    border-radius:17px!important;
  }

  .ag-route-current span{
    font-size:10px!important;
  }

  .ag-route-current b{
    font-size:14px!important;
  }

  .ag-route-current small{
    font-size:10.5px!important;
  }

  .ag-route-levels button{
    width:35px!important;
    height:28px!important;
    font-size:11px!important;
  }

  .ag-route-change{
    min-height:32px!important;
    padding:0 12px!important;
    font-size:11px!important;
  }

  .ag-board{
    padding:11px!important;
    border-radius:19px!important;
  }

  .ag-section-head{
    margin-bottom:8px!important;
  }

  .ag-section-head h2,
  .ag-panel h2{
    font-size:16px!important;
  }

  .ag-section-head p{
    font-size:10.5px!important;
  }

  .ag-section-head button,
  .ag-panel button{
    padding:6px 10px!important;
    font-size:10.5px!important;
  }

  .ag-steps{
    gap:8px!important;
  }

  .ag-step{
    min-height:108px!important;
    padding:8px!important;
    border-radius:15px!important;
    grid-template-rows:22px 30px auto 17px 26px!important;
  }

  .ag-step em{
    top:7px!important;
    left:7px!important;
    width:24px!important;
    height:24px!important;
    font-size:11px!important;
  }

  .ag-step img{
    width:32px!important;
    height:32px!important;
  }

  .ag-step h3{
    font-size:13px!important;
  }

  .ag-step p{
    height:25px!important;
    font-size:9.8px!important;
    line-height:1.25!important;
  }

  .ag-step b{
    font-size:10.5px!important;
  }

  .ag-step a{
    min-height:25px!important;
    font-size:10.5px!important;
  }

  .ag-grid{
    margin-top:10px!important;
    grid-template-columns:1fr .82fr .58fr!important;
    gap:10px!important;
  }

  .ag-panel{
    padding:11px!important;
    border-radius:17px!important;
  }

  .ag-decks{
    gap:7px!important;
  }

  .ag-decks div{
    padding:8px!important;
    border-radius:12px!important;
  }

  .ag-decks b{
    font-size:10.5px!important;
  }

  .ag-decks span{
    font-size:9.8px!important;
    margin:3px 0 6px!important;
  }

  .ag-activity ul{
    gap:7px!important;
  }

  .ag-activity li{
    padding:7px!important;
    grid-template-columns:25px 1fr auto!important;
  }

  .ag-activity li span{
    width:25px!important;
    height:25px!important;
    border-radius:9px!important;
  }

  .ag-activity li b{
    font-size:10.5px!important;
  }

  .ag-activity li em{
    font-size:10px!important;
  }

  .ag-ring{
    width:76px!important;
    height:76px!important;
    margin:6px auto!important;
  }

  .ag-ring b{
    font-size:18px!important;
  }

  .ag-ring span{
    transform:translateY(20px)!important;
    font-size:10px!important;
  }

  .ag-goal p{
    font-size:10.5px!important;
  }

  .ag-route-dialog{
    transform:scale(.92)!important;
  }
}

@media (min-width:821px) and (max-height:820px){
  .ag-step{
    min-height:102px!important;
  }

  .ag-step img{
    width:30px!important;
    height:30px!important;
  }

  .ag-step p{
    height:23px!important;
  }
}


/* v007: fit real browser frame and prevent route card text/icon overlap */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    padding-top:42px!important;
    padding-bottom:18px!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    grid-template-columns:184px minmax(0,1fr)!important;
    gap:10px!important;
    min-height:auto!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    min-height:auto!important;
    height:calc(100vh - 86px)!important;
    padding:10px!important;
    overflow:hidden!important;
  }

  html body #jlpt180-ag-root .ag-main{
    min-height:auto!important;
    height:calc(100vh - 86px)!important;
    overflow:hidden!important;
    padding:12px 14px!important;
  }

  .ag-brand{
    margin-bottom:8px!important;
  }

  .ag-brand img{
    width:32px!important;
    height:32px!important;
  }

  .ag-brand b{
    font-size:16px!important;
  }

  .ag-menu a{
    min-height:32px!important;
    font-size:11.5px!important;
  }

  .ag-user-card{
    display:none!important;
  }

  .ag-topbar{
    margin-bottom:6px!important;
  }

  .ag-eyebrow{
    font-size:10px!important;
    max-width:none!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .ag-topbar h1{
    font-size:18px!important;
    line-height:1!important;
    margin-top:0!important;
  }

  .ag-actions button{
    width:28px!important;
    height:28px!important;
  }

  .ag-hero{
    min-height:62px!important;
    margin-bottom:7px!important;
    padding-right:64px!important;
    gap:7px!important;
  }

  .ag-stat-card{
    min-height:58px!important;
    padding:7px 10px!important;
    border-radius:13px!important;
  }

  .ag-stat-card span{
    font-size:9.5px!important;
    line-height:1.1!important;
  }

  .ag-stat-card b{
    font-size:17px!important;
    margin-top:2px!important;
  }

  .ag-stat-card small{
    font-size:9px!important;
    margin-top:2px!important;
  }

  .ag-hero-mascot{
    width:70px!important;
    height:70px!important;
    bottom:-2px!important;
  }

  .ag-route-switcher{
    min-height:44px!important;
    margin-bottom:7px!important;
    padding:7px 9px!important;
    border-radius:15px!important;
    grid-template-columns:minmax(180px,1fr) auto auto!important;
  }

  .ag-route-current span{
    font-size:9px!important;
  }

  .ag-route-current b{
    font-size:12px!important;
    margin:0!important;
  }

  .ag-route-current small{
    display:none!important;
  }

  .ag-route-levels button{
    width:32px!important;
    height:25px!important;
    font-size:10px!important;
  }

  .ag-route-change{
    min-height:28px!important;
    padding:0 10px!important;
    font-size:10px!important;
  }

  .ag-board{
    padding:10px!important;
    border-radius:18px!important;
  }

  .ag-section-head{
    margin-bottom:7px!important;
    align-items:center!important;
  }

  .ag-section-head h2{
    font-size:15px!important;
  }

  .ag-section-head p{
    font-size:10px!important;
  }

  .ag-section-head button{
    min-height:28px!important;
    padding:0 10px!important;
    font-size:10px!important;
  }

  .ag-steps{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:7px!important;
  }

  .ag-step{
    min-height:86px!important;
    padding:8px 9px 8px 42px!important;
    border-radius:14px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
    column-gap:7px!important;
    align-items:center!important;
    text-align:left!important;
    position:relative!important;
  }

  .ag-step em{
    position:absolute!important;
    top:8px!important;
    left:8px!important;
    width:22px!important;
    height:22px!important;
    font-size:10px!important;
    z-index:2!important;
  }

  .ag-step img{
    grid-column:1!important;
    grid-row:1 / 4!important;
    width:30px!important;
    height:30px!important;
    margin:0!important;
    align-self:center!important;
    justify-self:center!important;
    z-index:1!important;
  }

  .ag-step h3{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    z-index:2!important;
  }

  .ag-step p{
    grid-column:2!important;
    grid-row:2!important;
    height:16px!important;
    min-height:0!important;
    margin:2px 0!important;
    font-size:9px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    z-index:2!important;
  }

  .ag-step b{
    grid-column:2!important;
    grid-row:3!important;
    margin:0!important;
    font-size:10px!important;
    line-height:1!important;
    z-index:2!important;
  }

  .ag-step a{
    position:absolute!important;
    right:8px!important;
    bottom:7px!important;
    width:82px!important;
    min-height:22px!important;
    padding:0!important;
    font-size:9.5px!important;
    z-index:3!important;
  }

  .ag-grid{
    margin-top:8px!important;
    gap:8px!important;
    grid-template-columns:1fr .78fr .52fr!important;
  }

  .ag-panel{
    padding:10px!important;
    border-radius:15px!important;
    min-height:0!important;
  }

  .ag-panel h2{
    font-size:14px!important;
  }

  .ag-decks{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;
  }

  .ag-decks div{
    padding:7px!important;
    min-height:54px!important;
  }

  .ag-decks b{
    font-size:10px!important;
    line-height:1.15!important;
  }

  .ag-decks span{
    font-size:9px!important;
    margin:2px 0 5px!important;
  }

  .ag-activity li{
    padding:6px!important;
  }

  .ag-ring{
    width:68px!important;
    height:68px!important;
    margin:4px auto!important;
  }

  .ag-ring b{
    font-size:16px!important;
  }

  .ag-ring span{
    transform:translateY(18px)!important;
    font-size:9px!important;
  }

  .ag-goal p{
    font-size:9.5px!important;
    line-height:1.35!important;
  }
}

@media (min-width:821px) and (max-height:780px){
  html body #jlpt180-ag-root{
    padding-top:34px!important;
  }

  .ag-topbar{
    display:grid!important;
    grid-template-columns:1fr auto!important;
  }

  .ag-eyebrow{
    display:none!important;
  }

  .ag-hero{
    min-height:54px!important;
  }

  .ag-stat-card{
    min-height:52px!important;
  }

  .ag-step{
    min-height:78px!important;
  }

  .ag-grid{
    grid-template-columns:1fr 1fr!important;
  }

  .ag-goal{
    display:none!important;
  }
}


/* v008: mobile layout fix 360-430px */
@media (max-width:820px){
  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    width:100%!important;
    max-width:100%!important;
    min-height:100vh!important;
    padding:10px 10px 76px!important;
  }

  html body #jlpt180-ag-root .ag-main{
    width:100%!important;
    padding:0!important;
  }

  .ag-topbar{
    margin:0 0 10px!important;
    padding:6px 2px 0!important;
  }

  .ag-topbar h1{
    font-size:20px!important;
    line-height:1.16!important;
    letter-spacing:-.02em!important;
  }

  .ag-eyebrow{
    max-width:290px!important;
    font-size:11px!important;
    line-height:1.25!important;
  }

  .ag-actions{
    gap:6px!important;
  }

  .ag-actions button{
    width:34px!important;
    height:34px!important;
    border-radius:12px!important;
  }

  .ag-hero{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    padding-right:0!important;
    min-height:0!important;
    margin-bottom:10px!important;
  }

  .ag-hero-mascot{
    display:none!important;
  }

  .ag-stat-card{
    min-height:72px!important;
    padding:10px 11px!important;
    border-radius:16px!important;
  }

  .ag-stat-card span{
    font-size:11px!important;
    line-height:1.2!important;
  }

  .ag-stat-card b{
    font-size:20px!important;
    margin-top:5px!important;
  }

  .ag-stat-card small{
    font-size:10px!important;
    margin-top:4px!important;
  }

  .ag-route-switcher{
    display:block!important;
    margin:0 0 10px!important;
    padding:10px!important;
    border-radius:18px!important;
  }

  .ag-route-current span{
    font-size:10px!important;
  }

  .ag-route-current b{
    font-size:15px!important;
    margin:1px 0!important;
  }

  .ag-route-current small{
    display:block!important;
    font-size:11px!important;
    line-height:1.3!important;
  }

  .ag-route-levels{
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:5px!important;
    margin-top:8px!important;
  }

  .ag-route-levels button{
    min-height:32px!important;
    height:32px!important;
    border-radius:999px!important;
    font-size:11px!important;
  }

  .ag-route-change{
    min-height:34px!important;
    margin-top:7px!important;
    border-radius:999px!important;
    font-size:12px!important;
  }

  .ag-board{
    padding:12px!important;
    border-radius:20px!important;
  }

  .ag-section-head{
    display:flex!important;
    align-items:flex-start!important;
    margin-bottom:10px!important;
  }

  .ag-section-head h2{
    font-size:18px!important;
  }

  .ag-section-head p{
    font-size:11px!important;
    line-height:1.35!important;
  }

  .ag-section-head button{
    display:none!important;
  }

  .ag-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
  }

  .ag-step{
    min-height:78px!important;
    padding:10px 10px 10px 8px!important;
    border-radius:18px!important;
    display:grid!important;
    grid-template-columns:34px 42px minmax(0,1fr) 82px!important;
    grid-template-rows:auto auto!important;
    column-gap:8px!important;
    row-gap:3px!important;
    align-items:center!important;
    text-align:left!important;
    position:relative!important;
  }

  .ag-step em{
    position:static!important;
    grid-column:1!important;
    grid-row:1 / 3!important;
    width:30px!important;
    height:30px!important;
    font-size:13px!important;
    align-self:center!important;
    justify-self:center!important;
    z-index:2!important;
  }

  .ag-step img{
    grid-column:2!important;
    grid-row:1 / 3!important;
    width:36px!important;
    height:36px!important;
    margin:0!important;
    align-self:center!important;
    justify-self:center!important;
  }

  .ag-step h3{
    grid-column:3!important;
    grid-row:1!important;
    margin:0!important;
    font-size:15px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .ag-step p{
    grid-column:3!important;
    grid-row:2!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    font-size:11px!important;
    line-height:1.25!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
    white-space:normal!important;
  }

  .ag-step b{
    grid-column:4!important;
    grid-row:1!important;
    margin:0!important;
    font-size:12px!important;
    line-height:1!important;
    text-align:center!important;
    align-self:end!important;
    white-space:nowrap!important;
  }

  .ag-step a{
    position:static!important;
    grid-column:4!important;
    grid-row:2!important;
    width:82px!important;
    min-height:30px!important;
    padding:0 8px!important;
    font-size:11px!important;
    border-radius:999px!important;
    align-self:start!important;
    justify-self:end!important;
  }

  .ag-grid{
    grid-template-columns:1fr!important;
    gap:10px!important;
    margin-top:10px!important;
  }

  .ag-panel{
    padding:12px!important;
    border-radius:18px!important;
  }

  .ag-panel h2{
    font-size:17px!important;
  }

  .ag-decks{
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .ag-decks div{
    min-height:76px!important;
    padding:10px!important;
    border-radius:14px!important;
  }

  .ag-decks b{
    font-size:12px!important;
    line-height:1.25!important;
  }

  .ag-decks span{
    font-size:11px!important;
  }

  .ag-activity li{
    min-height:52px!important;
    padding:8px!important;
    grid-template-columns:32px minmax(0,1fr) auto!important;
  }

  .ag-activity li span{
    width:32px!important;
    height:32px!important;
  }

  .ag-goal{
    display:block!important;
  }
}

@media (max-width:430px){
  html body #jlpt180-ag-root .ag-shell{
    padding:8px 8px 72px!important;
  }

  .ag-topbar h1{
    font-size:18px!important;
  }

  .ag-eyebrow{
    font-size:10px!important;
  }

  .ag-stat-card{
    min-height:66px!important;
    padding:9px!important;
  }

  .ag-stat-card b{
    font-size:18px!important;
  }

  .ag-step{
    min-height:76px!important;
    grid-template-columns:30px 36px minmax(0,1fr) 74px!important;
    column-gap:6px!important;
    padding:9px 8px!important;
  }

  .ag-step em{
    width:27px!important;
    height:27px!important;
    font-size:12px!important;
  }

  .ag-step img{
    width:32px!important;
    height:32px!important;
  }

  .ag-step h3{
    font-size:14px!important;
  }

  .ag-step p{
    font-size:10px!important;
    -webkit-line-clamp:2!important;
  }

  .ag-step b{
    font-size:11px!important;
  }

  .ag-step a{
    width:74px!important;
    min-height:28px!important;
    font-size:10px!important;
  }

  .ag-decks{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:374px){
  .ag-step{
    grid-template-columns:28px 32px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto!important;
  }

  .ag-step b{
    grid-column:3!important;
    grid-row:3!important;
    text-align:left!important;
    margin-top:4px!important;
  }

  .ag-step a{
    grid-column:3!important;
    grid-row:4!important;
    justify-self:start!important;
    margin-top:4px!important;
  }
}


/* v009: mobile safe top + in-page app overlay */
@media (max-width:820px){
  html body #jlpt180-ag-root .ag-shell{
    padding-top:max(22px, env(safe-area-inset-top))!important;
  }

  .ag-topbar{
    padding-top:8px!important;
  }
}

@media (max-width:430px){
  html body #jlpt180-ag-root .ag-shell{
    padding-top:max(26px, env(safe-area-inset-top))!important;
  }
}

.ag-app-overlay[hidden]{
  display:none!important;
}

.ag-app-overlay{
  position:fixed!important;
  inset:0!important;
  z-index:999999!important;
  display:grid!important;
  place-items:center!important;
  padding:clamp(10px,2vw,22px)!important;
  background:rgba(225,239,226,.76)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}

.ag-app-window{
  width:min(720px,calc(100vw - 22px))!important;
  height:min(760px,calc(100vh - 22px))!important;
  max-height:calc(100vh - 22px)!important;
  border-radius:28px!important;
  border:1px solid rgba(89,122,98,.18)!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,255,249,.96)),
    url("bg-mobile.webp") center/cover no-repeat!important;
  box-shadow:0 30px 90px rgba(32,56,42,.28)!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-rows:auto 5px minmax(0,1fr) auto!important;
}

.ag-app-head{
  min-height:68px!important;
  padding:14px 16px!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) 40px!important;
  gap:10px!important;
  align-items:center!important;
  background:rgba(255,255,255,.68)!important;
  border-bottom:1px solid rgba(89,122,98,.12)!important;
}

.ag-app-close,
.ag-app-help{
  width:38px!important;
  height:38px!important;
  border-radius:999px!important;
  border:1px solid rgba(89,122,98,.18)!important;
  background:#fff!important;
  color:#1f2937!important;
  font-weight:900!important;
  cursor:pointer!important;
}

.ag-app-close{
  font-size:26px!important;
  line-height:1!important;
}

.ag-app-head span{
  display:block!important;
  color:#64748b!important;
  font-size:11px!important;
  font-weight:850!important;
}

.ag-app-head h2{
  margin:1px 0 0!important;
  font-size:20px!important;
  line-height:1.15!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

.ag-app-progress{
  height:5px!important;
  background:#e4efe7!important;
}

.ag-app-progress i{
  display:block!important;
  height:100%!important;
  width:20%;
  background:linear-gradient(90deg,#58b64b,#8edb72)!important;
  border-radius:999px!important;
  transition:width .18s ease!important;
}

.ag-app-body{
  padding:16px!important;
  overflow:auto!important;
}

.ag-app-screen{
  display:none!important;
}

.ag-app-screen.is-active{
  display:block!important;
}

.ag-study-card,
.ag-quiz-card,
.ag-reward-screen{
  border:1px solid rgba(89,122,98,.15)!important;
  background:rgba(255,255,255,.82)!important;
  border-radius:24px!important;
  padding:18px!important;
  box-shadow:0 14px 38px rgba(66,96,78,.10)!important;
}

.ag-study-card{
  min-height:300px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  gap:12px!important;
}

.ag-study-card small,
.ag-quiz-card small{
  color:#64748b!important;
  font-weight:850!important;
  font-size:12px!important;
}

.ag-study-card ruby{
  font-size:54px!important;
  line-height:1.1!important;
  font-weight:900!important;
}

.ag-study-card rt{
  font-size:14px!important;
  color:#64748b!important;
}

.ag-study-card b{
  font-size:20px!important;
}

.ag-study-card p{
  margin:0!important;
  color:#64748b!important;
  line-height:1.45!important;
}

.ag-answer-actions{
  display:grid!important;
  grid-template-columns:repeat(4,1fr)!important;
  gap:8px!important;
  margin-top:12px!important;
}

.ag-answer-actions button,
.ag-primary-action,
.ag-quiz-card button,
.ag-app-foot button{
  min-height:42px!important;
  border-radius:14px!important;
  border:1px solid rgba(89,122,98,.15)!important;
  font-weight:900!important;
  cursor:pointer!important;
}

.ag-answer-actions .bad{background:#fff0ee!important;color:#c95448!important}
.ag-answer-actions .hard{background:#fff4e5!important;color:#c57a15!important}
.ag-answer-actions .good{background:#eaf9ea!important;color:#2f8a36!important}
.ag-answer-actions .easy{background:#eaf3ff!important;color:#3679c8!important}

.ag-mini-list{
  display:grid!important;
  gap:8px!important;
  margin-top:12px!important;
}

.ag-mini-list div{
  display:flex!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:12px!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.72)!important;
  border:1px solid rgba(89,122,98,.12)!important;
}

.ag-mini-list span{
  color:#64748b!important;
}

.ag-primary-action{
  width:100%!important;
  margin-top:12px!important;
  border:0!important;
  color:#fff!important;
  background:linear-gradient(180deg,#62bd49,#3ca43e)!important;
}

.ag-quiz-card h3{
  margin:6px 0 14px!important;
  font-size:18px!important;
}

.ag-quiz-card ruby{
  display:block!important;
  text-align:center!important;
  font-size:46px!important;
  margin-bottom:14px!important;
}

.ag-quiz-card button{
  width:100%!important;
  margin:6px 0!important;
  background:#fff!important;
  text-align:left!important;
  padding:0 14px!important;
}

.ag-reward-screen{
  text-align:center!important;
}

.ag-reward-screen img{
  width:116px!important;
  height:116px!important;
  object-fit:contain!important;
}

.ag-reward-screen h3{
  margin:8px 0!important;
  font-size:24px!important;
}

.ag-reward-screen p{
  color:#64748b!important;
}

.ag-reward-screen div{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  margin:14px 0!important;
}

.ag-reward-screen div b{
  padding:12px 6px!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1px solid rgba(89,122,98,.12)!important;
  color:#2f8a36!important;
}

.ag-app-foot{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  padding:12px 16px 16px!important;
  background:rgba(255,255,255,.72)!important;
  border-top:1px solid rgba(89,122,98,.12)!important;
}

.ag-app-foot button:first-child{
  background:#fff!important;
  color:#3f4b5f!important;
}

.ag-app-foot button:last-child{
  border:0!important;
  color:#fff!important;
  background:linear-gradient(180deg,#62bd49,#3ca43e)!important;
}

@media (max-width:430px){
  .ag-app-overlay{
    padding:0!important;
    place-items:stretch!important;
  }

  .ag-app-window{
    width:100vw!important;
    height:100vh!important;
    max-height:100vh!important;
    border-radius:0!important;
    border:0!important;
  }

  .ag-app-head{
    padding-top:max(14px, env(safe-area-inset-top))!important;
  }

  .ag-study-card{
    min-height:270px!important;
  }

  .ag-study-card ruby{
    font-size:46px!important;
  }

  .ag-answer-actions{
    grid-template-columns:repeat(2,1fr)!important;
  }
}


/* v010 design-only polish: dashboard + five app screens */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    padding-top:32px!important;
  }

  html body #jlpt180-ag-root .ag-main{
    background:rgba(255,255,255,.64)!important;
  }

  .ag-topbar h1{
    font-size:20px!important;
  }

  .ag-board{
    background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(248,255,249,.72))!important;
  }

  .ag-step{
    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(248,255,249,.78))!important;
  }

  .ag-step:hover{
    transform:translateY(-1px)!important;
    box-shadow:0 12px 28px rgba(88,182,75,.12)!important;
  }
}

.ag-app-window{
  width:min(860px,calc(100vw - 24px))!important;
  height:min(760px,calc(100vh - 24px))!important;
}

.ag-app-body{
  background:linear-gradient(180deg,rgba(255,255,255,.42),rgba(245,255,248,.22))!important;
}

.ag-app-layout{
  display:grid!important;
  grid-template-columns:210px minmax(0,1fr)!important;
  gap:14px!important;
  min-height:100%!important;
}

.ag-app-side{
  border:1px solid rgba(89,122,98,.14)!important;
  background:rgba(255,255,255,.7)!important;
  border-radius:22px!important;
  padding:12px!important;
}

.ag-app-side > b{
  display:block!important;
  margin:0 0 10px!important;
  color:#1f2937!important;
  font-size:14px!important;
}

.ag-app-side button{
  width:100%!important;
  min-height:54px!important;
  margin:0 0 8px!important;
  border:1px solid rgba(89,122,98,.12)!important;
  border-radius:16px!important;
  background:#fff!important;
  text-align:left!important;
  display:grid!important;
  grid-template-columns:28px 1fr!important;
  grid-template-rows:auto auto!important;
  column-gap:8px!important;
  align-items:center!important;
  cursor:pointer!important;
  font-weight:900!important;
}

.ag-app-side button span{
  grid-row:1/3!important;
  width:26px!important;
  height:26px!important;
  border-radius:999px!important;
  display:grid!important;
  place-items:center!important;
  color:#fff!important;
  background:#58b64b!important;
  font-size:12px!important;
}

.ag-app-side button small{
  color:#64748b!important;
  font-size:11px!important;
  font-weight:700!important;
}

.ag-app-side button.is-active{
  border-color:rgba(88,182,75,.42)!important;
  background:#f1fbef!important;
}

.ag-app-main-card{
  min-width:0!important;
}

.ag-study-card{
  min-height:360px!important;
}

.ag-study-card p span,
.ag-vocab-hero p span{
  display:block!important;
  margin-top:3px!important;
  color:#8290a3!important;
}

.ag-vocab-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 132px!important;
  gap:16px!important;
  align-items:center!important;
  border:1px solid rgba(89,122,98,.14)!important;
  background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(239,251,255,.78))!important;
  border-radius:26px!important;
  padding:20px!important;
  box-shadow:0 14px 38px rgba(66,96,78,.10)!important;
}

.ag-vocab-hero img{
  width:128px!important;
  height:128px!important;
  object-fit:contain!important;
}

.ag-vocab-hero small{
  color:#64748b!important;
  font-weight:850!important;
}

.ag-vocab-hero ruby{
  display:block!important;
  margin:12px 0 4px!important;
  font-size:54px!important;
  line-height:1.1!important;
  font-weight:900!important;
}

.ag-vocab-hero rt{
  color:#64748b!important;
  font-size:14px!important;
}

.ag-vocab-hero b{
  display:block!important;
  font-size:22px!important;
}

.ag-vocab-hero p{
  margin:10px 0 0!important;
  color:#334155!important;
}

.ag-mini-list.rich{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  margin-top:14px!important;
}

.ag-mini-list.rich div{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:4px 10px!important;
}

.ag-mini-list.rich b{
  font-size:20px!important;
}

.ag-mini-list.rich span{
  grid-column:1!important;
}

.ag-mini-list.rich em{
  grid-column:2!important;
  grid-row:1/3!important;
  align-self:center!important;
  font-style:normal!important;
  padding:4px 8px!important;
  border-radius:999px!important;
  color:#2f8a36!important;
  background:#edf8ed!important;
  font-size:11px!important;
  font-weight:850!important;
}

.ag-grammar-board{
  border:1px solid rgba(89,122,98,.14)!important;
  border-radius:26px!important;
  padding:22px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(250,244,255,.78))!important;
  box-shadow:0 14px 38px rgba(66,96,78,.10)!important;
}

.ag-grammar-board small{
  color:#8b5bd6!important;
  font-weight:900!important;
}

.ag-grammar-board h3{
  margin:10px 0!important;
  font-size:42px!important;
  letter-spacing:.02em!important;
}

.ag-grammar-board p{
  margin:0 0 16px!important;
  color:#64748b!important;
  line-height:1.55!important;
}

.ag-grammar-board div{
  padding:14px!important;
  margin:10px 0!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid rgba(139,91,214,.13)!important;
}

.ag-grammar-board div b,
.ag-grammar-board div span,
.ag-grammar-board div em{
  display:block!important;
}

.ag-grammar-board div b{
  font-size:20px!important;
}

.ag-grammar-board div span{
  margin-top:4px!important;
  color:#64748b!important;
}

.ag-grammar-board div em{
  margin-top:5px!important;
  color:#2f8a36!important;
  font-style:normal!important;
}

.ag-quiz-card{
  max-width:620px!important;
  margin:0 auto!important;
}

.ag-quiz-card button.is-selected{
  border-color:rgba(88,182,75,.5)!important;
  background:#effaef!important;
  color:#2f8a36!important;
}

.ag-quiz-note{
  max-width:620px!important;
  margin:12px auto 0!important;
  padding:14px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.74)!important;
  border:1px solid rgba(89,122,98,.12)!important;
}

.ag-quiz-note b,
.ag-quiz-note span{
  display:block!important;
}

.ag-quiz-note b{
  color:#2f8a36!important;
}

.ag-quiz-note span{
  margin-top:4px!important;
  color:#64748b!important;
}

.ag-reward-screen{
  max-width:620px!important;
  margin:0 auto!important;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,250,230,.78))!important;
}

@media (max-width:820px){
  .ag-app-window{
    width:min(560px,calc(100vw - 16px))!important;
  }

  .ag-app-layout{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .ag-app-side{
    display:none!important;
  }

  .ag-study-card{
    min-height:280px!important;
  }

  .ag-vocab-hero{
    grid-template-columns:1fr 72px!important;
    padding:14px!important;
    border-radius:22px!important;
  }

  .ag-vocab-hero img{
    width:72px!important;
    height:72px!important;
  }

  .ag-vocab-hero ruby{
    font-size:40px!important;
  }

  .ag-mini-list.rich{
    grid-template-columns:1fr!important;
  }

  .ag-grammar-board{
    padding:16px!important;
  }

  .ag-grammar-board h3{
    font-size:32px!important;
  }
}

@media (max-width:430px){
  .ag-app-window{
    width:100vw!important;
  }

  .ag-app-body{
    padding:12px!important;
  }

  .ag-study-card{
    min-height:250px!important;
  }

  .ag-vocab-hero{
    grid-template-columns:1fr!important;
  }

  .ag-vocab-hero img{
    display:none!important;
  }
}



/* v011 dashboard fit + text safety */
#jlpt180-ag-root, #jlpt180-ag-root *{box-sizing:border-box!important}
#jlpt180-ag-root .ag-main,
#jlpt180-ag-root .ag-board,
#jlpt180-ag-root .ag-panel,
#jlpt180-ag-root .ag-stat-card,
#jlpt180-ag-root .ag-route-switcher,
#jlpt180-ag-root .ag-step{overflow:visible!important}
#jlpt180-ag-root .ag-topbar h1{line-height:1.12!important;padding-bottom:6px!important;overflow:visible!important;word-break:break-word!important}
#jlpt180-ag-root .ag-section-head h2,
#jlpt180-ag-root .ag-section-head p,
#jlpt180-ag-root .ag-route-current b,
#jlpt180-ag-root .ag-route-current small{white-space:normal!important}
#jlpt180-ag-root .ag-hero{align-items:stretch!important;gap:14px!important}
#jlpt180-ag-root .ag-stat-card{min-height:128px!important;padding:16px 18px!important;border-width:1px!important}
#jlpt180-ag-root .ag-stat-card span{line-height:1.35!important}
#jlpt180-ag-root .ag-route-switcher{gap:14px!important;padding:14px 16px!important}
#jlpt180-ag-root .ag-route-current{min-width:0!important}
#jlpt180-ag-root .ag-route-levels{flex-wrap:wrap!important;row-gap:8px!important}
#jlpt180-ag-root .ag-board{padding:18px!important}
#jlpt180-ag-root .ag-steps{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:14px!important}
#jlpt180-ag-root .ag-step{
  display:grid!important;
  grid-template-columns:52px minmax(0,1fr) auto!important;
  grid-template-rows:auto auto auto!important;
  gap:8px 12px!important;
  min-height:194px!important;
  padding:18px!important;
  align-items:start!important;
}
#jlpt180-ag-root .ag-step em{position:static!important;grid-column:1!important;grid-row:1!important;margin:0!important}
#jlpt180-ag-root .ag-step img{position:static!important;grid-column:1!important;grid-row:2 / span 2!important;align-self:start!important;width:42px!important;height:42px!important;margin:0!important}
#jlpt180-ag-root .ag-step h3{grid-column:2 / 4!important;grid-row:1!important;margin:0!important;line-height:1.2!important}
#jlpt180-ag-root .ag-step p{grid-column:2 / 4!important;grid-row:2!important;margin:0!important;min-height:48px!important;line-height:1.45!important}
#jlpt180-ag-root .ag-step b{grid-column:2!important;grid-row:3!important;align-self:end!important;margin:0!important;white-space:nowrap!important}
#jlpt180-ag-root .ag-step a{grid-column:3!important;grid-row:3!important;align-self:end!important;justify-self:end!important;margin:0!important;min-width:104px!important}
#jlpt180-ag-root .ag-app-head h2{line-height:1.15!important}
#jlpt180-ag-root .ag-finish-card{max-width:620px!important;margin:0 auto!important;padding:24px!important;border:1px solid rgba(89,122,98,.14)!important;border-radius:24px!important;background:rgba(255,255,255,.86)!important;text-align:center!important}
#jlpt180-ag-root .ag-finish-card h3{margin:0 0 8px!important;font-size:26px!important}
#jlpt180-ag-root .ag-finish-card p{margin:0 0 14px!important;color:#64748b!important;line-height:1.55!important}
#jlpt180-ag-root [data-quiz-opt].is-wrong{border-color:#ef6f6f!important;background:#fff1f1!important;color:#b42318!important}
#jlpt180-ag-root .ag-app-screen .ag-primary-action{margin-top:16px!important}
@media (max-width:1260px){
  #jlpt180-ag-root .ag-steps{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media (max-width:980px){
  #jlpt180-ag-root .ag-steps{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:820px){
  #jlpt180-ag-root .ag-topbar h1{font-size:34px!important}
  #jlpt180-ag-root .ag-steps{grid-template-columns:1fr!important}
  #jlpt180-ag-root .ag-step{
    grid-template-columns:44px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    min-height:auto!important;
  }
  #jlpt180-ag-root .ag-step h3{grid-column:2!important}
  #jlpt180-ag-root .ag-step p{grid-column:2!important;min-height:0!important}
  #jlpt180-ag-root .ag-step b{grid-column:2!important;grid-row:3!important;white-space:normal!important}
  #jlpt180-ag-root .ag-step a{grid-column:2!important;grid-row:4!important;justify-self:start!important;margin-top:4px!important}
}
@media (max-width:430px){
  #jlpt180-ag-root .ag-topbar{padding-top:16px!important}
  #jlpt180-ag-root .ag-topbar h1{font-size:27px!important;line-height:1.15!important}
  #jlpt180-ag-root .ag-route-switcher{padding:12px!important}
}


#jlpt180-ag-root .ag-app-layout.review{display:grid!important;grid-template-columns:280px minmax(0,1fr)!important;gap:20px!important;align-items:start!important}
#jlpt180-ag-root .ag-app-side{display:flex!important;flex-direction:column!important;gap:10px!important;padding:18px!important;border:1px solid rgba(89,122,98,.14)!important;border-radius:24px!important;background:rgba(255,255,255,.88)!important;max-height:70vh!important;overflow:auto!important}
#jlpt180-ag-root .ag-app-side>b{font-size:14px!important;color:#64748b!important}
#jlpt180-ag-root .ag-app-side button{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;width:100%!important;padding:12px 14px!important;border:1px solid rgba(89,122,98,.12)!important;border-radius:16px!important;background:#fff!important;color:#243046!important}
#jlpt180-ag-root .ag-app-side button.is-active{border-color:#56b93f!important;box-shadow:0 10px 24px rgba(86,185,63,.12)!important;background:#f8fff5!important}
#jlpt180-ag-root .ag-app-side button span{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:24px!important;height:24px!important;border-radius:999px!important;background:#56b93f!important;color:#fff!important;font-size:12px!important;font-weight:700!important}
#jlpt180-ag-root .ag-app-side button small{font-size:12px!important;color:#64748b!important}
#jlpt180-ag-root .ag-app-main-card{padding:20px!important;border:1px solid rgba(89,122,98,.14)!important;border-radius:28px!important;background:rgba(255,255,255,.9)!important}
#jlpt180-ag-root .ag-study-card{display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:10px!important;padding:24px!important;border-radius:24px!important;background:linear-gradient(180deg,#ffffff,#f7fff3)!important}
#jlpt180-ag-root .ag-study-card small{font-size:13px!important;color:#64748b!important}
#jlpt180-ag-root .ag-study-card ruby{font-size:38px!important;font-weight:800!important;color:#22314a!important}
#jlpt180-ag-root .ag-study-card rt{font-size:14px!important;color:#7a8aa4!important}
#jlpt180-ag-root .ag-study-card>b{font-size:18px!important;color:#2f8b3d!important}
#jlpt180-ag-root .ag-study-card p{margin:0!important;line-height:1.6!important;color:#516073!important}
#jlpt180-ag-root .ag-study-card p span{display:block!important;margin-top:8px!important;color:#8491a5!important}
#jlpt180-ag-root .ag-answer-actions{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;margin-top:18px!important}
#jlpt180-ag-root .ag-answer-actions button{min-height:52px!important;border-radius:16px!important;font-weight:800!important}
#jlpt180-ag-root .ag-vocab-hero{display:grid!important;grid-template-columns:minmax(0,1fr) 84px!important;gap:18px!important;align-items:center!important;padding:20px!important;border:1px solid rgba(89,122,98,.14)!important;border-radius:24px!important;background:rgba(255,255,255,.9)!important}
#jlpt180-ag-root .ag-vocab-hero small{font-size:13px!important;color:#64748b!important}
#jlpt180-ag-root .ag-vocab-hero ruby{font-size:34px!important;font-weight:800!important;color:#22314a!important}
#jlpt180-ag-root .ag-vocab-hero rt{font-size:13px!important;color:#7a8aa4!important}
#jlpt180-ag-root .ag-vocab-hero b{display:block!important;margin-top:6px!important;font-size:18px!important;color:#2f8b3d!important}
#jlpt180-ag-root .ag-vocab-hero p{margin:8px 0 0!important;line-height:1.6!important;color:#516073!important}
#jlpt180-ag-root .ag-vocab-hero p span{display:block!important;margin-top:8px!important;color:#8491a5!important}
#jlpt180-ag-root .ag-vocab-hero img{width:84px!important;height:84px!important;object-fit:contain!important}
#jlpt180-ag-root .ag-mini-list.rich{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important;margin-top:16px!important}
#jlpt180-ag-root .ag-mini-list.rich>div,
#jlpt180-ag-root .ag-grammar-board>div{display:flex!important;flex-direction:column!important;gap:5px!important;padding:14px 16px!important;border:1px solid rgba(89,122,98,.12)!important;border-radius:16px!important;background:#fff!important}
#jlpt180-ag-root .ag-mini-list.rich b,
#jlpt180-ag-root .ag-grammar-board b{font-size:16px!important;color:#243046!important}
#jlpt180-ag-root .ag-mini-list.rich span,
#jlpt180-ag-root .ag-grammar-board span{color:#64748b!important;line-height:1.5!important}
#jlpt180-ag-root .ag-mini-list.rich em,
#jlpt180-ag-root .ag-grammar-board em{font-style:normal!important;color:#90a0b6!important}
#jlpt180-ag-root .ag-grammar-board{display:grid!important;gap:12px!important;padding:20px!important;border:1px solid rgba(89,122,98,.14)!important;border-radius:24px!important;background:rgba(255,255,255,.9)!important}
#jlpt180-ag-root .ag-grammar-board small{font-size:13px!important;color:#64748b!important}
#jlpt180-ag-root .ag-grammar-board h3{margin:0!important;font-size:28px!important;color:#243046!important}
#jlpt180-ag-root .ag-grammar-board>p{margin:0 0 6px!important;color:#516073!important;line-height:1.55!important}
#jlpt180-ag-root .ag-quiz-card{display:grid!important;gap:12px!important;padding:20px!important;border:1px solid rgba(89,122,98,.14)!important;border-radius:24px!important;background:rgba(255,255,255,.9)!important}
#jlpt180-ag-root .ag-quiz-card small{font-size:13px!important;color:#64748b!important}
#jlpt180-ag-root .ag-quiz-card h3{margin:0!important;font-size:24px!important;line-height:1.35!important;color:#243046!important}
#jlpt180-ag-root .ag-quiz-card ruby{font-size:18px!important;font-weight:700!important;color:#2f8b3d!important}
#jlpt180-ag-root .ag-quiz-card rt{font-size:12px!important;color:#7a8aa4!important}
#jlpt180-ag-root .ag-quiz-card button{min-height:50px!important;border-radius:16px!important;text-align:left!important;padding:0 16px!important}
#jlpt180-ag-root .ag-quiz-card button.is-selected{border-color:#56b93f!important;background:#f6fff0!important;color:#237a36!important}
@media (max-width:820px){
 #jlpt180-ag-root .ag-app-layout.review{grid-template-columns:1fr!important}
 #jlpt180-ag-root .ag-answer-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #jlpt180-ag-root .ag-mini-list.rich{grid-template-columns:1fr!important}
 #jlpt180-ag-root .ag-vocab-hero{grid-template-columns:1fr!important}
}



/* v012 final card text/spacing fix */
#jlpt180-ag-root .ag-data-badge{
  display:inline-flex!important;
  align-items:center!important;
  width:max-content!important;
  max-width:100%!important;
  min-height:26px!important;
  margin:0 0 8px!important;
  padding:0 10px!important;
  border-radius:999px!important;
  border:1px solid rgba(89,122,98,.18)!important;
  background:rgba(255,255,255,.75)!important;
  color:#4f6357!important;
  font-size:11px!important;
  font-weight:800!important;
}
#jlpt180-ag-root .ag-data-badge[data-source="daily_status"],
#jlpt180-ag-root .ag-data-badge[data-source="today_plan"],
#jlpt180-ag-root .ag-data-badge[data-source="daily_status+today_plan"]{
  color:#247a36!important;
  background:#eefbea!important;
}

@media (min-width:821px){
  #jlpt180-ag-root .ag-topbar{
    margin-bottom:12px!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    font-size:30px!important;
    line-height:1.2!important;
    padding:0 0 4px!important;
  }

  #jlpt180-ag-root .ag-hero{
    gap:16px!important;
  }

  #jlpt180-ag-root .ag-stat-card{
    min-height:118px!important;
    padding:18px 22px!important;
  }

  #jlpt180-ag-root .ag-board{
    padding:18px 22px 22px!important;
  }

  #jlpt180-ag-root .ag-steps{
    gap:16px!important;
    align-items:stretch!important;
  }

  #jlpt180-ag-root .ag-step{
    min-height:184px!important;
    padding:18px 18px 16px!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-rows:auto auto 1fr auto!important;
    gap:8px 12px!important;
    align-items:start!important;
  }

  #jlpt180-ag-root .ag-step em{
    grid-column:1!important;
    grid-row:1!important;
    width:34px!important;
    height:34px!important;
    position:static!important;
    margin:0!important;
  }

  #jlpt180-ag-root .ag-step img{
    grid-column:1!important;
    grid-row:2 / 5!important;
    width:38px!important;
    height:38px!important;
    margin:6px 0 0!important;
    position:static!important;
  }

  #jlpt180-ag-root .ag-step h3{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    font-size:19px!important;
    line-height:1.25!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  #jlpt180-ag-root .ag-step p{
    grid-column:2!important;
    grid-row:2!important;
    min-height:44px!important;
    height:auto!important;
    margin:0!important;
    font-size:14px!important;
    line-height:1.45!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  #jlpt180-ag-root .ag-step b{
    grid-column:2!important;
    grid-row:3!important;
    align-self:end!important;
    margin:0!important;
    font-size:15px!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:stretch!important;
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    margin:0!important;
    font-size:14px!important;
    position:static!important;
  }

  #jlpt180-ag-root .ag-route-switcher{
    margin-bottom:12px!important;
  }

  #jlpt180-ag-root .ag-route-current small{
    display:block!important;
    white-space:normal!important;
    overflow:visible!important;
  }
}

@media (min-width:821px) and (max-width:1320px){
  #jlpt180-ag-root .ag-steps{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-data-badge{
    margin:6px 0 10px!important;
  }
  #jlpt180-ag-root .ag-topbar{
    padding-top:18px!important;
  }
  #jlpt180-ag-root .ag-topbar h1{
    font-size:26px!important;
    line-height:1.18!important;
  }
}



/* v013 overlay structure fix: title/icon/frame */
#jlpt180-ag-root .ag-app-window{
  width:min(980px,calc(100vw - 34px))!important;
  height:min(760px,calc(100vh - 44px))!important;
  max-height:calc(100vh - 44px)!important;
  border-radius:30px!important;
  display:grid!important;
  grid-template-rows:78px 6px minmax(0,1fr) 74px!important;
  overflow:hidden!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(248,255,249,.96)),
    url("bg-mobile.webp") center/cover no-repeat!important;
}

#jlpt180-ag-root .ag-app-head{
  min-height:78px!important;
  padding:14px 18px!important;
  display:grid!important;
  grid-template-columns:46px 52px minmax(0,1fr) 46px!important;
  gap:12px!important;
  align-items:center!important;
  border-bottom:1px solid rgba(89,122,98,.12)!important;
  background:rgba(255,255,255,.84)!important;
}

#jlpt180-ag-root .ag-app-close,
#jlpt180-ag-root .ag-app-help{
  position:static!important;
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  border-radius:16px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  margin:0!important;
  transform:none!important;
  line-height:1!important;
  z-index:2!important;
}

#jlpt180-ag-root .ag-app-close{
  font-size:30px!important;
}

#jlpt180-ag-root .ag-app-title-icon{
  width:48px!important;
  height:48px!important;
  border-radius:18px!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(180deg,#f4fff1,#e8f7e8)!important;
  border:1px solid rgba(89,122,98,.13)!important;
  box-shadow:0 8px 18px rgba(88,182,75,.10)!important;
}

#jlpt180-ag-root .ag-app-title-icon img{
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
  display:block!important;
}

#jlpt180-ag-root .ag-app-head > div{
  min-width:0!important;
  overflow:visible!important;
}

#jlpt180-ag-root .ag-app-head span[data-ag-app-kicker]{
  display:block!important;
  font-size:12px!important;
  line-height:1.2!important;
  color:#64748b!important;
  font-weight:850!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

#jlpt180-ag-root .ag-app-head h2{
  margin:3px 0 0!important;
  padding:0!important;
  font-size:25px!important;
  line-height:1.12!important;
  white-space:nowrap!important;
  overflow:visible!important;
  text-overflow:clip!important;
  color:#1f2937!important;
}

#jlpt180-ag-root .ag-app-progress{
  height:6px!important;
  background:#e7f1e8!important;
}

#jlpt180-ag-root .ag-app-body{
  min-height:0!important;
  overflow:auto!important;
  padding:18px 20px!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(44,67,50,.45) transparent!important;
}

#jlpt180-ag-root .ag-app-foot{
  min-height:74px!important;
  padding:12px 20px 16px!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:12px!important;
  align-items:center!important;
  border-top:1px solid rgba(89,122,98,.12)!important;
  background:rgba(255,255,255,.86)!important;
}

#jlpt180-ag-root .ag-app-foot button{
  min-height:46px!important;
  border-radius:16px!important;
  font-size:16px!important;
  font-weight:900!important;
}

/* Review screen */
#jlpt180-ag-root .ag-app-layout.review{
  grid-template-columns:260px minmax(0,1fr)!important;
  gap:18px!important;
}

#jlpt180-ag-root .ag-app-side{
  max-height:calc(100vh - 220px)!important;
  padding:16px!important;
  border-radius:24px!important;
  overflow:auto!important;
}

#jlpt180-ag-root .ag-app-side > b{
  margin-bottom:12px!important;
  font-size:15px!important;
}

#jlpt180-ag-root .ag-app-side button{
  min-height:72px!important;
  padding:12px 14px!important;
  border-radius:16px!important;
}

#jlpt180-ag-root .ag-app-side button span{
  flex:none!important;
}

#jlpt180-ag-root .ag-study-card{
  min-height:330px!important;
  border:1px solid rgba(89,122,98,.14)!important;
  border-radius:26px!important;
}

#jlpt180-ag-root .ag-study-card ruby{
  font-size:44px!important;
  line-height:1.08!important;
}

#jlpt180-ag-root .ag-study-card rt{
  font-size:14px!important;
}

#jlpt180-ag-root .ag-answer-actions{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
}

#jlpt180-ag-root .ag-answer-actions button{
  min-height:48px!important;
  border-radius:16px!important;
}

/* Vocab */
#jlpt180-ag-root .ag-vocab-hero{
  grid-template-columns:minmax(0,1fr) 92px!important;
  padding:22px!important;
  border-radius:26px!important;
}

#jlpt180-ag-root .ag-vocab-hero ruby{
  font-size:42px!important;
}

#jlpt180-ag-root .ag-mini-list.rich{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}

#jlpt180-ag-root .ag-mini-list.rich > div{
  min-height:98px!important;
  border-radius:18px!important;
}

/* Grammar */
#jlpt180-ag-root .ag-grammar-board{
  border-radius:26px!important;
  padding:24px!important;
}

#jlpt180-ag-root .ag-grammar-board h3{
  font-size:38px!important;
  line-height:1.15!important;
}

#jlpt180-ag-root .ag-grammar-board div{
  min-height:100px!important;
  border-radius:18px!important;
}

/* Quiz */
#jlpt180-ag-root .ag-quiz-card{
  max-width:760px!important;
  padding:26px!important;
}

#jlpt180-ag-root .ag-quiz-card h3{
  font-size:26px!important;
}

#jlpt180-ag-root .ag-quiz-card button{
  min-height:52px!important;
  font-size:16px!important;
  border-radius:17px!important;
}

/* Reward */
#jlpt180-ag-root .ag-reward-screen{
  max-width:760px!important;
  padding:30px!important;
  border-radius:28px!important;
}

#jlpt180-ag-root .ag-reward-screen img{
  width:112px!important;
  height:112px!important;
}

#jlpt180-ag-root .ag-reward-screen h3{
  font-size:28px!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-app-window{
    width:min(560px,calc(100vw - 18px))!important;
    height:min(760px,calc(100vh - 18px))!important;
    grid-template-rows:74px 6px minmax(0,1fr) 72px!important;
    border-radius:28px!important;
  }

  #jlpt180-ag-root .ag-app-head{
    grid-template-columns:42px 46px minmax(0,1fr) 42px!important;
    gap:8px!important;
    padding:12px!important;
  }

  #jlpt180-ag-root .ag-app-title-icon{
    width:42px!important;
    height:42px!important;
    border-radius:15px!important;
  }

  #jlpt180-ag-root .ag-app-title-icon img{
    width:30px!important;
    height:30px!important;
  }

  #jlpt180-ag-root .ag-app-head h2{
    font-size:21px!important;
  }

  #jlpt180-ag-root .ag-app-layout.review{
    grid-template-columns:1fr!important;
  }

  #jlpt180-ag-root .ag-app-side{
    display:none!important;
  }

  #jlpt180-ag-root .ag-mini-list.rich{
    grid-template-columns:1fr!important;
  }

  #jlpt180-ag-root .ag-vocab-hero{
    grid-template-columns:1fr!important;
  }

  #jlpt180-ag-root .ag-vocab-hero img{
    display:none!important;
  }

  #jlpt180-ag-root .ag-answer-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-app-overlay{
    padding:0!important;
  }

  #jlpt180-ag-root .ag-app-window{
    width:100vw!important;
    height:100vh!important;
    max-height:100vh!important;
    border-radius:0!important;
  }

  #jlpt180-ag-root .ag-app-head{
    padding-top:max(12px, env(safe-area-inset-top))!important;
  }

  #jlpt180-ag-root .ag-app-body{
    padding:14px!important;
  }

  #jlpt180-ag-root .ag-study-card{
    min-height:250px!important;
  }
}



/* v014: prevent sidebar/main overlap and restore clear app grid */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    padding:26px 24px 28px!important;
    overflow-x:hidden!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:250px minmax(0,1fr)!important;
    gap:22px!important;
    align-items:start!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    grid-column:1!important;
    position:relative!important;
    z-index:3!important;
    width:250px!important;
    min-width:250px!important;
    max-width:250px!important;
    height:auto!important;
    min-height:calc(100vh - 70px)!important;
    margin:0!important;
    transform:none!important;
    overflow:hidden!important;
  }

  html body #jlpt180-ag-root .ag-main{
    grid-column:2!important;
    position:relative!important;
    z-index:1!important;
    min-width:0!important;
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    transform:none!important;
    overflow:visible!important;
  }

  html body #jlpt180-ag-root .ag-sidebar,
  html body #jlpt180-ag-root .ag-main{
    box-sizing:border-box!important;
  }

  #jlpt180-ag-root .ag-brand b{
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .ag-menu a{
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .ag-hero,
  #jlpt180-ag-root .ag-route-switcher,
  #jlpt180-ag-root .ag-board,
  #jlpt180-ag-root .ag-grid{
    width:100%!important;
    max-width:100%!important;
  }

  #jlpt180-ag-root .ag-step{
    cursor:pointer!important;
  }

  #jlpt180-ag-root .ag-step a{
    pointer-events:auto!important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  html body #jlpt180-ag-root .ag-shell{
    grid-template-columns:214px minmax(0,1fr)!important;
    gap:16px!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    width:214px!important;
    min-width:214px!important;
    max-width:214px!important;
  }

  #jlpt180-ag-root .ag-steps{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:820px){
  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    display:none!important;
  }

  html body #jlpt180-ag-root .ag-main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
}



/* v015: make overlay open instantly and avoid heavy layout shifts */
#jlpt180-ag-root .ag-step,
#jlpt180-ag-root .ag-menu a[href="#review"],
#jlpt180-ag-root .ag-menu a[href="#vocab"],
#jlpt180-ag-root .ag-menu a[href="#grammar"],
#jlpt180-ag-root .ag-menu a[href="#quiz"],
#jlpt180-ag-root .ag-menu a[href="#reward"]{
  cursor:pointer!important;
}

#jlpt180-ag-root .ag-app-overlay[hidden]{
  display:none!important;
}

#jlpt180-ag-root .ag-app-overlay{
  contain:layout paint!important;
}

#jlpt180-ag-root .ag-app-window{
  contain:layout paint!important;
}



/* v016: clean JS compatibility and click safety */
#jlpt180-ag-root .ag-step,
#jlpt180-ag-root .ag-step *,
#jlpt180-ag-root [data-route-level],
#jlpt180-ag-root [data-route-pick],
#jlpt180-ag-root [data-route-open],
#jlpt180-ag-root [data-ag-app-close],
#jlpt180-ag-root [data-ag-app-prev],
#jlpt180-ag-root [data-ag-app-next]{
  touch-action:manipulation!important;
}

#jlpt180-ag-root .ag-step{
  cursor:pointer!important;
}

#jlpt180-ag-root.ag-app-is-open .ag-app-overlay{
  display:grid!important;
}

#jlpt180-ag-root .ag-app-overlay[hidden]{
  display:none!important;
}

#jlpt180-ag-root .ag-app-screen{
  display:none!important;
}

#jlpt180-ag-root .ag-app-screen.is-active{
  display:block!important;
}

#jlpt180-ag-root .ag-data-badge[data-source="checking"]{
  color:#8a6a00!important;
  background:#fff8dc!important;
}

@media (min-width:821px){
  html body #jlpt180-ag-root .ag-shell{
    display:grid!important;
    grid-template-columns:250px minmax(0,1fr)!important;
    gap:22px!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    position:relative!important;
    width:250px!important;
    min-width:250px!important;
    max-width:250px!important;
    grid-column:1!important;
  }

  html body #jlpt180-ag-root .ag-main{
    grid-column:2!important;
    min-width:0!important;
    width:100%!important;
  }
}

@media (max-width:820px){
  html body #jlpt180-ag-root .ag-shell{
    display:block!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    display:none!important;
  }
}



/* v017: pre-N5 Mam non route */
#jlpt180-ag-root .ag-route-levels{
  flex-wrap:wrap!important;
}

#jlpt180-ag-root [data-route-level="MN"]{
  min-width:86px!important;
}

#jlpt180-ag-root .ag-route-options{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-route-levels{
    grid-template-columns:repeat(3,1fr)!important;
  }

  #jlpt180-ag-root [data-route-level="MN"]{
    min-width:0!important;
  }

  #jlpt180-ag-root .ag-route-options{
    grid-template-columns:1fr!important;
  }
}



/* v018 mobile redesign: Mau 2 - colorful garden timeline */
@media (max-width:820px){
  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 18% 4%, rgba(137,230,162,.42), transparent 28%),
      radial-gradient(circle at 88% 0%, rgba(137,211,255,.38), transparent 30%),
      linear-gradient(180deg,rgba(239,255,244,.96),rgba(250,255,252,.98))!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    width:100%!important;
    max-width:100%!important;
    min-height:100vh!important;
    padding:0 12px 98px!important;
    display:block!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    display:none!important;
  }

  html body #jlpt180-ag-root .ag-main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-data-badge{
    display:none!important;
  }

  #jlpt180-ag-root .ag-topbar{
    min-height:142px!important;
    margin:0 -12px 10px!important;
    padding:22px 16px 18px 128px!important;
    display:block!important;
    position:relative!important;
    border-radius:0 0 28px 28px!important;
    background:
      linear-gradient(90deg,rgba(222,255,228,.96),rgba(235,255,251,.92)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    box-shadow:0 10px 28px rgba(53,109,72,.12)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    content:""!important;
    position:absolute!important;
    left:8px!important;
    top:18px!important;
    width:112px!important;
    height:112px!important;
    border-radius:36px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 10px 18px rgba(42,115,65,.18))!important;
  }

  #jlpt180-ag-root .ag-eyebrow{
    margin:0 0 4px!important;
    font-size:14px!important;
    line-height:1.25!important;
    color:#327b43!important;
    font-weight:800!important;
    white-space:normal!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    margin:0!important;
    padding:0!important;
    font-size:30px!important;
    line-height:1.12!important;
    letter-spacing:.01em!important;
    color:#1f2937!important;
  }

  #jlpt180-ag-root .ag-actions{
    position:absolute!important;
    right:14px!important;
    top:18px!important;
    display:flex!important;
    gap:8px!important;
  }

  #jlpt180-ag-root .ag-actions button{
    width:38px!important;
    height:38px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.82)!important;
    box-shadow:0 6px 14px rgba(40,80,60,.08)!important;
  }

  #jlpt180-ag-root .ag-hero{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    padding:0!important;
    margin:-34px 0 12px 128px!important;
    min-height:0!important;
    position:relative!important;
    z-index:3!important;
  }

  #jlpt180-ag-root .ag-stat-card{
    min-height:58px!important;
    padding:9px 12px!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.9)!important;
    border:1px solid rgba(89,122,98,.12)!important;
    box-shadow:0 8px 22px rgba(53,109,72,.10)!important;
  }

  #jlpt180-ag-root .ag-stat-card.level,
  #jlpt180-ag-root .ag-stat-card.cards{
    display:none!important;
  }

  #jlpt180-ag-root .ag-stat-card span{
    font-size:11px!important;
    line-height:1.15!important;
    color:#64748b!important;
  }

  #jlpt180-ag-root .ag-stat-card b{
    margin-top:3px!important;
    font-size:18px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-stat-card small{
    font-size:9px!important;
    margin-top:2px!important;
  }

  #jlpt180-ag-root .ag-hero-mascot{
    display:none!important;
  }

  #jlpt180-ag-root .ag-route-switcher{
    margin:0 0 12px!important;
    padding:16px!important;
    display:block!important;
    border-radius:26px!important;
    border:1px solid rgba(88,182,75,.18)!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 12px 30px rgba(53,109,72,.12)!important;
  }

  #jlpt180-ag-root .ag-route-current span{
    display:block!important;
    margin-bottom:4px!important;
    color:#667085!important;
    font-size:12px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
  }

  #jlpt180-ag-root .ag-route-current b{
    display:block!important;
    font-size:30px!important;
    line-height:1.1!important;
    color:#2f9a45!important;
  }

  #jlpt180-ag-root .ag-route-current small{
    display:block!important;
    margin-top:8px!important;
    font-size:13px!important;
    line-height:1.45!important;
    color:#667085!important;
  }

  #jlpt180-ag-root .ag-route-levels{
    margin-top:14px!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
  }

  #jlpt180-ag-root .ag-route-levels button{
    min-width:0!important;
    width:auto!important;
    min-height:40px!important;
    height:auto!important;
    border-radius:999px!important;
    border:1px solid rgba(89,122,98,.18)!important;
    background:#fff!important;
    color:#607064!important;
    font-size:13px!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .ag-route-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#66c84d,#36a53e)!important;
    border-color:transparent!important;
  }

  #jlpt180-ag-root .ag-route-change{
    width:100%!important;
    margin-top:10px!important;
    min-height:40px!important;
    border-radius:999px!important;
    font-size:13px!important;
  }

  #jlpt180-ag-root .ag-board{
    margin:0 0 12px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  #jlpt180-ag-root .ag-section-head{
    margin:0 0 10px!important;
    padding:0 4px!important;
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
  }

  #jlpt180-ag-root .ag-section-head h2{
    margin:0!important;
    font-size:22px!important;
    line-height:1.2!important;
    color:#1f2937!important;
  }

  #jlpt180-ag-root .ag-section-head p{
    margin:4px 0 0!important;
    font-size:12px!important;
    color:#667085!important;
  }

  #jlpt180-ag-root .ag-section-head button{
    display:none!important;
  }

  #jlpt180-ag-root .ag-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    position:relative!important;
  }

  #jlpt180-ag-root .ag-steps::before{
    content:""!important;
    position:absolute!important;
    left:32px!important;
    top:22px!important;
    bottom:22px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#4caf50,#48a7eb,#9d6fe8,#f26d9d,#f4a51c)!important;
    opacity:.45!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .ag-step{
    min-height:118px!important;
    margin:0 0 10px!important;
    padding:14px 12px 14px 78px!important;
    display:grid!important;
    grid-template-columns:82px minmax(0,1fr) 96px!important;
    grid-template-rows:auto auto auto!important;
    gap:4px 12px!important;
    align-items:center!important;
    position:relative!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 10px 24px rgba(53,109,72,.10)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(1){background:linear-gradient(90deg,rgba(240,255,236,.98),rgba(255,255,255,.94))!important}
  #jlpt180-ag-root .ag-step:nth-child(2){background:linear-gradient(90deg,rgba(239,249,255,.98),rgba(255,255,255,.94))!important}
  #jlpt180-ag-root .ag-step:nth-child(3){background:linear-gradient(90deg,rgba(249,243,255,.98),rgba(255,255,255,.94))!important}
  #jlpt180-ag-root .ag-step:nth-child(4){background:linear-gradient(90deg,rgba(255,241,248,.98),rgba(255,255,255,.94))!important}
  #jlpt180-ag-root .ag-step:nth-child(5){background:linear-gradient(90deg,rgba(255,248,229,.98),rgba(255,255,255,.94))!important}

  #jlpt180-ag-root .ag-step em{
    position:absolute!important;
    left:10px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:48px!important;
    height:48px!important;
    z-index:2!important;
    font-size:20px!important;
    box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
  }

  #jlpt180-ag-root .ag-step img{
    grid-column:1!important;
    grid-row:1 / 4!important;
    width:70px!important;
    height:70px!important;
    margin:0!important;
    object-fit:contain!important;
    align-self:center!important;
    justify-self:center!important;
  }

  #jlpt180-ag-root .ag-step h3{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    font-size:22px!important;
    line-height:1.15!important;
    color:#202939!important;
    white-space:normal!important;
  }

  #jlpt180-ag-root .ag-step p{
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
    min-height:0!important;
    font-size:14px!important;
    line-height:1.35!important;
    color:#667085!important;
    white-space:normal!important;
    display:block!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step b{
    grid-column:2!important;
    grid-row:3!important;
    margin:4px 0 0!important;
    font-size:15px!important;
    line-height:1.1!important;
    color:#1f2937!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:3!important;
    grid-row:1 / 4!important;
    width:96px!important;
    min-width:96px!important;
    min-height:44px!important;
    align-self:center!important;
    justify-self:end!important;
    border-radius:18px!important;
    font-size:15px!important;
    box-shadow:0 8px 18px rgba(55,151,57,.22)!important;
  }

  #jlpt180-ag-root .ag-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:12px 0 0!important;
  }

  #jlpt180-ag-root .ag-panel{
    padding:16px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.92)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 10px 24px rgba(53,109,72,.10)!important;
  }

  #jlpt180-ag-root .ag-panel h2{
    font-size:20px!important;
  }

  #jlpt180-ag-root .ag-decks{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  #jlpt180-ag-root .ag-decks div{
    min-height:78px!important;
    padding:12px!important;
    border-radius:18px!important;
  }

  #jlpt180-ag-root .ag-activity li{
    min-height:58px!important;
    border-radius:18px!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:68px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 14px 36px rgba(42,70,48,.18)!important;
    backdrop-filter:blur(14px)!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:22px!important;
    color:#7a8394!important;
    text-decoration:none!important;
    font-size:11px!important;
    font-weight:800!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a span{
    font-size:21px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a.is-active{
    background:#eaf8e7!important;
    color:#2f963f!important;
  }
}

@media (max-width:430px){
  html body #jlpt180-ag-root .ag-shell{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #jlpt180-ag-root .ag-topbar{
    min-height:132px!important;
    padding-left:116px!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    width:100px!important;
    height:100px!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    font-size:25px!important;
  }

  #jlpt180-ag-root .ag-hero{
    margin-left:116px!important;
  }

  #jlpt180-ag-root .ag-step{
    grid-template-columns:62px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    padding:13px 12px 13px 68px!important;
    min-height:132px!important;
  }

  #jlpt180-ag-root .ag-step img{
    width:58px!important;
    height:58px!important;
  }

  #jlpt180-ag-root .ag-step h3,
  #jlpt180-ag-root .ag-step p,
  #jlpt180-ag-root .ag-step b{
    grid-column:2!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    width:118px!important;
    min-width:118px!important;
    margin-top:6px!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .ag-topbar{
    padding-left:96px!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    width:84px!important;
    height:84px!important;
  }

  #jlpt180-ag-root .ag-hero{
    margin-left:0!important;
    grid-template-columns:1fr 1fr!important;
  }

  #jlpt180-ag-root .ag-step{
    padding-left:58px!important;
  }

  #jlpt180-ag-root .ag-step em{
    width:40px!important;
    height:40px!important;
  }
}



/* v019: fix mobile Mau 2 timeline layout */
@media (max-width:820px){
  #jlpt180-ag-root .ag-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    position:relative!important;
    padding-left:0!important;
  }

  #jlpt180-ag-root .ag-steps::before{
    left:27px!important;
    top:34px!important;
    bottom:34px!important;
    width:3px!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .ag-step{
    min-height:116px!important;
    margin:0!important;
    padding:14px 12px!important;
    display:grid!important;
    grid-template-columns:44px 74px minmax(0,1fr) 104px!important;
    grid-template-rows:auto auto auto!important;
    column-gap:10px!important;
    row-gap:4px!important;
    align-items:center!important;
    border-radius:24px!important;
    overflow:visible!important;
    position:relative!important;
  }

  #jlpt180-ag-root .ag-step em{
    grid-column:1!important;
    grid-row:1 / 4!important;
    position:relative!important;
    left:auto!important;
    top:auto!important;
    transform:none!important;
    width:44px!important;
    height:44px!important;
    align-self:center!important;
    justify-self:center!important;
    margin:0!important;
    z-index:3!important;
    font-size:18px!important;
    display:grid!important;
    place-items:center!important;
  }

  #jlpt180-ag-root .ag-step img{
    grid-column:2!important;
    grid-row:1 / 4!important;
    width:68px!important;
    height:68px!important;
    margin:0!important;
    align-self:center!important;
    justify-self:center!important;
    object-fit:contain!important;
    z-index:2!important;
  }

  #jlpt180-ag-root .ag-step h3{
    grid-column:3!important;
    grid-row:1!important;
    margin:0!important;
    font-size:21px!important;
    line-height:1.15!important;
    color:#1f2937!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    text-align:left!important;
  }

  #jlpt180-ag-root .ag-step p{
    grid-column:3!important;
    grid-row:2!important;
    margin:0!important;
    min-height:0!important;
    height:auto!important;
    font-size:13px!important;
    line-height:1.35!important;
    color:#667085!important;
    white-space:normal!important;
    overflow:visible!important;
    display:block!important;
    text-align:left!important;
  }

  #jlpt180-ag-root .ag-step b{
    grid-column:3!important;
    grid-row:3!important;
    margin:2px 0 0!important;
    font-size:15px!important;
    line-height:1.1!important;
    color:#202939!important;
    white-space:nowrap!important;
    text-align:left!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:4!important;
    grid-row:1 / 4!important;
    width:100%!important;
    min-width:0!important;
    max-width:104px!important;
    min-height:44px!important;
    align-self:center!important;
    justify-self:end!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:18px!important;
    font-size:14px!important;
    line-height:1.1!important;
    text-align:center!important;
    position:static!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-steps::before{
    left:24px!important;
  }

  #jlpt180-ag-root .ag-step{
    min-height:112px!important;
    padding:12px 10px!important;
    grid-template-columns:40px 58px minmax(0,1fr) 88px!important;
    column-gap:8px!important;
  }

  #jlpt180-ag-root .ag-step em{
    width:38px!important;
    height:38px!important;
    font-size:16px!important;
  }

  #jlpt180-ag-root .ag-step img{
    width:54px!important;
    height:54px!important;
  }

  #jlpt180-ag-root .ag-step h3{
    font-size:18px!important;
  }

  #jlpt180-ag-root .ag-step p{
    font-size:12px!important;
    line-height:1.3!important;
  }

  #jlpt180-ag-root .ag-step b{
    font-size:13px!important;
  }

  #jlpt180-ag-root .ag-step a{
    max-width:88px!important;
    min-height:40px!important;
    font-size:12px!important;
    border-radius:16px!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .ag-step{
    grid-template-columns:38px 52px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:3!important;
    grid-row:4!important;
    justify-self:start!important;
    width:112px!important;
    max-width:112px!important;
    margin-top:6px!important;
  }
}



/* v020: real mobile Mau 2 recreation */
@media (max-width:820px){
  html body #jlpt180-ag-root{
    background:
      radial-gradient(circle at 8% 0%, rgba(131,226,155,.42), transparent 26%),
      radial-gradient(circle at 96% 0%, rgba(142,211,255,.38), transparent 28%),
      linear-gradient(180deg,#eefcf2 0%,#f8fff9 48%,#f5fff6 100%)!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    padding:0 14px 96px!important;
  }

  /* App garden hero exactly like mock #2 */
  #jlpt180-ag-root .ag-topbar{
    margin:0 -14px 0!important;
    min-height:154px!important;
    padding:24px 18px 20px 132px!important;
    border-radius:0 0 34px 34px!important;
    display:block!important;
    position:relative!important;
    background:
      linear-gradient(90deg,rgba(223,255,228,.98),rgba(238,255,252,.96)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    box-shadow:0 14px 34px rgba(53,109,72,.14)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    content:""!important;
    position:absolute!important;
    left:14px!important;
    bottom:12px!important;
    width:112px!important;
    height:112px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 10px 18px rgba(42,115,65,.22))!important;
  }

  #jlpt180-ag-root .ag-eyebrow{
    margin:0 0 2px!important;
    color:#327b43!important;
    font-size:15px!important;
    line-height:1.2!important;
    font-weight:750!important;
    white-space:normal!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    margin:0!important;
    padding:0!important;
    color:#1f2937!important;
    font-size:30px!important;
    line-height:1.12!important;
    letter-spacing:.01em!important;
  }

  #jlpt180-ag-root .ag-actions{
    position:absolute!important;
    right:14px!important;
    top:18px!important;
    display:flex!important;
    gap:8px!important;
  }

  #jlpt180-ag-root .ag-actions button{
    width:38px!important;
    height:38px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 6px 16px rgba(40,80,60,.10)!important;
  }

  /* Two stat pills over hero */
  #jlpt180-ag-root .ag-hero{
    position:relative!important;
    z-index:4!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    min-height:0!important;
    padding:0!important;
    margin:-26px 0 14px 130px!important;
  }

  #jlpt180-ag-root .ag-stat-card{
    min-height:62px!important;
    padding:9px 12px!important;
    border-radius:23px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(89,122,98,.12)!important;
    box-shadow:0 10px 26px rgba(53,109,72,.14)!important;
  }

  #jlpt180-ag-root .ag-stat-card.level,
  #jlpt180-ag-root .ag-stat-card.cards,
  #jlpt180-ag-root .ag-hero-mascot{
    display:none!important;
  }

  #jlpt180-ag-root .ag-stat-card span{
    font-size:11px!important;
    line-height:1.1!important;
    color:#697586!important;
  }

  #jlpt180-ag-root .ag-stat-card b{
    margin-top:4px!important;
    font-size:19px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-stat-card small{
    display:none!important;
  }

  /* Route card like sample 2 */
  #jlpt180-ag-root .ag-route-switcher{
    margin:0 0 14px!important;
    padding:20px 16px 18px!important;
    border-radius:30px!important;
    display:block!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.15)!important;
    box-shadow:0 14px 32px rgba(53,109,72,.13)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-route-current span{
    display:block!important;
    margin:0 0 10px!important;
    font-size:17px!important;
    line-height:1.2!important;
    color:#1f2937!important;
    font-weight:900!important;
    text-transform:none!important;
    letter-spacing:0!important;
  }

  #jlpt180-ag-root .ag-route-current b{
    display:block!important;
    color:#2f9a45!important;
    font-size:30px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-route-current i:first-child{
    font-size:34px!important;
    font-style:normal!important;
  }

  #jlpt180-ag-root .ag-route-current i:last-child{
    margin-left:8px!important;
    font-size:16px!important;
    color:#40a156!important;
    font-style:normal!important;
  }

  #jlpt180-ag-root .ag-route-current small{
    display:block!important;
    margin:10px 0 0!important;
    color:#667085!important;
    font-size:13px!important;
    line-height:1.4!important;
  }

  #jlpt180-ag-root .ag-route-current small::after{
    content:""!important;
    display:block!important;
    height:9px!important;
    margin-top:14px!important;
    border-radius:999px!important;
    background:
      linear-gradient(90deg,#58b64b 0 42%,#e7efe8 42% 100%)!important;
  }

  #jlpt180-ag-root .ag-route-levels{
    margin:16px 0 0!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:9px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }

  #jlpt180-ag-root .ag-route-levels button{
    min-width:0!important;
    width:100%!important;
    min-height:42px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.18)!important;
    color:#5d6c63!important;
    font-size:13px!important;
    font-weight:900!important;
    box-shadow:0 4px 12px rgba(53,109,72,.05)!important;
  }

  #jlpt180-ag-root .ag-route-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#63c64c,#35a43d)!important;
    border-color:transparent!important;
    box-shadow:0 8px 18px rgba(54,164,61,.24)!important;
  }

  #jlpt180-ag-root .ag-route-change{
    width:100%!important;
    margin-top:10px!important;
    min-height:40px!important;
    border-radius:999px!important;
    font-size:13px!important;
  }

  /* Section title */
  #jlpt180-ag-root .ag-board{
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  #jlpt180-ag-root .ag-section-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    margin:0 0 10px!important;
    padding:0 4px!important;
  }

  #jlpt180-ag-root .ag-section-head h2{
    margin:0!important;
    font-size:22px!important;
    line-height:1.2!important;
    color:#1f2937!important;
  }

  #jlpt180-ag-root .ag-section-head p{
    margin:4px 0 0!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  #jlpt180-ag-root .ag-section-head button{
    display:none!important;
  }

  /* Timeline block: sample 2 */
  #jlpt180-ag-root .ag-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:0!important;
    position:relative!important;
    padding:0!important;
  }

  #jlpt180-ag-root .ag-steps::before{
    content:""!important;
    position:absolute!important;
    left:34px!important;
    top:58px!important;
    bottom:58px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;
    opacity:.55!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .ag-step{
    position:relative!important;
    z-index:1!important;
    min-height:124px!important;
    margin:0 0 10px!important;
    padding:14px 12px 14px 76px!important;
    display:grid!important;
    grid-template-columns:72px minmax(0,1fr) 92px!important;
    grid-template-rows:auto auto auto!important;
    gap:5px 14px!important;
    align-items:center!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 10px 26px rgba(53,109,72,.10)!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(1){background:linear-gradient(90deg,#f1fff0,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(2){background:linear-gradient(90deg,#eef8ff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(3){background:linear-gradient(90deg,#f7efff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(4){background:linear-gradient(90deg,#fff0f7,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(5){background:linear-gradient(90deg,#fff7e5,#fff)!important}

  #jlpt180-ag-root .ag-step em{
    position:absolute!important;
    left:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    font-size:18px!important;
    font-style:normal!important;
    color:#fff!important;
    border-radius:999px!important;
    z-index:3!important;
    box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
  }

  #jlpt180-ag-root .ag-step img{
    grid-column:1!important;
    grid-row:1 / 4!important;
    width:66px!important;
    height:66px!important;
    margin:0!important;
    object-fit:contain!important;
    align-self:center!important;
    justify-self:center!important;
  }

  #jlpt180-ag-root .ag-step h3{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    color:#1f2937!important;
    font-size:21px!important;
    line-height:1.15!important;
    text-align:left!important;
    white-space:normal!important;
  }

  #jlpt180-ag-root .ag-step p{
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
    min-height:0!important;
    height:auto!important;
    color:#667085!important;
    font-size:13px!important;
    line-height:1.35!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step p::after{
    content:""!important;
    display:block!important;
    width:min(160px,100%)!important;
    height:6px!important;
    margin-top:9px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 44%,#e7ece8 44% 100%)!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(2) p::after{background:linear-gradient(90deg,#4aa5ea 0 50%,#e7ecef 50% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(3) p::after{background:linear-gradient(90deg,#a474df 0 70%,#e9e4ef 70% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(4) p::after{background:linear-gradient(90deg,#f07ca3 0 8%,#eee6ea 8% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(5) p::after{display:none!important}

  #jlpt180-ag-root .ag-step b{
    grid-column:2!important;
    grid-row:3!important;
    margin:0!important;
    color:#202939!important;
    font-size:15px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    text-align:left!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:3!important;
    grid-row:1 / 4!important;
    width:92px!important;
    min-width:92px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 10px!important;
    align-self:center!important;
    justify-self:end!important;
    border-radius:18px!important;
    color:#fff!important;
    font-size:14px!important;
    line-height:1.12!important;
    text-align:center!important;
    box-shadow:0 8px 18px rgba(55,151,57,.22)!important;
    position:static!important;
  }

  /* Below cards */
  #jlpt180-ag-root .ag-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin:14px 0 0!important;
  }

  #jlpt180-ag-root .ag-panel{
    padding:16px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.95)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 10px 24px rgba(53,109,72,.10)!important;
  }

  #jlpt180-ag-root .ag-panel h2{
    font-size:20px!important;
    margin:0 0 10px!important;
  }

  #jlpt180-ag-root .ag-decks{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  #jlpt180-ag-root .ag-decks div{
    min-height:78px!important;
    padding:12px!important;
    border-radius:18px!important;
  }

  #jlpt180-ag-root .ag-activity li{
    min-height:58px!important;
    border-radius:18px!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:68px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 14px 36px rgba(42,70,48,.18)!important;
    backdrop-filter:blur(14px)!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:22px!important;
    color:#7a8394!important;
    text-decoration:none!important;
    font-size:11px!important;
    font-weight:800!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a span{
    font-size:21px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a.is-active{
    background:#eaf8e7!important;
    color:#2f963f!important;
  }
}

/* 390px and below: keep same design, just reduce sizes */
@media (max-width:430px){
  html body #jlpt180-ag-root .ag-shell{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #jlpt180-ag-root .ag-topbar{
    min-height:136px!important;
    padding-left:114px!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    width:96px!important;
    height:96px!important;
    left:12px!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    font-size:26px!important;
  }

  #jlpt180-ag-root .ag-hero{
    margin-left:114px!important;
  }

  #jlpt180-ag-root .ag-step{
    min-height:116px!important;
    padding:13px 10px 13px 66px!important;
    grid-template-columns:56px minmax(0,1fr) 82px!important;
    gap:4px 9px!important;
  }

  #jlpt180-ag-root .ag-steps::before{
    left:30px!important;
  }

  #jlpt180-ag-root .ag-step em{
    left:9px!important;
    width:42px!important;
    height:42px!important;
    font-size:16px!important;
  }

  #jlpt180-ag-root .ag-step img{
    width:54px!important;
    height:54px!important;
  }

  #jlpt180-ag-root .ag-step h3{
    font-size:19px!important;
  }

  #jlpt180-ag-root .ag-step p{
    font-size:12px!important;
  }

  #jlpt180-ag-root .ag-step b{
    font-size:13px!important;
  }

  #jlpt180-ag-root .ag-step a{
    width:82px!important;
    min-width:82px!important;
    min-height:42px!important;
    font-size:12px!important;
  }

  #jlpt180-ag-root .ag-decks{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .ag-topbar{
    padding-left:98px!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    width:82px!important;
    height:82px!important;
  }

  #jlpt180-ag-root .ag-hero{
    margin:8px 0 12px!important;
  }

  #jlpt180-ag-root .ag-step{
    grid-template-columns:50px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    width:118px!important;
    min-width:118px!important;
    margin-top:6px!important;
  }
}



/* v021: mobile Mau 2 layout reset, clean priority rules */
@media (max-width:820px){
  html body #jlpt180-ag-root,
  html body .entry-content #jlpt180-ag-root,
  html body .site-content #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 14% -4%, rgba(104,220,142,.42), transparent 28%),
      radial-gradient(circle at 94% 0%, rgba(116,205,255,.34), transparent 30%),
      linear-gradient(180deg,#effcf3 0%,#fbfffc 45%,#f3fff5 100%)!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    min-height:100vh!important;
    padding:0 18px 104px!important;
    margin:0!important;
    gap:0!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    display:none!important;
  }

  html body #jlpt180-ag-root .ag-main{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-data-badge{
    order:0!important;
    align-self:flex-start!important;
    margin:8px 0 8px!important;
  }

  /* 1. Header hero */
  #jlpt180-ag-root .ag-topbar{
    order:1!important;
    position:relative!important;
    display:block!important;
    width:auto!important;
    min-height:148px!important;
    margin:0 -18px 0!important;
    padding:24px 18px 22px 136px!important;
    border:0!important;
    border-radius:0 0 34px 34px!important;
    background:
      linear-gradient(90deg,rgba(220,255,226,.98),rgba(238,255,251,.96)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    box-shadow:0 14px 36px rgba(53,109,72,.14)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    content:""!important;
    position:absolute!important;
    left:16px!important;
    top:22px!important;
    width:104px!important;
    height:104px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 12px 20px rgba(42,115,65,.22))!important;
    z-index:1!important;
  }

  #jlpt180-ag-root .ag-topbar > div:first-child{
    position:relative!important;
    z-index:2!important;
    max-width:230px!important;
  }

  #jlpt180-ag-root .ag-eyebrow{
    display:block!important;
    margin:0 0 5px!important;
    padding:0!important;
    color:#2f7b42!important;
    font-size:15px!important;
    line-height:1.2!important;
    font-weight:750!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    display:block!important;
    margin:0!important;
    padding:0!important;
    color:#202939!important;
    font-size:30px!important;
    line-height:1.1!important;
    letter-spacing:.01em!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-actions{
    position:absolute!important;
    top:18px!important;
    right:16px!important;
    z-index:3!important;
    display:flex!important;
    gap:8px!important;
  }

  #jlpt180-ag-root .ag-actions button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    border-radius:18px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    background:rgba(255,255,255,.88)!important;
    box-shadow:0 6px 16px rgba(40,80,60,.10)!important;
    display:grid!important;
    place-items:center!important;
  }

  /* 2. Stat pills */
  #jlpt180-ag-root .ag-hero{
    order:2!important;
    position:relative!important;
    z-index:5!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:auto!important;
    min-height:0!important;
    padding:0!important;
    margin:-28px 0 14px 126px!important;
  }

  #jlpt180-ag-root .ag-stat-card{
    display:block!important;
    min-height:62px!important;
    padding:10px 12px!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.12)!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 10px 26px rgba(53,109,72,.14)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-stat-card.level,
  #jlpt180-ag-root .ag-stat-card.cards,
  #jlpt180-ag-root .ag-hero-mascot{
    display:none!important;
  }

  #jlpt180-ag-root .ag-stat-card span{
    display:block!important;
    color:#697586!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .ag-stat-card b{
    display:block!important;
    margin:5px 0 0!important;
    color:#202939!important;
    font-size:19px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-stat-card small{
    display:none!important;
  }

  /* 3. Route card */
  #jlpt180-ag-root .ag-route-switcher{
    order:3!important;
    display:block!important;
    width:100%!important;
    margin:0 0 16px!important;
    padding:18px 16px 16px!important;
    border-radius:30px!important;
    border:1px solid rgba(89,122,98,.15)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 14px 32px rgba(53,109,72,.13)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-route-current{
    min-width:0!important;
  }

  #jlpt180-ag-root .ag-route-current span{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:0 0 10px!important;
    padding:0!important;
    color:#202939!important;
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:900!important;
    text-transform:none!important;
    letter-spacing:0!important;
  }

  #jlpt180-ag-root .ag-route-current span::before{
    content:"📖"!important;
    font-size:22px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-route-current b{
    display:flex!important;
    align-items:baseline!important;
    gap:8px!important;
    color:#2f9a45!important;
    font-size:32px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .ag-route-current i{
    font-style:normal!important;
  }

  #jlpt180-ag-root .ag-route-current i:last-child{
    color:#38a153!important;
    font-size:16px!important;
    font-weight:800!important;
  }

  #jlpt180-ag-root .ag-route-current small{
    display:block!important;
    margin:10px 0 0!important;
    color:#667085!important;
    font-size:13px!important;
    line-height:1.42!important;
    white-space:normal!important;
  }

  #jlpt180-ag-root .ag-route-current small::after{
    content:""!important;
    display:block!important;
    width:100%!important;
    height:9px!important;
    margin-top:14px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 42%,#e7efe8 42% 100%)!important;
  }

  #jlpt180-ag-root .ag-route-levels{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:9px!important;
    margin:16px 0 0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }

  #jlpt180-ag-root .ag-route-levels button{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    border-radius:999px!important;
    border:1px solid rgba(89,122,98,.18)!important;
    background:#fff!important;
    color:#5d6c63!important;
    font-size:13px!important;
    font-weight:900!important;
    box-shadow:0 4px 12px rgba(53,109,72,.05)!important;
  }

  #jlpt180-ag-root .ag-route-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#63c64c,#35a43d)!important;
    border-color:transparent!important;
    box-shadow:0 8px 18px rgba(54,164,61,.24)!important;
  }

  #jlpt180-ag-root .ag-route-change{
    width:100%!important;
    min-height:40px!important;
    margin:10px 0 0!important;
    border-radius:999px!important;
    font-size:13px!important;
  }

  /* 4. Today's route title */
  #jlpt180-ag-root .ag-board{
    order:4!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:0 0 12px!important;
    padding:0 4px!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head h2{
    margin:0!important;
    color:#1f2937!important;
    font-size:22px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head p{
    margin:4px 0 0!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head button{
    display:none!important;
  }

  /* 5. Timeline */
  #jlpt180-ag-root .ag-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    position:relative!important;
    padding:0!important;
    margin:0!important;
  }

  #jlpt180-ag-root .ag-steps::before{
    content:""!important;
    position:absolute!important;
    left:34px!important;
    top:60px!important;
    bottom:60px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;
    opacity:.52!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .ag-step{
    position:relative!important;
    z-index:1!important;
    display:grid!important;
    grid-template-columns:70px minmax(0,1fr) 96px!important;
    grid-template-rows:auto auto auto!important;
    gap:5px 13px!important;
    align-items:center!important;
    width:100%!important;
    min-height:124px!important;
    margin:0!important;
    padding:14px 12px 14px 76px!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 10px 26px rgba(53,109,72,.10)!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(1){background:linear-gradient(90deg,#f1fff0,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(2){background:linear-gradient(90deg,#eef8ff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(3){background:linear-gradient(90deg,#f7efff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(4){background:linear-gradient(90deg,#fff0f7,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(5){background:linear-gradient(90deg,#fff7e5,#fff)!important}

  #jlpt180-ag-root .ag-step em{
    position:absolute!important;
    left:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    margin:0!important;
    color:#fff!important;
    border-radius:999px!important;
    font-size:18px!important;
    font-style:normal!important;
    font-weight:900!important;
    z-index:3!important;
    box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
  }

  #jlpt180-ag-root .ag-step img{
    grid-column:1!important;
    grid-row:1 / 4!important;
    width:66px!important;
    height:66px!important;
    margin:0!important;
    align-self:center!important;
    justify-self:center!important;
    object-fit:contain!important;
    position:static!important;
  }

  #jlpt180-ag-root .ag-step h3{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    color:#1f2937!important;
    font-size:21px!important;
    line-height:1.15!important;
    font-weight:900!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step p{
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
    min-height:0!important;
    height:auto!important;
    color:#667085!important;
    font-size:13px!important;
    line-height:1.35!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    display:block!important;
  }

  #jlpt180-ag-root .ag-step p::after{
    content:""!important;
    display:block!important;
    width:min(150px,100%)!important;
    height:6px!important;
    margin-top:9px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 44%,#e7ece8 44% 100%)!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(2) p::after{background:linear-gradient(90deg,#4aa5ea 0 50%,#e7ecef 50% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(3) p::after{background:linear-gradient(90deg,#a474df 0 70%,#e9e4ef 70% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(4) p::after{background:linear-gradient(90deg,#f07ca3 0 8%,#eee6ea 8% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(5) p::after{display:none!important}

  #jlpt180-ag-root .ag-step b{
    grid-column:2!important;
    grid-row:3!important;
    margin:0!important;
    color:#202939!important;
    font-size:15px!important;
    line-height:1.15!important;
    font-weight:900!important;
    white-space:nowrap!important;
    text-align:left!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:3!important;
    grid-row:1 / 4!important;
    align-self:center!important;
    justify-self:end!important;
    width:96px!important;
    min-width:96px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0 10px!important;
    border-radius:18px!important;
    position:static!important;
    color:#fff!important;
    font-size:14px!important;
    line-height:1.12!important;
    text-align:center!important;
    box-shadow:0 8px 18px rgba(55,151,57,.22)!important;
  }

  /* 6. Reorder lower dashboard */
  #jlpt180-ag-root .ag-grid{
    order:5!important;
    display:flex!important;
    flex-direction:column!important;
    gap:12px!important;
    width:100%!important;
    margin:14px 0 0!important;
  }

  #jlpt180-ag-root .ag-goal{order:1!important;}
  #jlpt180-ag-root .ag-activity{order:2!important;}
  #jlpt180-ag-root .ag-library{order:3!important;}

  #jlpt180-ag-root .ag-panel{
    width:100%!important;
    padding:16px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.95)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 10px 24px rgba(53,109,72,.10)!important;
  }

  #jlpt180-ag-root .ag-panel h2{
    margin:0 0 10px!important;
    font-size:20px!important;
    line-height:1.2!important;
  }

  #jlpt180-ag-root .ag-decks{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }

  #jlpt180-ag-root .ag-decks div{
    min-height:78px!important;
    padding:12px!important;
    border-radius:18px!important;
  }

  #jlpt180-ag-root .ag-activity li{
    min-height:58px!important;
    border-radius:18px!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:68px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 14px 36px rgba(42,70,48,.18)!important;
    backdrop-filter:blur(14px)!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:22px!important;
    color:#7a8394!important;
    text-decoration:none!important;
    font-size:11px!important;
    font-weight:800!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a span{
    font-size:21px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a.is-active{
    background:#eaf8e7!important;
    color:#2f963f!important;
  }
}

@media (max-width:430px){
  html body #jlpt180-ag-root .ag-shell{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #jlpt180-ag-root .ag-topbar{
    min-height:138px!important;
    margin-left:-10px!important;
    margin-right:-10px!important;
    padding-left:112px!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    left:12px!important;
    top:24px!important;
    width:92px!important;
    height:92px!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    font-size:25px!important;
  }

  #jlpt180-ag-root .ag-hero{
    margin-left:112px!important;
  }

  #jlpt180-ag-root .ag-stat-card{
    min-height:58px!important;
    padding:9px 10px!important;
  }

  #jlpt180-ag-root .ag-route-current b{
    font-size:29px!important;
  }

  #jlpt180-ag-root .ag-step{
    min-height:116px!important;
    padding:13px 10px 13px 66px!important;
    grid-template-columns:56px minmax(0,1fr) 82px!important;
    gap:4px 9px!important;
  }

  #jlpt180-ag-root .ag-steps::before{
    left:30px!important;
  }

  #jlpt180-ag-root .ag-step em{
    left:9px!important;
    width:42px!important;
    height:42px!important;
    font-size:16px!important;
  }

  #jlpt180-ag-root .ag-step img{
    width:54px!important;
    height:54px!important;
  }

  #jlpt180-ag-root .ag-step h3{
    font-size:19px!important;
  }

  #jlpt180-ag-root .ag-step p{
    font-size:12px!important;
  }

  #jlpt180-ag-root .ag-step b{
    font-size:13px!important;
  }

  #jlpt180-ag-root .ag-step a{
    width:82px!important;
    min-width:82px!important;
    min-height:42px!important;
    font-size:12px!important;
  }

  #jlpt180-ag-root .ag-decks{
    grid-template-columns:1fr!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .ag-topbar{
    padding-left:96px!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    width:78px!important;
    height:78px!important;
  }

  #jlpt180-ag-root .ag-hero{
    margin:8px 0 12px!important;
  }

  #jlpt180-ag-root .ag-step{
    grid-template-columns:50px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    width:118px!important;
    min-width:118px!important;
    margin-top:6px!important;
  }
}



/* v022: hide mobile bottom nav on desktop */
#jlpt180-ag-root .ag-mobile-bottom-nav{
  display:none!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-mobile-bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:68px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 14px 36px rgba(42,70,48,.18)!important;
    backdrop-filter:blur(14px)!important;
  }
}



/* v023: mobile cleanup - keep only goal, fix step cards */
@media (max-width:820px){
  /* Hide sections requested by user */
  #jlpt180-ag-root .ag-library,
  #jlpt180-ag-root .ag-activity{
    display:none!important;
  }

  #jlpt180-ag-root .ag-grid{
    display:block!important;
    margin:14px 0 0!important;
  }

  #jlpt180-ag-root .ag-goal{
    display:block!important;
    width:100%!important;
    margin:0 0 96px!important;
    padding:18px 16px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 10px 24px rgba(53,109,72,.10)!important;
    text-align:center!important;
  }

  #jlpt180-ag-root .ag-goal h2{
    margin:0 0 10px!important;
    font-size:21px!important;
    line-height:1.2!important;
  }

  #jlpt180-ag-root .ag-ring{
    width:104px!important;
    height:104px!important;
    margin:10px auto!important;
  }

  #jlpt180-ag-root .ag-ring b{
    font-size:24px!important;
  }

  #jlpt180-ag-root .ag-ring span{
    transform:translateY(26px)!important;
    font-size:12px!important;
  }

  #jlpt180-ag-root .ag-goal p{
    max-width:280px!important;
    margin:8px auto 0!important;
    font-size:13px!important;
    line-height:1.45!important;
    color:#667085!important;
  }

  /* Strong reset for mobile step layout */
  #jlpt180-ag-root .ag-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:0!important;
    margin:0!important;
    position:relative!important;
  }

  #jlpt180-ag-root .ag-steps::before{
    content:""!important;
    position:absolute!important;
    left:28px!important;
    top:54px!important;
    bottom:54px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;
    opacity:.38!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .ag-step{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    min-height:118px!important;
    margin:0!important;
    padding:14px 14px 14px 68px!important;
    display:grid!important;
    grid-template-columns:62px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    gap:3px 12px!important;
    align-items:center!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 10px 24px rgba(53,109,72,.10)!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(1){background:linear-gradient(90deg,#f1fff0,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(2){background:linear-gradient(90deg,#eef8ff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(3){background:linear-gradient(90deg,#f7efff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(4){background:linear-gradient(90deg,#fff0f7,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(5){background:linear-gradient(90deg,#fff7e5,#fff)!important}

  #jlpt180-ag-root .ag-step em{
    position:absolute!important;
    left:8px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    color:#fff!important;
    font-size:16px!important;
    font-weight:900!important;
    z-index:3!important;
    box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
  }

  #jlpt180-ag-root .ag-step img{
    grid-column:1!important;
    grid-row:1 / 5!important;
    width:58px!important;
    height:58px!important;
    margin:0!important;
    align-self:center!important;
    justify-self:center!important;
    object-fit:contain!important;
    position:static!important;
    z-index:2!important;
  }

  #jlpt180-ag-root .ag-step h3{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    color:#1f2937!important;
    font-size:20px!important;
    line-height:1.15!important;
    font-weight:900!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step p{
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
    min-height:0!important;
    height:auto!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    display:block!important;
  }

  #jlpt180-ag-root .ag-step p::after{
    content:""!important;
    display:block!important;
    width:100%!important;
    max-width:150px!important;
    height:6px!important;
    margin-top:7px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 44%,#e7ece8 44% 100%)!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(2) p::after{background:linear-gradient(90deg,#4aa5ea 0 50%,#e7ecef 50% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(3) p::after{background:linear-gradient(90deg,#a474df 0 70%,#e9e4ef 70% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(4) p::after{background:linear-gradient(90deg,#f07ca3 0 8%,#eee6ea 8% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(5) p::after{display:none!important}

  #jlpt180-ag-root .ag-step b{
    grid-column:2!important;
    grid-row:3!important;
    margin:2px 0 0!important;
    color:#202939!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:900!important;
    white-space:nowrap!important;
    text-align:left!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    align-self:start!important;
    width:auto!important;
    min-width:112px!important;
    max-width:140px!important;
    min-height:38px!important;
    margin:6px 0 0!important;
    padding:0 16px!important;
    border-radius:16px!important;
    position:static!important;
    color:#fff!important;
    font-size:13px!important;
    line-height:1.1!important;
    text-align:center!important;
    box-shadow:0 8px 18px rgba(55,151,57,.22)!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-step{
    min-height:112px!important;
    padding:13px 12px 13px 62px!important;
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:3px 10px!important;
  }

  #jlpt180-ag-root .ag-step em{
    left:7px!important;
    width:38px!important;
    height:38px!important;
    font-size:15px!important;
  }

  #jlpt180-ag-root .ag-step img{
    width:50px!important;
    height:50px!important;
  }

  #jlpt180-ag-root .ag-step h3{
    font-size:18px!important;
  }

  #jlpt180-ag-root .ag-step p{
    font-size:11px!important;
  }

  #jlpt180-ag-root .ag-step a{
    min-width:104px!important;
    min-height:36px!important;
    font-size:12px!important;
  }
}



/* v024: clean mobile reset against Astra/theme clipping */
@media (max-width:820px){
  html,
  body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    height:auto!important;
  }

  body .site-content,
  body .ast-container,
  body .content-area,
  body .entry-content,
  body .wp-site-blocks{
    overflow:visible!important;
  }

  body .entry-content #jlpt180-ag-root,
  body .site-content #jlpt180-ag-root,
  body .ast-container #jlpt180-ag-root,
  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    position:relative!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    transform:none!important;
    background:
      radial-gradient(circle at 14% -4%, rgba(104,220,142,.42), transparent 28%),
      radial-gradient(circle at 94% 0%, rgba(116,205,255,.34), transparent 30%),
      linear-gradient(180deg,#effcf3 0%,#fbfffc 45%,#f3fff5 100%)!important;
  }

  #jlpt180-ag-root,
  #jlpt180-ag-root *{
    box-sizing:border-box!important;
  }

  #jlpt180-ag-root a{
    color:inherit!important;
    text-decoration:none!important;
  }

  #jlpt180-ag-root button{
    appearance:none!important;
    -webkit-appearance:none!important;
    font:inherit!important;
  }

  html body #jlpt180-ag-root .ag-shell{
    display:block!important;
    width:100%!important;
    max-width:430px!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:0 14px 104px!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    display:none!important;
  }

  html body #jlpt180-ag-root .ag-main{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    transform:none!important;
  }

  #jlpt180-ag-root .ag-data-badge{
    display:none!important;
  }

  /* Header must start at the very top and stay scrollable */
  #jlpt180-ag-root .ag-topbar{
    display:block!important;
    position:relative!important;
    width:auto!important;
    height:auto!important;
    min-height:150px!important;
    max-height:none!important;
    margin:0 -14px 12px!important;
    padding:24px 16px 20px 132px!important;
    border:0!important;
    border-radius:0 0 34px 34px!important;
    background:
      linear-gradient(90deg,rgba(220,255,226,.98),rgba(238,255,251,.96)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    box-shadow:0 14px 36px rgba(53,109,72,.14)!important;
    overflow:visible!important;
    transform:none!important;
    z-index:1!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    content:""!important;
    position:absolute!important;
    left:14px!important;
    top:22px!important;
    width:106px!important;
    height:106px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 12px 20px rgba(42,115,65,.22))!important;
    z-index:1!important;
  }

  #jlpt180-ag-root .ag-topbar > div:first-child{
    position:relative!important;
    z-index:2!important;
    max-width:210px!important;
  }

  #jlpt180-ag-root .ag-eyebrow{
    display:block!important;
    margin:0 0 5px!important;
    padding:0!important;
    color:#2f7b42!important;
    font-size:15px!important;
    line-height:1.2!important;
    font-weight:750!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    display:block!important;
    margin:0!important;
    padding:0!important;
    color:#202939!important;
    font-size:29px!important;
    line-height:1.12!important;
    letter-spacing:.01em!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    word-break:normal!important;
  }

  #jlpt180-ag-root .ag-actions{
    position:absolute!important;
    top:18px!important;
    right:14px!important;
    z-index:3!important;
    display:flex!important;
    gap:8px!important;
    width:auto!important;
    margin:0!important;
  }

  #jlpt180-ag-root .ag-actions button{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    padding:0!important;
    border-radius:18px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    background:rgba(255,255,255,.88)!important;
    box-shadow:0 6px 16px rgba(40,80,60,.10)!important;
    display:grid!important;
    place-items:center!important;
  }

  /* Stats: no negative pull that hides the header */
  #jlpt180-ag-root .ag-hero{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
    min-height:0!important;
    margin:0 0 14px!important;
    padding:0!important;
    position:relative!important;
    transform:none!important;
    z-index:2!important;
  }

  #jlpt180-ag-root .ag-stat-card{
    display:block!important;
    min-height:62px!important;
    padding:10px 12px!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.12)!important;
    background:rgba(255,255,255,.94)!important;
    box-shadow:0 10px 26px rgba(53,109,72,.14)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-stat-card.level,
  #jlpt180-ag-root .ag-stat-card.cards,
  #jlpt180-ag-root .ag-hero-mascot{
    display:none!important;
  }

  #jlpt180-ag-root .ag-stat-card span{
    display:block!important;
    color:#697586!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .ag-stat-card b{
    display:block!important;
    margin:5px 0 0!important;
    color:#202939!important;
    font-size:19px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-stat-card small{
    display:none!important;
  }

  /* Route card */
  #jlpt180-ag-root .ag-route-switcher{
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0 0 16px!important;
    padding:18px 16px 16px!important;
    border-radius:30px!important;
    border:1px solid rgba(89,122,98,.15)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 14px 32px rgba(53,109,72,.13)!important;
    overflow:visible!important;
    transform:none!important;
  }

  #jlpt180-ag-root .ag-route-current span{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    margin:0 0 10px!important;
    padding:0!important;
    color:#202939!important;
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:900!important;
    text-transform:none!important;
    letter-spacing:0!important;
  }

  #jlpt180-ag-root .ag-route-current span::before{
    content:"📖"!important;
    font-size:22px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-route-current b{
    display:flex!important;
    align-items:baseline!important;
    gap:8px!important;
    color:#2f9a45!important;
    font-size:31px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .ag-route-current i{
    font-style:normal!important;
  }

  #jlpt180-ag-root .ag-route-current i:last-child{
    color:#38a153!important;
    font-size:16px!important;
    font-weight:800!important;
  }

  #jlpt180-ag-root .ag-route-current small{
    display:block!important;
    margin:10px 0 0!important;
    color:#667085!important;
    font-size:13px!important;
    line-height:1.42!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-route-current small::after{
    content:""!important;
    display:block!important;
    width:100%!important;
    height:9px!important;
    margin-top:14px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 42%,#e7efe8 42% 100%)!important;
  }

  #jlpt180-ag-root .ag-route-levels{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:9px!important;
    margin:16px 0 0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }

  #jlpt180-ag-root .ag-route-levels button{
    width:100%!important;
    min-width:0!important;
    min-height:42px!important;
    height:auto!important;
    padding:0 8px!important;
    border-radius:999px!important;
    border:1px solid rgba(89,122,98,.18)!important;
    background:#fff!important;
    color:#5d6c63!important;
    font-size:13px!important;
    font-weight:900!important;
    box-shadow:0 4px 12px rgba(53,109,72,.05)!important;
  }

  #jlpt180-ag-root .ag-route-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#63c64c,#35a43d)!important;
    border-color:transparent!important;
    box-shadow:0 8px 18px rgba(54,164,61,.24)!important;
  }

  #jlpt180-ag-root .ag-route-change{
    width:100%!important;
    min-height:40px!important;
    margin:10px 0 0!important;
    border-radius:999px!important;
    font-size:13px!important;
  }

  /* Today's route */
  #jlpt180-ag-root .ag-board{
    display:block!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head{
    display:flex!important;
    align-items:flex-end!important;
    justify-content:space-between!important;
    gap:12px!important;
    margin:0 0 12px!important;
    padding:0 4px!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head h2{
    margin:0!important;
    color:#1f2937!important;
    font-size:22px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head p{
    margin:4px 0 0!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head button{
    display:none!important;
  }

  #jlpt180-ag-root .ag-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    position:relative!important;
    padding:0!important;
    margin:0!important;
  }

  #jlpt180-ag-root .ag-steps::before{
    content:""!important;
    position:absolute!important;
    left:28px!important;
    top:54px!important;
    bottom:54px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;
    opacity:.38!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .ag-step{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    min-height:118px!important;
    height:auto!important;
    margin:0!important;
    padding:14px 14px 14px 68px!important;
    display:grid!important;
    grid-template-columns:62px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    gap:3px 12px!important;
    align-items:center!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 10px 24px rgba(53,109,72,.10)!important;
    overflow:visible!important;
    transform:none!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(1){background:linear-gradient(90deg,#f1fff0,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(2){background:linear-gradient(90deg,#eef8ff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(3){background:linear-gradient(90deg,#f7efff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(4){background:linear-gradient(90deg,#fff0f7,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(5){background:linear-gradient(90deg,#fff7e5,#fff)!important}

  #jlpt180-ag-root .ag-step em{
    position:absolute!important;
    left:8px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:42px!important;
    height:42px!important;
    margin:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    color:#fff!important;
    font-size:16px!important;
    font-weight:900!important;
    z-index:3!important;
    box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
  }

  #jlpt180-ag-root .ag-step img{
    grid-column:1!important;
    grid-row:1 / 5!important;
    width:58px!important;
    height:58px!important;
    margin:0!important;
    align-self:center!important;
    justify-self:center!important;
    object-fit:contain!important;
    position:static!important;
    z-index:2!important;
  }

  #jlpt180-ag-root .ag-step h3{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    color:#1f2937!important;
    font-size:20px!important;
    line-height:1.15!important;
    font-weight:900!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step p{
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
    min-height:0!important;
    height:auto!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
    text-align:left!important;
    white-space:normal!important;
    overflow:visible!important;
    display:block!important;
  }

  #jlpt180-ag-root .ag-step p::after{
    content:""!important;
    display:block!important;
    width:100%!important;
    max-width:150px!important;
    height:6px!important;
    margin-top:7px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 44%,#e7ece8 44% 100%)!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(2) p::after{background:linear-gradient(90deg,#4aa5ea 0 50%,#e7ecef 50% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(3) p::after{background:linear-gradient(90deg,#a474df 0 70%,#e9e4ef 70% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(4) p::after{background:linear-gradient(90deg,#f07ca3 0 8%,#eee6ea 8% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(5) p::after{display:none!important}

  #jlpt180-ag-root .ag-step b{
    grid-column:2!important;
    grid-row:3!important;
    margin:2px 0 0!important;
    color:#202939!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:900!important;
    white-space:nowrap!important;
    text-align:left!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    align-self:start!important;
    width:auto!important;
    min-width:112px!important;
    max-width:140px!important;
    min-height:38px!important;
    margin:6px 0 0!important;
    padding:0 16px!important;
    border-radius:16px!important;
    position:static!important;
    color:#fff!important;
    font-size:13px!important;
    line-height:1.1!important;
    text-align:center!important;
    box-shadow:0 8px 18px rgba(55,151,57,.22)!important;
  }

  /* Only goal below timeline */
  #jlpt180-ag-root .ag-library,
  #jlpt180-ag-root .ag-activity{
    display:none!important;
  }

  #jlpt180-ag-root .ag-grid{
    display:block!important;
    width:100%!important;
    margin:14px 0 0!important;
  }

  #jlpt180-ag-root .ag-goal{
    display:block!important;
    width:100%!important;
    margin:0 0 96px!important;
    padding:18px 16px!important;
    border-radius:24px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 10px 24px rgba(53,109,72,.10)!important;
    text-align:center!important;
  }

  #jlpt180-ag-root .ag-goal h2{
    margin:0 0 10px!important;
    font-size:21px!important;
    line-height:1.2!important;
  }

  #jlpt180-ag-root .ag-ring{
    width:104px!important;
    height:104px!important;
    margin:10px auto!important;
  }

  #jlpt180-ag-root .ag-ring b{
    font-size:24px!important;
  }

  #jlpt180-ag-root .ag-ring span{
    transform:translateY(26px)!important;
    font-size:12px!important;
  }

  #jlpt180-ag-root .ag-goal p{
    max-width:280px!important;
    margin:8px auto 0!important;
    font-size:13px!important;
    line-height:1.45!important;
    color:#667085!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:68px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 14px 36px rgba(42,70,48,.18)!important;
    backdrop-filter:blur(14px)!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:22px!important;
    color:#7a8394!important;
    text-decoration:none!important;
    font-size:11px!important;
    font-weight:800!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a span{
    font-size:21px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav a.is-active{
    background:#eaf8e7!important;
    color:#2f963f!important;
  }
}

@media (max-width:430px){
  html body #jlpt180-ag-root .ag-shell{
    max-width:430px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #jlpt180-ag-root .ag-topbar{
    margin-left:-10px!important;
    margin-right:-10px!important;
    min-height:140px!important;
    padding-left:112px!important;
    padding-right:12px!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    left:12px!important;
    top:24px!important;
    width:92px!important;
    height:92px!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    font-size:25px!important;
  }

  #jlpt180-ag-root .ag-step{
    min-height:112px!important;
    padding:13px 12px 13px 62px!important;
    grid-template-columns:54px minmax(0,1fr)!important;
    gap:3px 10px!important;
  }

  #jlpt180-ag-root .ag-step em{
    left:7px!important;
    width:38px!important;
    height:38px!important;
    font-size:15px!important;
  }

  #jlpt180-ag-root .ag-step img{
    width:50px!important;
    height:50px!important;
  }

  #jlpt180-ag-root .ag-step h3{
    font-size:18px!important;
  }

  #jlpt180-ag-root .ag-step p{
    font-size:11px!important;
  }

  #jlpt180-ag-root .ag-step a{
    min-width:104px!important;
    min-height:36px!important;
    font-size:12px!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .ag-topbar{
    padding-left:96px!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    width:78px!important;
    height:78px!important;
  }
}



/* v025: mobile hard reset - keep all top content in normal flow */
@media (max-width:820px){
  html,
  body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    scroll-behavior:auto!important;
  }

  body .site-content,
  body .ast-container,
  body .content-area,
  body .entry-content,
  body .wp-site-blocks,
  body .hentry,
  body article{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    transform:none!important;
  }

  body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    position:relative!important;
    transform:none!important;
    background:linear-gradient(180deg,#f0fcf4 0%,#fbfffc 54%,#f4fff5 100%)!important;
  }

  body #jlpt180-ag-root .ag-shell{
    display:block!important;
    width:100%!important;
    max-width:430px!important;
    min-height:100vh!important;
    height:auto!important;
    max-height:none!important;
    margin:0 auto!important;
    padding:12px 12px 132px!important;
    overflow:visible!important;
    transform:none!important;
  }

  body #jlpt180-ag-root .ag-sidebar{
    display:none!important;
  }

  body #jlpt180-ag-root .ag-main{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }

  #jlpt180-ag-root .ag-data-badge{
    display:none!important;
  }

  /* Compact visible header: no absolute mascot crop, no negative margin */
  #jlpt180-ag-root .ag-topbar{
    display:grid!important;
    grid-template-columns:64px minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:12px!important;
    width:100%!important;
    min-height:84px!important;
    height:auto!important;
    margin:0 0 10px!important;
    padding:12px!important;
    border-radius:26px!important;
    background:linear-gradient(135deg,rgba(226,255,231,.98),rgba(241,255,252,.96))!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 10px 26px rgba(53,109,72,.12)!important;
    overflow:visible!important;
    position:relative!important;
    transform:none!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    content:""!important;
    position:static!important;
    display:block!important;
    grid-column:1!important;
    grid-row:1!important;
    width:62px!important;
    height:62px!important;
    border-radius:20px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 8px 14px rgba(42,115,65,.16))!important;
    z-index:1!important;
  }

  #jlpt180-ag-root .ag-topbar > div:first-child{
    grid-column:2!important;
    min-width:0!important;
    max-width:none!important;
    position:static!important;
  }

  #jlpt180-ag-root .ag-eyebrow{
    display:block!important;
    margin:0 0 3px!important;
    color:#2f7b42!important;
    font-size:12px!important;
    line-height:1.2!important;
    font-weight:800!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    margin:0!important;
    padding:0!important;
    color:#202939!important;
    font-size:21px!important;
    line-height:1.15!important;
    font-weight:900!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-actions{
    grid-column:3!important;
    position:static!important;
    display:flex!important;
    gap:6px!important;
    margin:0!important;
    width:auto!important;
  }

  #jlpt180-ag-root .ag-actions button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    padding:0!important;
    border-radius:14px!important;
    display:grid!important;
    place-items:center!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:none!important;
  }

  /* Stats visible under header */
  #jlpt180-ag-root .ag-hero{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    width:100%!important;
    margin:0 0 10px!important;
    padding:0!important;
    min-height:0!important;
    position:relative!important;
    transform:none!important;
  }

  #jlpt180-ag-root .ag-stat-card{
    display:block!important;
    min-height:62px!important;
    padding:10px 12px!important;
    border-radius:20px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 8px 20px rgba(53,109,72,.09)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-stat-card.level,
  #jlpt180-ag-root .ag-stat-card.cards,
  #jlpt180-ag-root .ag-hero-mascot{
    display:none!important;
  }

  #jlpt180-ag-root .ag-stat-card span{
    font-size:11px!important;
    line-height:1.1!important;
    color:#697586!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .ag-stat-card b{
    display:block!important;
    margin:5px 0 0!important;
    font-size:20px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-stat-card small{
    display:none!important;
  }

  /* Route compact card */
  #jlpt180-ag-root .ag-route-switcher{
    display:block!important;
    width:100%!important;
    margin:0 0 12px!important;
    padding:14px!important;
    border-radius:24px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 8px 22px rgba(53,109,72,.09)!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-route-current span{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin:0 0 6px!important;
    font-size:16px!important;
    line-height:1.2!important;
    font-weight:900!important;
    color:#202939!important;
    text-transform:none!important;
    letter-spacing:0!important;
  }

  #jlpt180-ag-root .ag-route-current span::before{
    content:"📖"!important;
    font-size:20px!important;
  }

  #jlpt180-ag-root .ag-route-current b{
    display:flex!important;
    align-items:baseline!important;
    gap:8px!important;
    color:#2f9a45!important;
    font-size:24px!important;
    line-height:1.05!important;
  }

  #jlpt180-ag-root .ag-route-current i{
    font-style:normal!important;
  }

  #jlpt180-ag-root .ag-route-current i:last-child{
    font-size:14px!important;
    color:#38a153!important;
  }

  #jlpt180-ag-root .ag-route-current small{
    display:block!important;
    margin:6px 0 0!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-route-current small::after{
    content:""!important;
    display:block!important;
    width:100%!important;
    height:7px!important;
    margin-top:10px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 42%,#e7efe8 42% 100%)!important;
  }

  #jlpt180-ag-root .ag-route-levels{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:7px!important;
    margin:12px 0 0!important;
    padding:0!important;
    background:transparent!important;
    border:0!important;
  }

  #jlpt180-ag-root .ag-route-levels button{
    width:100%!important;
    min-width:0!important;
    min-height:36px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    border:1px solid rgba(89,122,98,.18)!important;
    background:#fff!important;
    color:#5d6c63!important;
    font-size:12px!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .ag-route-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#63c64c,#35a43d)!important;
    border-color:transparent!important;
  }

  #jlpt180-ag-root .ag-route-change{
    width:100%!important;
    min-height:36px!important;
    margin:8px 0 0!important;
    border-radius:999px!important;
    font-size:12px!important;
  }

  /* Board */
  #jlpt180-ag-root .ag-board{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head{
    display:block!important;
    margin:0 0 10px!important;
    padding:0 2px!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head h2{
    margin:0!important;
    font-size:22px!important;
    line-height:1.2!important;
    font-weight:900!important;
    color:#1f2937!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head p{
    margin:3px 0 0!important;
    font-size:12px!important;
    color:#667085!important;
    line-height:1.35!important;
  }

  #jlpt180-ag-root .ag-board > .ag-section-head button{
    display:none!important;
  }

  /* Steps: single stable layout */
  #jlpt180-ag-root .ag-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
    position:relative!important;
    padding:0!important;
    margin:0!important;
  }

  #jlpt180-ag-root .ag-steps::before{
    content:""!important;
    position:absolute!important;
    left:24px!important;
    top:50px!important;
    bottom:50px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;
    opacity:.35!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .ag-step{
    position:relative!important;
    z-index:1!important;
    display:grid!important;
    grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    gap:3px 10px!important;
    width:100%!important;
    min-height:108px!important;
    height:auto!important;
    margin:0!important;
    padding:12px 12px 12px 56px!important;
    border-radius:22px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    background:#fff!important;
    box-shadow:0 8px 20px rgba(53,109,72,.09)!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(1){background:linear-gradient(90deg,#f1fff0,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(2){background:linear-gradient(90deg,#eef8ff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(3){background:linear-gradient(90deg,#f7efff,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(4){background:linear-gradient(90deg,#fff0f7,#fff)!important}
  #jlpt180-ag-root .ag-step:nth-child(5){background:linear-gradient(90deg,#fff7e5,#fff)!important}

  #jlpt180-ag-root .ag-step em{
    position:absolute!important;
    left:5px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:38px!important;
    height:38px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    margin:0!important;
    color:#fff!important;
    font-size:15px!important;
    font-weight:900!important;
    z-index:3!important;
  }

  #jlpt180-ag-root .ag-step img{
    grid-column:1!important;
    grid-row:1 / 5!important;
    width:48px!important;
    height:48px!important;
    margin:0!important;
    align-self:center!important;
    justify-self:center!important;
    object-fit:contain!important;
    position:static!important;
  }

  #jlpt180-ag-root .ag-step h3{
    grid-column:2!important;
    grid-row:1!important;
    margin:0!important;
    font-size:18px!important;
    line-height:1.15!important;
    color:#1f2937!important;
    font-weight:900!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step p{
    grid-column:2!important;
    grid-row:2!important;
    margin:0!important;
    color:#667085!important;
    font-size:11px!important;
    line-height:1.35!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-step p::after{
    content:""!important;
    display:block!important;
    width:100%!important;
    max-width:150px!important;
    height:5px!important;
    margin-top:6px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 44%,#e7ece8 44% 100%)!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(2) p::after{background:linear-gradient(90deg,#4aa5ea 0 50%,#e7ecef 50% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(3) p::after{background:linear-gradient(90deg,#a474df 0 70%,#e9e4ef 70% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(4) p::after{background:linear-gradient(90deg,#f07ca3 0 8%,#eee6ea 8% 100%)!important}
  #jlpt180-ag-root .ag-step:nth-child(5) p::after{display:none!important}

  #jlpt180-ag-root .ag-step b{
    grid-column:2!important;
    grid-row:3!important;
    margin:1px 0 0!important;
    color:#202939!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .ag-step a{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    align-self:start!important;
    width:auto!important;
    min-width:104px!important;
    max-width:140px!important;
    min-height:36px!important;
    margin:5px 0 0!important;
    padding:0 15px!important;
    border-radius:15px!important;
    position:static!important;
    color:#fff!important;
    font-size:12px!important;
    line-height:1.1!important;
    text-align:center!important;
    box-shadow:0 8px 18px rgba(55,151,57,.18)!important;
  }

  /* Mobile lower sections */
  #jlpt180-ag-root .ag-library,
  #jlpt180-ag-root .ag-activity{
    display:none!important;
  }

  #jlpt180-ag-root .ag-grid{
    display:block!important;
    width:100%!important;
    margin:12px 0 0!important;
  }

  #jlpt180-ag-root .ag-goal{
    display:block!important;
    width:100%!important;
    margin:0 0 112px!important;
    padding:18px 16px!important;
    border-radius:24px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 8px 20px rgba(53,109,72,.09)!important;
    text-align:center!important;
  }

  #jlpt180-ag-root .ag-mobile-bottom-nav{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:68px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 14px 36px rgba(42,70,48,.18)!important;
    backdrop-filter:blur(14px)!important;
  }
}

@media (max-width:374px){
  html body #jlpt180-ag-root .ag-shell{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  #jlpt180-ag-root .ag-topbar{
    grid-template-columns:54px minmax(0,1fr)!important;
  }

  #jlpt180-ag-root .ag-topbar::before{
    width:54px!important;
    height:54px!important;
  }

  #jlpt180-ag-root .ag-actions{
    display:none!important;
  }
}


/* v026: separate clean mobile DOM */
#jlpt180-ag-root .ag-mobile-v2{display:none!important}
@media (max-width:820px){
  html,body{height:auto!important;overflow-x:hidden!important;overflow-y:auto!important}
  body .site-content,body .ast-container,body .content-area,body .entry-content{overflow:visible!important;height:auto!important;max-height:none!important}
  html body #jlpt180-ag-root{width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;overflow-x:hidden!important;overflow-y:visible!important;background:#effbf2!important}
  #jlpt180-ag-root .ag-shell,#jlpt180-ag-root .ag-mobile-bottom-nav{display:none!important}
  #jlpt180-ag-root .ag-mobile-v2{display:block!important;width:100%!important;max-width:430px!important;margin:0 auto!important;padding:0 14px 104px!important;min-height:100vh!important;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;color:#202939!important;background:radial-gradient(circle at 12% -4%,rgba(104,220,142,.42),transparent 28%),radial-gradient(circle at 96% 0%,rgba(116,205,255,.34),transparent 30%),linear-gradient(180deg,#effcf3 0%,#fbfffc 45%,#f3fff5 100%)!important}
  #jlpt180-ag-root .ag-mobile-v2 *{box-sizing:border-box!important}
  #jlpt180-ag-root .ag-mobile-v2 button{appearance:none!important;-webkit-appearance:none!important;font:inherit!important}
  .m2-hero{margin:0 -14px!important;min-height:150px!important;padding:24px 16px 20px 132px!important;position:relative!important;border-radius:0 0 34px 34px!important;background:linear-gradient(90deg,rgba(220,255,226,.98),rgba(238,255,251,.96)),url("bg-mobile.webp") center top/cover no-repeat!important;box-shadow:0 14px 34px rgba(53,109,72,.16)!important}
  .m2-mascot{position:absolute!important;left:14px!important;top:22px!important;width:108px!important;height:108px!important;background:url("mascot-stand.webp") center/contain no-repeat!important;filter:drop-shadow(0 12px 20px rgba(42,115,65,.22))!important}
  .m2-hello span{display:block!important;color:#2f7b42!important;font-size:15px!important;font-weight:750!important;line-height:1.2!important}
  .m2-hello b{display:block!important;margin-top:4px!important;color:#202939!important;font-size:30px!important;line-height:1.1!important;font-weight:900!important}
  .m2-quick{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin:20px 0 0!important}
  .m2-quick div{min-height:58px!important;padding:8px 10px!important;border-radius:22px!important;background:rgba(255,255,255,.94)!important;border:1px solid rgba(89,122,98,.12)!important;box-shadow:0 8px 22px rgba(53,109,72,.12)!important}
  .m2-quick span{font-size:18px!important}.m2-quick b{font-size:18px!important;margin-left:4px!important}.m2-quick small{display:block!important;color:#667085!important;font-size:10px!important}
  .m2-route{margin:14px 0 16px!important;padding:18px 16px 16px!important;border-radius:30px!important;background:rgba(255,255,255,.96)!important;border:1px solid rgba(89,122,98,.15)!important;box-shadow:0 14px 32px rgba(53,109,72,.13)!important}
  .m2-route-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px!important;margin-bottom:10px!important}
  .m2-route-head div{display:flex!important;align-items:center!important;gap:8px!important;color:#202939!important;font-size:18px!important;font-weight:900!important}
  .m2-route-head button{border:0!important;background:transparent!important;color:#2f963f!important;font-size:13px!important;font-weight:850!important;white-space:nowrap!important}
  .m2-route-level{display:flex!important;align-items:baseline!important;gap:8px!important;color:#2f9a45!important;font-weight:900!important;line-height:1!important}
  .m2-route-level b{font-size:34px!important}.m2-route-level span{font-size:16px!important}
  .m2-route small{display:block!important;margin-top:10px!important;color:#667085!important;font-size:13px!important;line-height:1.42!important}
  .m2-route-progress{display:grid!important;grid-template-columns:1fr auto!important;gap:10px!important;align-items:center!important;margin-top:14px!important}
  .m2-route-progress::before{content:""!important;display:block!important;height:9px!important;border-radius:999px!important;background:linear-gradient(90deg,#58b64b 0 42%,#e7efe8 42% 100%)!important}
  .m2-route-progress i{display:none!important}.m2-route-progress em{font-style:normal!important;color:#202939!important;font-size:13px!important;font-weight:800!important}
  .m2-levels{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:9px!important;margin-top:16px!important}
  .m2-levels button{min-height:42px!important;border-radius:999px!important;border:1px solid rgba(89,122,98,.18)!important;background:#fff!important;color:#5d6c63!important;font-size:13px!important;font-weight:900!important}
  .m2-levels button.is-active{color:#fff!important;background:linear-gradient(180deg,#63c64c,#35a43d)!important;border-color:transparent!important}
  .m2-section-head{margin:0 0 12px!important;padding:0 4px!important}.m2-section-head b{display:block!important;font-size:22px!important;line-height:1.2!important;font-weight:900!important}.m2-section-head span{display:block!important;margin-top:4px!important;color:#667085!important;font-size:12px!important}
  .m2-today{position:relative!important}.m2-today::before{content:""!important;position:absolute!important;left:34px!important;top:132px!important;bottom:54px!important;width:4px!important;border-radius:999px!important;background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;opacity:.52!important}
  .m2-step{position:relative!important;z-index:1!important;min-height:124px!important;margin:0 0 10px!important;padding:14px 12px 14px 76px!important;display:grid!important;grid-template-columns:70px minmax(0,1fr) 96px!important;grid-template-rows:auto auto auto!important;gap:5px 13px!important;align-items:center!important;border-radius:24px!important;border:1px solid rgba(89,122,98,.14)!important;background:#fff!important;box-shadow:0 10px 26px rgba(53,109,72,.10)!important}
  .m2-step.s1{background:linear-gradient(90deg,#f1fff0,#fff)!important}.m2-step.s2{background:linear-gradient(90deg,#eef8ff,#fff)!important}.m2-step.s3{background:linear-gradient(90deg,#f7efff,#fff)!important}.m2-step.s4{background:linear-gradient(90deg,#fff0f7,#fff)!important}.m2-step.s5{background:linear-gradient(90deg,#fff7e5,#fff)!important}
  .m2-num{position:absolute!important;left:12px!important;top:50%!important;transform:translateY(-50%)!important;width:46px!important;height:46px!important;display:grid!important;place-items:center!important;border-radius:999px!important;color:#fff!important;font-size:18px!important;font-weight:900!important;box-shadow:0 8px 18px rgba(0,0,0,.10)!important}
  .s1 .m2-num{background:#51ba49!important}.s2 .m2-num{background:#55b7ee!important}.s3 .m2-num{background:#a474df!important}.s4 .m2-num{background:#f07ca3!important}.s5 .m2-num{background:#f1b844!important}
  .m2-step img{grid-column:1!important;grid-row:1/4!important;width:66px!important;height:66px!important;object-fit:contain!important;align-self:center!important;justify-self:center!important}
  .m2-step-main{grid-column:2!important;grid-row:1/4!important;min-width:0!important}.m2-step-main h3{margin:0!important;color:#1f2937!important;font-size:21px!important;line-height:1.15!important;font-weight:900!important}.m2-step-main p{margin:5px 0 0!important;color:#667085!important;font-size:13px!important;line-height:1.35!important}
  .m2-bar{width:min(150px,100%)!important;height:6px!important;margin-top:9px!important;border-radius:999px!important;background:#e7ece8!important;overflow:hidden!important}.m2-bar i{display:block!important;height:100%!important;border-radius:999px!important}.s1 .m2-bar i{width:72%!important;background:#58b64b!important}.s2 .m2-bar i{width:50%!important;background:#4aa5ea!important}.s3 .m2-bar i{width:70%!important;background:#a474df!important}.s4 .m2-bar i{width:8%!important;background:#f07ca3!important}
  .m2-step-main strong{display:block!important;margin-top:5px!important;color:#202939!important;font-size:15px!important;line-height:1.15!important}
  .m2-step button{grid-column:3!important;grid-row:1/4!important;align-self:center!important;justify-self:end!important;width:96px!important;min-height:48px!important;border:0!important;border-radius:18px!important;background:linear-gradient(180deg,#62bd49,#36a33c)!important;color:#fff!important;font-size:14px!important;font-weight:900!important;box-shadow:0 8px 18px rgba(55,151,57,.22)!important}
  .m2-goal{margin:14px 0 0!important;padding:18px 16px 20px!important;border-radius:24px!important;background:#fff!important;border:1px solid rgba(89,122,98,.14)!important;box-shadow:0 8px 20px rgba(53,109,72,.09)!important;text-align:center!important}
  .m2-goal h2{margin:0 0 10px!important;font-size:21px!important}.m2-ring{width:104px!important;height:104px!important;margin:10px auto!important;border-radius:999px!important;display:grid!important;place-items:center!important;background:radial-gradient(circle,#fff 58%,transparent 59%),conic-gradient(#58b64b 0 60%,#e2eee4 60% 100%)!important}.m2-ring b{font-size:24px!important}.m2-ring span{grid-area:1/1!important;transform:translateY(26px)!important;font-weight:800!important;color:#667085!important;font-size:12px!important}.m2-goal p{margin:8px auto 0!important;max-width:280px!important;color:#667085!important;font-size:13px!important;line-height:1.45!important}
  .m2-bottom{position:fixed!important;left:10px!important;right:10px!important;bottom:10px!important;z-index:99999!important;min-height:68px!important;display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:4px!important;padding:8px!important;border-radius:28px!important;background:rgba(255,255,255,.96)!important;border:1px solid rgba(89,122,98,.14)!important;box-shadow:0 14px 36px rgba(42,70,48,.18)!important;backdrop-filter:blur(14px)!important}
  .m2-bottom a{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;border-radius:22px!important;color:#7a8394!important;text-decoration:none!important;font-size:11px!important;font-weight:800!important}.m2-bottom a span{font-size:21px!important;line-height:1!important}.m2-bottom a.is-active{background:#eaf8e7!important;color:#2f963f!important}
}
@media (max-width:430px){
  #jlpt180-ag-root .ag-mobile-v2{padding-left:10px!important;padding-right:10px!important}.m2-hero{margin-left:-10px!important;margin-right:-10px!important;min-height:138px!important;padding-left:112px!important}.m2-mascot{left:12px!important;top:24px!important;width:92px!important;height:92px!important}.m2-hello b{font-size:25px!important}
  .m2-step{min-height:116px!important;padding:13px 10px 13px 66px!important;grid-template-columns:56px minmax(0,1fr) 82px!important;gap:4px 9px!important}.m2-today::before{left:30px!important}.m2-num{left:9px!important;width:42px!important;height:42px!important;font-size:16px!important}.m2-step img{width:54px!important;height:54px!important}.m2-step-main h3{font-size:19px!important}.m2-step-main p{font-size:12px!important}.m2-step-main strong{font-size:13px!important}.m2-step button{width:82px!important;min-height:42px!important;font-size:12px!important}
}
@media (max-width:374px){
  .m2-hero{padding-left:96px!important}.m2-mascot{width:78px!important;height:78px!important}.m2-step{grid-template-columns:50px minmax(0,1fr)!important;grid-template-rows:auto auto auto auto!important}.m2-step button{grid-column:2!important;grid-row:4!important;justify-self:start!important;width:118px!important;margin-top:6px!important}
}


/* v027: compact mobile v2 and hide legacy shell */
@media (max-width:820px){
  html body #jlpt180-ag-root .ag-shell,
  html body #jlpt180-ag-root .ag-main,
  html body #jlpt180-ag-root .ag-sidebar{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    margin:0!important;
    padding:0!important;
  }

  html body #jlpt180-ag-root .ag-mobile-v2{
    display:block!important;
    visibility:visible!important;
    padding:0 12px 92px!important;
  }

  .m2-hero{
    min-height:112px!important;
    padding:16px 12px 12px 96px!important;
    margin:0 -12px 8px!important;
    border-radius:0 0 24px 24px!important;
  }

  .m2-mascot{
    left:12px!important;
    top:16px!important;
    width:74px!important;
    height:74px!important;
  }

  .m2-hello span{font-size:12px!important}
  .m2-hello b{
    margin-top:2px!important;
    font-size:22px!important;
    line-height:1.08!important;
  }

  .m2-quick{
    margin:10px 0 0!important;
    gap:8px!important;
  }

  .m2-quick div{
    min-height:44px!important;
    padding:6px 9px!important;
    border-radius:16px!important;
  }

  .m2-quick span{font-size:14px!important}
  .m2-quick b{font-size:16px!important}
  .m2-quick small{display:none!important}

  .m2-route{
    margin:8px 0 12px!important;
    padding:12px!important;
    border-radius:22px!important;
  }

  .m2-route-head{margin-bottom:6px!important}
  .m2-route-head div{font-size:15px!important}
  .m2-route-head button{font-size:12px!important}

  .m2-route-level b{font-size:26px!important}
  .m2-route-level span{font-size:13px!important}

  .m2-route small{
    margin-top:6px!important;
    font-size:11px!important;
    line-height:1.3!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  .m2-route-progress{margin-top:8px!important}
  .m2-route-progress::before{height:6px!important}

  .m2-levels{
    grid-template-columns:repeat(6,1fr)!important;
    gap:5px!important;
    margin-top:10px!important;
  }

  .m2-levels button{
    min-height:30px!important;
    padding:0 4px!important;
    font-size:10px!important;
  }

  .m2-levels [data-route-level="MN"]{font-size:9px!important}

  .m2-section-head{margin:0 0 8px!important}
  .m2-section-head b{font-size:20px!important}
  .m2-section-head span{font-size:11px!important}

  .m2-today::before{
    left:25px!important;
    top:105px!important;
    bottom:44px!important;
    width:3px!important;
  }

  .m2-step{
    min-height:92px!important;
    margin:0 0 8px!important;
    padding:10px 10px 10px 58px!important;
    grid-template-columns:48px minmax(0,1fr) 82px!important;
    gap:3px 9px!important;
    border-radius:20px!important;
  }

  .m2-num{
    left:7px!important;
    width:36px!important;
    height:36px!important;
    font-size:14px!important;
  }

  .m2-step img{
    width:44px!important;
    height:44px!important;
  }

  .m2-step-main h3{font-size:17px!important}

  .m2-step-main p{
    margin-top:3px!important;
    font-size:11px!important;
    line-height:1.25!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  .m2-bar{
    height:5px!important;
    margin-top:5px!important;
    max-width:118px!important;
  }

  .m2-step-main strong{
    margin-top:3px!important;
    font-size:12px!important;
  }

  .m2-step button{
    width:82px!important;
    min-height:36px!important;
    border-radius:14px!important;
    font-size:12px!important;
  }

  .m2-goal{
    display:none!important;
  }

  .m2-bottom{
    min-height:62px!important;
    padding:7px!important;
    border-radius:24px!important;
  }

  .m2-bottom a{font-size:10px!important}
  .m2-bottom a span{font-size:18px!important}
}

@media (max-width:374px){
  .m2-step{
    grid-template-columns:42px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
    padding-left:52px!important;
  }

  .m2-step button{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    width:104px!important;
    margin-top:5px!important;
  }
}



/* v030: exact mobile v2 mockup port */
#jlpt180-ag-root .ag-mobile-v2{
  display:none!important;
}

@media (max-width:820px){
  html,
  body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body .site-content,
  body .ast-container,
  body .content-area,
  body .entry-content,
  body .wp-site-blocks,
  body article,
  body .hentry{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    background:#eaf8ee!important;
  }

  #jlpt180-ag-root .ag-shell,
  #jlpt180-ag-root .ag-main,
  #jlpt180-ag-root .ag-sidebar,
  #jlpt180-ag-root .ag-mobile-bottom-nav{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .ag-mobile-v2{
    display:block!important;
    visibility:visible!important;
    width:100%!important;
    max-width:430px!important;
    min-height:100vh!important;
    margin:0 auto!important;
    padding:0 18px 96px!important;
    overflow:visible!important;
    pointer-events:auto!important;
    color:#202939!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans JP",sans-serif!important;
    background:
      radial-gradient(circle at 12% -3%,rgba(104,220,142,.42),transparent 30%),
      radial-gradient(circle at 98% 0%,rgba(116,205,255,.32),transparent 31%),
      linear-gradient(180deg,#effcf3 0%,#fbfffc 46%,#f3fff5 100%)!important;
  }

  #jlpt180-ag-root .ag-mobile-v2,
  #jlpt180-ag-root .ag-mobile-v2 *{
    box-sizing:border-box!important;
    letter-spacing:0!important;
    word-spacing:0!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
    text-transform:none!important;
    text-rendering:optimizeLegibility!important;
    -webkit-font-smoothing:antialiased!important;
  }

  #jlpt180-ag-root .ag-mobile-v2 a{
    color:inherit!important;
    text-decoration:none!important;
  }

  #jlpt180-ag-root .ag-mobile-v2 button{
    appearance:none!important;
    -webkit-appearance:none!important;
    font:inherit!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    border:0!important;
  }

  /* 1. Hero */
  #jlpt180-ag-root .m2-hero{
    position:relative!important;
    min-height:156px!important;
    margin:0 -18px 0!important;
    padding:24px 18px 18px 132px!important;
    border-radius:0 0 34px 34px!important;
    background:
      linear-gradient(90deg,rgba(220,255,226,.98),rgba(238,255,251,.96)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    box-shadow:0 14px 34px rgba(53,109,72,.16)!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .m2-mascot{
    position:absolute!important;
    left:16px!important;
    top:22px!important;
    width:104px!important;
    height:104px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 12px 20px rgba(42,115,65,.22))!important;
  }

  #jlpt180-ag-root .m2-hello span{
    display:block!important;
    color:#2f7b42!important;
    font-size:15px!important;
    font-weight:750!important;
    line-height:1.2!important;
  }

  #jlpt180-ag-root .m2-hello b{
    display:block!important;
    margin-top:4px!important;
    max-width:230px!important;
    color:#202939!important;
    font-size:29px!important;
    line-height:1.1!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
  }

  #jlpt180-ag-root .m2-quick{
    position:relative!important;
    z-index:2!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
    margin:18px 0 0!important;
  }

  #jlpt180-ag-root .m2-quick div{
    min-height:52px!important;
    padding:8px 10px!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.94)!important;
    border:1px solid rgba(89,122,98,.12)!important;
    box-shadow:0 8px 22px rgba(53,109,72,.12)!important;
  }

  #jlpt180-ag-root .m2-quick span{
    font-size:17px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-quick b{
    margin-left:5px!important;
    font-size:18px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-quick small{
    display:block!important;
    margin-top:4px!important;
    color:#667085!important;
    font-size:10px!important;
    line-height:1!important;
  }

  /* 2. Route Card */
  #jlpt180-ag-root .m2-route{
    margin:16px 0 16px!important;
    padding:18px!important;
    border-radius:30px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.15)!important;
    box-shadow:0 14px 32px rgba(53,109,72,.13)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-route-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:0 0 12px!important;
  }

  #jlpt180-ag-root .m2-route-head div{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    color:#202939!important;
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-route-head div span{
    font-size:22px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-route-head button{
    min-height:32px!important;
    padding:0 11px!important;
    border-radius:999px!important;
    background:#f1fbef!important;
    border:1px solid rgba(88,182,75,.18)!important;
    color:#2f963f!important;
    font-size:12px!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-route-level{
    display:flex!important;
    align-items:baseline!important;
    gap:8px!important;
    color:#2f9a45!important;
    font-weight:900!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    font-size:33px!important;
    letter-spacing:.01em!important;
  }

  #jlpt180-ag-root .m2-route-level span{
    font-size:15px!important;
    color:#38a153!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-route small{
    display:block!important;
    margin-top:10px!important;
    color:#667085!important;
    font-size:13px!important;
    line-height:1.42!important;
    white-space:normal!important;
  }

  #jlpt180-ag-root .m2-route-progress{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:10px!important;
    align-items:center!important;
    margin-top:14px!important;
  }

  #jlpt180-ag-root .m2-route-progress::before{
    content:""!important;
    display:block!important;
    height:9px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 42%,#e7efe8 42% 100%)!important;
  }

  #jlpt180-ag-root .m2-route-progress i{
    display:none!important;
  }

  #jlpt180-ag-root .m2-route-progress em{
    color:#202939!important;
    font-size:13px!important;
    font-style:normal!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-levels{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    margin-top:16px!important;
  }

  #jlpt180-ag-root .m2-levels button{
    min-height:40px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.18)!important;
    color:#5d6c63!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:900!important;
    box-shadow:0 4px 12px rgba(53,109,72,.05)!important;
  }

  #jlpt180-ag-root .m2-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#63c64c,#35a43d)!important;
    border-color:transparent!important;
    box-shadow:0 8px 18px rgba(54,164,61,.24)!important;
  }

  #jlpt180-ag-root .m2-levels [data-route-level="MN"]{
    font-size:11px!important;
  }

  /* 3. Section Head */
  #jlpt180-ag-root .m2-section-head{
    display:block!important;
    margin:0 0 12px!important;
    padding:0 4px!important;
  }

  #jlpt180-ag-root .m2-section-head b{
    display:block!important;
    color:#1f2937!important;
    font-size:22px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-section-head span{
    display:block!important;
    margin-top:4px!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  /* 4. Timeline */
  #jlpt180-ag-root .m2-today{
    position:relative!important;
  }

  #jlpt180-ag-root .m2-today::before{
    content:""!important;
    position:absolute!important;
    left:34px!important;
    top:132px!important;
    bottom:54px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;
    opacity:.50!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .m2-step{
    position:relative!important;
    z-index:1!important;
    display:grid!important;
    grid-template-columns:66px minmax(0,1fr) 92px!important;
    grid-template-rows:auto auto auto!important;
    gap:5px 12px!important;
    align-items:center!important;
    min-height:120px!important;
    margin:0 0 10px!important;
    padding:14px 12px 14px 76px!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    background:#fff!important;
    box-shadow:0 10px 26px rgba(53,109,72,.10)!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .m2-step.s1{background:linear-gradient(90deg,#f1fff0,#fff)!important}
  #jlpt180-ag-root .m2-step.s2{background:linear-gradient(90deg,#eef8ff,#fff)!important}
  #jlpt180-ag-root .m2-step.s3{background:linear-gradient(90deg,#f7efff,#fff)!important}
  #jlpt180-ag-root .m2-step.s4{background:linear-gradient(90deg,#fff0f7,#fff)!important}
  #jlpt180-ag-root .m2-step.s5{background:linear-gradient(90deg,#fff7e5,#fff)!important}

  #jlpt180-ag-root .m2-num{
    position:absolute!important;
    left:12px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:46px!important;
    height:46px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    color:#fff!important;
    font-size:18px!important;
    line-height:1!important;
    font-weight:900!important;
    box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
    z-index:3!important;
  }

  #jlpt180-ag-root .s1 .m2-num{background:#51ba49!important}
  #jlpt180-ag-root .s2 .m2-num{background:#55b7ee!important}
  #jlpt180-ag-root .s3 .m2-num{background:#a474df!important}
  #jlpt180-ag-root .s4 .m2-num{background:#f07ca3!important}
  #jlpt180-ag-root .s5 .m2-num{background:#f1b844!important}

  #jlpt180-ag-root .m2-step img{
    grid-column:1!important;
    grid-row:1 / 4!important;
    width:62px!important;
    height:62px!important;
    align-self:center!important;
    justify-self:center!important;
    object-fit:contain!important;
  }

  #jlpt180-ag-root .m2-step-main{
    grid-column:2!important;
    grid-row:1 / 4!important;
    min-width:0!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    margin:0!important;
    color:#1f2937!important;
    font-size:20px!important;
    line-height:1.15!important;
    font-weight:900!important;
    white-space:normal!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    margin:5px 0 0!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-bar{
    width:min(145px,100%)!important;
    height:6px!important;
    margin-top:8px!important;
    border-radius:999px!important;
    background:#e7ece8!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-bar i{
    display:block!important;
    height:100%!important;
    border-radius:999px!important;
  }

  #jlpt180-ag-root .s1 .m2-bar i{width:72%!important;background:#58b64b!important}
  #jlpt180-ag-root .s2 .m2-bar i{width:50%!important;background:#4aa5ea!important}
  #jlpt180-ag-root .s3 .m2-bar i{width:70%!important;background:#a474df!important}
  #jlpt180-ag-root .s4 .m2-bar i{width:8%!important;background:#f07ca3!important}

  #jlpt180-ag-root .m2-step-main strong{
    display:block!important;
    margin-top:5px!important;
    color:#202939!important;
    font-size:14px!important;
    line-height:1.15!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-step button{
    grid-column:3!important;
    grid-row:1 / 4!important;
    align-self:center!important;
    justify-self:end!important;
    width:92px!important;
    min-width:92px!important;
    min-height:44px!important;
    padding:0 10px!important;
    border-radius:17px!important;
    background:linear-gradient(180deg,#62bd49,#36a33c)!important;
    color:#fff!important;
    font-size:12px!important;
    line-height:1.1!important;
    font-weight:900!important;
    box-shadow:0 8px 18px rgba(55,151,57,.22)!important;
  }

  /* 5. Mini Goal */
  #jlpt180-ag-root .m2-goal{
    margin:14px 0 0!important;
    padding:14px 16px!important;
    border-radius:22px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 8px 20px rgba(53,109,72,.09)!important;
  }

  #jlpt180-ag-root .m2-goal-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
  }

  #jlpt180-ag-root .m2-goal-head b{
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-goal-head span{
    color:#2f9a45!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-goal-items{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:6px!important;
    margin-top:12px!important;
  }

  #jlpt180-ag-root .m2-goal-items span{
    min-height:34px!important;
    display:grid!important;
    place-items:center!important;
    padding:0 6px!important;
    border-radius:999px!important;
    background:#f4fbf2!important;
    color:#52635a!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:800!important;
    text-align:center!important;
  }

  /* 6. Bottom Nav */
  #jlpt180-ag-root .m2-bottom{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:66px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.96)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 14px 36px rgba(42,70,48,.18)!important;
    backdrop-filter:blur(14px)!important;
  }

  #jlpt180-ag-root .m2-bottom a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:22px!important;
    color:#7a8394!important;
    text-decoration:none!important;
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .m2-bottom a span{
    font-size:19px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-bottom a.is-active{
    background:#eaf8e7!important;
    color:#2f963f!important;
  }

  @media (max-width:430px){
    #jlpt180-ag-root .ag-mobile-v2{
      padding-left:10px!important;
      padding-right:10px!important;
    }

    #jlpt180-ag-root .m2-hero{
      margin-left:-10px!important;
      margin-right:-10px!important;
      min-height:142px!important;
      padding-left:112px!important;
    }

    #jlpt180-ag-root .m2-mascot{
      left:12px!important;
      top:24px!important;
      width:92px!important;
      height:92px!important;
    }

    #jlpt180-ag-root .m2-hello b{
      font-size:25px!important;
    }

    #jlpt180-ag-root .m2-step{
      min-height:112px!important;
      padding:12px 10px 12px 66px!important;
      grid-template-columns:54px minmax(0,1fr) 84px!important;
      gap:4px 9px!important;
    }

    #jlpt180-ag-root .m2-today::before{
      left:30px!important;
    }

    #jlpt180-ag-root .m2-num{
      left:9px!important;
      width:42px!important;
      height:42px!important;
      font-size:16px!important;
    }

    #jlpt180-ag-root .m2-step img{
      width:52px!important;
      height:52px!important;
    }

    #jlpt180-ag-root .m2-step-main h3{
      font-size:18px!important;
    }

    #jlpt180-ag-root .m2-step-main p{
      font-size:11px!important;
    }

    #jlpt180-ag-root .m2-step-main strong{
      font-size:13px!important;
    }

    #jlpt180-ag-root .m2-step button{
      width:84px!important;
      min-width:84px!important;
      min-height:40px!important;
      font-size:11px!important;
      padding:0 6px!important;
    }
  }

  @media (max-width:374px){
    #jlpt180-ag-root .m2-hero{
      padding-left:96px!important;
    }

    #jlpt180-ag-root .m2-mascot{
      width:78px!important;
      height:78px!important;
    }

    #jlpt180-ag-root .m2-step{
      grid-template-columns:50px minmax(0,1fr)!important;
      grid-template-rows:auto auto auto auto!important;
    }

    #jlpt180-ag-root .m2-step button{
      grid-column:2!important;
      grid-row:4!important;
      justify-self:start!important;
      width:118px!important;
      margin-top:6px!important;
    }
  }
}



/* v031: richer mobile visuals and child screen details */
@media (max-width:820px){
  #jlpt180-ag-root .ag-mobile-v2{
    background:
      radial-gradient(circle at 8% 2%,rgba(110,231,160,.55),transparent 26%),
      radial-gradient(circle at 90% 4%,rgba(120,210,255,.36),transparent 30%),
      linear-gradient(180deg,rgba(237,252,242,.88),rgba(251,255,252,.96)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
  }

  #jlpt180-ag-root .m2-hero{
    min-height:188px!important;
    padding:22px 16px 16px 132px!important;
    overflow:hidden!important;
    background:
      linear-gradient(120deg,rgba(221,255,229,.96),rgba(234,255,251,.90) 58%,rgba(255,251,226,.82)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    border:1px solid rgba(89,122,98,.10)!important;
  }

  #jlpt180-ag-root .m2-bg-orb{
    position:absolute!important;
    border-radius:999px!important;
    pointer-events:none!important;
    filter:blur(.2px)!important;
    opacity:.75!important;
  }

  #jlpt180-ag-root .m2-bg-orb.one{
    width:92px!important;
    height:92px!important;
    right:-28px!important;
    top:14px!important;
    background:rgba(97,195,105,.18)!important;
  }

  #jlpt180-ag-root .m2-bg-orb.two{
    width:128px!important;
    height:128px!important;
    right:42px!important;
    bottom:-64px!important;
    background:rgba(74,165,234,.13)!important;
  }

  #jlpt180-ag-root .m2-mascot{
    width:110px!important;
    height:110px!important;
    top:26px!important;
    left:14px!important;
    z-index:2!important;
  }

  #jlpt180-ag-root .m2-hello{
    position:relative!important;
    z-index:3!important;
  }

  #jlpt180-ag-root .m2-hello span{
    font-size:14px!important;
    color:#2f7b42!important;
  }

  #jlpt180-ag-root .m2-hello b{
    max-width:230px!important;
    font-size:28px!important;
    color:#18352b!important;
  }

  #jlpt180-ag-root .m2-hello small{
    display:block!important;
    margin-top:6px!important;
    max-width:210px!important;
    color:#557166!important;
    font-size:12px!important;
    line-height:1.35!important;
    font-weight:700!important;
  }

  #jlpt180-ag-root .m2-quick{
    display:none!important;
  }

  #jlpt180-ag-root .m2-user-row{
    position:relative!important;
    z-index:3!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    margin:14px 0 0!important;
    transform:translateX(-118px)!important;
    width:calc(100% + 118px)!important;
  }

  #jlpt180-ag-root .m2-user-pill{
    min-height:56px!important;
    padding:8px 8px!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.86)!important;
    border:1px solid rgba(89,122,98,.12)!important;
    box-shadow:0 8px 22px rgba(53,109,72,.12)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
  }

  #jlpt180-ag-root .m2-user-pill span{
    font-size:16px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-user-pill b{
    display:block!important;
    margin-top:2px!important;
    color:#173b2b!important;
    font-size:13px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .m2-user-pill small{
    display:block!important;
    margin-top:2px!important;
    color:#6b7e75!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:800!important;
  }

  #jlpt180-ag-root .m2-route{
    background:
      linear-gradient(180deg,rgba(255,255,255,.98),rgba(245,255,248,.96))!important;
    border-color:rgba(71,180,83,.18)!important;
    box-shadow:0 14px 34px rgba(45,123,73,.15)!important;
  }

  #jlpt180-ag-root .m2-route-head div span{
    width:34px!important;
    height:34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:13px!important;
    background:#eaf8e7!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    color:#1f9b45!important;
  }

  #jlpt180-ag-root .m2-step{
    border-width:1px!important;
    box-shadow:0 12px 30px rgba(50,105,74,.13)!important;
  }

  #jlpt180-ag-root .m2-step.s1{background:linear-gradient(100deg,#ecffe9 0%,#ffffff 72%)!important}
  #jlpt180-ag-root .m2-step.s2{background:linear-gradient(100deg,#e8f7ff 0%,#ffffff 72%)!important}
  #jlpt180-ag-root .m2-step.s3{background:linear-gradient(100deg,#f4eaff 0%,#ffffff 72%)!important}
  #jlpt180-ag-root .m2-step.s4{background:linear-gradient(100deg,#ffeaf4 0%,#ffffff 72%)!important}
  #jlpt180-ag-root .m2-step.s5{background:linear-gradient(100deg,#fff2d6 0%,#ffffff 72%)!important}

  #jlpt180-ag-root .m2-step img{
    filter:drop-shadow(0 8px 10px rgba(57,95,72,.14))!important;
  }

  #jlpt180-ag-root .m2-step button{
    background:linear-gradient(180deg,#5fc84b,#2f9f37)!important;
    box-shadow:0 12px 22px rgba(47,159,55,.25)!important;
  }

  #jlpt180-ag-root .m2-bottom{
    background:rgba(255,255,255,.97)!important;
    box-shadow:0 16px 42px rgba(42,70,48,.22)!important;
  }

  #jlpt180-ag-root .m2-bottom a.is-active{
    background:linear-gradient(180deg,#e9fbe5,#def5db)!important;
  }
}

/* Overlay child pages richer info */
#jlpt180-ag-root .ag-detail-strip,
#jlpt180-ag-root .ag-tip-box,
#jlpt180-ag-root .ag-quiz-note,
#jlpt180-ag-root .ag-quiz-meta,
#jlpt180-ag-root .ag-info-row,
#jlpt180-ag-root .ag-reward-extra{
  border:1px solid rgba(89,122,98,.13)!important;
  background:rgba(255,255,255,.82)!important;
  border-radius:18px!important;
  box-shadow:0 8px 22px rgba(53,109,72,.07)!important;
}

#jlpt180-ag-root .ag-detail-strip{
  margin:12px 0!important;
  padding:12px 14px!important;
  display:flex!important;
  justify-content:space-between!important;
  gap:10px!important;
  color:#52635a!important;
}

#jlpt180-ag-root .ag-detail-strip span{
  font-weight:900!important;
  color:#2f963f!important;
}

#jlpt180-ag-root .ag-detail-strip b{
  font-size:13px!important;
  line-height:1.35!important;
}

#jlpt180-ag-root .ag-info-row{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  margin:0 0 12px!important;
  padding:10px!important;
}

#jlpt180-ag-root .ag-info-row div{
  padding:10px 8px!important;
  border-radius:14px!important;
  background:#f6fff4!important;
  text-align:center!important;
}

#jlpt180-ag-root .ag-info-row span,
#jlpt180-ag-root .ag-reward-extra span{
  display:block!important;
  color:#667085!important;
  font-size:11px!important;
  font-weight:800!important;
}

#jlpt180-ag-root .ag-info-row b,
#jlpt180-ag-root .ag-reward-extra b{
  display:block!important;
  margin-top:4px!important;
  color:#1f2937!important;
  font-size:13px!important;
}

#jlpt180-ag-root .ag-tip-box{
  margin-top:12px!important;
  padding:13px 14px!important;
}

#jlpt180-ag-root .ag-tip-box b,
#jlpt180-ag-root .ag-tip-box span{
  display:block!important;
}

#jlpt180-ag-root .ag-tip-box b{
  color:#8b5bd6!important;
  font-weight:900!important;
}

#jlpt180-ag-root .ag-tip-box span{
  margin-top:5px!important;
  color:#667085!important;
  line-height:1.45!important;
}

#jlpt180-ag-root .ag-quiz-meta{
  max-width:760px!important;
  margin:12px auto!important;
  padding:10px!important;
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
}

#jlpt180-ag-root .ag-quiz-meta span{
  min-height:36px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:14px!important;
  background:#f4fbf2!important;
  color:#52635a!important;
  font-size:12px!important;
  font-weight:800!important;
  text-align:center!important;
}

#jlpt180-ag-root .ag-reward-extra{
  display:grid!important;
  grid-template-columns:repeat(3,1fr)!important;
  gap:8px!important;
  margin:14px 0!important;
  padding:10px!important;
}

#jlpt180-ag-root .ag-reward-extra div{
  padding:12px 8px!important;
  border-radius:14px!important;
  background:#fffaf0!important;
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-user-row{
    transform:translateX(-100px)!important;
    width:calc(100% + 100px)!important;
  }

  #jlpt180-ag-root .m2-user-pill{
    min-height:52px!important;
  }

  #jlpt180-ag-root .ag-info-row,
  #jlpt180-ag-root .ag-quiz-meta,
  #jlpt180-ag-root .ag-reward-extra{
    grid-template-columns:1fr!important;
  }

  #jlpt180-ag-root .ag-detail-strip{
    flex-direction:column!important;
  }
}



/* v032: visible user strip + richer route/timeline color */
@media (max-width:820px){
  #jlpt180-ag-root .m2-route{
    background:
      radial-gradient(circle at 12% 8%, rgba(98,210,112,.16), transparent 34%),
      linear-gradient(180deg,rgba(255,255,255,.99),rgba(238,255,243,.97))!important;
    border-color:rgba(63,183,74,.24)!important;
    box-shadow:0 16px 36px rgba(45,123,73,.18)!important;
  }

  #jlpt180-ag-root .m2-user-strip{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
    min-height:52px!important;
    margin:0 0 12px!important;
    padding:8px 10px!important;
    border-radius:20px!important;
    background:linear-gradient(90deg,rgba(235,255,229,.96),rgba(255,255,255,.86))!important;
    border:1px solid rgba(88,182,75,.18)!important;
  }

  #jlpt180-ag-root .m2-mini-avatar{
    width:40px!important;
    height:40px!important;
    border-radius:16px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 6px 10px rgba(42,115,65,.18))!important;
  }

  #jlpt180-ag-root .m2-user-strip span{
    display:block!important;
    color:#667085!important;
    font-size:10px!important;
    font-weight:850!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-user-strip b{
    display:block!important;
    margin-top:4px!important;
    color:#193529!important;
    font-size:14px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m2-user-strip em{
    font-style:normal!important;
    color:#2f963f!important;
    font-size:12px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    padding:6px 9px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(88,182,75,.18)!important;
  }

  #jlpt180-ag-root .m2-route-level{
    margin-top:2px!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    text-shadow:0 8px 18px rgba(47,154,69,.12)!important;
  }

  #jlpt180-ag-root .m2-levels button{
    background:linear-gradient(180deg,#ffffff,#f7fbf8)!important;
  }

  #jlpt180-ag-root .m2-levels button.is-active{
    background:linear-gradient(180deg,#62c94c,#309f3a)!important;
  }

  #jlpt180-ag-root .m2-step{
    min-height:132px!important;
    padding-top:16px!important;
    padding-bottom:16px!important;
    border-width:1px!important;
    box-shadow:0 14px 30px rgba(50,105,74,.14)!important;
  }

  #jlpt180-ag-root .m2-step.s1{
    background:
      radial-gradient(circle at 18% 50%,rgba(88,182,75,.18),transparent 34%),
      linear-gradient(90deg,#ecffe9,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s2{
    background:
      radial-gradient(circle at 18% 50%,rgba(74,165,234,.18),transparent 34%),
      linear-gradient(90deg,#e8f7ff,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s3{
    background:
      radial-gradient(circle at 18% 50%,rgba(164,116,223,.18),transparent 34%),
      linear-gradient(90deg,#f4eaff,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s4{
    background:
      radial-gradient(circle at 18% 50%,rgba(240,124,163,.18),transparent 34%),
      linear-gradient(90deg,#ffeaf4,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s5{
    background:
      radial-gradient(circle at 18% 50%,rgba(241,184,68,.20),transparent 34%),
      linear-gradient(90deg,#fff2d6,#fff)!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    font-size:20px!important;
    letter-spacing:-.01em!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    font-size:12.5px!important;
    line-height:1.38!important;
  }

  #jlpt180-ag-root .m2-step button{
    background:linear-gradient(180deg,#64cd4f,#2f9f38)!important;
    box-shadow:0 12px 22px rgba(47,159,55,.26)!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-user-strip{
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:8px!important;
    padding:7px 8px!important;
  }

  #jlpt180-ag-root .m2-mini-avatar{
    width:36px!important;
    height:36px!important;
  }

  #jlpt180-ag-root .m2-user-strip b{
    font-size:13px!important;
  }

  #jlpt180-ag-root .m2-user-strip em{
    font-size:11px!important;
    padding:5px 7px!important;
  }

  #jlpt180-ag-root .m2-step{
    min-height:124px!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    font-size:18px!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    font-size:11.5px!important;
  }
}



/* v033: AI UI Design Command Source final mobile pass */
@media (max-width:820px){
  html,
  body{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body .site-content,
  body .ast-container,
  body .content-area,
  body .entry-content,
  body .wp-site-blocks,
  body article,
  body .hentry{
    max-width:100%!important;
    overflow:visible!important;
  }

  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    background:#eaf8ee!important;
  }

  #jlpt180-ag-root .ag-shell,
  #jlpt180-ag-root .ag-main,
  #jlpt180-ag-root .ag-sidebar,
  #jlpt180-ag-root .ag-mobile-bottom-nav{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .ag-mobile-v2{
    display:block!important;
    visibility:visible!important;
    width:100%!important;
    max-width:430px!important;
    min-height:100vh!important;
    margin:0 auto!important;
    padding:0 14px 104px!important;
    overflow:visible!important;
    pointer-events:auto!important;
    color:#202939!important;
    background:
      radial-gradient(circle at 12% -4%,rgba(104,220,142,.42),transparent 30%),
      radial-gradient(circle at 96% 0%,rgba(116,205,255,.34),transparent 31%),
      linear-gradient(180deg,#effcf3 0%,#fbfffc 46%,#f3fff5 100%)!important;
  }

  #jlpt180-ag-root .ag-mobile-v2,
  #jlpt180-ag-root .ag-mobile-v2 *{
    box-sizing:border-box!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans JP",sans-serif!important;
    letter-spacing:0!important;
    word-spacing:0!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
    text-transform:none!important;
    text-rendering:optimizeLegibility!important;
    -webkit-font-smoothing:antialiased!important;
  }

  #jlpt180-ag-root .ag-mobile-v2 a{
    color:inherit!important;
    text-decoration:none!important;
  }

  #jlpt180-ag-root .ag-mobile-v2 button{
    appearance:none!important;
    -webkit-appearance:none!important;
    font:inherit!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    border:0!important;
  }

  /* Header user */
  #jlpt180-ag-root .m2-hero{
    position:relative!important;
    min-height:170px!important;
    margin:0 -14px 12px!important;
    padding:20px 16px 14px 124px!important;
    border-radius:0 0 32px 32px!important;
    background:
      radial-gradient(circle at 90% 20%,rgba(255,231,148,.25),transparent 34%),
      linear-gradient(120deg,rgba(221,255,229,.98),rgba(236,255,251,.94) 58%,rgba(255,250,229,.82)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    box-shadow:0 14px 34px rgba(53,109,72,.16)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-mascot{
    position:absolute!important;
    left:14px!important;
    top:22px!important;
    width:100px!important;
    height:100px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 12px 20px rgba(42,115,65,.22))!important;
  }

  #jlpt180-ag-root .m2-hello span{
    display:block!important;
    color:#2f7b42!important;
    font-size:14px!important;
    font-weight:750!important;
    line-height:1.2!important;
  }

  #jlpt180-ag-root .m2-hello b{
    display:block!important;
    margin-top:4px!important;
    max-width:235px!important;
    color:#18352b!important;
    font-size:27px!important;
    line-height:1.1!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
  }

  #jlpt180-ag-root .m2-hello small{
    display:block!important;
    margin-top:5px!important;
    max-width:220px!important;
    color:#557166!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:700!important;
  }

  #jlpt180-ag-root .m2-quick{
    display:none!important;
  }

  #jlpt180-ag-root .m2-user-row{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    margin:14px 0 0!important;
    transform:translateX(-108px)!important;
    width:calc(100% + 108px)!important;
  }

  #jlpt180-ag-root .m2-user-pill{
    min-height:54px!important;
    padding:8px!important;
    border-radius:19px!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(89,122,98,.12)!important;
    box-shadow:0 8px 20px rgba(53,109,72,.12)!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:center!important;
    align-items:flex-start!important;
  }

  #jlpt180-ag-root .m2-user-pill span{
    font-size:15px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-user-pill b{
    display:block!important;
    margin-top:3px!important;
    color:#173b2b!important;
    font-size:12px!important;
    line-height:1.1!important;
    font-weight:900!important;
    max-width:100%!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m2-user-pill small{
    display:block!important;
    margin-top:2px!important;
    color:#6b7e75!important;
    font-size:9px!important;
    line-height:1!important;
    font-weight:800!important;
  }

  /* Route */
  #jlpt180-ag-root .m2-route{
    margin:0 0 14px!important;
    padding:16px 16px 15px!important;
    border-radius:28px!important;
    background:
      radial-gradient(circle at 14% 10%,rgba(98,210,112,.16),transparent 34%),
      linear-gradient(180deg,rgba(255,255,255,.99),rgba(238,255,243,.97))!important;
    border:1px solid rgba(63,183,74,.22)!important;
    box-shadow:0 14px 32px rgba(45,123,73,.16)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-route-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:0 0 10px!important;
  }

  #jlpt180-ag-root .m2-route-head div{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    color:#202939!important;
    font-size:17px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-route-head div span{
    width:32px!important;
    height:32px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:13px!important;
    background:#eaf8e7!important;
    font-size:19px!important;
  }

  #jlpt180-ag-root .m2-route-head button{
    min-height:31px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    background:#f1fbef!important;
    border:1px solid rgba(88,182,75,.18)!important;
    color:#2f963f!important;
    font-size:12px!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-user-strip{
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:8px!important;
    align-items:center!important;
    min-height:48px!important;
    margin:0 0 10px!important;
    padding:7px 8px!important;
    border-radius:18px!important;
    background:linear-gradient(90deg,rgba(235,255,229,.96),rgba(255,255,255,.86))!important;
    border:1px solid rgba(88,182,75,.18)!important;
  }

  #jlpt180-ag-root .m2-mini-avatar{
    width:36px!important;
    height:36px!important;
    border-radius:15px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
  }

  #jlpt180-ag-root .m2-user-strip span{
    display:block!important;
    color:#667085!important;
    font-size:10px!important;
    font-weight:850!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-user-strip b{
    display:block!important;
    margin-top:4px!important;
    color:#193529!important;
    font-size:13px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m2-user-strip em{
    font-style:normal!important;
    color:#2f963f!important;
    font-size:11px!important;
    font-weight:900!important;
    white-space:nowrap!important;
    padding:5px 7px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(88,182,75,.18)!important;
  }

  #jlpt180-ag-root .m2-route-level{
    display:flex!important;
    align-items:baseline!important;
    gap:7px!important;
    color:#2f9a45!important;
    line-height:1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    font-size:30px!important;
    letter-spacing:.01em!important;
  }

  #jlpt180-ag-root .m2-route-level span{
    font-size:14px!important;
    color:#38a153!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-route small{
    display:block!important;
    margin-top:8px!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.38!important;
  }

  #jlpt180-ag-root .m2-route-progress{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:9px!important;
    align-items:center!important;
    margin-top:11px!important;
  }

  #jlpt180-ag-root .m2-route-progress::before{
    content:""!important;
    height:8px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 42%,#e7efe8 42% 100%)!important;
  }

  #jlpt180-ag-root .m2-route-progress i{
    display:none!important;
  }

  #jlpt180-ag-root .m2-route-progress em{
    color:#202939!important;
    font-size:13px!important;
    font-style:normal!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-levels{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    margin-top:13px!important;
  }

  #jlpt180-ag-root .m2-levels button{
    min-height:38px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.18)!important;
    color:#5d6c63!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#63c64c,#35a43d)!important;
    border-color:transparent!important;
    box-shadow:0 8px 18px rgba(54,164,61,.24)!important;
  }

  #jlpt180-ag-root .m2-levels [data-route-level="MN"]{
    font-size:11px!important;
  }

  /* Section */
  #jlpt180-ag-root .m2-section-head{
    margin:0 0 10px!important;
    padding:0 4px!important;
  }

  #jlpt180-ag-root .m2-section-head b{
    display:block!important;
    color:#1f2937!important;
    font-size:22px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-section-head span{
    display:block!important;
    margin-top:4px!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  /* Timeline */
  #jlpt180-ag-root .m2-today{
    position:relative!important;
  }

  #jlpt180-ag-root .m2-today::before{
    content:""!important;
    position:absolute!important;
    left:30px!important;
    top:126px!important;
    bottom:50px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;
    opacity:.46!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .m2-step{
    position:relative!important;
    z-index:1!important;
    display:grid!important;
    grid-template-columns:60px minmax(0,1fr) 88px!important;
    grid-template-rows:auto auto auto!important;
    gap:5px 10px!important;
    align-items:center!important;
    min-height:118px!important;
    margin:0 0 10px!important;
    padding:13px 10px 13px 70px!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 12px 28px rgba(50,105,74,.13)!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .m2-step.s1{background:radial-gradient(circle at 18% 50%,rgba(88,182,75,.18),transparent 34%),linear-gradient(100deg,#ecffe9,#fff)!important}
  #jlpt180-ag-root .m2-step.s2{background:radial-gradient(circle at 18% 50%,rgba(74,165,234,.18),transparent 34%),linear-gradient(100deg,#e8f7ff,#fff)!important}
  #jlpt180-ag-root .m2-step.s3{background:radial-gradient(circle at 18% 50%,rgba(164,116,223,.18),transparent 34%),linear-gradient(100deg,#f4eaff,#fff)!important}
  #jlpt180-ag-root .m2-step.s4{background:radial-gradient(circle at 18% 50%,rgba(240,124,163,.18),transparent 34%),linear-gradient(100deg,#ffeaf4,#fff)!important}
  #jlpt180-ag-root .m2-step.s5{background:radial-gradient(circle at 18% 50%,rgba(241,184,68,.20),transparent 34%),linear-gradient(100deg,#fff2d6,#fff)!important}

  #jlpt180-ag-root .m2-num{
    position:absolute!important;
    left:9px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:42px!important;
    height:42px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    color:#fff!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:900!important;
    box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
    z-index:3!important;
  }

  #jlpt180-ag-root .s1 .m2-num{background:#51ba49!important}
  #jlpt180-ag-root .s2 .m2-num{background:#55b7ee!important}
  #jlpt180-ag-root .s3 .m2-num{background:#a474df!important}
  #jlpt180-ag-root .s4 .m2-num{background:#f07ca3!important}
  #jlpt180-ag-root .s5 .m2-num{background:#f1b844!important}

  #jlpt180-ag-root .m2-step img{
    grid-column:1!important;
    grid-row:1 / 4!important;
    width:56px!important;
    height:56px!important;
    object-fit:contain!important;
    align-self:center!important;
    justify-self:center!important;
    filter:drop-shadow(0 8px 10px rgba(57,95,72,.14))!important;
  }

  #jlpt180-ag-root .m2-step-main{
    grid-column:2!important;
    grid-row:1 / 4!important;
    min-width:0!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    margin:0!important;
    color:#1f2937!important;
    font-size:19px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:-.01em!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    margin:4px 0 0!important;
    color:#667085!important;
    font-size:11.5px!important;
    line-height:1.33!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-bar{
    width:min(125px,100%)!important;
    height:5px!important;
    margin-top:6px!important;
    border-radius:999px!important;
    background:#e7ece8!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-bar i{
    display:block!important;
    height:100%!important;
    border-radius:999px!important;
  }

  #jlpt180-ag-root .s1 .m2-bar i{width:72%!important;background:#58b64b!important}
  #jlpt180-ag-root .s2 .m2-bar i{width:50%!important;background:#4aa5ea!important}
  #jlpt180-ag-root .s3 .m2-bar i{width:70%!important;background:#a474df!important}
  #jlpt180-ag-root .s4 .m2-bar i{width:8%!important;background:#f07ca3!important}

  #jlpt180-ag-root .m2-step-main strong{
    display:block!important;
    margin-top:4px!important;
    color:#202939!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-step button{
    grid-column:3!important;
    grid-row:1 / 4!important;
    align-self:center!important;
    justify-self:end!important;
    width:88px!important;
    min-width:88px!important;
    min-height:42px!important;
    padding:0 8px!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#64cd4f,#2f9f38)!important;
    color:#fff!important;
    font-size:11.5px!important;
    line-height:1.1!important;
    font-weight:900!important;
    box-shadow:0 12px 22px rgba(47,159,55,.24)!important;
  }

  /* Compact goal */
  #jlpt180-ag-root .m2-goal{
    margin:12px 0 0!important;
    padding:14px 16px!important;
    border-radius:22px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 8px 20px rgba(53,109,72,.09)!important;
  }

  #jlpt180-ag-root .m2-goal-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
  }

  #jlpt180-ag-root .m2-goal-head b{
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-goal-head span{
    color:#2f9a45!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-goal-items{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:6px!important;
    margin-top:12px!important;
  }

  #jlpt180-ag-root .m2-goal-items span{
    min-height:34px!important;
    display:grid!important;
    place-items:center!important;
    padding:0 6px!important;
    border-radius:999px!important;
    background:#f4fbf2!important;
    color:#52635a!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:800!important;
    text-align:center!important;
  }

  #jlpt180-ag-root .m2-bottom{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:66px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.97)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 16px 42px rgba(42,70,48,.22)!important;
    backdrop-filter:blur(14px)!important;
  }

  #jlpt180-ag-root .m2-bottom a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:22px!important;
    color:#7a8394!important;
    text-decoration:none!important;
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .m2-bottom a span{
    font-size:19px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-bottom a.is-active{
    background:linear-gradient(180deg,#e9fbe5,#def5db)!important;
    color:#2f963f!important;
  }

  @media (max-width:430px){
    #jlpt180-ag-root .ag-mobile-v2{
      padding-left:10px!important;
      padding-right:10px!important;
    }

    #jlpt180-ag-root .m2-hero{
      margin-left:-10px!important;
      margin-right:-10px!important;
      padding-left:112px!important;
      min-height:164px!important;
    }

    #jlpt180-ag-root .m2-mascot{
      left:12px!important;
      top:24px!important;
      width:92px!important;
      height:92px!important;
    }

    #jlpt180-ag-root .m2-hello b{
      font-size:25px!important;
    }

    #jlpt180-ag-root .m2-user-row{
      transform:translateX(-98px)!important;
      width:calc(100% + 98px)!important;
    }

    #jlpt180-ag-root .m2-user-pill{
      min-height:50px!important;
      padding:7px!important;
    }

    #jlpt180-ag-root .m2-user-pill b{
      font-size:11px!important;
    }

    #jlpt180-ag-root .m2-step{
      grid-template-columns:52px minmax(0,1fr) 82px!important;
      padding:12px 10px 12px 64px!important;
      min-height:112px!important;
      gap:4px 8px!important;
    }

    #jlpt180-ag-root .m2-today::before{
      left:29px!important;
    }

    #jlpt180-ag-root .m2-num{
      left:8px!important;
      width:40px!important;
      height:40px!important;
      font-size:15px!important;
    }

    #jlpt180-ag-root .m2-step img{
      width:50px!important;
      height:50px!important;
    }

    #jlpt180-ag-root .m2-step-main h3{
      font-size:18px!important;
    }

    #jlpt180-ag-root .m2-step-main p{
      font-size:11px!important;
    }

    #jlpt180-ag-root .m2-step-main strong{
      font-size:12.5px!important;
    }

    #jlpt180-ag-root .m2-step button{
      width:82px!important;
      min-width:82px!important;
      min-height:40px!important;
      font-size:11px!important;
      padding:0 6px!important;
    }
  }

  @media (max-width:374px){
    #jlpt180-ag-root .m2-hero{
      padding-left:96px!important;
    }

    #jlpt180-ag-root .m2-mascot{
      width:78px!important;
      height:78px!important;
    }

    #jlpt180-ag-root .m2-step{
      grid-template-columns:48px minmax(0,1fr)!important;
      grid-template-rows:auto auto auto auto!important;
    }

    #jlpt180-ag-root .m2-step button{
      grid-column:2!important;
      grid-row:4!important;
      justify-self:start!important;
      width:112px!important;
      margin-top:6px!important;
    }
  }
}



/* v034: mobile v2 app polish pass */
@media (max-width:820px){
  /* Header becomes a real hero again */
  #jlpt180-ag-root .m2-hero{
    min-height:142px!important;
    margin:0 -14px 14px!important;
    padding:20px 14px 14px 116px!important;
    border-radius:0 0 30px 30px!important;
    background:
      radial-gradient(circle at 8% 22%,rgba(95,211,116,.22),transparent 34%),
      radial-gradient(circle at 92% 18%,rgba(255,214,103,.26),transparent 30%),
      linear-gradient(120deg,rgba(220,255,227,.98),rgba(236,255,251,.95) 58%,rgba(255,250,229,.84)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    box-shadow:0 16px 38px rgba(40,100,64,.18)!important;
  }

  #jlpt180-ag-root .m2-mascot{
    left:14px!important;
    top:20px!important;
    width:88px!important;
    height:88px!important;
    filter:drop-shadow(0 13px 18px rgba(42,115,65,.24))!important;
  }

  #jlpt180-ag-root .m2-hello span{
    font-size:13px!important;
    color:#26723d!important;
  }

  #jlpt180-ag-root .m2-hello b{
    max-width:226px!important;
    font-size:25px!important;
    line-height:1.08!important;
    color:#18352b!important;
  }

  #jlpt180-ag-root .m2-hello small{
    max-width:220px!important;
    margin-top:4px!important;
    font-size:11px!important;
    line-height:1.3!important;
  }

  #jlpt180-ag-root .m2-user-row{
    grid-template-columns:repeat(3,1fr)!important;
    gap:7px!important;
    margin-top:12px!important;
    transform:translateX(-102px)!important;
    width:calc(100% + 102px)!important;
  }

  #jlpt180-ag-root .m2-user-pill{
    min-height:48px!important;
    padding:7px 8px!important;
    border-radius:17px!important;
    background:rgba(255,255,255,.90)!important;
    box-shadow:0 9px 22px rgba(53,109,72,.13)!important;
  }

  #jlpt180-ag-root .m2-user-pill span{
    font-size:14px!important;
  }

  #jlpt180-ag-root .m2-user-pill b{
    font-size:12px!important;
  }

  #jlpt180-ag-root .m2-user-pill small{
    font-size:8.5px!important;
  }

  /* Route card: less blank space, stronger hierarchy */
  #jlpt180-ag-root .m2-route{
    margin:0 0 12px!important;
    padding:14px 14px 13px!important;
    border-radius:26px!important;
    background:
      radial-gradient(circle at 12% 8%,rgba(79,202,91,.20),transparent 34%),
      linear-gradient(180deg,rgba(255,255,255,.99),rgba(239,255,244,.98))!important;
    border-color:rgba(63,183,74,.28)!important;
    box-shadow:0 13px 32px rgba(45,123,73,.17)!important;
  }

  #jlpt180-ag-root .m2-route-head{
    margin-bottom:8px!important;
  }

  #jlpt180-ag-root .m2-route-head div{
    font-size:16px!important;
  }

  #jlpt180-ag-root .m2-route-head div span{
    width:30px!important;
    height:30px!important;
    border-radius:12px!important;
    font-size:18px!important;
  }

  #jlpt180-ag-root .m2-route-head button{
    min-height:30px!important;
    padding:0 10px!important;
    font-size:11.5px!important;
  }

  #jlpt180-ag-root .m2-user-strip{
    min-height:44px!important;
    margin-bottom:9px!important;
    padding:6px 8px!important;
    border-radius:16px!important;
  }

  #jlpt180-ag-root .m2-mini-avatar{
    width:34px!important;
    height:34px!important;
    border-radius:14px!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    font-size:28px!important;
  }

  #jlpt180-ag-root .m2-route-level span{
    font-size:13px!important;
  }

  #jlpt180-ag-root .m2-route small{
    margin-top:6px!important;
    font-size:11.5px!important;
    line-height:1.32!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-route-progress{
    margin-top:9px!important;
  }

  #jlpt180-ag-root .m2-route-progress::before{
    height:7px!important;
  }

  #jlpt180-ag-root .m2-levels{
    margin-top:11px!important;
    gap:7px!important;
  }

  #jlpt180-ag-root .m2-levels button{
    min-height:36px!important;
    font-size:11.5px!important;
  }

  #jlpt180-ag-root .m2-levels [data-route-level="MN"]{
    font-size:10.5px!important;
  }

  /* Section */
  #jlpt180-ag-root .m2-section-head{
    margin-bottom:9px!important;
  }

  #jlpt180-ag-root .m2-section-head b{
    font-size:21px!important;
  }

  /* Timeline: text gets more width, button and icon shrink slightly */
  #jlpt180-ag-root .m2-today::before{
    left:28px!important;
    top:118px!important;
    bottom:46px!important;
    width:3px!important;
    opacity:.48!important;
  }

  #jlpt180-ag-root .m2-step{
    min-height:104px!important;
    margin-bottom:9px!important;
    padding:12px 10px 12px 62px!important;
    grid-template-columns:44px minmax(0,1fr) 76px!important;
    gap:4px 10px!important;
    border-radius:22px!important;
    box-shadow:0 12px 28px rgba(50,105,74,.14)!important;
  }

  #jlpt180-ag-root .m2-step.s1{
    background:radial-gradient(circle at 18% 50%,rgba(88,182,75,.25),transparent 35%),linear-gradient(100deg,#eaffea,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s2{
    background:radial-gradient(circle at 18% 50%,rgba(74,165,234,.24),transparent 35%),linear-gradient(100deg,#e3f5ff,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s3{
    background:radial-gradient(circle at 18% 50%,rgba(164,116,223,.24),transparent 35%),linear-gradient(100deg,#f2e7ff,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s4{
    background:radial-gradient(circle at 18% 50%,rgba(240,124,163,.24),transparent 35%),linear-gradient(100deg,#ffe6f2,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s5{
    background:radial-gradient(circle at 18% 50%,rgba(241,184,68,.26),transparent 35%),linear-gradient(100deg,#ffefcf,#fff)!important;
  }

  #jlpt180-ag-root .m2-num{
    left:8px!important;
    width:39px!important;
    height:39px!important;
    font-size:15px!important;
    box-shadow:0 8px 18px rgba(0,0,0,.13)!important;
  }

  #jlpt180-ag-root .m2-step img{
    width:42px!important;
    height:42px!important;
    filter:drop-shadow(0 7px 9px rgba(57,95,72,.15))!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    font-size:18px!important;
    line-height:1.12!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    margin-top:3px!important;
    font-size:11.5px!important;
    line-height:1.3!important;
  }

  #jlpt180-ag-root .m2-bar{
    width:min(132px,100%)!important;
    height:5px!important;
    margin-top:5px!important;
  }

  #jlpt180-ag-root .m2-step-main strong{
    margin-top:3px!important;
    font-size:12.5px!important;
  }

  #jlpt180-ag-root .m2-step button{
    width:76px!important;
    min-width:76px!important;
    min-height:38px!important;
    padding:0 6px!important;
    border-radius:15px!important;
    font-size:11px!important;
    line-height:1.05!important;
    box-shadow:0 11px 20px rgba(47,159,55,.24)!important;
  }

  /* Compact goal visible but short */
  #jlpt180-ag-root .m2-goal{
    margin-top:10px!important;
    padding:12px 14px!important;
    border-radius:20px!important;
  }

  #jlpt180-ag-root .m2-goal-head b{
    font-size:17px!important;
  }

  #jlpt180-ag-root .m2-goal-head span{
    font-size:19px!important;
  }

  #jlpt180-ag-root .m2-goal-items{
    margin-top:10px!important;
  }

  #jlpt180-ag-root .m2-goal-items span{
    min-height:30px!important;
    font-size:10.5px!important;
  }

  #jlpt180-ag-root .m2-bottom{
    min-height:64px!important;
    border-radius:26px!important;
  }

  #jlpt180-ag-root .m2-bottom a span{
    font-size:18px!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-hero{
    min-height:136px!important;
    padding-left:104px!important;
  }

  #jlpt180-ag-root .m2-mascot{
    width:84px!important;
    height:84px!important;
    left:12px!important;
    top:22px!important;
  }

  #jlpt180-ag-root .m2-hello b{
    font-size:23px!important;
  }

  #jlpt180-ag-root .m2-user-row{
    transform:translateX(-90px)!important;
    width:calc(100% + 90px)!important;
  }

  #jlpt180-ag-root .m2-step{
    grid-template-columns:40px minmax(0,1fr) 72px!important;
    padding-left:56px!important;
    gap:4px 8px!important;
  }

  #jlpt180-ag-root .m2-num{
    left:7px!important;
    width:36px!important;
    height:36px!important;
  }

  #jlpt180-ag-root .m2-step img{
    width:39px!important;
    height:39px!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    font-size:17px!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    font-size:11px!important;
  }

  #jlpt180-ag-root .m2-step button{
    width:72px!important;
    min-width:72px!important;
    min-height:36px!important;
    font-size:10.5px!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .m2-step{
    grid-template-columns:38px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
  }

  #jlpt180-ag-root .m2-step button{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    width:108px!important;
    margin-top:5px!important;
  }
}



/* v035: mobile hero visibility + timeline readability pass */
@media (max-width:820px){
  #jlpt180-ag-root .ag-mobile-v2{
    padding-top:0!important;
    padding-bottom:128px!important;
  }

  /* Make hero impossible to visually disappear */
  #jlpt180-ag-root .m2-hero{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    min-height:132px!important;
    height:auto!important;
    margin:0 -14px 12px!important;
    padding:18px 14px 14px 108px!important;
    border-radius:0 0 28px 28px!important;
    background:
      radial-gradient(circle at 92% 18%,rgba(255,210,80,.28),transparent 30%),
      radial-gradient(circle at 20% 82%,rgba(99,210,110,.18),transparent 36%),
      linear-gradient(120deg,rgba(219,255,226,.99),rgba(236,255,251,.96) 58%,rgba(255,250,229,.86)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    box-shadow:0 12px 30px rgba(40,100,64,.16)!important;
    overflow:visible!important;
    position:relative!important;
    z-index:2!important;
  }

  #jlpt180-ag-root .m2-mascot{
    display:block!important;
    visibility:visible!important;
    left:12px!important;
    top:18px!important;
    width:84px!important;
    height:84px!important;
  }

  #jlpt180-ag-root .m2-hello{
    display:block!important;
    visibility:visible!important;
  }

  #jlpt180-ag-root .m2-hello span{
    font-size:13px!important;
  }

  #jlpt180-ag-root .m2-hello b{
    max-width:230px!important;
    font-size:24px!important;
    line-height:1.08!important;
  }

  #jlpt180-ag-root .m2-hello small{
    max-width:230px!important;
    margin-top:4px!important;
    font-size:10.5px!important;
    line-height:1.3!important;
  }

  #jlpt180-ag-root .m2-user-row{
    margin-top:10px!important;
    transform:translateX(-96px)!important;
    width:calc(100% + 96px)!important;
    gap:6px!important;
  }

  #jlpt180-ag-root .m2-user-pill{
    min-height:44px!important;
    padding:6px 7px!important;
    border-radius:16px!important;
  }

  #jlpt180-ag-root .m2-user-pill span{
    font-size:13px!important;
  }

  #jlpt180-ag-root .m2-user-pill b{
    font-size:11px!important;
  }

  #jlpt180-ag-root .m2-user-pill small{
    font-size:8px!important;
  }

  /* Route starts after hero, no more missing top feeling */
  #jlpt180-ag-root .m2-route{
    margin:0 0 12px!important;
    padding:13px 13px 12px!important;
    border-radius:24px!important;
  }

  #jlpt180-ag-root .m2-route-head{
    margin-bottom:7px!important;
  }

  #jlpt180-ag-root .m2-route-head div{
    font-size:15px!important;
  }

  #jlpt180-ag-root .m2-route-head div span{
    width:28px!important;
    height:28px!important;
    font-size:17px!important;
  }

  #jlpt180-ag-root .m2-user-strip{
    min-height:42px!important;
    margin-bottom:8px!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    font-size:27px!important;
  }

  #jlpt180-ag-root .m2-route small{
    font-size:11px!important;
    line-height:1.28!important;
    -webkit-line-clamp:2!important;
  }

  #jlpt180-ag-root .m2-route-progress{
    margin-top:8px!important;
  }

  #jlpt180-ag-root .m2-levels{
    margin-top:10px!important;
    gap:7px!important;
  }

  #jlpt180-ag-root .m2-levels button{
    min-height:34px!important;
  }

  /* Timeline content gets more horizontal room */
  #jlpt180-ag-root .m2-today::before{
    left:26px!important;
    top:110px!important;
    bottom:50px!important;
  }

  #jlpt180-ag-root .m2-step{
    grid-template-columns:40px minmax(0,1fr) 70px!important;
    min-height:98px!important;
    margin-bottom:9px!important;
    padding:11px 10px 11px 58px!important;
    gap:3px 9px!important;
    border-radius:21px!important;
  }

  #jlpt180-ag-root .m2-num{
    left:7px!important;
    width:37px!important;
    height:37px!important;
    font-size:14px!important;
  }

  #jlpt180-ag-root .m2-step img{
    width:39px!important;
    height:39px!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    font-size:17px!important;
    line-height:1.12!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    margin-top:3px!important;
    font-size:11px!important;
    line-height:1.25!important;
    -webkit-line-clamp:1!important;
  }

  #jlpt180-ag-root .m2-bar{
    width:min(138px,100%)!important;
    height:5px!important;
    margin-top:5px!important;
  }

  #jlpt180-ag-root .m2-step-main strong{
    font-size:12px!important;
    margin-top:3px!important;
  }

  #jlpt180-ag-root .m2-step button{
    width:70px!important;
    min-width:70px!important;
    min-height:36px!important;
    padding:0 5px!important;
    border-radius:14px!important;
    font-size:10.5px!important;
  }

  #jlpt180-ag-root .m2-step.s5 button{
    font-size:10px!important;
  }

  #jlpt180-ag-root .m2-goal{
    margin-bottom:8px!important;
  }

  #jlpt180-ag-root .m2-bottom{
    min-height:64px!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-hero{
    margin-left:-10px!important;
    margin-right:-10px!important;
    padding-left:100px!important;
    min-height:128px!important;
  }

  #jlpt180-ag-root .m2-mascot{
    width:78px!important;
    height:78px!important;
  }

  #jlpt180-ag-root .m2-hello b{
    font-size:22px!important;
  }

  #jlpt180-ag-root .m2-user-row{
    transform:translateX(-88px)!important;
    width:calc(100% + 88px)!important;
  }

  #jlpt180-ag-root .m2-step{
    grid-template-columns:38px minmax(0,1fr) 66px!important;
    padding-left:54px!important;
  }

  #jlpt180-ag-root .m2-step button{
    width:66px!important;
    min-width:66px!important;
    font-size:10px!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .m2-step{
    grid-template-columns:38px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
  }

  #jlpt180-ag-root .m2-step button{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    width:106px!important;
    margin-top:5px!important;
  }
}



/* v036: visible user avatar/profile in mobile header */
@media (max-width:820px){
  #jlpt180-ag-root .m2-hero{
    min-height:188px!important;
    padding:18px 14px 14px 116px!important;
  }

  #jlpt180-ag-root .m2-mascot{
    width:88px!important;
    height:88px!important;
    left:14px!important;
    top:18px!important;
  }

  #jlpt180-ag-root .m2-profile-card{
    position:relative!important;
    z-index:4!important;
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
    min-height:64px!important;
    margin:12px 0 0!important;
    padding:9px 10px!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.90)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 12px 28px rgba(45,123,73,.16)!important;
    backdrop-filter:blur(10px)!important;
  }

  #jlpt180-ag-root .m2-profile-avatar{
    width:44px!important;
    height:44px!important;
    border-radius:17px!important;
    background:
      linear-gradient(180deg,rgba(232,255,230,.9),rgba(255,255,255,.85)),
      url("mascot-stand.webp") center/contain no-repeat!important;
    border:1px solid rgba(88,182,75,.16)!important;
    filter:drop-shadow(0 6px 10px rgba(42,115,65,.16))!important;
  }

  #jlpt180-ag-root .m2-profile-main{
    min-width:0!important;
  }

  #jlpt180-ag-root .m2-profile-main span{
    display:block!important;
    color:#667085!important;
    font-size:10px!important;
    font-weight:850!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-profile-main b{
    display:block!important;
    margin-top:4px!important;
    color:#173b2b!important;
    font-size:15px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m2-profile-main small{
    display:block!important;
    margin-top:4px!important;
    color:#2f963f!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m2-profile-main i{
    font-style:normal!important;
  }

  #jlpt180-ag-root .m2-profile-stats{
    display:grid!important;
    gap:5px!important;
    justify-items:end!important;
  }

  #jlpt180-ag-root .m2-profile-stats em{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:24px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    background:#f6fff4!important;
    border:1px solid rgba(88,182,75,.16)!important;
    color:#2f7b42!important;
    font-size:10px!important;
    font-style:normal!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  /* Old tiny row is now redundant; keep but make it hidden to avoid noise */
  #jlpt180-ag-root .m2-user-row{
    display:none!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-hero{
    min-height:178px!important;
    padding-left:104px!important;
  }

  #jlpt180-ag-root .m2-mascot{
    width:80px!important;
    height:80px!important;
    left:12px!important;
    top:20px!important;
  }

  #jlpt180-ag-root .m2-profile-card{
    grid-template-columns:40px minmax(0,1fr)!important;
    gap:8px!important;
    min-height:62px!important;
  }

  #jlpt180-ag-root .m2-profile-avatar{
    width:40px!important;
    height:40px!important;
  }

  #jlpt180-ag-root .m2-profile-stats{
    grid-column:1 / 3!important;
    display:flex!important;
    justify-content:space-between!important;
    gap:6px!important;
    width:100%!important;
    margin-top:2px!important;
  }

  #jlpt180-ag-root .m2-profile-stats em{
    flex:1!important;
  }
}



/* v037: child-page UI assets and strict PC/mobile separation */
#jlpt180-ag-root .ag-app-overlay{
  background:
    linear-gradient(180deg,rgba(231,246,232,.78),rgba(245,255,247,.82)),
    url("child-app-bg.webp") center/cover no-repeat!important;
}

/* Shared overlay header */
#jlpt180-ag-root .ag-app-window{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(89,122,98,.18)!important;
  box-shadow:0 28px 88px rgba(29,60,42,.25)!important;
}

#jlpt180-ag-root .ag-app-head{
  background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(240,255,244,.90))!important;
}

#jlpt180-ag-root .ag-app-title-icon{
  display:grid!important;
  place-items:center!important;
  width:46px!important;
  height:46px!important;
  border-radius:18px!important;
  background:#f1fbef!important;
  border:1px solid rgba(89,122,98,.14)!important;
}

#jlpt180-ag-root .ag-app-title-icon img{
  width:34px!important;
  height:34px!important;
  object-fit:contain!important;
}

/* PC child pages */
@media (min-width:821px){
  #jlpt180-ag-root .ag-app-window{
    width:min(1120px,calc(100vw - 64px))!important;
    height:min(760px,calc(100vh - 64px))!important;
    grid-template-rows:78px 6px minmax(0,1fr) 76px!important;
  }

  #jlpt180-ag-root .ag-app-body{
    padding:22px!important;
    overflow:auto!important;
  }

  #jlpt180-ag-root .ag-app-screen.is-active{
    min-height:100%!important;
  }

  /* Review PC */
  #jlpt180-ag-root .ag-screen-review .ag-app-layout.review{
    display:grid!important;
    grid-template-columns:260px minmax(0,1fr)!important;
    gap:20px!important;
    min-height:100%!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-app-side{
    padding:16px!important;
    border-radius:26px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.90),rgba(243,255,242,.86)),
      url("child-review-panel.webp") center/cover no-repeat!important;
    border:1px solid rgba(88,182,75,.18)!important;
    box-shadow:0 12px 30px rgba(88,182,75,.10)!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-app-main-card{
    border-radius:28px!important;
    padding:20px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,255,248,.86)),
      url("child-review-panel.webp") center/cover no-repeat!important;
    border:1px solid rgba(88,182,75,.16)!important;
  }

  #jlpt180-ag-root .ag-study-card{
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    border-radius:28px!important;
    box-shadow:0 16px 38px rgba(53,109,72,.10)!important;
  }

  #jlpt180-ag-root .ag-study-card ruby{
    font-size:56px!important;
    line-height:1.05!important;
  }

  #jlpt180-ag-root .ag-answer-actions button{
    min-height:54px!important;
    border-radius:18px!important;
    border:1px solid rgba(89,122,98,.12)!important;
  }

  /* Vocab PC */
  #jlpt180-ag-root .ag-screen-vocab .ag-vocab-hero{
    background:
      linear-gradient(90deg,rgba(255,255,255,.92),rgba(236,248,255,.88)),
      url("child-vocab-panel.webp") center/cover no-repeat!important;
    border-color:rgba(74,165,234,.20)!important;
    box-shadow:0 16px 38px rgba(74,165,234,.10)!important;
  }

  #jlpt180-ag-root .ag-screen-vocab .ag-mini-list.rich > div{
    background:rgba(255,255,255,.92)!important;
    border-color:rgba(74,165,234,.16)!important;
  }

  /* Grammar PC */
  #jlpt180-ag-root .ag-screen-grammar .ag-grammar-board{
    background:
      linear-gradient(180deg,rgba(255,255,255,.92),rgba(249,241,255,.88)),
      url("child-grammar-panel.webp") center/cover no-repeat!important;
    border-color:rgba(164,116,223,.22)!important;
  }

  #jlpt180-ag-root .ag-screen-grammar .ag-tip-box{
    background:rgba(255,255,255,.88)!important;
    border-color:rgba(164,116,223,.16)!important;
  }

  /* Quiz PC */
  #jlpt180-ag-root .ag-screen-quiz .ag-quiz-card{
    background:
      linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,240,247,.88)),
      url("child-quiz-panel.webp") center/cover no-repeat!important;
    border-color:rgba(240,124,163,.20)!important;
    box-shadow:0 16px 38px rgba(240,124,163,.10)!important;
  }

  #jlpt180-ag-root .ag-screen-quiz .ag-quiz-meta,
  #jlpt180-ag-root .ag-screen-quiz .ag-quiz-note{
    background:rgba(255,255,255,.90)!important;
    border-color:rgba(240,124,163,.16)!important;
  }

  /* Reward PC */
  #jlpt180-ag-root .ag-screen-reward .ag-reward-screen{
    background:
      linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,248,225,.90)),
      url("child-reward-panel.webp") center/cover no-repeat!important;
    border-color:rgba(241,184,68,.22)!important;
    box-shadow:0 18px 42px rgba(241,184,68,.14)!important;
  }
}

/* Mobile child pages: separate app-like layout, not desktop */
@media (max-width:820px){
  #jlpt180-ag-root .ag-app-overlay{
    padding:0!important;
    place-items:stretch!important;
  }

  #jlpt180-ag-root .ag-app-window{
    width:100vw!important;
    height:100vh!important;
    max-height:100vh!important;
    border:0!important;
    border-radius:0!important;
    display:grid!important;
    grid-template-rows:72px 5px minmax(0,1fr) 74px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.96),rgba(247,255,249,.96)),
      url("child-app-bg.webp") center/cover no-repeat!important;
  }

  #jlpt180-ag-root .ag-app-head{
    min-height:72px!important;
    padding:12px 14px!important;
    grid-template-columns:40px 44px minmax(0,1fr) 40px!important;
    gap:8px!important;
  }

  #jlpt180-ag-root .ag-app-close,
  #jlpt180-ag-root .ag-app-help{
    width:38px!important;
    height:38px!important;
    border-radius:15px!important;
  }

  #jlpt180-ag-root .ag-app-title-icon{
    width:40px!important;
    height:40px!important;
    border-radius:15px!important;
  }

  #jlpt180-ag-root .ag-app-title-icon img{
    width:30px!important;
    height:30px!important;
  }

  #jlpt180-ag-root .ag-app-head h2{
    font-size:21px!important;
    line-height:1.12!important;
  }

  #jlpt180-ag-root .ag-app-body{
    padding:14px!important;
    overflow:auto!important;
  }

  #jlpt180-ag-root .ag-app-foot{
    min-height:74px!important;
    padding:10px 14px 14px!important;
    gap:10px!important;
  }

  #jlpt180-ag-root .ag-app-foot button{
    min-height:46px!important;
    border-radius:17px!important;
    font-size:15px!important;
  }

  /* Mobile Review */
  #jlpt180-ag-root .ag-screen-review .ag-app-layout.review{
    display:block!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-app-side{
    display:none!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-app-main-card{
    padding:0!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-study-card{
    min-height:360px!important;
    padding:22px 16px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.94),rgba(241,255,240,.90)),
      url("child-review-panel.webp") center/cover no-repeat!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-study-card ruby{
    font-size:48px!important;
  }

  #jlpt180-ag-root .ag-detail-strip{
    margin:12px 0!important;
  }

  #jlpt180-ag-root .ag-answer-actions{
    grid-template-columns:repeat(2,1fr)!important;
    gap:9px!important;
  }

  /* Mobile Vocab */
  #jlpt180-ag-root .ag-screen-vocab .ag-vocab-hero{
    display:block!important;
    padding:18px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.94),rgba(235,248,255,.90)),
      url("child-vocab-panel.webp") center/cover no-repeat!important;
  }

  #jlpt180-ag-root .ag-screen-vocab .ag-vocab-hero img{
    display:none!important;
  }

  #jlpt180-ag-root .ag-screen-vocab .ag-vocab-hero ruby{
    font-size:42px!important;
  }

  #jlpt180-ag-root .ag-screen-vocab .ag-info-row,
  #jlpt180-ag-root .ag-screen-vocab .ag-mini-list.rich{
    grid-template-columns:1fr!important;
  }

  /* Mobile Grammar */
  #jlpt180-ag-root .ag-screen-grammar .ag-grammar-board{
    padding:18px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,241,255,.90)),
      url("child-grammar-panel.webp") center/cover no-repeat!important;
  }

  #jlpt180-ag-root .ag-screen-grammar .ag-grammar-board h3{
    font-size:34px!important;
  }

  /* Mobile Quiz */
  #jlpt180-ag-root .ag-screen-quiz .ag-quiz-card{
    padding:18px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,240,247,.90)),
      url("child-quiz-panel.webp") center/cover no-repeat!important;
  }

  #jlpt180-ag-root .ag-screen-quiz .ag-quiz-card h3{
    font-size:20px!important;
  }

  #jlpt180-ag-root .ag-screen-quiz .ag-quiz-card ruby{
    font-size:36px!important;
  }

  #jlpt180-ag-root .ag-screen-quiz .ag-quiz-meta{
    grid-template-columns:1fr!important;
  }

  /* Mobile Reward */
  #jlpt180-ag-root .ag-screen-reward .ag-reward-screen{
    padding:22px 16px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,248,225,.90)),
      url("child-reward-panel.webp") center/cover no-repeat!important;
  }

  #jlpt180-ag-root .ag-screen-reward .ag-reward-screen img{
    width:120px!important;
    height:120px!important;
  }

  #jlpt180-ag-root .ag-screen-reward .ag-reward-extra{
    grid-template-columns:1fr!important;
  }
}



/* v038: emergency performance guard */
#jlpt180-ag-root .ag-app-overlay,
#jlpt180-ag-root .ag-app-window,
#jlpt180-ag-root .ag-app-body,
#jlpt180-ag-root .ag-app-screen{
  will-change:auto!important;
}

#jlpt180-ag-root .ag-app-overlay{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

#jlpt180-ag-root .ag-app-window{
  contain:layout paint!important;
}

#jlpt180-ag-root .ag-app-screen:not(.is-active){
  display:none!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-app-overlay{
    background:rgba(232,246,234,.96)!important;
  }

  #jlpt180-ag-root .ag-app-window{
    background:linear-gradient(180deg,#ffffff,#f4fff6)!important;
  }
}



/* v039: desktop main-page color + icon visibility pass */
@media (min-width:821px){
  #jlpt180-ag-root .ag-shell{
    gap:20px!important;
  }

  #jlpt180-ag-root .ag-sidebar,
  #jlpt180-ag-root .ag-main{
    background:
      linear-gradient(180deg,rgba(255,255,255,.92),rgba(247,255,248,.90)),
      url("child-app-bg.webp") center/cover no-repeat!important;
  }

  #jlpt180-ag-root .ag-sidebar{
    position:relative!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-sidebar::after{
    content:""!important;
    position:absolute!important;
    inset:auto -22px 14px auto!important;
    width:120px!important;
    height:120px!important;
    background:url("mascot-read.webp") center/contain no-repeat!important;
    opacity:.12!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .ag-menu a{
    min-height:48px!important;
    border-radius:18px!important;
    transition:.18s ease!important;
  }

  #jlpt180-ag-root .ag-menu a:hover,
  #jlpt180-ag-root .ag-menu a.is-active{
    background:linear-gradient(90deg,rgba(229,252,228,.98),rgba(243,255,245,.92))!important;
    box-shadow:0 10px 24px rgba(88,182,75,.11)!important;
  }

  #jlpt180-ag-root .ag-topbar{
    margin-bottom:18px!important;
  }

  #jlpt180-ag-root .ag-topbar h1{
    font-size:32px!important;
    line-height:1.12!important;
  }

  #jlpt180-ag-root .ag-actions button{
    background:linear-gradient(180deg,#fffdf8,#eefcf0)!important;
    border-color:rgba(88,182,75,.16)!important;
    box-shadow:0 10px 22px rgba(88,182,75,.08)!important;
  }

  #jlpt180-ag-root .ag-hero{
    gap:16px!important;
    align-items:stretch!important;
    margin-bottom:18px!important;
  }

  #jlpt180-ag-root .ag-stat-card{
    position:relative!important;
    overflow:hidden!important;
    min-height:126px!important;
    padding:18px 18px 16px!important;
    border-radius:24px!important;
    border-width:1px!important;
    box-shadow:0 14px 30px rgba(65,101,79,.08)!important;
  }

  #jlpt180-ag-root .ag-stat-card::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
    opacity:1!important;
  }

  #jlpt180-ag-root .ag-stat-card::after{
    content:""!important;
    position:absolute!important;
    right:12px!important;
    bottom:10px!important;
    width:54px!important;
    height:54px!important;
    opacity:.16!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    background-size:contain!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .ag-stat-card.fire{
    background:linear-gradient(180deg,#fffaf6,#fff4ee)!important;
    border-color:rgba(245,126,71,.22)!important;
  }
  #jlpt180-ag-root .ag-stat-card.fire::before{
    background:radial-gradient(circle at 100% 0%,rgba(255,179,133,.22),transparent 40%)!important;
  }
  #jlpt180-ag-root .ag-stat-card.fire::after{
    background-image:url("child-review-badge.webp")!important;
  }

  #jlpt180-ag-root .ag-stat-card.xp{
    background:linear-gradient(180deg,#f7fbff,#eff6ff)!important;
    border-color:rgba(86,123,255,.20)!important;
  }
  #jlpt180-ag-root .ag-stat-card.xp::before{
    background:radial-gradient(circle at 100% 0%,rgba(125,160,255,.22),transparent 40%)!important;
  }
  #jlpt180-ag-root .ag-stat-card.xp::after{
    background-image:url("child-vocab-badge.webp")!important;
  }

  #jlpt180-ag-root .ag-stat-card.level{
    background:linear-gradient(180deg,#fffaf0,#fff5dd)!important;
    border-color:rgba(231,170,42,.22)!important;
  }
  #jlpt180-ag-root .ag-stat-card.level::before{
    background:radial-gradient(circle at 100% 0%,rgba(255,214,107,.20),transparent 40%)!important;
  }
  #jlpt180-ag-root .ag-stat-card.level::after{
    background-image:url("child-reward-badge.webp")!important;
  }

  #jlpt180-ag-root .ag-stat-card.cards{
    background:linear-gradient(180deg,#fff8fc,#fff2f8)!important;
    border-color:rgba(230,120,170,.22)!important;
  }
  #jlpt180-ag-root .ag-stat-card.cards::before{
    background:radial-gradient(circle at 100% 0%,rgba(240,155,194,.18),transparent 40%)!important;
  }
  #jlpt180-ag-root .ag-stat-card.cards::after{
    background-image:url("child-quiz-badge.webp")!important;
  }

  #jlpt180-ag-root .ag-stat-card.fire b{color:#f26b3d!important;}
  #jlpt180-ag-root .ag-stat-card.xp b{color:#5577ff!important;}
  #jlpt180-ag-root .ag-stat-card.level b{color:#dfa11a!important;}
  #jlpt180-ag-root .ag-stat-card.cards b{color:#36a565!important;}

  #jlpt180-ag-root .ag-hero-mascot{
    align-self:end!important;
    width:128px!important;
    max-width:100%!important;
    filter:drop-shadow(0 18px 22px rgba(56,126,80,.15))!important;
  }

  #jlpt180-ag-root .ag-route-switcher{
    position:relative!important;
    overflow:hidden!important;
    margin-bottom:18px!important;
    padding:18px 18px!important;
    border-radius:24px!important;
    background:linear-gradient(90deg,rgba(234,255,232,.94),rgba(238,250,255,.92))!important;
    border-color:rgba(88,182,75,.18)!important;
    box-shadow:0 14px 32px rgba(68,119,89,.08)!important;
  }

  #jlpt180-ag-root .ag-route-switcher::after{
    content:""!important;
    position:absolute!important;
    right:18px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:80px!important;
    height:80px!important;
    opacity:.11!important;
    background:url("icon-vocab.webp") center/contain no-repeat!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .ag-route-current b{
    font-size:26px!important;
    line-height:1.05!important;
    color:#173b2b!important;
  }

  #jlpt180-ag-root .ag-route-current small{
    max-width:620px!important;
  }

  #jlpt180-ag-root .ag-route-levels button{
    background:rgba(255,255,255,.88)!important;
    border-color:rgba(88,182,75,.14)!important;
    box-shadow:0 8px 18px rgba(88,182,75,.06)!important;
  }

  #jlpt180-ag-root .ag-route-levels button.is-active{
    background:linear-gradient(180deg,#58c349,#43ac36)!important;
    color:#fff!important;
    box-shadow:0 12px 24px rgba(88,182,75,.24)!important;
  }

  #jlpt180-ag-root .ag-today{
    margin-bottom:16px!important;
    padding:20px 18px 22px!important;
    border-radius:28px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(245,255,246,.90))!important;
    border-color:rgba(88,182,75,.14)!important;
    box-shadow:0 16px 34px rgba(65,101,79,.08)!important;
  }

  #jlpt180-ag-root .ag-steps{
    gap:18px!important;
  }

  #jlpt180-ag-root .ag-step{
    position:relative!important;
    overflow:hidden!important;
    min-height:214px!important;
    padding:20px 20px 18px!important;
    border-radius:24px!important;
    border-width:1px!important;
    box-shadow:0 14px 32px rgba(65,101,79,.08)!important;
  }

  #jlpt180-ag-root .ag-step::before{
    content:""!important;
    position:absolute!important;
    inset:0!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .ag-step em{
    width:42px!important;
    height:42px!important;
    border-radius:999px!important;
    font-size:18px!important;
    box-shadow:0 10px 20px rgba(0,0,0,.10)!important;
  }

  #jlpt180-ag-root .ag-step img{
    width:80px!important;
    height:80px!important;
    object-fit:contain!important;
    margin-top:6px!important;
    filter:drop-shadow(0 12px 16px rgba(64,112,84,.16))!important;
  }

  #jlpt180-ag-root .ag-step h3{
    font-size:20px!important;
    margin:8px 0 6px!important;
  }

  #jlpt180-ag-root .ag-step p{
    min-height:54px!important;
    font-size:15px!important;
    line-height:1.4!important;
  }

  #jlpt180-ag-root .ag-step b{
    font-size:17px!important;
  }

  #jlpt180-ag-root .ag-step a{
    min-height:46px!important;
    padding:0 22px!important;
    border-radius:16px!important;
    box-shadow:0 10px 18px rgba(88,182,75,.22)!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(1){
    background:linear-gradient(180deg,#f4fff1,#fbfffb)!important;
    border-color:rgba(88,182,75,.18)!important;
  }
  #jlpt180-ag-root .ag-step:nth-child(1)::before{
    background:radial-gradient(circle at 0% 100%,rgba(157,228,145,.18),transparent 40%)!important;
  }
  #jlpt180-ag-root .ag-step:nth-child(1) em{background:#6bc74c!important;color:#fff!important;}

  #jlpt180-ag-root .ag-step:nth-child(2){
    background:linear-gradient(180deg,#f3faff,#fbfdff)!important;
    border-color:rgba(74,165,234,.18)!important;
  }
  #jlpt180-ag-root .ag-step:nth-child(2)::before{
    background:radial-gradient(circle at 0% 100%,rgba(132,194,245,.18),transparent 40%)!important;
  }
  #jlpt180-ag-root .ag-step:nth-child(2) em{background:#56abf0!important;color:#fff!important;}

  #jlpt180-ag-root .ag-step:nth-child(3){
    background:linear-gradient(180deg,#fbf5ff,#fefcff)!important;
    border-color:rgba(164,116,223,.18)!important;
  }
  #jlpt180-ag-root .ag-step:nth-child(3)::before{
    background:radial-gradient(circle at 0% 100%,rgba(190,152,235,.18),transparent 40%)!important;
  }
  #jlpt180-ag-root .ag-step:nth-child(3) em{background:#ad7de6!important;color:#fff!important;}

  #jlpt180-ag-root .ag-step:nth-child(4){
    background:linear-gradient(180deg,#fff5fa,#fffafd)!important;
    border-color:rgba(240,124,163,.18)!important;
  }
  #jlpt180-ag-root .ag-step:nth-child(4)::before{
    background:radial-gradient(circle at 0% 100%,rgba(242,158,189,.18),transparent 40%)!important;
  }
  #jlpt180-ag-root .ag-step:nth-child(4) em{background:#ef8cb2!important;color:#fff!important;}

  #jlpt180-ag-root .ag-step.reward,
  #jlpt180-ag-root .ag-step:nth-child(5){
    background:linear-gradient(180deg,#fffaf0,#fffdf8)!important;
    border-color:rgba(241,184,68,.18)!important;
  }
  #jlpt180-ag-root .ag-step.reward::before,
  #jlpt180-ag-root .ag-step:nth-child(5)::before{
    background:radial-gradient(circle at 0% 100%,rgba(245,215,125,.18),transparent 40%)!important;
  }
  #jlpt180-ag-root .ag-step.reward em,
  #jlpt180-ag-root .ag-step:nth-child(5) em{background:#f1c14b!important;color:#fff!important;}

  #jlpt180-ag-root .ag-grid{
    gap:18px!important;
  }

  #jlpt180-ag-root .ag-panel{
    position:relative!important;
    overflow:hidden!important;
    border-radius:26px!important;
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(247,255,248,.90))!important;
    box-shadow:0 14px 30px rgba(65,101,79,.08)!important;
  }

  #jlpt180-ag-root .ag-panel::after{
    content:""!important;
    position:absolute!important;
    right:16px!important;
    top:14px!important;
    width:56px!important;
    height:56px!important;
    opacity:.16!important;
    background-position:center!important;
    background-repeat:no-repeat!important;
    background-size:contain!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .ag-library{
    border-color:rgba(74,165,234,.16)!important;
  }
  #jlpt180-ag-root .ag-library::after{
    background-image:url("icon-vocab.webp")!important;
  }

  #jlpt180-ag-root .ag-activity{
    border-color:rgba(88,182,75,.16)!important;
  }
  #jlpt180-ag-root .ag-activity::after{
    background-image:url("icon-review.webp")!important;
  }

  #jlpt180-ag-root .ag-goal{
    border-color:rgba(241,184,68,.16)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,250,236,.92))!important;
  }
  #jlpt180-ag-root .ag-goal::after{
    background-image:url("icon-reward.webp")!important;
  }

  #jlpt180-ag-root .ag-decks div{
    border-radius:18px!important;
    background:rgba(255,255,255,.82)!important;
  }

  #jlpt180-ag-root .ag-decks i{
    height:8px!important;
    border-radius:999px!important;
  }

  #jlpt180-ag-root .ag-activity li{
    border-radius:18px!important;
    background:rgba(255,255,255,.84)!important;
  }

  #jlpt180-ag-root .ag-goal .ag-ring{
    width:156px!important;
    height:156px!important;
    background:
      radial-gradient(circle at center,rgba(255,255,255,.98) 57%,transparent 58%),
      conic-gradient(#58c349 0 216deg,#dcebe0 216deg 360deg)!important;
    box-shadow:0 14px 24px rgba(88,182,75,.10)!important;
  }
}



/* v040: mobile route label fix + mockup recreation */
@media (max-width:820px){
  html,
  body{
    overflow-x:hidden!important;
    overflow-y:auto!important;
    height:auto!important;
  }

  body .site-content,
  body .ast-container,
  body .content-area,
  body .entry-content{
    overflow:visible!important;
    max-width:100%!important;
  }

  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    background:#eaf8ee!important;
  }

  #jlpt180-ag-root .ag-shell,
  #jlpt180-ag-root .ag-main,
  #jlpt180-ag-root .ag-sidebar,
  #jlpt180-ag-root .ag-mobile-bottom-nav{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .ag-mobile-v2{
    display:block!important;
    visibility:visible!important;
    width:100%!important;
    max-width:430px!important;
    min-height:100vh!important;
    margin:0 auto!important;
    padding:0 14px 104px!important;
    overflow:visible!important;
    pointer-events:auto!important;
    color:#202939!important;
    background:
      radial-gradient(circle at 12% -4%,rgba(104,220,142,.45),transparent 30%),
      radial-gradient(circle at 96% 0%,rgba(116,205,255,.34),transparent 31%),
      linear-gradient(180deg,#ebfbf0 0%,#fbfffc 46%,#f3fff5 100%)!important;
  }

  #jlpt180-ag-root .ag-mobile-v2,
  #jlpt180-ag-root .ag-mobile-v2 *{
    box-sizing:border-box!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans JP",sans-serif!important;
    letter-spacing:0!important;
    word-spacing:0!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
    text-transform:none!important;
    -webkit-font-smoothing:antialiased!important;
  }

  #jlpt180-ag-root .ag-mobile-v2 button{
    appearance:none!important;
    -webkit-appearance:none!important;
    font:inherit!important;
    white-space:nowrap!important;
    border:0!important;
  }

  #jlpt180-ag-root .ag-mobile-v2 a{
    color:inherit!important;
    text-decoration:none!important;
  }

  /* HERO - giống mẫu mới */
  #jlpt180-ag-root .m2-hero{
    position:relative!important;
    min-height:164px!important;
    margin:0 -14px 14px!important;
    padding:22px 18px 16px 132px!important;
    border-radius:0 0 34px 34px!important;
    background:
      radial-gradient(circle at 92% 12%,rgba(255,213,96,.28),transparent 30%),
      radial-gradient(circle at 12% 82%,rgba(100,213,122,.20),transparent 36%),
      linear-gradient(120deg,rgba(219,255,226,.99),rgba(236,255,251,.96) 58%,rgba(255,250,229,.86)),
      url("bg-mobile.webp") center top/cover no-repeat!important;
    box-shadow:0 16px 38px rgba(40,100,64,.18)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-mascot{
    position:absolute!important;
    left:15px!important;
    top:22px!important;
    width:104px!important;
    height:104px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 13px 20px rgba(42,115,65,.24))!important;
  }

  #jlpt180-ag-root .m2-hello span{
    display:block!important;
    color:#2f7b42!important;
    font-size:15px!important;
    line-height:1.2!important;
    font-weight:750!important;
  }

  #jlpt180-ag-root .m2-hello b{
    display:block!important;
    margin-top:4px!important;
    max-width:230px!important;
    color:#18352b!important;
    font-size:28px!important;
    line-height:1.08!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
  }

  #jlpt180-ag-root .m2-hello small{
    display:block!important;
    margin-top:6px!important;
    max-width:220px!important;
    color:#557166!important;
    font-size:11px!important;
    line-height:1.35!important;
    font-weight:700!important;
  }

  /* User info row inside hero */
  #jlpt180-ag-root .m2-profile-card,
  #jlpt180-ag-root .m2-user-row{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:9px!important;
    align-items:center!important;
    min-height:58px!important;
    margin:12px 0 0!important;
    padding:8px 10px!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.90)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 12px 28px rgba(45,123,73,.16)!important;
    backdrop-filter:blur(10px)!important;
  }

  #jlpt180-ag-root .m2-user-row{
    transform:none!important;
    width:100%!important;
    grid-template-columns:repeat(3,1fr)!important;
  }

  #jlpt180-ag-root .m2-profile-avatar,
  #jlpt180-ag-root .m2-mini-avatar{
    width:40px!important;
    height:40px!important;
    border-radius:16px!important;
    background:
      linear-gradient(180deg,rgba(232,255,230,.9),rgba(255,255,255,.85)),
      url("mascot-stand.webp") center/contain no-repeat!important;
    border:1px solid rgba(88,182,75,.16)!important;
  }

  #jlpt180-ag-root .m2-profile-main span,
  #jlpt180-ag-root .m2-user-strip span{
    display:block!important;
    color:#667085!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-profile-main b,
  #jlpt180-ag-root .m2-user-strip b{
    display:block!important;
    margin-top:4px!important;
    color:#173b2b!important;
    font-size:14px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m2-profile-main small{
    display:block!important;
    margin-top:4px!important;
    color:#2f963f!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m2-profile-main i{
    font-style:normal!important;
  }

  #jlpt180-ag-root .m2-profile-stats{
    display:grid!important;
    gap:5px!important;
  }

  #jlpt180-ag-root .m2-profile-stats em,
  #jlpt180-ag-root .m2-user-strip em{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:24px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(88,182,75,.16)!important;
    color:#2f7b42!important;
    font-size:10px!important;
    font-style:normal!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  /* Route card: không hiển thị MN, chỉ Mầm non */
  #jlpt180-ag-root .m2-route{
    margin:0 0 14px!important;
    padding:18px!important;
    border-radius:30px!important;
    background:
      radial-gradient(circle at 14% 8%,rgba(98,210,112,.18),transparent 34%),
      linear-gradient(180deg,rgba(255,255,255,.99),rgba(238,255,243,.97))!important;
    border:1px solid rgba(63,183,74,.24)!important;
    box-shadow:0 16px 36px rgba(45,123,73,.18)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-route-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    margin:0 0 10px!important;
  }

  #jlpt180-ag-root .m2-route-head div{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    color:#202939!important;
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-route-head div span{
    width:34px!important;
    height:34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:13px!important;
    background:#eaf8e7!important;
    font-size:20px!important;
  }

  #jlpt180-ag-root .m2-route-head button{
    min-height:32px!important;
    padding:0 11px!important;
    border-radius:999px!important;
    background:#f1fbef!important;
    border:1px solid rgba(88,182,75,.18)!important;
    color:#2f963f!important;
    font-size:12px!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-user-strip{
    display:none!important;
  }

  #jlpt180-ag-root .m2-route-level{
    display:flex!important;
    align-items:baseline!important;
    gap:8px!important;
    color:#2f9a45!important;
    line-height:1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    font-size:34px!important;
    letter-spacing:.01em!important;
    color:#1f9b45!important;
  }

  #jlpt180-ag-root .m2-route-level span{
    font-size:16px!important;
    color:#38a153!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-route small{
    display:block!important;
    margin-top:10px!important;
    color:#667085!important;
    font-size:13px!important;
    line-height:1.42!important;
  }

  #jlpt180-ag-root .m2-route-progress{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:10px!important;
    align-items:center!important;
    margin-top:14px!important;
  }

  #jlpt180-ag-root .m2-route-progress::before{
    content:""!important;
    display:block!important;
    height:9px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 42%,#e7efe8 42% 100%)!important;
  }

  #jlpt180-ag-root .m2-route-progress i{
    display:none!important;
  }

  #jlpt180-ag-root .m2-route-progress em{
    color:#202939!important;
    font-size:13px!important;
    font-style:normal!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-levels{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    margin-top:16px!important;
  }

  #jlpt180-ag-root .m2-levels button{
    min-height:40px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.18)!important;
    color:#5d6c63!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:900!important;
    box-shadow:0 4px 12px rgba(53,109,72,.05)!important;
  }

  #jlpt180-ag-root .m2-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#63c64c,#35a43d)!important;
    border-color:transparent!important;
    box-shadow:0 8px 18px rgba(54,164,61,.24)!important;
  }

  #jlpt180-ag-root .m2-levels [data-route-level="MN"]{
    font-size:11px!important;
  }

  /* Section */
  #jlpt180-ag-root .m2-section-head{
    margin:0 0 12px!important;
    padding:0 4px!important;
  }

  #jlpt180-ag-root .m2-section-head b{
    display:block!important;
    color:#1f2937!important;
    font-size:22px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-section-head span{
    display:block!important;
    margin-top:4px!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  /* Step cards: richer colors, no "MN" issue */
  #jlpt180-ag-root .m2-today{
    position:relative!important;
  }

  #jlpt180-ag-root .m2-today::before{
    content:""!important;
    position:absolute!important;
    left:30px!important;
    top:126px!important;
    bottom:50px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;
    opacity:.46!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .m2-step{
    position:relative!important;
    z-index:1!important;
    display:grid!important;
    grid-template-columns:60px minmax(0,1fr) 88px!important;
    grid-template-rows:auto auto auto!important;
    gap:5px 10px!important;
    align-items:center!important;
    min-height:118px!important;
    margin:0 0 10px!important;
    padding:13px 10px 13px 70px!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 12px 28px rgba(50,105,74,.13)!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .m2-step.s1{background:radial-gradient(circle at 18% 50%,rgba(88,182,75,.25),transparent 35%),linear-gradient(100deg,#eaffea,#fff)!important}
  #jlpt180-ag-root .m2-step.s2{background:radial-gradient(circle at 18% 50%,rgba(74,165,234,.24),transparent 35%),linear-gradient(100deg,#e3f5ff,#fff)!important}
  #jlpt180-ag-root .m2-step.s3{background:radial-gradient(circle at 18% 50%,rgba(164,116,223,.24),transparent 35%),linear-gradient(100deg,#f2e7ff,#fff)!important}
  #jlpt180-ag-root .m2-step.s4{background:radial-gradient(circle at 18% 50%,rgba(240,124,163,.24),transparent 35%),linear-gradient(100deg,#ffe6f2,#fff)!important}
  #jlpt180-ag-root .m2-step.s5{background:radial-gradient(circle at 18% 50%,rgba(241,184,68,.26),transparent 35%),linear-gradient(100deg,#ffefcf,#fff)!important}

  #jlpt180-ag-root .m2-num{
    position:absolute!important;
    left:9px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:42px!important;
    height:42px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:999px!important;
    color:#fff!important;
    font-size:16px!important;
    line-height:1!important;
    font-weight:900!important;
    box-shadow:0 8px 18px rgba(0,0,0,.10)!important;
    z-index:3!important;
  }

  #jlpt180-ag-root .s1 .m2-num{background:#51ba49!important}
  #jlpt180-ag-root .s2 .m2-num{background:#55b7ee!important}
  #jlpt180-ag-root .s3 .m2-num{background:#a474df!important}
  #jlpt180-ag-root .s4 .m2-num{background:#f07ca3!important}
  #jlpt180-ag-root .s5 .m2-num{background:#f1b844!important}

  #jlpt180-ag-root .m2-step img{
    grid-column:1!important;
    grid-row:1 / 4!important;
    width:56px!important;
    height:56px!important;
    object-fit:contain!important;
    align-self:center!important;
    justify-self:center!important;
    filter:drop-shadow(0 8px 10px rgba(57,95,72,.14))!important;
  }

  #jlpt180-ag-root .m2-step-main{
    grid-column:2!important;
    grid-row:1 / 4!important;
    min-width:0!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    margin:0!important;
    color:#1f2937!important;
    font-size:19px!important;
    line-height:1.15!important;
    font-weight:900!important;
    letter-spacing:-.01em!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    margin:4px 0 0!important;
    color:#667085!important;
    font-size:11.5px!important;
    line-height:1.33!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-bar{
    width:min(125px,100%)!important;
    height:5px!important;
    margin-top:6px!important;
    border-radius:999px!important;
    background:#e7ece8!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-bar i{
    display:block!important;
    height:100%!important;
    border-radius:999px!important;
  }

  #jlpt180-ag-root .s1 .m2-bar i{width:72%!important;background:#58b64b!important}
  #jlpt180-ag-root .s2 .m2-bar i{width:50%!important;background:#4aa5ea!important}
  #jlpt180-ag-root .s3 .m2-bar i{width:70%!important;background:#a474df!important}
  #jlpt180-ag-root .s4 .m2-bar i{width:8%!important;background:#f07ca3!important}

  #jlpt180-ag-root .m2-step-main strong{
    display:block!important;
    margin-top:4px!important;
    color:#202939!important;
    font-size:13px!important;
    line-height:1.15!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-step button{
    grid-column:3!important;
    grid-row:1 / 4!important;
    align-self:center!important;
    justify-self:end!important;
    width:88px!important;
    min-width:88px!important;
    min-height:42px!important;
    padding:0 8px!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#64cd4f,#2f9f38)!important;
    color:#fff!important;
    font-size:11.5px!important;
    line-height:1.1!important;
    font-weight:900!important;
    box-shadow:0 12px 22px rgba(47,159,55,.24)!important;
  }

  /* Compact goal */
  #jlpt180-ag-root .m2-goal{
    margin:12px 0 0!important;
    padding:14px 16px!important;
    border-radius:22px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 8px 20px rgba(53,109,72,.09)!important;
  }

  #jlpt180-ag-root .m2-goal-head{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:12px!important;
  }

  #jlpt180-ag-root .m2-goal-head b{
    font-size:18px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-goal-head span{
    color:#2f9a45!important;
    font-size:20px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-goal-items{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:6px!important;
    margin-top:12px!important;
  }

  #jlpt180-ag-root .m2-goal-items span{
    min-height:34px!important;
    display:grid!important;
    place-items:center!important;
    padding:0 6px!important;
    border-radius:999px!important;
    background:#f4fbf2!important;
    color:#52635a!important;
    font-size:11px!important;
    line-height:1.1!important;
    font-weight:800!important;
    text-align:center!important;
  }

  #jlpt180-ag-root .m2-bottom{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:66px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.97)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 16px 42px rgba(42,70,48,.22)!important;
    backdrop-filter:blur(14px)!important;
  }

  #jlpt180-ag-root .m2-bottom a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:22px!important;
    color:#7a8394!important;
    text-decoration:none!important;
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .m2-bottom a span{
    font-size:19px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m2-bottom a.is-active{
    background:linear-gradient(180deg,#e9fbe5,#def5db)!important;
    color:#2f963f!important;
  }

  @media (max-width:430px){
    #jlpt180-ag-root .ag-mobile-v2{
      padding-left:10px!important;
      padding-right:10px!important;
    }

    #jlpt180-ag-root .m2-hero{
      margin-left:-10px!important;
      margin-right:-10px!important;
      padding-left:112px!important;
      min-height:176px!important;
    }

    #jlpt180-ag-root .m2-mascot{
      left:12px!important;
      top:24px!important;
      width:92px!important;
      height:92px!important;
    }

    #jlpt180-ag-root .m2-hello b{
      font-size:25px!important;
    }

    #jlpt180-ag-root .m2-profile-card,
    #jlpt180-ag-root .m2-user-row{
      grid-template-columns:40px minmax(0,1fr)!important;
      gap:8px!important;
    }

    #jlpt180-ag-root .m2-profile-stats{
      grid-column:1 / 3!important;
      display:flex!important;
      justify-content:space-between!important;
      gap:6px!important;
      width:100%!important;
      margin-top:2px!important;
    }

    #jlpt180-ag-root .m2-profile-stats em{
      flex:1!important;
    }

    #jlpt180-ag-root .m2-step{
      grid-template-columns:52px minmax(0,1fr) 82px!important;
      padding:12px 10px 12px 64px!important;
      min-height:112px!important;
      gap:4px 8px!important;
    }

    #jlpt180-ag-root .m2-today::before{
      left:29px!important;
    }

    #jlpt180-ag-root .m2-num{
      left:8px!important;
      width:40px!important;
      height:40px!important;
      font-size:15px!important;
    }

    #jlpt180-ag-root .m2-step img{
      width:50px!important;
      height:50px!important;
    }

    #jlpt180-ag-root .m2-step-main h3{
      font-size:18px!important;
    }

    #jlpt180-ag-root .m2-step-main p{
      font-size:11px!important;
    }

    #jlpt180-ag-root .m2-step-main strong{
      font-size:12.5px!important;
    }

    #jlpt180-ag-root .m2-step button{
      width:82px!important;
      min-width:82px!important;
      min-height:40px!important;
      font-size:11px!important;
      padding:0 6px!important;
    }
  }

  @media (max-width:374px){
    #jlpt180-ag-root .m2-hero{
      padding-left:96px!important;
    }

    #jlpt180-ag-root .m2-mascot{
      width:78px!important;
      height:78px!important;
    }

    #jlpt180-ag-root .m2-step{
      grid-template-columns:48px minmax(0,1fr)!important;
      grid-template-rows:auto auto auto auto!important;
    }

    #jlpt180-ag-root .m2-step button{
      grid-column:2!important;
      grid-row:4!important;
      justify-self:start!important;
      width:112px!important;
      margin-top:6px!important;
    }
  }
}



/* v041 child pages richer lesson info */
#jlpt180-ag-root .ag-session-summary{
  margin:14px 24px 0!important;
  padding:14px 16px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(246,255,246,.98),rgba(236,250,240,.96))!important;
  border:1px solid rgba(111,190,99,.18)!important;
  box-shadow:0 10px 24px rgba(56,112,73,.08)!important;
}
#jlpt180-ag-root .ag-session-summary-head{
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:12px!important;
}
#jlpt180-ag-root .ag-session-summary-head span{
  display:block!important;
  color:#4c8d54!important;
  font-size:11px!important;
  line-height:1.1!important;
  font-weight:800!important;
  text-transform:uppercase!important;
  letter-spacing:.03em!important;
}
#jlpt180-ag-root .ag-session-summary-head b{
  display:block!important;
  margin-top:4px!important;
  color:#1f2f35!important;
  font-size:19px!important;
  line-height:1.15!important;
  font-weight:900!important;
}
#jlpt180-ag-root .ag-session-summary-head small{
  color:#667085!important;
  font-size:12px!important;
  line-height:1.35!important;
  font-weight:700!important;
}
#jlpt180-ag-root .ag-session-summary-grid{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:10px!important;
}
#jlpt180-ag-root .ag-session-summary-grid > div{
  padding:12px 12px 10px!important;
  border-radius:16px!important;
  background:#fff!important;
  border:1px solid rgba(89,122,98,.12)!important;
  box-shadow:0 6px 16px rgba(54,104,72,.06)!important;
}
#jlpt180-ag-root .ag-session-summary-grid > div span{
  display:block!important;
  color:#68807a!important;
  font-size:11px!important;
  line-height:1.1!important;
  font-weight:800!important;
}
#jlpt180-ag-root .ag-session-summary-grid > div b{
  display:block!important;
  margin-top:6px!important;
  color:#18383a!important;
  font-size:20px!important;
  line-height:1!important;
  font-weight:900!important;
}
#jlpt180-ag-root .ag-session-summary-grid > div small{
  display:block!important;
  margin-top:6px!important;
  color:#6e7688!important;
  font-size:11px!important;
  line-height:1.3!important;
  font-weight:700!important;
}
#jlpt180-ag-root .ag-context-pills{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  margin:14px 0 10px!important;
}
#jlpt180-ag-root .ag-context-pills span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:32px!important;
  padding:0 12px!important;
  border-radius:999px!important;
  background:#f6fbf5!important;
  border:1px solid rgba(89,122,98,.12)!important;
  color:#3f5e53!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:800!important;
}
#jlpt180-ag-root .ag-app-body .ag-info-row{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
#jlpt180-ag-root .ag-screen-grammar .ag-info-row{
  margin-top:14px!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
#jlpt180-ag-root .ag-screen-quiz .ag-quiz-meta{
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
#jlpt180-ag-root .ag-screen-reward .ag-context-pills.reward{
  justify-content:center!important;
  margin:14px auto 0!important;
}
@media (max-width: 1024px){
  #jlpt180-ag-root .ag-session-summary-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #jlpt180-ag-root .ag-app-body .ag-info-row{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  #jlpt180-ag-root .ag-screen-grammar .ag-info-row,
  #jlpt180-ag-root .ag-screen-quiz .ag-quiz-meta{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}
@media (max-width: 820px){
  #jlpt180-ag-root .ag-session-summary{
    margin:12px 12px 0!important;
    padding:12px!important;
    border-radius:18px!important;
  }
  #jlpt180-ag-root .ag-session-summary-head{
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:6px!important;
    margin-bottom:10px!important;
  }
  #jlpt180-ag-root .ag-session-summary-head b{
    font-size:17px!important;
  }
  #jlpt180-ag-root .ag-session-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #jlpt180-ag-root .ag-session-summary-grid > div{
    padding:10px!important;
    border-radius:14px!important;
  }
  #jlpt180-ag-root .ag-session-summary-grid > div b{
    font-size:18px!important;
  }
  #jlpt180-ag-root .ag-context-pills{
    gap:6px!important;
    margin:10px 0 8px!important;
  }
  #jlpt180-ag-root .ag-context-pills span{
    min-height:28px!important;
    padding:0 10px!important;
    font-size:11px!important;
  }
  #jlpt180-ag-root .ag-app-body .ag-info-row,
  #jlpt180-ag-root .ag-screen-grammar .ag-info-row,
  #jlpt180-ag-root .ag-screen-quiz .ag-quiz-meta{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
}
@media (max-width: 480px){
  #jlpt180-ag-root .ag-session-summary-grid{
    grid-template-columns:1fr!important;
  }
}



/* v042: visible icons and backgrounds for 5 child pages */
#jlpt180-ag-root .ag-app-screen{
  position:relative!important;
  min-height:100%!important;
}

#jlpt180-ag-root .ag-app-screen::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  opacity:.34!important;
  pointer-events:none!important;
  background-position:center top!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  border-radius:inherit!important;
  z-index:0!important;
}

#jlpt180-ag-root .ag-app-screen > *{
  position:relative!important;
  z-index:1!important;
}

#jlpt180-ag-root .ag-screen-review::before{background-image:url("child-review-panel.webp")!important;}
#jlpt180-ag-root .ag-screen-vocab::before{background-image:url("child-vocab-panel.webp")!important;}
#jlpt180-ag-root .ag-screen-grammar::before{background-image:url("child-grammar-panel.webp")!important;}
#jlpt180-ag-root .ag-screen-quiz::before{background-image:url("child-quiz-panel.webp")!important;}
#jlpt180-ag-root .ag-screen-reward::before{background-image:url("child-reward-panel.webp")!important;}

#jlpt180-ag-root .ag-child-hero-strip{
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr) auto!important;
  gap:14px!important;
  align-items:center!important;
  margin:0 0 16px!important;
  padding:14px 16px!important;
  border-radius:24px!important;
  border:1px solid rgba(89,122,98,.15)!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:0 14px 34px rgba(53,109,72,.10)!important;
  overflow:hidden!important;
}

#jlpt180-ag-root .ag-child-hero-strip img{
  width:64px!important;
  height:64px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 10px 14px rgba(53,109,72,.16))!important;
}

#jlpt180-ag-root .ag-child-hero-strip span{
  display:block!important;
  color:#64748b!important;
  font-size:11px!important;
  line-height:1.1!important;
  font-weight:850!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}

#jlpt180-ag-root .ag-child-hero-strip b{
  display:block!important;
  margin-top:4px!important;
  color:#1f2937!important;
  font-size:22px!important;
  line-height:1.15!important;
  font-weight:900!important;
}

#jlpt180-ag-root .ag-child-hero-strip small{
  display:block!important;
  margin-top:5px!important;
  color:#667085!important;
  font-size:13px!important;
  line-height:1.4!important;
  font-weight:650!important;
}

#jlpt180-ag-root .ag-child-hero-strip em{
  min-height:34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 13px!important;
  border-radius:999px!important;
  font-style:normal!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
}

#jlpt180-ag-root .ag-child-hero-strip.review{
  background:linear-gradient(90deg,rgba(238,255,235,.94),rgba(255,255,255,.88))!important;
  border-color:rgba(88,182,75,.22)!important;
}
#jlpt180-ag-root .ag-child-hero-strip.review em{color:#25813b!important;background:#eaf8e7!important;border:1px solid rgba(88,182,75,.18)!important;}

#jlpt180-ag-root .ag-child-hero-strip.vocab{
  background:linear-gradient(90deg,rgba(235,248,255,.94),rgba(255,255,255,.88))!important;
  border-color:rgba(74,165,234,.22)!important;
}
#jlpt180-ag-root .ag-child-hero-strip.vocab em{color:#226aa4!important;background:#eaf5ff!important;border:1px solid rgba(74,165,234,.18)!important;}

#jlpt180-ag-root .ag-child-hero-strip.grammar{
  background:linear-gradient(90deg,rgba(248,240,255,.94),rgba(255,255,255,.88))!important;
  border-color:rgba(164,116,223,.22)!important;
}
#jlpt180-ag-root .ag-child-hero-strip.grammar em{color:#7b4bbc!important;background:#f4eaff!important;border:1px solid rgba(164,116,223,.18)!important;}

#jlpt180-ag-root .ag-child-hero-strip.quiz{
  background:linear-gradient(90deg,rgba(255,238,246,.94),rgba(255,255,255,.88))!important;
  border-color:rgba(240,124,163,.22)!important;
}
#jlpt180-ag-root .ag-child-hero-strip.quiz em{color:#bc4774!important;background:#ffeaf4!important;border:1px solid rgba(240,124,163,.18)!important;}

#jlpt180-ag-root .ag-child-hero-strip.reward{
  background:linear-gradient(90deg,rgba(255,247,224,.96),rgba(255,255,255,.88))!important;
  border-color:rgba(241,184,68,.24)!important;
}
#jlpt180-ag-root .ag-child-hero-strip.reward em{color:#a56d0a!important;background:#fff3ce!important;border:1px solid rgba(241,184,68,.20)!important;}

#jlpt180-ag-root .ag-study-card,
#jlpt180-ag-root .ag-vocab-hero,
#jlpt180-ag-root .ag-grammar-board,
#jlpt180-ag-root .ag-quiz-card,
#jlpt180-ag-root .ag-reward-screen{
  background-color:rgba(255,255,255,.90)!important;
  backdrop-filter:none!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-app-body{
    padding:12px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip{
    grid-template-columns:56px minmax(0,1fr)!important;
    gap:10px!important;
    margin-bottom:12px!important;
    padding:12px!important;
    border-radius:20px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip img{
    width:52px!important;
    height:52px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip b{
    font-size:18px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip small{
    font-size:12px!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip em{
    grid-column:1 / 3!important;
    justify-self:start!important;
    min-height:30px!important;
    font-size:12px!important;
  }

  #jlpt180-ag-root .ag-app-screen::before{
    opacity:.22!important;
  }
}

@media (min-width:821px){
  #jlpt180-ag-root .ag-app-body{
    background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(240,255,244,.12))!important;
  }
}



/* v043: roadmap data binding polish */
#jlpt180-ag-root .ag-session-summary-grid > div b,
#jlpt180-ag-root .ag-info-row b,
#jlpt180-ag-root .ag-quiz-meta span,
#jlpt180-ag-root .ag-context-pills span{
  white-space:normal!important;
}

#jlpt180-ag-root .ag-screen-vocab .ag-mini-list.rich{
  max-height:none!important;
}

#jlpt180-ag-root .ag-screen-vocab .ag-mini-list.rich div,
#jlpt180-ag-root .ag-app-side button{
  cursor:pointer!important;
}

#jlpt180-ag-root .ag-screen-review .ag-detail-strip{
  background:linear-gradient(90deg,rgba(238,255,235,.96),rgba(255,255,255,.88))!important;
}

#jlpt180-ag-root .ag-screen-vocab .ag-info-row div,
#jlpt180-ag-root .ag-screen-grammar .ag-info-row div{
  min-height:74px!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-screen-vocab .ag-mini-list.rich div{
    min-height:68px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div{
    min-height:74px!important;
  }
}



/* v044: compact lesson summary so the actual study card is visible */
#jlpt180-ag-root .ag-session-summary{
  margin:8px 24px 0!important;
  padding:10px 12px!important;
  border-radius:18px!important;
}

#jlpt180-ag-root .ag-session-summary-head{
  margin-bottom:8px!important;
  align-items:center!important;
}

#jlpt180-ag-root .ag-session-summary-head span{
  font-size:10px!important;
}

#jlpt180-ag-root .ag-session-summary-head b{
  margin-top:2px!important;
  font-size:15px!important;
}

#jlpt180-ag-root .ag-session-summary-head small{
  display:inline-flex!important;
  align-items:center!important;
  min-height:24px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:#eef9ee!important;
  color:#2f8a36!important;
  border:1px solid rgba(88,182,75,.16)!important;
  white-space:nowrap!important;
  font-size:10px!important;
  font-weight:850!important;
}

#jlpt180-ag-root .ag-session-summary-grid{
  display:flex!important;
  gap:8px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  padding-bottom:2px!important;
  scrollbar-width:none!important;
}

#jlpt180-ag-root .ag-session-summary-grid::-webkit-scrollbar{
  display:none!important;
}

#jlpt180-ag-root .ag-session-summary-grid > div{
  flex:0 0 auto!important;
  min-width:116px!important;
  padding:9px 10px!important;
  border-radius:14px!important;
}

#jlpt180-ag-root .ag-session-summary-grid > div span{
  font-size:10px!important;
}

#jlpt180-ag-root .ag-session-summary-grid > div b{
  margin-top:4px!important;
  font-size:16px!important;
}

#jlpt180-ag-root .ag-session-summary-grid > div small{
  display:none!important;
}

#jlpt180-ag-root .ag-app-body{
  padding-top:12px!important;
}

/* mobile: summary becomes one-line chips; study card appears immediately */
@media (max-width:820px){
  #jlpt180-ag-root .ag-session-summary{
    margin:8px 10px 0!important;
    padding:9px 10px!important;
    border-radius:16px!important;
  }

  #jlpt180-ag-root .ag-session-summary-head{
    margin-bottom:7px!important;
    flex-direction:row!important;
    align-items:center!important;
  }

  #jlpt180-ag-root .ag-session-summary-head b{
    font-size:14px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .ag-session-summary-head span{
    display:none!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div{
    min-width:96px!important;
    padding:7px 8px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div b{
    font-size:14px!important;
  }

  #jlpt180-ag-root .ag-app-body{
    padding-top:10px!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-study-card{
    min-height:300px!important;
  }
}



/* v045: fix child overlay grid row after adding compact summary */
#jlpt180-ag-root .ag-app-window{
  display:grid!important;
  grid-template-rows:auto 5px auto minmax(0,1fr) auto!important;
}

#jlpt180-ag-root .ag-app-head{
  grid-row:1!important;
}

#jlpt180-ag-root .ag-app-progress{
  grid-row:2!important;
}

#jlpt180-ag-root .ag-session-summary{
  grid-row:3!important;
  align-self:start!important;
}

#jlpt180-ag-root .ag-app-body{
  grid-row:4!important;
  min-height:0!important;
  overflow:auto!important;
}

#jlpt180-ag-root .ag-app-foot{
  grid-row:5!important;
}

#jlpt180-ag-root .ag-app-screen.is-active{
  min-height:0!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-app-window{
    height:100vh!important;
    max-height:100vh!important;
    grid-template-rows:auto 5px auto minmax(0,1fr) auto!important;
  }

  #jlpt180-ag-root .ag-session-summary{
    margin:8px 10px 0!important;
  }

  #jlpt180-ag-root .ag-app-body{
    padding-top:10px!important;
  }
}



/* v046: child page no-cut + visible background/icon fix */
#jlpt180-ag-root .ag-app-overlay,
#jlpt180-ag-root .ag-app-overlay *{
  box-sizing:border-box!important;
}

#jlpt180-ag-root .ag-app-overlay{
  overflow:hidden!important;
}

#jlpt180-ag-root .ag-app-window{
  overflow:hidden!important;
  max-width:calc(100vw - 24px)!important;
}

#jlpt180-ag-root .ag-app-body{
  overflow-x:hidden!important;
}

#jlpt180-ag-root .ag-app-screen{
  overflow-x:hidden!important;
  border-radius:22px!important;
}

#jlpt180-ag-root .ag-app-screen::before{
  opacity:.48!important;
  background-size:cover!important;
  background-position:center top!important;
}

#jlpt180-ag-root .ag-child-hero-strip{
  overflow:visible!important;
}

#jlpt180-ag-root .ag-child-hero-strip img,
#jlpt180-ag-root .ag-app-title-icon img{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  max-width:100%!important;
  max-height:100%!important;
}

#jlpt180-ag-root .ag-app-title-icon{
  display:grid!important;
  place-items:center!important;
  flex:0 0 auto!important;
  overflow:visible!important;
}

#jlpt180-ag-root .ag-child-hero-strip{
  background-color:rgba(255,255,255,.92)!important;
}

#jlpt180-ag-root .ag-screen-review .ag-child-hero-strip{
  background:
    linear-gradient(90deg,rgba(235,255,229,.96),rgba(255,255,255,.90)),
    url("child-review-panel.webp") center/cover no-repeat!important;
}
#jlpt180-ag-root .ag-screen-vocab .ag-child-hero-strip{
  background:
    linear-gradient(90deg,rgba(232,248,255,.96),rgba(255,255,255,.90)),
    url("child-vocab-panel.webp") center/cover no-repeat!important;
}
#jlpt180-ag-root .ag-screen-grammar .ag-child-hero-strip{
  background:
    linear-gradient(90deg,rgba(248,239,255,.96),rgba(255,255,255,.90)),
    url("child-grammar-panel.webp") center/cover no-repeat!important;
}
#jlpt180-ag-root .ag-screen-quiz .ag-child-hero-strip{
  background:
    linear-gradient(90deg,rgba(255,235,246,.96),rgba(255,255,255,.90)),
    url("child-quiz-panel.webp") center/cover no-repeat!important;
}
#jlpt180-ag-root .ag-screen-reward .ag-child-hero-strip{
  background:
    linear-gradient(90deg,rgba(255,247,222,.96),rgba(255,255,255,.90)),
    url("child-reward-panel.webp") center/cover no-repeat!important;
}

@media (min-width:821px){
  #jlpt180-ag-root .ag-app-overlay{
    padding:24px!important;
  }

  #jlpt180-ag-root .ag-app-window{
    width:min(1120px,calc(100vw - 48px))!important;
    max-width:calc(100vw - 48px)!important;
  }

  #jlpt180-ag-root .ag-app-body{
    padding-left:22px!important;
    padding-right:22px!important;
  }

  #jlpt180-ag-root .ag-session-summary{
    margin-left:22px!important;
    margin-right:22px!important;
  }
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-app-overlay{
    padding:0!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .ag-app-window{
    width:100vw!important;
    max-width:100vw!important;
    height:100dvh!important;
    max-height:100dvh!important;
    border-radius:0!important;
    border:0!important;
    margin:0!important;
  }

  #jlpt180-ag-root .ag-app-head{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  #jlpt180-ag-root .ag-session-summary{
    margin-left:10px!important;
    margin-right:10px!important;
    max-width:calc(100vw - 20px)!important;
  }

  #jlpt180-ag-root .ag-app-body{
    padding-left:10px!important;
    padding-right:10px!important;
    max-width:100vw!important;
  }

  #jlpt180-ag-root .ag-app-screen{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-left:0!important;
    padding-right:0!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:12px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip img{
    width:54px!important;
    height:54px!important;
    min-width:54px!important;
  }

  #jlpt180-ag-root .ag-study-card,
  #jlpt180-ag-root .ag-vocab-hero,
  #jlpt180-ag-root .ag-grammar-board,
  #jlpt180-ag-root .ag-quiz-card,
  #jlpt180-ag-root .ag-reward-screen,
  #jlpt180-ag-root .ag-detail-strip,
  #jlpt180-ag-root .ag-tip-box,
  #jlpt180-ag-root .ag-quiz-note,
  #jlpt180-ag-root .ag-quiz-meta,
  #jlpt180-ag-root .ag-info-row,
  #jlpt180-ag-root .ag-reward-extra{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  #jlpt180-ag-root .ag-app-screen::before{
    opacity:.38!important;
  }

  #jlpt180-ag-root .ag-app-title-icon{
    width:42px!important;
    height:42px!important;
  }

  #jlpt180-ag-root .ag-app-title-icon img{
    width:32px!important;
    height:32px!important;
  }
}

@media (max-width:390px){
  #jlpt180-ag-root .ag-app-head{
    grid-template-columns:38px 38px minmax(0,1fr) 38px!important;
    gap:7px!important;
  }

  #jlpt180-ag-root .ag-app-title-icon{
    width:38px!important;
    height:38px!important;
  }

  #jlpt180-ag-root .ag-app-title-icon img{
    width:28px!important;
    height:28px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip{
    grid-template-columns:48px minmax(0,1fr)!important;
    gap:8px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip img{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
  }
}



/* v047: main route polish + child summary fit */
@media (max-width:820px){
  /* Main route card: remove duplicated feel and add visible decorative icon */
  #jlpt180-ag-root .m2-route{
    position:relative!important;
    overflow:hidden!important;
    background:
      radial-gradient(circle at 86% 22%,rgba(82,190,95,.14),transparent 32%),
      radial-gradient(circle at 16% 10%,rgba(98,210,112,.18),transparent 34%),
      linear-gradient(180deg,rgba(255,255,255,.99),rgba(238,255,243,.97))!important;
  }

  #jlpt180-ag-root .m2-route::after{
    content:""!important;
    position:absolute!important;
    right:12px!important;
    bottom:52px!important;
    width:72px!important;
    height:72px!important;
    background:url("child-vocab-badge.webp") center/contain no-repeat!important;
    opacity:.28!important;
    pointer-events:none!important;
    filter:drop-shadow(0 10px 16px rgba(50,120,70,.12))!important;
  }

  #jlpt180-ag-root .m2-route-level{
    position:relative!important;
    z-index:2!important;
    display:block!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    display:block!important;
    font-size:34px!important;
  }

  #jlpt180-ag-root .m2-route-level span{
    display:inline-flex!important;
    margin-top:6px!important;
    min-height:26px!important;
    align-items:center!important;
    padding:0 10px!important;
    border-radius:999px!important;
    background:#eaf8e7!important;
    color:#2f963f!important;
    font-size:12px!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m2-route small{
    position:relative!important;
    z-index:2!important;
    max-width:calc(100% - 56px)!important;
  }

  /* Child overlay: compact summary so it does not look like a huge dashboard */
  #jlpt180-ag-root .ag-session-summary{
    margin:7px 10px 0!important;
    padding:8px 9px!important;
    border-radius:15px!important;
  }

  #jlpt180-ag-root .ag-session-summary-head{
    margin-bottom:6px!important;
  }

  #jlpt180-ag-root .ag-session-summary-head b{
    font-size:13px!important;
  }

  #jlpt180-ag-root .ag-session-summary-head small{
    min-height:22px!important;
    padding:0 8px!important;
    font-size:9.5px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:5px!important;
    overflow:visible!important;
    padding-bottom:0!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div{
    min-width:0!important;
    padding:7px 5px!important;
    border-radius:12px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div span{
    font-size:8.5px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div b{
    margin-top:3px!important;
    font-size:12px!important;
    line-height:1.05!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Child page content starts closer and footer won't cover bottom */
  #jlpt180-ag-root .ag-app-body{
    padding-top:8px!important;
    padding-bottom:92px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip{
    margin-bottom:9px!important;
    padding:10px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip b{
    font-size:17px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip small{
    font-size:11px!important;
  }

  #jlpt180-ag-root .ag-study-card{
    min-height:270px!important;
  }

  #jlpt180-ag-root .ag-detail-strip{
    margin:9px 0!important;
  }

  #jlpt180-ag-root .ag-app-foot{
    position:sticky!important;
    bottom:0!important;
    z-index:10!important;
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 -10px 24px rgba(31,60,42,.08)!important;
  }
}

@media (max-width:390px){
  #jlpt180-ag-root .ag-session-summary-grid{
    gap:4px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div{
    padding:6px 4px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div span{
    font-size:8px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div b{
    font-size:11px!important;
  }

  #jlpt180-ag-root .m2-route::after{
    width:58px!important;
    height:58px!important;
  }
}



/* v048: mobile route and child summary polish */
@media (max-width:820px){
  /* Remove decorative icon overlap on route level pills */
  #jlpt180-ag-root .m2-route::after{
    right:-18px!important;
    bottom:auto!important;
    top:48px!important;
    width:92px!important;
    height:92px!important;
    opacity:.10!important;
    z-index:0!important;
  }

  #jlpt180-ag-root .m2-route > *{
    position:relative!important;
    z-index:2!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    font-size:32px!important;
    line-height:1.05!important;
  }

  #jlpt180-ag-root .m2-route-level span{
    margin-top:6px!important;
    max-width:max-content!important;
  }

  #jlpt180-ag-root .m2-route small{
    max-width:100%!important;
    padding-right:8px!important;
  }

  #jlpt180-ag-root .m2-levels{
    position:relative!important;
    z-index:3!important;
  }

  #jlpt180-ag-root .m2-levels button{
    box-shadow:0 7px 16px rgba(53,109,72,.06)!important;
  }

  /* Friendly data marker */
  #jlpt180-ag-root [data-ag-lesson-source]{
    background:#f7fbf2!important;
    color:#4f704f!important;
    border-color:rgba(88,182,75,.13)!important;
  }

  /* Child summary chips: readable, not huge */
  #jlpt180-ag-root .ag-session-summary{
    background:linear-gradient(180deg,rgba(249,255,248,.98),rgba(238,251,241,.96))!important;
    border-color:rgba(88,182,75,.16)!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid{
    grid-template-columns:repeat(5,minmax(58px,1fr))!important;
    gap:5px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div{
    min-width:0!important;
    padding:7px 5px!important;
    min-height:58px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div span{
    font-size:8.5px!important;
    color:#5e756c!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div b{
    font-size:12px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip{
    margin-top:8px!important;
  }
}

@media (max-width:390px){
  #jlpt180-ag-root .m2-route::after{
    display:none!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid{
    display:flex!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    gap:6px!important;
    padding-bottom:2px!important;
    scrollbar-width:none!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid::-webkit-scrollbar{
    display:none!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div{
    flex:0 0 74px!important;
  }
}



/* v049: real visible assets for main + child pages */
@media (max-width:820px){
  #jlpt180-ag-root .ag-mobile-v2{
    background:
      linear-gradient(180deg,rgba(236,255,242,.58),rgba(251,255,252,.88)),
      url("main-mobile-bg-garden.webp") center top/cover no-repeat!important;
  }

  #jlpt180-ag-root .m2-route{
    position:relative!important;
    min-height:254px!important;
    padding-right:110px!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-route-art{
    display:block!important;
    position:absolute!important;
    right:8px!important;
    top:74px!important;
    width:106px!important;
    height:auto!important;
    opacity:1!important;
    z-index:1!important;
    pointer-events:none!important;
    filter:drop-shadow(0 12px 18px rgba(51,105,67,.16))!important;
  }

  #jlpt180-ag-root .m2-route > :not(.m2-route-art){
    position:relative!important;
    z-index:2!important;
  }

  #jlpt180-ag-root .m2-route small{
    max-width:100%!important;
    padding-right:0!important;
  }

  #jlpt180-ag-root .m2-route-progress,
  #jlpt180-ag-root .m2-levels{
    margin-right:-96px!important;
  }

  #jlpt180-ag-root .m2-step img{
    width:62px!important;
    height:62px!important;
    border-radius:18px!important;
    object-fit:contain!important;
    filter:drop-shadow(0 12px 14px rgba(57,95,72,.18))!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-route{
    padding-right:92px!important;
  }

  #jlpt180-ag-root .m2-route-art{
    width:88px!important;
    right:3px!important;
    top:82px!important;
  }

  #jlpt180-ag-root .m2-route-progress,
  #jlpt180-ag-root .m2-levels{
    margin-right:-80px!important;
  }

  #jlpt180-ag-root .m2-step img{
    width:54px!important;
    height:54px!important;
  }
}

/* child hero art is a real DOM image, not a faint pseudo bg */
#jlpt180-ag-root .ag-child-hero-strip{
  position:relative!important;
  overflow:hidden!important;
  min-height:108px!important;
  padding-right:170px!important;
}

#jlpt180-ag-root .ag-child-hero-strip .ag-child-hero-art{
  display:block!important;
  position:absolute!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:190px!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
  z-index:0!important;
  pointer-events:none!important;
}

#jlpt180-ag-root .ag-child-hero-strip > img:not(.ag-child-hero-art),
#jlpt180-ag-root .ag-child-hero-strip > div,
#jlpt180-ag-root .ag-child-hero-strip > em{
  position:relative!important;
  z-index:2!important;
}

#jlpt180-ag-root .ag-child-hero-strip > img:not(.ag-child-hero-art){
  background:rgba(255,255,255,.88)!important;
  border-radius:18px!important;
  padding:5px!important;
  box-shadow:0 8px 18px rgba(53,109,72,.12)!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-child-hero-strip{
    min-height:96px!important;
    padding-right:92px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip .ag-child-hero-art{
    width:118px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip > img:not(.ag-child-hero-art){
    width:52px!important;
    height:52px!important;
  }
}

@media (max-width:390px){
  #jlpt180-ag-root .ag-child-hero-strip{
    padding-right:74px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip .ag-child-hero-art{
    width:96px!important;
    opacity:.9!important;
  }
}



/* v050: mobile main head must stay visible */
@media (max-width:820px){
  #jlpt180-ag-root .ag-mobile-v2{
    padding-top:0!important;
  }

  #jlpt180-ag-root .m2-hero{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:sticky!important;
    top:0!important;
    z-index:9999!important;
    min-height:118px!important;
    margin:0 -14px 12px!important;
    padding:14px 14px 12px 104px!important;
    border-radius:0 0 26px 26px!important;
    background:
      radial-gradient(circle at 92% 18%,rgba(255,210,80,.24),transparent 30%),
      linear-gradient(120deg,rgba(219,255,226,.98),rgba(236,255,251,.95) 58%,rgba(255,250,229,.84)),
      url("main-mobile-bg-garden.webp") center top/cover no-repeat!important;
    box-shadow:0 12px 30px rgba(40,100,64,.18)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m2-mascot{
    display:block!important;
    visibility:visible!important;
    position:absolute!important;
    left:12px!important;
    top:14px!important;
    width:82px!important;
    height:82px!important;
    background:url("mascot-stand.webp") center/contain no-repeat!important;
    filter:drop-shadow(0 10px 16px rgba(42,115,65,.22))!important;
  }

  #jlpt180-ag-root .m2-hello{
    display:block!important;
    visibility:visible!important;
    position:relative!important;
    z-index:2!important;
    min-width:0!important;
  }

  #jlpt180-ag-root .m2-hello span{
    display:block!important;
    color:#2f7b42!important;
    font-size:12px!important;
    line-height:1.15!important;
    font-weight:800!important;
  }

  #jlpt180-ag-root .m2-hello b{
    display:block!important;
    margin-top:3px!important;
    max-width:220px!important;
    color:#18352b!important;
    font-size:22px!important;
    line-height:1.05!important;
    font-weight:900!important;
    letter-spacing:-.02em!important;
    white-space:normal!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .m2-hello small{
    display:block!important;
    margin-top:4px!important;
    max-width:220px!important;
    color:#557166!important;
    font-size:10px!important;
    line-height:1.25!important;
    font-weight:700!important;
    white-space:normal!important;
  }

  #jlpt180-ag-root .m2-profile-card{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    gap:7px!important;
    align-items:center!important;
    min-height:42px!important;
    margin:8px 0 0!important;
    padding:5px 7px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 8px 20px rgba(45,123,73,.14)!important;
    backdrop-filter:blur(8px)!important;
  }

  #jlpt180-ag-root .m2-profile-avatar{
    width:32px!important;
    height:32px!important;
    border-radius:12px!important;
  }

  #jlpt180-ag-root .m2-profile-main span{
    font-size:9px!important;
  }

  #jlpt180-ag-root .m2-profile-main b{
    margin-top:2px!important;
    font-size:11px!important;
  }

  #jlpt180-ag-root .m2-profile-main small{
    display:none!important;
  }

  #jlpt180-ag-root .m2-profile-stats{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
  }

  #jlpt180-ag-root .m2-profile-stats em{
    min-height:18px!important;
    padding:0 6px!important;
    font-size:9px!important;
  }

  #jlpt180-ag-root .m2-user-row{
    display:none!important;
  }

  /* Give next card a little breathing room after sticky header */
  #jlpt180-ag-root .m2-route{
    margin-top:4px!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-hero{
    margin-left:-10px!important;
    margin-right:-10px!important;
    min-height:112px!important;
    padding-left:96px!important;
    padding-right:10px!important;
  }

  #jlpt180-ag-root .m2-mascot{
    left:10px!important;
    top:14px!important;
    width:76px!important;
    height:76px!important;
  }

  #jlpt180-ag-root .m2-hello b{
    font-size:20px!important;
  }

  #jlpt180-ag-root .m2-hello small{
    display:none!important;
  }

  #jlpt180-ag-root .m2-profile-card{
    grid-template-columns:30px minmax(0,1fr) auto!important;
  }

  #jlpt180-ag-root .m2-profile-avatar{
    width:30px!important;
    height:30px!important;
  }
}



/* v051: visual asset visibility pass */
@media (max-width:820px){
  /* Main mobile background should be visible, not hidden under pale overlays */
  #jlpt180-ag-root .ag-mobile-v2{
    background:
      linear-gradient(180deg,rgba(232,255,238,.26),rgba(251,255,252,.72)),
      url("main-mobile-bg-garden.webp") center top/cover no-repeat!important;
  }

  /* Hero should show garden feeling and mascot clearly */
  #jlpt180-ag-root .m2-hero{
    background:
      radial-gradient(circle at 92% 18%,rgba(255,210,80,.22),transparent 30%),
      linear-gradient(120deg,rgba(219,255,226,.82),rgba(236,255,251,.76) 58%,rgba(255,250,229,.70)),
      url("main-mobile-bg-garden.webp") center top/cover no-repeat!important;
  }

  #jlpt180-ag-root .m2-mascot{
    opacity:1!important;
    transform:scale(1.06)!important;
  }

  /* Route card illustration must be visibly present */
  #jlpt180-ag-root .m2-route{
    min-height:268px!important;
    padding-right:122px!important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.92),rgba(239,255,243,.88))!important;
    border-color:rgba(63,183,74,.30)!important;
    box-shadow:0 18px 40px rgba(45,123,73,.18)!important;
  }

  #jlpt180-ag-root .m2-route::after{
    display:none!important;
  }

  #jlpt180-ag-root .m2-route-art{
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    position:absolute!important;
    right:8px!important;
    top:70px!important;
    width:118px!important;
    height:auto!important;
    z-index:1!important;
    pointer-events:none!important;
    filter:drop-shadow(0 16px 20px rgba(51,105,67,.20))!important;
  }

  #jlpt180-ag-root .m2-route > :not(.m2-route-art){
    position:relative!important;
    z-index:2!important;
  }

  #jlpt180-ag-root .m2-route small{
    max-width:calc(100% - 18px)!important;
  }

  #jlpt180-ag-root .m2-route-progress,
  #jlpt180-ag-root .m2-levels{
    margin-right:-106px!important;
  }

  /* Step art should read as real illustration, not tiny old icon */
  #jlpt180-ag-root .m2-step{
    border-width:1px!important;
    box-shadow:0 14px 34px rgba(50,105,74,.16)!important;
  }

  #jlpt180-ag-root .m2-step img{
    width:68px!important;
    height:68px!important;
    border-radius:20px!important;
    opacity:1!important;
    filter:drop-shadow(0 14px 18px rgba(57,95,72,.20))!important;
  }

  #jlpt180-ag-root .m2-step.s1{
    background:
      radial-gradient(circle at 17% 50%,rgba(88,182,75,.34),transparent 36%),
      linear-gradient(100deg,#e9ffe6 0%,#ffffff 78%)!important;
  }

  #jlpt180-ag-root .m2-step.s2{
    background:
      radial-gradient(circle at 17% 50%,rgba(74,165,234,.32),transparent 36%),
      linear-gradient(100deg,#e1f5ff 0%,#ffffff 78%)!important;
  }

  #jlpt180-ag-root .m2-step.s3{
    background:
      radial-gradient(circle at 17% 50%,rgba(164,116,223,.32),transparent 36%),
      linear-gradient(100deg,#f0e4ff 0%,#ffffff 78%)!important;
  }

  #jlpt180-ag-root .m2-step.s4{
    background:
      radial-gradient(circle at 17% 50%,rgba(240,124,163,.32),transparent 36%),
      linear-gradient(100deg,#ffe3f0 0%,#ffffff 78%)!important;
  }

  #jlpt180-ag-root .m2-step.s5{
    background:
      radial-gradient(circle at 17% 50%,rgba(241,184,68,.34),transparent 36%),
      linear-gradient(100deg,#ffedc8 0%,#ffffff 78%)!important;
  }

  #jlpt180-ag-root .m2-num{
    box-shadow:0 10px 22px rgba(0,0,0,.15)!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-route{
    min-height:258px!important;
    padding-right:100px!important;
  }

  #jlpt180-ag-root .m2-route-art{
    width:96px!important;
    right:2px!important;
    top:78px!important;
  }

  #jlpt180-ag-root .m2-route-progress,
  #jlpt180-ag-root .m2-levels{
    margin-right:-88px!important;
  }

  #jlpt180-ag-root .m2-step img{
    width:58px!important;
    height:58px!important;
  }
}

/* Child pages: make hero art and backgrounds visibly real */
#jlpt180-ag-root .ag-app-screen::before{
  opacity:.58!important;
}

#jlpt180-ag-root .ag-child-hero-strip{
  min-height:126px!important;
  padding-right:220px!important;
  background-color:rgba(255,255,255,.88)!important;
  border-width:1px!important;
  box-shadow:0 16px 36px rgba(53,109,72,.12)!important;
}

#jlpt180-ag-root .ag-child-hero-strip .ag-child-hero-art{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  width:240px!important;
  height:100%!important;
  object-fit:cover!important;
  z-index:0!important;
  pointer-events:none!important;
}

#jlpt180-ag-root .ag-child-hero-strip > img:not(.ag-child-hero-art){
  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  background:rgba(255,255,255,.92)!important;
  border-radius:22px!important;
  padding:6px!important;
  box-shadow:0 10px 22px rgba(53,109,72,.16)!important;
}

#jlpt180-ag-root .ag-child-hero-strip > div,
#jlpt180-ag-root .ag-child-hero-strip > em{
  position:relative!important;
  z-index:2!important;
}

#jlpt180-ag-root .ag-child-hero-strip b{
  font-size:24px!important;
}

#jlpt180-ag-root .ag-child-hero-strip small{
  max-width:520px!important;
}

#jlpt180-ag-root .ag-study-card,
#jlpt180-ag-root .ag-vocab-hero,
#jlpt180-ag-root .ag-grammar-board,
#jlpt180-ag-root .ag-quiz-card,
#jlpt180-ag-root .ag-reward-screen{
  background-color:rgba(255,255,255,.84)!important;
  box-shadow:0 16px 38px rgba(53,109,72,.12)!important;
}

/* Make per-child backgrounds show through the main study cards more */
#jlpt180-ag-root .ag-screen-review .ag-study-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(241,255,240,.76)),
    url("child-review-panel.webp") center/cover no-repeat!important;
}
#jlpt180-ag-root .ag-screen-vocab .ag-vocab-hero{
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(235,248,255,.76)),
    url("child-vocab-panel.webp") center/cover no-repeat!important;
}
#jlpt180-ag-root .ag-screen-grammar .ag-grammar-board{
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(248,241,255,.76)),
    url("child-grammar-panel.webp") center/cover no-repeat!important;
}
#jlpt180-ag-root .ag-screen-quiz .ag-quiz-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,240,247,.76)),
    url("child-quiz-panel.webp") center/cover no-repeat!important;
}
#jlpt180-ag-root .ag-screen-reward .ag-reward-screen{
  background:
    linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,248,225,.76)),
    url("child-reward-panel.webp") center/cover no-repeat!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-child-hero-strip{
    min-height:104px!important;
    padding-right:118px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip .ag-child-hero-art{
    width:132px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip > img:not(.ag-child-hero-art){
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip b{
    font-size:18px!important;
  }
}

@media (max-width:390px){
  #jlpt180-ag-root .ag-child-hero-strip{
    padding-right:88px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip .ag-child-hero-art{
    width:104px!important;
  }

  #jlpt180-ag-root .ag-child-hero-strip > img:not(.ag-child-hero-art){
    width:50px!important;
    height:50px!important;
    min-width:50px!important;
  }
}



/* v052: mobile step icon clarity + route art balance */
@media (max-width:820px){
  /* Route art clearer but still away from pills */
  #jlpt180-ag-root .m2-route{
    min-height:260px!important;
    padding-right:118px!important;
  }

  #jlpt180-ag-root .m2-route-art{
    width:128px!important;
    right:4px!important;
    top:56px!important;
    opacity:1!important;
    filter:drop-shadow(0 14px 18px rgba(51,105,67,.18))!important;
  }

  #jlpt180-ag-root .m2-route-progress,
  #jlpt180-ag-root .m2-levels{
    margin-right:-104px!important;
  }

  /* Step cards closer to mockup: clear icon bubble + more visible art */
  #jlpt180-ag-root .m2-step{
    grid-template-columns:68px minmax(0,1fr) 84px!important;
    min-height:122px!important;
    padding:14px 10px 14px 70px!important;
    gap:5px 10px!important;
    border-radius:24px!important;
  }

  #jlpt180-ag-root .m2-step img{
    width:64px!important;
    height:64px!important;
    padding:7px!important;
    border-radius:22px!important;
    background:rgba(255,255,255,.82)!important;
    border:1px solid rgba(255,255,255,.85)!important;
    box-shadow:0 12px 20px rgba(57,95,72,.16)!important;
    object-fit:contain!important;
  }

  #jlpt180-ag-root .m2-step.s1 img{
    background:linear-gradient(180deg,#f5fff1,#e7fae6)!important;
    border-color:rgba(88,182,75,.20)!important;
  }

  #jlpt180-ag-root .m2-step.s2 img{
    background:linear-gradient(180deg,#f2fbff,#e4f5ff)!important;
    border-color:rgba(74,165,234,.20)!important;
  }

  #jlpt180-ag-root .m2-step.s3 img{
    background:linear-gradient(180deg,#fbf5ff,#efe5ff)!important;
    border-color:rgba(164,116,223,.20)!important;
  }

  #jlpt180-ag-root .m2-step.s4 img{
    background:linear-gradient(180deg,#fff4fa,#ffe5f0)!important;
    border-color:rgba(240,124,163,.20)!important;
  }

  #jlpt180-ag-root .m2-step.s5 img{
    background:linear-gradient(180deg,#fff9e8,#ffefc2)!important;
    border-color:rgba(241,184,68,.22)!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    font-size:20px!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    font-size:12px!important;
    line-height:1.34!important;
    -webkit-line-clamp:2!important;
  }

  #jlpt180-ag-root .m2-bar{
    max-width:135px!important;
  }

  #jlpt180-ag-root .m2-step button{
    width:84px!important;
    min-width:84px!important;
    min-height:42px!important;
    border-radius:16px!important;
    font-size:11.5px!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-route{
    min-height:250px!important;
    padding-right:92px!important;
  }

  #jlpt180-ag-root .m2-route-art{
    width:102px!important;
    right:0!important;
    top:66px!important;
  }

  #jlpt180-ag-root .m2-route-progress,
  #jlpt180-ag-root .m2-levels{
    margin-right:-78px!important;
  }

  #jlpt180-ag-root .m2-step{
    grid-template-columns:56px minmax(0,1fr) 78px!important;
    padding-left:62px!important;
    min-height:116px!important;
  }

  #jlpt180-ag-root .m2-step img{
    width:54px!important;
    height:54px!important;
    padding:6px!important;
    border-radius:18px!important;
  }

  #jlpt180-ag-root .m2-step-main h3{
    font-size:18px!important;
  }

  #jlpt180-ag-root .m2-step-main p{
    font-size:11.5px!important;
  }

  #jlpt180-ag-root .m2-step button{
    width:78px!important;
    min-width:78px!important;
    min-height:40px!important;
    font-size:11px!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .m2-step{
    grid-template-columns:52px minmax(0,1fr)!important;
    grid-template-rows:auto auto auto auto!important;
  }

  #jlpt180-ag-root .m2-step button{
    grid-column:2!important;
    grid-row:4!important;
    justify-self:start!important;
    width:112px!important;
    margin-top:5px!important;
  }
}



/* v053: mobile visible top card + stronger app colors */
@media (max-width:820px){
  /* Turn hidden/scrolling hero into compact visible user banner */
  #jlpt180-ag-root .m2-hero{
    position:relative!important;
    display:block!important;
    visibility:visible!important;
    opacity:1!important;
    min-height:112px!important;
    margin:0 -14px 10px!important;
    padding:14px 14px 12px 104px!important;
    border-radius:0 0 26px 26px!important;
    background:
      radial-gradient(circle at 92% 14%,rgba(255,214,80,.26),transparent 32%),
      radial-gradient(circle at 10% 80%,rgba(83,196,96,.22),transparent 36%),
      linear-gradient(120deg,rgba(219,255,226,.98),rgba(236,255,251,.94) 58%,rgba(255,250,229,.82)),
      url("main-mobile-bg-garden.webp") center top/cover no-repeat!important;
    box-shadow:0 12px 30px rgba(40,100,64,.18)!important;
    overflow:hidden!important;
    z-index:5!important;
  }

  #jlpt180-ag-root .m2-mascot{
    display:block!important;
    visibility:visible!important;
    position:absolute!important;
    left:12px!important;
    top:14px!important;
    width:82px!important;
    height:82px!important;
    opacity:1!important;
    transform:none!important;
  }

  #jlpt180-ag-root .m2-hello{
    display:block!important;
    visibility:visible!important;
  }

  #jlpt180-ag-root .m2-hello span{
    display:block!important;
    font-size:12px!important;
    line-height:1.15!important;
  }

  #jlpt180-ag-root .m2-hello b{
    display:block!important;
    margin-top:3px!important;
    font-size:22px!important;
    line-height:1.08!important;
    max-width:230px!important;
  }

  #jlpt180-ag-root .m2-hello small{
    display:block!important;
    margin-top:4px!important;
    font-size:10px!important;
    line-height:1.25!important;
    max-width:220px!important;
  }

  #jlpt180-ag-root .m2-profile-card{
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    gap:7px!important;
    min-height:42px!important;
    margin:8px 0 0!important;
    padding:5px 7px!important;
    border-radius:16px!important;
    background:rgba(255,255,255,.90)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 8px 20px rgba(45,123,73,.14)!important;
  }

  #jlpt180-ag-root .m2-profile-avatar{
    width:32px!important;
    height:32px!important;
    border-radius:12px!important;
  }

  #jlpt180-ag-root .m2-profile-main span{
    font-size:9px!important;
  }

  #jlpt180-ag-root .m2-profile-main b{
    margin-top:2px!important;
    font-size:11px!important;
  }

  #jlpt180-ag-root .m2-profile-main small{
    display:none!important;
  }

  #jlpt180-ag-root .m2-profile-stats{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
  }

  #jlpt180-ag-root .m2-profile-stats em{
    min-height:18px!important;
    padding:0 6px!important;
    font-size:9px!important;
  }

  /* Make route more colorful and prevent starting cut impression */
  #jlpt180-ag-root .m2-route{
    margin-top:0!important;
    border-color:rgba(63,183,74,.32)!important;
    background:
      radial-gradient(circle at 82% 26%,rgba(94,206,112,.22),transparent 34%),
      linear-gradient(180deg,rgba(255,255,255,.96),rgba(232,255,239,.96))!important;
    box-shadow:0 16px 38px rgba(45,123,73,.18)!important;
  }

  #jlpt180-ag-root .m2-route-art{
    width:116px!important;
    opacity:1!important;
    filter:drop-shadow(0 14px 20px rgba(51,105,67,.22))!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    color:#159447!important;
    text-shadow:0 8px 18px rgba(21,148,71,.12)!important;
  }

  #jlpt180-ag-root .m2-levels button.is-active{
    background:linear-gradient(180deg,#55c643,#2f9f38)!important;
  }

  /* Stronger step visual */
  #jlpt180-ag-root .m2-step{
    box-shadow:0 14px 34px rgba(50,105,74,.16)!important;
    border-width:1px!important;
  }

  #jlpt180-ag-root .m2-step.s1{
    background:
      radial-gradient(circle at 18% 50%,rgba(88,182,75,.40),transparent 36%),
      linear-gradient(100deg,#e6ffe3,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s2{
    background:
      radial-gradient(circle at 18% 50%,rgba(74,165,234,.38),transparent 36%),
      linear-gradient(100deg,#ddf3ff,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s3{
    background:
      radial-gradient(circle at 18% 50%,rgba(164,116,223,.38),transparent 36%),
      linear-gradient(100deg,#eedfff,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s4{
    background:
      radial-gradient(circle at 18% 50%,rgba(240,124,163,.38),transparent 36%),
      linear-gradient(100deg,#ffdeee,#fff)!important;
  }

  #jlpt180-ag-root .m2-step.s5{
    background:
      radial-gradient(circle at 18% 50%,rgba(241,184,68,.42),transparent 36%),
      linear-gradient(100deg,#ffeab8,#fff)!important;
  }

  #jlpt180-ag-root .m2-step img{
    background:rgba(255,255,255,.92)!important;
    opacity:1!important;
  }

  #jlpt180-ag-root .m2-step button{
    background:linear-gradient(180deg,#5fca49,#2f9f38)!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m2-hero{
    margin-left:-10px!important;
    margin-right:-10px!important;
    min-height:108px!important;
    padding-left:96px!important;
  }

  #jlpt180-ag-root .m2-mascot{
    left:10px!important;
    width:76px!important;
    height:76px!important;
  }

  #jlpt180-ag-root .m2-hello b{
    font-size:20px!important;
  }

  #jlpt180-ag-root .m2-hello small{
    display:none!important;
  }
}



/* v054: route becomes reliable mobile top card */
@media (max-width:820px){
  /* Hide unstable hero on mobile; route card now carries user header */
  #jlpt180-ag-root .m2-hero{
    display:none!important;
  }

  #jlpt180-ag-root .ag-mobile-v2{
    padding-top:12px!important;
    padding-bottom:138px!important;
  }

  #jlpt180-ag-root .m2-route{
    margin-top:0!important;
    min-height:300px!important;
    padding:14px 14px 16px!important;
    border-radius:28px!important;
    background:
      radial-gradient(circle at 88% 28%,rgba(93,205,112,.26),transparent 34%),
      linear-gradient(180deg,rgba(255,255,255,.98),rgba(232,255,240,.96))!important;
    border-color:rgba(63,183,74,.30)!important;
    box-shadow:0 16px 38px rgba(45,123,73,.18)!important;
  }

  #jlpt180-ag-root .m2-route-userbar{
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
    min-height:54px!important;
    margin:0 0 12px!important;
    padding:8px 10px!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(88,182,75,.16)!important;
    box-shadow:0 8px 22px rgba(53,109,72,.11)!important;
  }

  #jlpt180-ag-root .m2-route-avatar{
    width:40px!important;
    height:40px!important;
    border-radius:16px!important;
    background:
      linear-gradient(180deg,rgba(232,255,230,.9),rgba(255,255,255,.85)),
      url("mascot-stand.webp") center/contain no-repeat!important;
    border:1px solid rgba(88,182,75,.16)!important;
    filter:drop-shadow(0 6px 10px rgba(42,115,65,.16))!important;
  }

  #jlpt180-ag-root .m2-route-usertext{
    min-width:0!important;
  }

  #jlpt180-ag-root .m2-route-usertext span{
    display:block!important;
    color:#667085!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:850!important;
  }

  #jlpt180-ag-root .m2-route-usertext b{
    display:block!important;
    margin-top:4px!important;
    color:#173b2b!important;
    font-size:14px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m2-route-userbar em{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:28px!important;
    padding:0 9px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(88,182,75,.16)!important;
    color:#2f963f!important;
    font-size:11px!important;
    font-style:normal!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .m2-route-head{
    margin-bottom:8px!important;
  }

  #jlpt180-ag-root .m2-route-level{
    margin-top:4px!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    font-size:34px!important;
  }

  #jlpt180-ag-root .m2-route-art{
    display:block!important;
    opacity:1!important;
    width:128px!important;
    right:4px!important;
    top:118px!important;
    z-index:1!important;
    filter:drop-shadow(0 16px 20px rgba(51,105,67,.20))!important;
  }

  #jlpt180-ag-root .m2-route small{
    max-width:calc(100% - 90px)!important;
  }

  #jlpt180-ag-root .m2-route-progress,
  #jlpt180-ag-root .m2-levels{
    margin-right:0!important;
  }

  #jlpt180-ag-root .m2-levels{
    position:relative!important;
    z-index:4!important;
  }

  #jlpt180-ag-root .m2-section-head{
    margin-top:4px!important;
  }

  #jlpt180-ag-root .m2-bottom{
    bottom:10px!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-mobile-v2{
    padding-top:10px!important;
    padding-bottom:136px!important;
  }

  #jlpt180-ag-root .m2-route{
    min-height:292px!important;
  }

  #jlpt180-ag-root .m2-route-art{
    width:104px!important;
    top:124px!important;
    right:2px!important;
  }

  #jlpt180-ag-root .m2-route small{
    max-width:calc(100% - 70px)!important;
  }

  #jlpt180-ag-root .m2-route-userbar{
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:8px!important;
  }

  #jlpt180-ag-root .m2-route-avatar{
    width:36px!important;
    height:36px!important;
  }

  #jlpt180-ag-root .m2-route-usertext b{
    font-size:13px!important;
  }

  #jlpt180-ag-root .m2-route-userbar em{
    font-size:10px!important;
    padding:0 7px!important;
  }
}



/* v055: mobile top must be one normal-flow block */
@media (max-width:820px){
  html,
  body{
    height:auto!important;
    min-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body .site-content,
  body .ast-container,
  body .content-area,
  body .entry-content,
  body .wp-site-blocks,
  body article,
  body .hentry{
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    overflow:visible!important;
    transform:none!important;
  }

  html body #jlpt180-ag-root{
    height:auto!important;
    max-height:none!important;
    min-height:100vh!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    transform:none!important;
    position:relative!important;
  }

  #jlpt180-ag-root .ag-mobile-v2{
    display:block!important;
    visibility:visible!important;
    height:auto!important;
    max-height:none!important;
    min-height:100vh!important;
    overflow:visible!important;
    transform:none!important;
    position:relative!important;
    padding-top:16px!important;
    padding-bottom:138px!important;
  }

  /* Legacy hero stays hidden, but must not occupy or pull layout */
  #jlpt180-ag-root .m2-hero{
    display:none!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Route top card is the real head. Keep it in normal flow and fully visible. */
  #jlpt180-ag-root .m2-route{
    display:block!important;
    visibility:visible!important;
    position:relative!important;
    top:auto!important;
    transform:none!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    margin:0 0 14px!important;
    padding:14px 14px 16px!important;
    overflow:visible!important;
    border-radius:28px!important;
    z-index:1!important;
  }

  #jlpt180-ag-root .m2-route-userbar{
    display:grid!important;
    visibility:visible!important;
    opacity:1!important;
    position:relative!important;
    z-index:4!important;
    margin:0 0 12px!important;
  }

  #jlpt180-ag-root .m2-route-head,
  #jlpt180-ag-root .m2-route-level,
  #jlpt180-ag-root .m2-route small,
  #jlpt180-ag-root .m2-route-progress,
  #jlpt180-ag-root .m2-levels{
    position:relative!important;
    z-index:3!important;
  }

  #jlpt180-ag-root .m2-route-art{
    z-index:1!important;
  }

  #jlpt180-ag-root .m2-route-head{
    display:flex!important;
    margin-top:0!important;
  }

  #jlpt180-ag-root .m2-route-level{
    display:block!important;
    margin-top:4px!important;
  }

  #jlpt180-ag-root .m2-route-level b{
    display:block!important;
  }

  #jlpt180-ag-root .m2-route-level span{
    display:inline-flex!important;
  }

  /* Ensure no child first block is clipped by route overflow */
  #jlpt180-ag-root .m2-today{
    position:relative!important;
    z-index:1!important;
    margin-top:0!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-mobile-v2{
    padding-top:14px!important;
  }

  #jlpt180-ag-root .m2-route{
    padding:12px 12px 15px!important;
    border-radius:26px!important;
  }
}



/* v056: clean mobile v4, isolated from all old mobile CSS */
#jlpt180-ag-root .ag-mobile-v4{
  display:none!important;
}

@media (max-width:820px){
  html, body{
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }

  body .site-content,
  body .ast-container,
  body .content-area,
  body .entry-content,
  body .wp-site-blocks,
  body article,
  body .hentry{
    overflow:visible!important;
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
  }

  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    background:#eaf8ee!important;
  }

  #jlpt180-ag-root .ag-shell,
  #jlpt180-ag-root .ag-mobile-v2,
  #jlpt180-ag-root .ag-mobile-bottom-nav{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .ag-mobile-v4{
    display:block!important;
    visibility:visible!important;
    width:100%!important;
    max-width:430px!important;
    min-height:100vh!important;
    margin:0 auto!important;
    padding:12px 14px 104px!important;
    overflow:visible!important;
    pointer-events:auto!important;
    color:#202939!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Noto Sans JP",sans-serif!important;
    background:
      linear-gradient(180deg,rgba(235,255,241,.40),rgba(250,255,252,.86)),
      url("main-mobile-bg-garden.webp") center top/cover no-repeat!important;
  }

  #jlpt180-ag-root .ag-mobile-v4,
  #jlpt180-ag-root .ag-mobile-v4 *{
    box-sizing:border-box!important;
    letter-spacing:0!important;
    word-spacing:0!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
    text-transform:none!important;
    -webkit-font-smoothing:antialiased!important;
  }

  #jlpt180-ag-root .ag-mobile-v4 button{
    appearance:none!important;
    -webkit-appearance:none!important;
    font:inherit!important;
    white-space:nowrap!important;
    border:0!important;
  }

  #jlpt180-ag-root .ag-mobile-v4 a{
    color:inherit!important;
    text-decoration:none!important;
  }

  .m4-top-card{
    width:100%!important;
    margin:0 0 16px!important;
    padding:14px!important;
    border-radius:28px!important;
    background:
      radial-gradient(circle at 84% 32%,rgba(88,201,105,.22),transparent 33%),
      linear-gradient(180deg,rgba(255,255,255,.98),rgba(235,255,241,.96))!important;
    border:1px solid rgba(63,183,74,.26)!important;
    box-shadow:0 16px 38px rgba(45,123,73,.18)!important;
    position:relative!important;
    overflow:hidden!important;
  }

  .m4-user{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr) auto!important;
    gap:10px!important;
    align-items:center!important;
    min-height:58px!important;
    padding:8px 9px!important;
    border-radius:20px!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(88,182,75,.16)!important;
  }

  .m4-avatar{
    width:42px!important;
    height:42px!important;
    border-radius:16px!important;
    background:
      linear-gradient(180deg,rgba(232,255,230,.9),rgba(255,255,255,.85)),
      url("mascot-stand.webp") center/contain no-repeat!important;
    border:1px solid rgba(88,182,75,.16)!important;
  }

  .m4-user-main{
    min-width:0!important;
  }

  .m4-user-main span{
    display:block!important;
    color:#667085!important;
    font-size:10px!important;
    line-height:1!important;
    font-weight:850!important;
  }

  .m4-user-main b{
    display:block!important;
    margin-top:4px!important;
    color:#173b2b!important;
    font-size:14px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .m4-user-main small{
    display:block!important;
    margin-top:4px!important;
    color:#2f963f!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  .m4-user-main i{
    font-style:normal!important;
  }

  .m4-user-stats{
    display:grid!important;
    gap:5px!important;
  }

  .m4-user-stats em{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    min-height:24px!important;
    padding:0 8px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(88,182,75,.16)!important;
    color:#2f963f!important;
    font-size:10px!important;
    font-style:normal!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  .m4-route{
    position:relative!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 96px!important;
    gap:10px!important;
    align-items:center!important;
    margin-top:14px!important;
  }

  .m4-route-text span{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    color:#202939!important;
    font-size:15px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  .m4-route-text h2{
    margin:10px 0 0!important;
    color:#159447!important;
    font-size:34px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  .m4-route-text strong{
    display:inline-flex!important;
    margin-top:7px!important;
    min-height:24px!important;
    align-items:center!important;
    padding:0 10px!important;
    border-radius:999px!important;
    color:#2f963f!important;
    background:#eaf8e7!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  .m4-route-text p{
    margin:8px 0 0!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  .m4-route-art{
    width:96px!important;
    height:auto!important;
    object-fit:contain!important;
    filter:drop-shadow(0 14px 18px rgba(51,105,67,.18))!important;
  }

  .m4-progress{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    gap:10px!important;
    align-items:center!important;
    margin-top:14px!important;
  }

  .m4-progress i{
    display:block!important;
    height:8px!important;
    border-radius:999px!important;
    background:linear-gradient(90deg,#58b64b 0 42%,#dfeee3 42% 100%)!important;
  }

  .m4-progress b{
    font-size:13px!important;
    line-height:1!important;
  }

  .m4-levels{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    margin-top:14px!important;
  }

  .m4-levels button{
    min-height:38px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(89,122,98,.18)!important;
    color:#5d6c63!important;
    font-size:12px!important;
    line-height:1!important;
    font-weight:900!important;
  }

  .m4-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#63c64c,#35a43d)!important;
    border-color:transparent!important;
    box-shadow:0 8px 18px rgba(54,164,61,.22)!important;
  }

  .m4-head{
    margin:0 0 12px!important;
    padding:0 4px!important;
  }

  .m4-head h2{
    margin:0!important;
    font-size:22px!important;
    line-height:1.2!important;
    font-weight:900!important;
  }

  .m4-head p{
    margin:4px 0 0!important;
    color:#667085!important;
    font-size:12px!important;
    line-height:1.35!important;
  }

  .m4-today{
    position:relative!important;
  }

  .m4-today::before{
    content:""!important;
    position:absolute!important;
    left:30px!important;
    top:74px!important;
    bottom:48px!important;
    width:4px!important;
    border-radius:999px!important;
    background:linear-gradient(180deg,#31a953,#3da7ed,#9a69db,#ec6f9a,#efa31c)!important;
    opacity:.45!important;
    z-index:0!important;
  }

  .m4-step{
    position:relative!important;
    z-index:1!important;
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr) 84px!important;
    grid-template-rows:auto!important;
    gap:8px!important;
    align-items:center!important;
    min-height:112px!important;
    margin:0 0 10px!important;
    padding:12px 10px 12px 66px!important;
    border-radius:24px!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 12px 28px rgba(50,105,74,.13)!important;
  }

  .m4-step.s1{background:radial-gradient(circle at 18% 50%,rgba(88,182,75,.34),transparent 35%),linear-gradient(100deg,#eaffea,#fff)!important}
  .m4-step.s2{background:radial-gradient(circle at 18% 50%,rgba(74,165,234,.32),transparent 35%),linear-gradient(100deg,#e3f5ff,#fff)!important}
  .m4-step.s3{background:radial-gradient(circle at 18% 50%,rgba(164,116,223,.32),transparent 35%),linear-gradient(100deg,#f0e4ff,#fff)!important}
  .m4-step.s4{background:radial-gradient(circle at 18% 50%,rgba(240,124,163,.32),transparent 35%),linear-gradient(100deg,#ffe3f0,#fff)!important}
  .m4-step.s5{background:radial-gradient(circle at 18% 50%,rgba(241,184,68,.34),transparent 35%),linear-gradient(100deg,#ffedc8,#fff)!important}

  .m4-num{
    position:absolute!important;
    left:8px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    width:40px!important;
    height:40px!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
    font-size:16px!important;
    font-weight:900!important;
    border-radius:999px!important;
    box-shadow:0 9px 18px rgba(0,0,0,.12)!important;
  }

  .m4-step.s1 .m4-num{background:#51ba49!important}
  .m4-step.s2 .m4-num{background:#55b7ee!important}
  .m4-step.s3 .m4-num{background:#a474df!important}
  .m4-step.s4 .m4-num{background:#f07ca3!important}
  .m4-step.s5 .m4-num{background:#f1b844!important}

  .m4-step img{
    width:56px!important;
    height:56px!important;
    padding:6px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.88)!important;
    box-shadow:0 12px 18px rgba(57,95,72,.15)!important;
    object-fit:contain!important;
  }

  .m4-step h3{
    margin:0!important;
    font-size:19px!important;
    line-height:1.15!important;
    font-weight:900!important;
  }

  .m4-step p{
    margin:4px 0 0!important;
    color:#667085!important;
    font-size:11.5px!important;
    line-height:1.33!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  .m4-step em{
    display:block!important;
    margin-top:5px!important;
    color:#202939!important;
    font-size:13px!important;
    line-height:1.1!important;
    font-style:normal!important;
    font-weight:900!important;
  }

  .m4-step button{
    width:84px!important;
    min-width:84px!important;
    min-height:40px!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#64cd4f,#2f9f38)!important;
    color:#fff!important;
    font-size:11.5px!important;
    line-height:1.05!important;
    font-weight:900!important;
    box-shadow:0 12px 22px rgba(47,159,55,.24)!important;
  }

  .m4-bottom{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:10px!important;
    z-index:99999!important;
    min-height:66px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    background:rgba(255,255,255,.97)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 16px 42px rgba(42,70,48,.22)!important;
    backdrop-filter:blur(14px)!important;
  }

  .m4-bottom a{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    border-radius:22px!important;
    color:#7a8394!important;
    text-decoration:none!important;
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:800!important;
    white-space:nowrap!important;
  }

  .m4-bottom a span{
    font-size:19px!important;
    line-height:1!important;
  }

  .m4-bottom a.is-active{
    background:linear-gradient(180deg,#e9fbe5,#def5db)!important;
    color:#2f963f!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-mobile-v4{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .m4-top-card{
    padding:12px!important;
    border-radius:26px!important;
  }

  .m4-route{
    grid-template-columns:minmax(0,1fr) 86px!important;
  }

  .m4-route-art{
    width:86px!important;
  }

  .m4-step{
    grid-template-columns:50px minmax(0,1fr) 78px!important;
    padding-left:60px!important;
    gap:7px!important;
  }

  .m4-step img{
    width:50px!important;
    height:50px!important;
  }

  .m4-step h3{
    font-size:18px!important;
  }

  .m4-step button{
    width:78px!important;
    min-width:78px!important;
    font-size:11px!important;
  }
}

@media (max-width:374px){
  .m4-step{
    grid-template-columns:48px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
  }

  .m4-step button{
    grid-column:2!important;
    justify-self:start!important;
    width:112px!important;
    margin-top:6px!important;
  }
}



/* v057: mobile v4 only, legacy mobile DOM removed */
#jlpt180-ag-root > .ag-mobile-v4{
  display:none!important;
}

@media (min-width:821px){
  #jlpt180-ag-root > .ag-mobile-v4,
  #jlpt180-ag-root .m4-bottom{
    display:none!important;
  }
  #jlpt180-ag-root > .ag-shell{
    display:grid!important;
  }
}

@media (max-width:820px){
  #jlpt180-ag-root > .ag-shell,
  #jlpt180-ag-root .ag-shell,
  #jlpt180-ag-root .ag-main,
  #jlpt180-ag-root .ag-sidebar,
  #jlpt180-ag-root .ag-mobile-v2,
  #jlpt180-ag-root .ag-mobile-bottom-nav{
    display:none!important;
    visibility:hidden!important;
    height:0!important;
    max-height:0!important;
    overflow:hidden!important;
    pointer-events:none!important;
    margin:0!important;
    padding:0!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4{
    display:block!important;
    visibility:visible!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }

  body,
  html{
    overflow-y:auto!important;
    height:auto!important;
  }
}



/* v058: reliable mobile fixed head for v4 */
#jlpt180-ag-root .m4-fixed-head{
  display:none!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-mobile-v4{
    padding-top:78px!important;
    padding-bottom:154px!important;
  }

  #jlpt180-ag-root .m4-fixed-head{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:100000!important;
    width:min(100%,430px)!important;
    min-height:64px!important;
    display:grid!important;
    grid-template-columns:42px minmax(0,1fr) auto!important;
    gap:9px!important;
    align-items:center!important;
    padding:8px 12px!important;
    background:
      linear-gradient(90deg,rgba(236,255,240,.97),rgba(255,255,255,.94)),
      url("main-mobile-bg-garden.webp") center top/cover no-repeat!important;
    border-bottom:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 10px 24px rgba(45,110,70,.13)!important;
    backdrop-filter:blur(12px)!important;
  }

  #jlpt180-ag-root .m4-fixed-avatar{
    width:40px!important;
    height:40px!important;
    border-radius:16px!important;
    background:
      linear-gradient(180deg,rgba(232,255,230,.92),rgba(255,255,255,.88)),
      url("mascot-stand.webp") center/contain no-repeat!important;
    border:1px solid rgba(88,182,75,.18)!important;
    box-shadow:0 6px 14px rgba(45,110,70,.12)!important;
  }

  #jlpt180-ag-root .m4-fixed-info{
    min-width:0!important;
  }

  #jlpt180-ag-root .m4-fixed-info span{
    display:block!important;
    color:#617285!important;
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m4-fixed-info i{
    font-style:normal!important;
  }

  #jlpt180-ag-root .m4-fixed-info b{
    display:block!important;
    margin-top:3px!important;
    color:#1d332b!important;
    font-size:15px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m4-fixed-head em{
    min-height:28px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 9px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(88,182,75,.16)!important;
    color:#2f963f!important;
    font-size:10px!important;
    line-height:1!important;
    font-style:normal!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .m4-top-card{
    margin-top:0!important;
  }

  #jlpt180-ag-root .m4-bottom{
    bottom:10px!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-mobile-v4{
    padding-top:74px!important;
  }

  #jlpt180-ag-root .m4-fixed-head{
    min-height:60px!important;
    grid-template-columns:38px minmax(0,1fr) auto!important;
    padding:7px 10px!important;
  }

  #jlpt180-ag-root .m4-fixed-avatar{
    width:36px!important;
    height:36px!important;
  }

  #jlpt180-ag-root .m4-fixed-info b{
    font-size:14px!important;
  }

  #jlpt180-ag-root .m4-fixed-head em{
    min-height:26px!important;
    padding:0 7px!important;
    font-size:9px!important;
  }
}



/* v059: proper mobile app scroll wrapper */
@media (max-width:820px){
  html,
  body{
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }

  body .site-content,
  body .ast-container,
  body .content-area,
  body .entry-content,
  body .wp-site-blocks,
  body article,
  body .hentry{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    position:relative!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:430px!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    position:relative!important;
  }

  #jlpt180-ag-root .m4-scroll-area{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding:12px 14px 24px!important;
    scroll-behavior:smooth!important;
  }

  #jlpt180-ag-root .m4-top-card{
    flex-shrink:0!important;
    margin-top:0!important;
  }

  #jlpt180-ag-root .m4-today{
    flex-shrink:0!important;
  }

  #jlpt180-ag-root .m4-bottom{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    flex:0 0 auto!important;
    flex-shrink:0!important;
    width:auto!important;
    min-height:68px!important;
    margin:0 10px 10px!important;
    z-index:20!important;
  }

  /* The old fixed head is no longer needed; the scroll area owns the head */
  #jlpt180-ag-root .m4-fixed-head{
    display:none!important;
  }

  /* Remove old padding meant for fixed bottom/header */
  #jlpt180-ag-root .ag-mobile-v4{
    padding-top:0!important;
    padding-bottom:0!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m4-scroll-area{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #jlpt180-ag-root .m4-bottom{
    margin-left:8px!important;
    margin-right:8px!important;
    margin-bottom:8px!important;
  }
}



/* v060: mobile UX visual upgrade */
@media (max-width:820px){
  #jlpt180-ag-root .ag-mobile-v4{
    background:
      radial-gradient(circle at 6% 0%,rgba(118,229,145,.46),transparent 28%),
      radial-gradient(circle at 100% 12%,rgba(89,177,245,.30),transparent 34%),
      linear-gradient(180deg,#eaf9ef 0%,#fbfffc 50%,#effaf2 100%)!important;
  }

  #jlpt180-ag-root .m4-scroll-area{
    padding-top:14px!important;
  }

  #jlpt180-ag-root .m4-top-card{
    padding:14px 14px 15px!important;
    border-radius:30px!important;
    background:
      radial-gradient(circle at 92% 26%,rgba(85,205,108,.26),transparent 30%),
      radial-gradient(circle at 20% 0%,rgba(255,223,128,.22),transparent 30%),
      linear-gradient(180deg,rgba(255,255,255,.97),rgba(231,255,239,.96))!important;
    border:1px solid rgba(76,183,87,.26)!important;
    box-shadow:0 18px 42px rgba(38,112,67,.20)!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m4-top-card::before{
    content:""!important;
    position:absolute!important;
    right:-32px!important;
    top:-40px!important;
    width:150px!important;
    height:150px!important;
    border-radius:999px!important;
    background:rgba(93,205,112,.12)!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .m4-user{
    position:relative!important;
    z-index:2!important;
    min-height:64px!important;
    padding:9px 10px!important;
    border-radius:22px!important;
    background:
      linear-gradient(90deg,rgba(255,255,255,.96),rgba(245,255,247,.88))!important;
    box-shadow:0 10px 26px rgba(47,120,73,.12)!important;
  }

  #jlpt180-ag-root .m4-avatar{
    width:46px!important;
    height:46px!important;
    border-radius:18px!important;
    box-shadow:0 8px 18px rgba(47,120,73,.14)!important;
  }

  #jlpt180-ag-root .m4-user-main span{
    color:#4f725f!important;
  }

  #jlpt180-ag-root .m4-user-main b{
    font-size:15px!important;
    color:#14382a!important;
  }

  #jlpt180-ag-root .m4-user-main small{
    color:#2f963f!important;
  }

  #jlpt180-ag-root .m4-user-stats em{
    min-height:26px!important;
    background:#f6fff4!important;
    box-shadow:0 4px 10px rgba(47,120,73,.06)!important;
  }

  #jlpt180-ag-root .m4-route{
    margin-top:16px!important;
    grid-template-columns:minmax(0,1fr) 110px!important;
    align-items:center!important;
  }

  #jlpt180-ag-root .m4-route-text span{
    display:inline-flex!important;
    width:max-content!important;
    min-height:30px!important;
    padding:0 10px!important;
    border-radius:999px!important;
    background:#eaf8e7!important;
    color:#2f7b42!important;
    font-size:13px!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m4-route-text h2{
    margin-top:10px!important;
    font-size:36px!important;
    color:#129947!important;
    text-shadow:0 8px 20px rgba(18,153,71,.12)!important;
  }

  #jlpt180-ag-root .m4-route-text strong{
    background:#e4f8de!important;
    color:#238a34!important;
    font-size:12px!important;
  }

  #jlpt180-ag-root .m4-route-text p{
    max-width:220px!important;
    color:#50656a!important;
    line-height:1.38!important;
  }

  #jlpt180-ag-root .m4-route-art{
    width:112px!important;
    transform:translateX(6px)!important;
    filter:drop-shadow(0 18px 24px rgba(51,105,67,.22))!important;
  }

  #jlpt180-ag-root .m4-progress{
    margin-top:14px!important;
  }

  #jlpt180-ag-root .m4-progress i{
    height:9px!important;
    background:linear-gradient(90deg,#55c447 0 42%,#dceee1 42% 100%)!important;
  }

  #jlpt180-ag-root .m4-levels{
    margin-top:14px!important;
    gap:8px!important;
  }

  #jlpt180-ag-root .m4-levels button{
    min-height:40px!important;
    background:linear-gradient(180deg,#ffffff,#f7fbf8)!important;
    box-shadow:0 7px 16px rgba(53,109,72,.08)!important;
  }

  #jlpt180-ag-root .m4-levels button.is-active{
    background:linear-gradient(180deg,#5bc94b,#2fa33a)!important;
    box-shadow:0 10px 22px rgba(47,163,58,.25)!important;
  }

  #jlpt180-ag-root .m4-quest-strip{
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
    margin-top:14px!important;
  }

  #jlpt180-ag-root .m4-quest-strip > div{
    min-height:64px!important;
    padding:9px 8px!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.88)!important;
    border:1px solid rgba(89,122,98,.12)!important;
    box-shadow:0 8px 18px rgba(53,109,72,.08)!important;
  }

  #jlpt180-ag-root .m4-quest-strip span{
    display:block!important;
    font-size:17px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m4-quest-strip b{
    display:block!important;
    margin-top:5px!important;
    color:#173b2b!important;
    font-size:12px!important;
    line-height:1.1!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m4-quest-strip small{
    display:block!important;
    margin-top:4px!important;
    color:#667085!important;
    font-size:9px!important;
    line-height:1.1!important;
    font-weight:700!important;
  }

  #jlpt180-ag-root .m4-head{
    margin-top:16px!important;
  }

  #jlpt180-ag-root .m4-head h2{
    font-size:23px!important;
    letter-spacing:-.01em!important;
  }

  #jlpt180-ag-root .m4-step{
    min-height:112px!important;
    margin-bottom:11px!important;
    border-radius:25px!important;
    box-shadow:0 14px 32px rgba(50,105,74,.16)!important;
    border-color:rgba(89,122,98,.12)!important;
  }

  #jlpt180-ag-root .m4-step.s1{background:radial-gradient(circle at 18% 50%,rgba(88,182,75,.38),transparent 36%),linear-gradient(100deg,#e7ffe4,#fff)!important}
  #jlpt180-ag-root .m4-step.s2{background:radial-gradient(circle at 18% 50%,rgba(74,165,234,.36),transparent 36%),linear-gradient(100deg,#ddf3ff,#fff)!important}
  #jlpt180-ag-root .m4-step.s3{background:radial-gradient(circle at 18% 50%,rgba(164,116,223,.36),transparent 36%),linear-gradient(100deg,#efe2ff,#fff)!important}
  #jlpt180-ag-root .m4-step.s4{background:radial-gradient(circle at 18% 50%,rgba(240,124,163,.36),transparent 36%),linear-gradient(100deg,#ffe1ef,#fff)!important}
  #jlpt180-ag-root .m4-step.s5{background:radial-gradient(circle at 18% 50%,rgba(241,184,68,.38),transparent 36%),linear-gradient(100deg,#ffecbd,#fff)!important}

  #jlpt180-ag-root .m4-step img{
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 12px 22px rgba(57,95,72,.18)!important;
  }

  #jlpt180-ag-root .m4-step h3{
    color:#152a32!important;
  }

  #jlpt180-ag-root .m4-step button{
    background:linear-gradient(180deg,#5fc94b,#2e9f38)!important;
    box-shadow:0 12px 22px rgba(47,159,55,.24)!important;
  }

  #jlpt180-ag-root .m4-bottom{
    background:rgba(255,255,255,.98)!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m4-route{
    grid-template-columns:minmax(0,1fr) 92px!important;
  }

  #jlpt180-ag-root .m4-route-art{
    width:92px!important;
  }

  #jlpt180-ag-root .m4-route-text h2{
    font-size:32px!important;
  }

  #jlpt180-ag-root .m4-route-text p{
    max-width:200px!important;
  }

  #jlpt180-ag-root .m4-quest-strip > div{
    min-height:58px!important;
    padding:8px 6px!important;
  }

  #jlpt180-ag-root .m4-quest-strip b{
    font-size:11px!important;
  }

  #jlpt180-ag-root .m4-quest-strip small{
    font-size:8px!important;
  }
}



/* v061: emergency safe mode for mobile performance */
@media (max-width:820px){
  #jlpt180-ag-root,
  #jlpt180-ag-root *{
    animation:none!important;
    transition:none!important;
  }

  #jlpt180-ag-root .ag-mobile-v4{
    background:#eefaf2!important;
  }

  #jlpt180-ag-root .m4-top-card,
  #jlpt180-ag-root .m4-user,
  #jlpt180-ag-root .m4-route,
  #jlpt180-ag-root .m4-step,
  #jlpt180-ag-root .m4-bottom{
    box-shadow:0 6px 18px rgba(45,110,70,.10)!important;
    filter:none!important;
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  #jlpt180-ag-root .m4-top-card{
    background:linear-gradient(180deg,#ffffff,#ecfff1)!important;
  }

  #jlpt180-ag-root .m4-route-art{
    filter:none!important;
  }

  #jlpt180-ag-root .m4-step img{
    filter:none!important;
  }

  #jlpt180-ag-root .m4-step{
    background:#fff!important;
  }

  #jlpt180-ag-root .m4-step.s1{background:linear-gradient(90deg,#efffee,#fff)!important}
  #jlpt180-ag-root .m4-step.s2{background:linear-gradient(90deg,#edf8ff,#fff)!important}
  #jlpt180-ag-root .m4-step.s3{background:linear-gradient(90deg,#f5ecff,#fff)!important}
  #jlpt180-ag-root .m4-step.s4{background:linear-gradient(90deg,#ffedf5,#fff)!important}
  #jlpt180-ag-root .m4-step.s5{background:linear-gradient(90deg,#fff3d8,#fff)!important}

  #jlpt180-ag-root .ag-app-overlay{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }
}



/* v068 emergency safe guard */
#jlpt180-ag-root *{
  box-sizing:border-box!important;
}

@media (max-width:820px){
  html, body{
    overflow-x:hidden!important;
  }

  #jlpt180-ag-root .ag-app-overlay{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
  }

  #jlpt180-ag-root .ag-app-window{
    box-shadow:none!important;
  }

  #jlpt180-ag-root .ag-mobile-v2,
  #jlpt180-ag-root .ag-mobile-v4{
    max-width:430px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  #jlpt180-ag-root .m4-bottom,
  #jlpt180-ag-root .m2-bottom,
  #jlpt180-ag-root .ag-mobile-bottom-nav{
    z-index:9999!important;
  }
}



/* v069: gamified signature colors for today's path */
#jlpt180-ag-root{
  --ag-game-green:#58CC02;
  --ag-game-green-dark:#58A700;
  --ag-game-blue:#1CB0F6;
  --ag-game-blue-dark:#1899D6;
  --ag-game-purple:#CE82FF;
  --ag-game-purple-dark:#A559CE;
  --ag-game-orange:#FF9600;
  --ag-game-orange-dark:#CC7800;
  --ag-game-red:#FF4B4B;
  --ag-game-red-dark:#D63838;
  --ag-game-yellow:#FFC800;
  --ag-game-yellow-dark:#E5B400;
  --ag-game-border:#E5E5E5;
}

/* Route progress: candy bar */
#jlpt180-ag-root .m4-progress i,
#jlpt180-ag-root .m2-route-progress::before,
#jlpt180-ag-root .ag-route-current small::after{
  height:14px!important;
  border-radius:99px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 45%),
    linear-gradient(90deg,var(--ag-game-orange),var(--ag-game-yellow) 42%,#E5E5E5 42%,#E5E5E5 100%)!important;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.10)!important;
}

/* Mobile v4 cards */
@media (max-width:820px){
  #jlpt180-ag-root .m4-step{
    border:2px solid var(--ag-game-border)!important;
    border-bottom:5px solid #D1D1D1!important;
    border-radius:24px!important;
    background-color:#fff!important;
    box-shadow:none!important;
    transition:transform .08s ease,border-bottom-width .08s ease!important;
  }

  #jlpt180-ag-root .m4-step:active{
    transform:translateY(3px)!important;
    border-bottom-width:2px!important;
  }

  /* 1 Review/SRS: urgent orange-red */
  #jlpt180-ag-root .m4-step.s1{
    background:linear-gradient(90deg,#FFF3E2,#FFFFFF)!important;
    border-color:#FFD6A6!important;
    border-bottom-color:var(--ag-game-orange-dark)!important;
  }

  #jlpt180-ag-root .m4-step.s1 .m4-num,
  #jlpt180-ag-root .m4-step.s1 button{
    background:var(--ag-game-orange)!important;
    color:#fff!important;
    border-bottom-color:var(--ag-game-orange-dark)!important;
  }

  /* 2 Vocab: blue */
  #jlpt180-ag-root .m4-step.s2{
    background:linear-gradient(90deg,#E7F7FF,#FFFFFF)!important;
    border-color:#BDEAFF!important;
    border-bottom-color:var(--ag-game-blue-dark)!important;
  }

  #jlpt180-ag-root .m4-step.s2 .m4-num,
  #jlpt180-ag-root .m4-step.s2 button{
    background:var(--ag-game-blue)!important;
    color:#fff!important;
    border-bottom-color:var(--ag-game-blue-dark)!important;
  }

  /* 3 Grammar: purple */
  #jlpt180-ag-root .m4-step.s3{
    background:linear-gradient(90deg,#F7ECFF,#FFFFFF)!important;
    border-color:#E3C6FF!important;
    border-bottom-color:var(--ag-game-purple-dark)!important;
  }

  #jlpt180-ag-root .m4-step.s3 .m4-num,
  #jlpt180-ag-root .m4-step.s3 button{
    background:var(--ag-game-purple)!important;
    color:#fff!important;
    border-bottom-color:var(--ag-game-purple-dark)!important;
  }

  /* 4 Mini Quiz: gold */
  #jlpt180-ag-root .m4-step.s4{
    background:linear-gradient(90deg,#FFF7D6,#FFFFFF)!important;
    border-color:#FFE88D!important;
    border-bottom-color:var(--ag-game-yellow-dark)!important;
  }

  #jlpt180-ag-root .m4-step.s4 .m4-num,
  #jlpt180-ag-root .m4-step.s4 button{
    background:var(--ag-game-yellow)!important;
    color:#5A3B00!important;
    border-bottom-color:var(--ag-game-yellow-dark)!important;
  }

  /* 5 Reward: stronger gold/orange */
  #jlpt180-ag-root .m4-step.s5{
    background:linear-gradient(90deg,#FFF0C2,#FFFFFF)!important;
    border-color:#FFD76A!important;
    border-bottom-color:#D68900!important;
  }

  #jlpt180-ag-root .m4-step.s5 .m4-num,
  #jlpt180-ag-root .m4-step.s5 button{
    background:#FFB020!important;
    color:#fff!important;
    border-bottom-color:#D68900!important;
  }

  #jlpt180-ag-root .m4-step button{
    border:0!important;
    border-bottom:4px solid var(--ag-game-green-dark)!important;
    border-radius:16px!important;
    font-weight:900!important;
    text-shadow:0 1px 0 rgba(0,0,0,.10)!important;
    transition:transform .08s ease,border-bottom-width .08s ease!important;
  }

  #jlpt180-ag-root .m4-step button:active{
    transform:translateY(4px)!important;
    border-bottom-width:0!important;
  }

  #jlpt180-ag-root .m4-step .m4-num{
    box-shadow:0 5px 0 rgba(0,0,0,.12)!important;
  }

  #jlpt180-ag-root .m4-step img{
    background:#fff!important;
    border:2px solid #EFEFEF!important;
    border-bottom:4px solid #DADADA!important;
    border-radius:18px!important;
    box-shadow:none!important;
  }

  /* Level selector active */
  #jlpt180-ag-root .m4-levels button,
  #jlpt180-ag-root .m2-levels button{
    background:#fff!important;
    color:#AFAFAF!important;
    border:2px solid var(--ag-game-border)!important;
    border-bottom:4px solid #D1D1D1!important;
    border-radius:18px!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .m4-levels button.is-active,
  #jlpt180-ag-root .m2-levels button.is-active{
    background:var(--ag-game-green)!important;
    color:#fff!important;
    border-color:var(--ag-game-green)!important;
    border-bottom-color:var(--ag-game-green-dark)!important;
  }

  /* Bottom nav active polish */
  #jlpt180-ag-root .m4-bottom a.is-active,
  #jlpt180-ag-root .m2-bottom a.is-active{
    background:#DDF6D3!important;
    color:#3B8D00!important;
  }
}

/* Fallback if an older mobile v2 layout is still cached */
@media (max-width:820px){
  #jlpt180-ag-root .m2-step{
    border:2px solid var(--ag-game-border)!important;
    border-bottom:5px solid #D1D1D1!important;
    border-radius:24px!important;
  }

  #jlpt180-ag-root .m2-step:active{
    transform:translateY(3px)!important;
    border-bottom-width:2px!important;
  }

  #jlpt180-ag-root .m2-step.s1,
  #jlpt180-ag-root .m2-step:nth-of-type(1){
    background:linear-gradient(90deg,#FFF3E2,#FFFFFF)!important;
    border-color:#FFD6A6!important;
    border-bottom-color:var(--ag-game-orange-dark)!important;
  }

  #jlpt180-ag-root .m2-step.s2,
  #jlpt180-ag-root .m2-step:nth-of-type(2){
    background:linear-gradient(90deg,#E7F7FF,#FFFFFF)!important;
    border-color:#BDEAFF!important;
    border-bottom-color:var(--ag-game-blue-dark)!important;
  }

  #jlpt180-ag-root .m2-step.s3,
  #jlpt180-ag-root .m2-step:nth-of-type(3){
    background:linear-gradient(90deg,#F7ECFF,#FFFFFF)!important;
    border-color:#E3C6FF!important;
    border-bottom-color:var(--ag-game-purple-dark)!important;
  }

  #jlpt180-ag-root .m2-step.s4,
  #jlpt180-ag-root .m2-step:nth-of-type(4){
    background:linear-gradient(90deg,#FFF7D6,#FFFFFF)!important;
    border-color:#FFE88D!important;
    border-bottom-color:var(--ag-game-yellow-dark)!important;
  }

  #jlpt180-ag-root .m2-step.s5,
  #jlpt180-ag-root .m2-step:nth-of-type(5){
    background:linear-gradient(90deg,#FFF0C2,#FFFFFF)!important;
    border-color:#FFD76A!important;
    border-bottom-color:#D68900!important;
  }
}

/* Desktop path cards get same signature colors lightly */
@media (min-width:821px){
  #jlpt180-ag-root .ag-step{
    border:2px solid var(--ag-game-border)!important;
    border-bottom:5px solid #D1D1D1!important;
    border-radius:24px!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(1){
    background:linear-gradient(180deg,#FFF6EC,#FFFFFF)!important;
    border-color:#FFD6A6!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(2){
    background:linear-gradient(180deg,#EAF8FF,#FFFFFF)!important;
    border-color:#BDEAFF!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(3){
    background:linear-gradient(180deg,#F8EEFF,#FFFFFF)!important;
    border-color:#E3C6FF!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(4){
    background:linear-gradient(180deg,#FFF8D8,#FFFFFF)!important;
    border-color:#FFE88D!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(5){
    background:linear-gradient(180deg,#FFF0C2,#FFFFFF)!important;
    border-color:#FFD76A!important;
  }
}



/* v070: requested CTA alignment, active levels, SRS footer, summary scroll */
@media (max-width:820px){
  /* Level inactive readable + active obvious */
  #jlpt180-ag-root .m4-levels button,
  #jlpt180-ag-root .m2-levels button{
    color:#666666!important;
    background:#fff!important;
    border:2px solid #E5E5E5!important;
    border-bottom:4px solid #D1D1D1!important;
    border-radius:18px!important;
    font-weight:900!important;
    min-height:42px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  #jlpt180-ag-root .m4-levels button.is-active,
  #jlpt180-ag-root .m2-levels button.is-active{
    background:#58CC02!important;
    color:#fff!important;
    border-color:#58CC02!important;
    border-bottom:4px solid #58A700!important;
  }

  /* Step cards: align CTA vertically with flex/grid stability */
  #jlpt180-ag-root .m4-step{
    display:grid!important;
    grid-template-columns:58px minmax(0,1fr) auto!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
  }

  #jlpt180-ag-root .m4-step button{
    flex-shrink:0!important;
    white-space:nowrap!important;
    min-width:88px!important;
    min-height:44px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    background:#58CC02!important;
    color:#fff!important;
    border:0!important;
    border-bottom:4px solid #58A700!important;
    border-radius:16px!important;
    font-weight:900!important;
    line-height:1!important;
    transition:transform .08s ease,border-bottom-width .08s ease!important;
  }

  #jlpt180-ag-root .m4-step button:active{
    transform:translateY(4px)!important;
    border-bottom-width:0!important;
  }

  /* Summary chips horizontal scroll */
  #jlpt180-ag-root .ag-session-summary-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding-bottom:2px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid::-webkit-scrollbar,
  #jlpt180-ag-root .ag-context-pills::-webkit-scrollbar{
    display:none!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div{
    flex:0 0 auto!important;
    min-width:100px!important;
    width:100px!important;
  }

  /* Context pills safe scroll/wrap */
  #jlpt180-ag-root .ag-context-pills{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding-bottom:2px!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch!important;
  }

  #jlpt180-ag-root .ag-context-pills span{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }
}

/* Remove buggy white mask/layer from child hero strip */
#jlpt180-ag-root .ag-child-hero-strip::before,
#jlpt180-ag-root .ag-child-hero-strip::after{
  display:none!important;
  content:none!important;
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-child-hero-strip .ag-child-hero-art{
    display:none!important;
  }
}

/* SRS footer dual mode */
#jlpt180-ag-root .ag-foot-nav{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  width:100%!important;
}

#jlpt180-ag-root .ag-srs-foot{
  display:none!important;
  width:100%!important;
}

#jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-foot-nav,
#jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-foot-nav{
  display:none!important;
}

#jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-srs-foot,
#jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-srs-foot{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
}

#jlpt180-ag-root .ag-srs-foot button{
  min-height:58px!important;
  border-radius:18px!important;
  border:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  font-weight:900!important;
  transition:transform .08s ease,border-bottom-width .08s ease!important;
}

#jlpt180-ag-root .ag-srs-foot button:active,
#jlpt180-ag-root .ag-srs-foot button.is-pressed{
  transform:translateY(4px)!important;
  border-bottom-width:0!important;
}

#jlpt180-ag-root .ag-srs-foot button span{
  display:block!important;
  font-size:15px!important;
  line-height:1!important;
}

#jlpt180-ag-root .ag-srs-foot button small{
  display:block!important;
  font-size:9px!important;
  line-height:1!important;
  font-weight:750!important;
  opacity:.78!important;
  white-space:nowrap!important;
}

#jlpt180-ag-root .ag-srs-foot .bad{
  background:#FF4B4B!important;
  color:#fff!important;
  border-bottom:4px solid #D63838!important;
}

#jlpt180-ag-root .ag-srs-foot .hard{
  background:#FF9600!important;
  color:#fff!important;
  border-bottom:4px solid #CC7800!important;
}

#jlpt180-ag-root .ag-srs-foot .good{
  background:#58CC02!important;
  color:#fff!important;
  border-bottom:4px solid #58A700!important;
}

#jlpt180-ag-root .ag-srs-foot .easy{
  background:#1CB0F6!important;
  color:#fff!important;
  border-bottom:4px solid #1899D6!important;
}

#jlpt180-ag-root .ag-app-foot{
  min-height:76px!important;
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-srs-foot{
    gap:6px!important;
  }

  #jlpt180-ag-root .ag-srs-foot button{
    min-height:54px!important;
    border-radius:15px!important;
  }

  #jlpt180-ag-root .ag-srs-foot button span{
    font-size:14px!important;
  }

  #jlpt180-ag-root .ag-srs-foot button small{
    font-size:8px!important;
  }
}



/* v071: fix mobile step CTA text clipping */
@media (max-width:820px){
  #jlpt180-ag-root .m4-step{
    grid-template-columns:56px minmax(0,1fr) 104px!important;
    gap:10px!important;
    padding-right:10px!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .m4-step button{
    grid-column:3!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:44px!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
    word-break:keep-all!important;
    line-height:1!important;
    font-size:12px!important;
    letter-spacing:0!important;
    box-sizing:border-box!important;
  }

  #jlpt180-ag-root .m4-step button,
  #jlpt180-ag-root .m4-step button *{
    white-space:nowrap!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m4-step{
    grid-template-columns:50px minmax(0,1fr) 96px!important;
    gap:8px!important;
    padding-left:62px!important;
    padding-right:8px!important;
  }

  #jlpt180-ag-root .m4-step button{
    min-height:42px!important;
    font-size:11px!important;
    padding:0 6px!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .m4-step{
    grid-template-columns:48px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
  }

  #jlpt180-ag-root .m4-step button{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    width:112px!important;
    min-width:112px!important;
    margin-top:8px!important;
  }
}



/* v072: definitive CTA no-squeeze fix */
@media (max-width:820px){
  #jlpt180-ag-root .m4-step{
    grid-template-columns:56px minmax(0,1fr) 108px!important;
    column-gap:10px!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .m4-step button,
  #jlpt180-ag-root .m4-step a,
  #jlpt180-ag-root .m2-step button,
  #jlpt180-ag-root .ag-step a{
    flex-shrink:0!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    min-width:100px!important;
    width:100px!important;
    max-width:100px!important;
    min-height:44px!important;
    padding-left:8px!important;
    padding-right:8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    line-height:1!important;
    box-sizing:border-box!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }

  #jlpt180-ag-root .m4-step button{
    grid-column:3!important;
    justify-self:end!important;
    align-self:center!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m4-step{
    grid-template-columns:50px minmax(0,1fr) 104px!important;
    column-gap:8px!important;
  }

  #jlpt180-ag-root .m4-step button,
  #jlpt180-ag-root .m4-step a,
  #jlpt180-ag-root .m2-step button,
  #jlpt180-ag-root .ag-step a{
    min-width:96px!important;
    width:96px!important;
    max-width:96px!important;
    font-size:11px!important;
  }
}

@media (max-width:374px){
  #jlpt180-ag-root .m4-step{
    grid-template-columns:48px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
  }

  #jlpt180-ag-root .m4-step button,
  #jlpt180-ag-root .m4-step a{
    grid-column:2!important;
    grid-row:2!important;
    justify-self:start!important;
    min-width:108px!important;
    width:108px!important;
    max-width:108px!important;
    margin-top:8px!important;
  }
}



/* v073: bottom nav safe-area + app-shell scroll fix */
@media (max-width:820px){
  html,
  body{
    height:var(--jlpt180-app-h, 100dvh)!important;
    min-height:var(--jlpt180-app-h, 100dvh)!important;
    max-height:var(--jlpt180-app-h, 100dvh)!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
  }

  body .site-content,
  body .ast-container,
  body .content-area,
  body .entry-content,
  body .wp-site-blocks,
  body article,
  body .hentry{
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
  }

  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    height:var(--jlpt180-app-h, 100dvh)!important;
    min-height:var(--jlpt180-app-h, 100dvh)!important;
    max-height:var(--jlpt180-app-h, 100dvh)!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    position:relative!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    max-width:430px!important;
    height:var(--jlpt180-app-h, 100dvh)!important;
    min-height:0!important;
    max-height:var(--jlpt180-app-h, 100dvh)!important;
    margin:0 auto!important;
    padding:0!important;
    overflow:hidden!important;
    position:relative!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4 > .m4-scroll-area{
    flex:1 1 auto!important;
    min-height:0!important;
    height:auto!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior:contain!important;
    padding:12px 12px 24px!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4 > .m4-bottom{
    position:relative!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    flex:0 0 auto!important;
    flex-shrink:0!important;
    width:auto!important;
    min-height:72px!important;
    max-height:none!important;
    margin:0 10px max(8px, env(safe-area-inset-bottom))!important;
    padding:8px!important;
    border-radius:28px!important;
    z-index:20!important;
  }

  #jlpt180-ag-root .m4-bottom a{
    min-height:56px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }

  #jlpt180-ag-root .m4-bottom a.is-active{
    align-items:center!important;
    justify-content:center!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root > .ag-mobile-v4 > .m4-scroll-area{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4 > .m4-bottom{
    margin-left:8px!important;
    margin-right:8px!important;
    margin-bottom:max(8px, env(safe-area-inset-bottom))!important;
    min-height:72px!important;
  }
}



/* v074: compact mobile route so first screen is useful */
@media (max-width:820px){
  #jlpt180-ag-root > .ag-mobile-v4 > .m4-scroll-area{
    padding:10px 12px 92px!important;
  }

  #jlpt180-ag-root .m4-top-card{
    padding:10px 12px 12px!important;
    border-radius:24px!important;
    margin-bottom:12px!important;
    background:linear-gradient(180deg,#ffffff,#effdf1)!important;
  }

  /* compact user row */
  #jlpt180-ag-root .m4-user{
    min-height:46px!important;
    padding:6px 8px!important;
    border-radius:16px!important;
    grid-template-columns:34px minmax(0,1fr) auto!important;
    gap:8px!important;
  }

  #jlpt180-ag-root .m4-avatar{
    width:32px!important;
    height:32px!important;
    border-radius:12px!important;
  }

  #jlpt180-ag-root .m4-user-main span{
    font-size:9px!important;
  }

  #jlpt180-ag-root .m4-user-main b{
    margin-top:2px!important;
    font-size:11px!important;
  }

  #jlpt180-ag-root .m4-user-main small{
    display:none!important;
  }

  #jlpt180-ag-root .m4-user-stats{
    display:flex!important;
    flex-direction:column!important;
    gap:3px!important;
  }

  #jlpt180-ag-root .m4-user-stats em{
    min-height:18px!important;
    padding:0 6px!important;
    font-size:9px!important;
  }

  /* route content compact */
  #jlpt180-ag-root .m4-route{
    margin-top:10px!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 72px!important;
    gap:8px!important;
    align-items:center!important;
  }

  #jlpt180-ag-root .m4-route-text span{
    min-height:24px!important;
    padding:0 8px!important;
    font-size:12px!important;
  }

  #jlpt180-ag-root .m4-route-text h2{
    margin-top:6px!important;
    font-size:30px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .m4-route-text strong{
    margin-top:5px!important;
    min-height:22px!important;
    padding:0 8px!important;
    font-size:11px!important;
  }

  #jlpt180-ag-root .m4-route-text p{
    margin-top:6px!important;
    max-width:100%!important;
    font-size:11px!important;
    line-height:1.28!important;
    display:-webkit-box!important;
    -webkit-line-clamp:2!important;
    -webkit-box-orient:vertical!important;
    overflow:hidden!important;
  }

  #jlpt180-ag-root .m4-route-art{
    width:72px!important;
    transform:none!important;
    filter:none!important;
  }

  #jlpt180-ag-root .m4-progress{
    margin-top:10px!important;
  }

  #jlpt180-ag-root .m4-progress i{
    height:10px!important;
  }

  #jlpt180-ag-root .m4-progress b{
    font-size:13px!important;
  }

  #jlpt180-ag-root .m4-levels{
    margin-top:10px!important;
    gap:7px!important;
  }

  #jlpt180-ag-root .m4-levels button{
    min-height:34px!important;
    border-radius:14px!important;
    font-size:11px!important;
    border-bottom-width:3px!important;
  }

  /* remove the bulky quest strip */
  #jlpt180-ag-root .m4-quest-strip{
    display:none!important;
  }

  /* Today section appears higher */
  #jlpt180-ag-root .m4-head{
    margin:0 0 8px!important;
  }

  #jlpt180-ag-root .m4-head h2{
    font-size:22px!important;
    line-height:1.15!important;
  }

  #jlpt180-ag-root .m4-head p{
    margin-top:3px!important;
    font-size:11px!important;
  }

  #jlpt180-ag-root .m4-today::before{
    top:66px!important;
    bottom:56px!important;
  }

  #jlpt180-ag-root .m4-step{
    min-height:102px!important;
    margin-bottom:9px!important;
    grid-template-columns:50px minmax(0,1fr) 96px!important;
    gap:8px!important;
    padding:12px 10px 12px 60px!important;
  }

  #jlpt180-ag-root .m4-num{
    left:8px!important;
    width:38px!important;
    height:38px!important;
    font-size:15px!important;
  }

  #jlpt180-ag-root .m4-step img{
    width:46px!important;
    height:46px!important;
  }

  #jlpt180-ag-root .m4-step h3{
    font-size:18px!important;
  }

  #jlpt180-ag-root .m4-step p{
    margin-top:3px!important;
    font-size:11px!important;
    line-height:1.25!important;
    -webkit-line-clamp:1!important;
  }

  #jlpt180-ag-root .m4-step em{
    margin-top:4px!important;
    font-size:12px!important;
  }

  #jlpt180-ag-root .m4-step button{
    min-width:92px!important;
    width:92px!important;
    max-width:92px!important;
    min-height:40px!important;
    font-size:11px!important;
    border-radius:14px!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4 > .m4-bottom{
    min-height:70px!important;
    margin-bottom:max(8px, env(safe-area-inset-bottom))!important;
  }
}

@media (max-width:390px){
  #jlpt180-ag-root > .ag-mobile-v4 > .m4-scroll-area{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #jlpt180-ag-root .m4-route{
    grid-template-columns:minmax(0,1fr) 62px!important;
  }

  #jlpt180-ag-root .m4-route-art{
    width:62px!important;
  }

  #jlpt180-ag-root .m4-step{
    grid-template-columns:46px minmax(0,1fr) 86px!important;
    padding-left:56px!important;
  }

  #jlpt180-ag-root .m4-step button{
    width:86px!important;
    min-width:86px!important;
    max-width:86px!important;
    font-size:10.5px!important;
  }
}



/* v075: bottom nav is fixed viewport navigation, not flex footer */
@media (max-width:820px){
  html,
  body{
    height:auto!important;
    min-height:100%!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:auto!important;
  }

  html body #jlpt180-ag-root{
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4{
    display:block!important;
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:calc(96px + env(safe-area-inset-bottom))!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4 > .m4-scroll-area{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:visible!important;
    padding:10px 12px 18px!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4 > .m4-bottom{
    position:fixed!important;
    left:10px!important;
    right:10px!important;
    bottom:max(8px, env(safe-area-inset-bottom))!important;
    width:auto!important;
    max-width:calc(430px - 20px)!important;
    margin:0 auto!important;
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:repeat(5,1fr)!important;
    gap:4px!important;
    padding:8px!important;
    border-radius:28px!important;
    z-index:100000!important;
    background:rgba(255,255,255,.97)!important;
    border:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 12px 34px rgba(42,70,48,.20)!important;
  }

  #jlpt180-ag-root .m4-bottom a{
    min-height:56px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root > .ag-mobile-v4 > .m4-scroll-area{
    padding-left:10px!important;
    padding-right:10px!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4 > .m4-bottom{
    left:8px!important;
    right:8px!important;
    max-width:none!important;
    min-height:70px!important;
    padding:7px!important;
  }
}



/* v076: SRS action bar + lesson summary chip polish */
@media (max-width:820px){
  /* Lesson summary chips: larger, readable, colored, horizontally scrollable */
  #jlpt180-ag-root .ag-session-summary{
    margin:8px 10px 0!important;
    padding:9px 10px!important;
    border-radius:16px!important;
    background:linear-gradient(180deg,#f7fff8,#edf9ee)!important;
    border:1px solid rgba(89,122,98,.14)!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-width:none!important;
    padding:1px 0 3px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid::-webkit-scrollbar{
    display:none!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div{
    flex:0 0 auto!important;
    width:108px!important;
    min-width:108px!important;
    min-height:62px!important;
    padding:9px 10px!important;
    border-radius:14px!important;
    border:1px solid rgba(89,122,98,.12)!important;
    box-shadow:0 4px 10px rgba(53,109,72,.05)!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div:nth-child(1){
    background:#fff2e3!important;
    border-color:#ffd2a1!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div:nth-child(2){
    background:#eaf7ff!important;
    border-color:#bfe8ff!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div:nth-child(3){
    background:#f5eaff!important;
    border-color:#e1c4ff!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div:nth-child(4){
    background:#fff6d7!important;
    border-color:#ffe58a!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div:nth-child(5){
    background:#fff1d1!important;
    border-color:#ffd269!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div span{
    display:block!important;
    font-size:9.5px!important;
    line-height:1.15!important;
    color:#667085!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div b{
    display:block!important;
    margin-top:5px!important;
    font-size:14px!important;
    line-height:1.05!important;
    color:#1f2937!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  /* Separate SRS hint from action area */
  #jlpt180-ag-root .ag-screen-review .ag-detail-strip{
    margin:12px 0 18px!important;
  }

  /* SRS footer should be a proper action bar, not candies stuck to bottom */
  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-app-foot,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-app-foot{
    min-height:92px!important;
    padding:12px 12px calc(14px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.98)!important;
    border-top:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 -8px 22px rgba(31,60,42,.10)!important;
  }

  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-srs-foot,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-srs-foot{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:10px!important;
    width:100%!important;
  }

  #jlpt180-ag-root .ag-srs-foot button{
    min-width:0!important;
    width:100%!important;
    min-height:62px!important;
    padding:8px 6px 7px!important;
    border-radius:16px!important;
    border:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    box-sizing:border-box!important;
    white-space:normal!important;
    text-align:center!important;
  }

  #jlpt180-ag-root .ag-srs-foot button span{
    font-size:15px!important;
    line-height:1!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .ag-srs-foot button small{
    font-size:8.5px!important;
    line-height:1.1!important;
    font-weight:750!important;
    opacity:.86!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    max-width:100%!important;
  }

  #jlpt180-ag-root .ag-srs-foot .bad{
    background:#FF4B4B!important;
    color:#fff!important;
    border-bottom:4px solid #D63838!important;
  }

  #jlpt180-ag-root .ag-srs-foot .hard{
    background:#FF9600!important;
    color:#fff!important;
    border-bottom:4px solid #CC7800!important;
  }

  #jlpt180-ag-root .ag-srs-foot .good{
    background:#58CC02!important;
    color:#fff!important;
    border-bottom:4px solid #58A700!important;
  }

  #jlpt180-ag-root .ag-srs-foot .easy{
    background:#1CB0F6!important;
    color:#fff!important;
    border-bottom:4px solid #1899D6!important;
  }
}

@media (max-width:390px){
  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-srs-foot,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-srs-foot{
    gap:7px!important;
  }

  #jlpt180-ag-root .ag-srs-foot button{
    min-height:58px!important;
    border-radius:14px!important;
    padding-left:4px!important;
    padding-right:4px!important;
  }

  #jlpt180-ag-root .ag-srs-foot button span{
    font-size:14px!important;
  }

  #jlpt180-ag-root .ag-srs-foot button small{
    font-size:7.8px!important;
  }

  #jlpt180-ag-root .ag-session-summary-grid > div{
    width:104px!important;
    min-width:104px!important;
  }
}



/* v077: remove duplicated SRS footer and restore mobile header */
@media (max-width:820px){
  /* Restore visible header on main mobile page */
  #jlpt180-ag-root .m4-fixed-head{
    position:fixed!important;
    top:0!important;
    left:50%!important;
    transform:translateX(-50%)!important;
    z-index:100000!important;
    width:min(100%,430px)!important;
    min-height:62px!important;
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) auto!important;
    gap:9px!important;
    align-items:center!important;
    padding:8px 12px!important;
    background:
      linear-gradient(90deg,rgba(236,255,240,.97),rgba(255,255,255,.95)),
      url("main-mobile-bg-garden.webp") center top/cover no-repeat!important;
    border-bottom:1px solid rgba(89,122,98,.14)!important;
    box-shadow:0 10px 24px rgba(45,110,70,.13)!important;
  }

  #jlpt180-ag-root .m4-fixed-avatar{
    width:38px!important;
    height:38px!important;
    border-radius:15px!important;
    background:
      linear-gradient(180deg,rgba(232,255,230,.92),rgba(255,255,255,.88)),
      url("mascot-stand.webp") center/contain no-repeat!important;
    border:1px solid rgba(88,182,75,.18)!important;
  }

  #jlpt180-ag-root .m4-fixed-info{
    min-width:0!important;
  }

  #jlpt180-ag-root .m4-fixed-info span{
    display:block!important;
    color:#617285!important;
    font-size:10px!important;
    line-height:1.1!important;
    font-weight:850!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m4-fixed-info i{
    font-style:normal!important;
  }

  #jlpt180-ag-root .m4-fixed-info b{
    display:block!important;
    margin-top:3px!important;
    color:#1d332b!important;
    font-size:15px!important;
    line-height:1.1!important;
    font-weight:900!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m4-fixed-head em{
    min-height:27px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0 8px!important;
    border-radius:999px!important;
    background:#fff!important;
    border:1px solid rgba(88,182,75,.16)!important;
    color:#2f963f!important;
    font-size:10px!important;
    line-height:1!important;
    font-style:normal!important;
    font-weight:900!important;
    white-space:nowrap!important;
  }

  /* Give mobile content room below fixed head */
  #jlpt180-ag-root > .ag-mobile-v4,
  #jlpt180-ag-root .ag-mobile-v4{
    padding-top:70px!important;
  }

  #jlpt180-ag-root .m4-scroll-area{
    padding-top:10px!important;
  }

  /* Review screen: keep only the large SRS buttons inside body, hide tiny duplicate footer */
  #jlpt180-ag-root .ag-screen-review .ag-answer-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-top:12px!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-answer-actions button{
    min-height:48px!important;
    border-radius:14px!important;
    font-weight:900!important;
  }

  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-srs-foot,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-srs-foot{
    display:none!important;
  }

  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-foot-nav,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-foot-nav{
    display:grid!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .m4-fixed-head{
    min-height:58px!important;
    grid-template-columns:36px minmax(0,1fr) auto!important;
    padding:7px 10px!important;
  }

  #jlpt180-ag-root .m4-fixed-avatar{
    width:34px!important;
    height:34px!important;
  }

  #jlpt180-ag-root .m4-fixed-info b{
    font-size:14px!important;
  }

  #jlpt180-ag-root .m4-fixed-head em{
    min-height:25px!important;
    padding:0 7px!important;
    font-size:9px!important;
  }

  #jlpt180-ag-root > .ag-mobile-v4,
  #jlpt180-ag-root .ag-mobile-v4{
    padding-top:64px!important;
  }
}



/* v078: desktop polish fixes */
@media (min-width:821px){
  #jlpt180-ag-root .ag-actions button{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    color:#1f2937!important;
    font-size:0!important;
    background:linear-gradient(180deg,#ffffff,#f5fbf5)!important;
    border:1px solid rgba(89,122,98,.16)!important;
    box-shadow:0 8px 18px rgba(53,109,72,.08)!important;
  }

  #jlpt180-ag-root .ag-actions button[aria-label="Thông báo"]::before{
    content:"🔔"!important;
    font-size:18px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-actions button[aria-label="Hồ sơ"]::before{
    content:"👤"!important;
    font-size:18px!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-step a{
    min-height:46px!important;
    border-radius:16px!important;
    border:0!important;
    color:#fff!important;
    font-weight:900!important;
    white-space:nowrap!important;
    transition:transform .08s ease,border-bottom-width .08s ease!important;
    box-shadow:none!important;
  }

  #jlpt180-ag-root .ag-step a:active{
    transform:translateY(4px)!important;
    border-bottom-width:0!important;
  }

  #jlpt180-ag-root .ag-step:nth-child(1) a{background:#FF9600!important;border-bottom:4px solid #CC7800!important;}
  #jlpt180-ag-root .ag-step:nth-child(2) a{background:#1CB0F6!important;border-bottom:4px solid #1899D6!important;}
  #jlpt180-ag-root .ag-step:nth-child(3) a{background:#CE82FF!important;border-bottom:4px solid #A559CE!important;}
  #jlpt180-ag-root .ag-step:nth-child(4) a{background:#FFC800!important;border-bottom:4px solid #E5B400!important;color:#5A3B00!important;}
  #jlpt180-ag-root .ag-step:nth-child(5) a,
  #jlpt180-ag-root .ag-step.reward a{background:#FFB020!important;border-bottom:4px solid #D68900!important;color:#fff!important;}

  #jlpt180-ag-root .ag-route-levels button{
    color:#666!important;
    background:#fff!important;
    border:2px solid #E5E5E5!important;
    border-bottom:4px solid #D1D1D1!important;
  }

  #jlpt180-ag-root .ag-route-levels button.is-active{
    color:#fff!important;
    background:#58CC02!important;
    border-color:#58CC02!important;
    border-bottom-color:#58A700!important;
  }

  #jlpt180-ag-root .ag-decks div{
    padding-bottom:18px!important;
  }

  #jlpt180-ag-root .ag-decks i{
    display:block!important;
    margin-top:10px!important;
    margin-bottom:4px!important;
    height:8px!important;
    border-radius:99px!important;
  }

  #jlpt180-ag-root .ag-grid{
    align-items:start!important;
  }
}



/* v079: desktop cleanup and button spacing */
@media (min-width:821px){
  /* Remove requested lower cards */
  #jlpt180-ag-root .ag-library,
  #jlpt180-ag-root .ag-activity{
    display:none!important;
  }

  /* Keep remaining goal card neat after removing library/activity */
  #jlpt180-ag-root .ag-grid{
    display:grid!important;
    grid-template-columns:minmax(320px, 520px)!important;
    justify-content:start!important;
    margin-top:18px!important;
  }

  #jlpt180-ag-root .ag-goal{
    width:100%!important;
    max-width:520px!important;
  }

  /* Darker purple CTA for Grammar card */
  #jlpt180-ag-root .ag-step:nth-child(3) a{
    background:#A855F7!important;
    border-bottom:4px solid #7E22CE!important;
    color:#fff!important;
    text-shadow:0 1px 0 rgba(0,0,0,.12)!important;
  }

  /* Give Đổi lộ trình breathing room from N1 */
  #jlpt180-ag-root .ag-route-change{
    margin-left:16px!important;
    flex-shrink:0!important;
  }

  #jlpt180-ag-root .ag-route-levels{
    gap:8px!important;
  }
}

/* v082: PC review lesson modal uses 3-column study layout */
#jlpt180-ag-root .ag-screen-review .ag-answer-actions{
  display:none!important;
}

@media (min-width:821px){
  #jlpt180-ag-root .ag-app-overlay{
    padding:2.5vh 2.5vw!important;
  }

  #jlpt180-ag-root .ag-app-window{
    width:95vw!important;
    height:95vh!important;
    max-width:95vw!important;
    max-height:95vh!important;
    grid-template-rows:auto 6px minmax(0,1fr) auto!important;
  }

  #jlpt180-ag-root .ag-app-body{
    min-height:0!important;
    padding:18px 28px!important;
    overflow:auto!important;
  }

  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-app-body,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-app-body{
    grid-row:3!important;
  }

  #jlpt180-ag-root .ag-screen-review.is-active{
    display:flex!important;
    flex-direction:column!important;
    height:100%!important;
    min-height:0!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-child-hero-strip{
    display:none!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-app-layout.review{
    grid-template-columns:250px minmax(0,1fr) 300px!important;
    gap:18px!important;
    align-items:stretch!important;
    height:100%!important;
    min-height:0!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-app-side{
    max-height:none!important;
    min-height:0!important;
    overflow:auto!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-app-main-card{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:100%!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-study-card{
    flex:1 1 auto!important;
    min-height:0!important;
    height:100%!important;
    padding:clamp(24px,3vw,54px)!important;
    border-radius:28px!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-study-card ruby{
    font-size:clamp(72px,8vw,140px)!important;
    line-height:1!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-study-card rt{
    font-size:clamp(18px,1.5vw,26px)!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-study-card>b{
    font-size:clamp(24px,2.4vw,38px)!important;
  }

  #jlpt180-ag-root .ag-screen-review .ag-study-card p{
    max-width:620px!important;
    font-size:16px!important;
  }

  #jlpt180-ag-root .ag-lesson-rail{
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    min-width:0!important;
    min-height:0!important;
    overflow:auto!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-session-summary{
    margin:0!important;
    padding:12px!important;
    border-radius:20px!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-session-summary-head{
    display:block!important;
    margin-bottom:8px!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-session-summary-head b{
    font-size:16px!important;
    line-height:1.15!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-session-summary-head small{
    display:inline-flex!important;
    margin-top:8px!important;
    max-width:100%!important;
    white-space:normal!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-session-summary-grid{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    overflow:visible!important;
    padding:0!important;
    width:100%!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-session-summary-grid>div{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:8px 10px!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-session-summary-grid>div span{
    font-size:10px!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-session-summary-grid>div b{
    margin-top:4px!important;
    font-size:17px!important;
    line-height:1.05!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-context-pills{
    display:flex!important;
    flex-direction:column!important;
    flex-wrap:nowrap!important;
    gap:6px!important;
    margin:0!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-context-pills span{
    flex:0 0 auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:28px!important;
    padding:6px 12px!important;
    justify-content:flex-start!important;
    white-space:normal!important;
    line-height:1.25!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-detail-strip{
    display:flex!important;
    flex-direction:column!important;
    margin:0!important;
    padding:10px 12px!important;
    gap:5px!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-detail-strip b{
    font-size:12px!important;
    line-height:1.25!important;
  }

  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-app-foot,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-app-foot{
    display:grid!important;
    grid-row:4!important;
    grid-template-columns:250px minmax(0,1fr) 300px!important;
    gap:18px!important;
    padding:12px 28px 20px!important;
    align-items:center!important;
  }

  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-srs-foot,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-srs-foot{
    grid-column:2!important;
    width:100%!important;
    gap:12px!important;
  }

  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-srs-foot button,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-srs-foot button{
    min-height:74px!important;
    border-radius:20px!important;
  }
}

/* v083: route wrapping, compact lesson rail, and 5 child-page footer menu */
#jlpt180-ag-root .ag-app-foot .ag-foot-nav,
#jlpt180-ag-root .ag-app-foot .ag-srs-foot{
  display:none!important;
}

#jlpt180-ag-root .ag-app-window[data-active-screen] .ag-foot-nav,
#jlpt180-ag-root .ag-app-window[data-child-screen] .ag-foot-nav,
#jlpt180-ag-root .ag-app-window[data-active-screen] .ag-srs-foot,
#jlpt180-ag-root .ag-app-window[data-child-screen] .ag-srs-foot{
  display:none!important;
}

#jlpt180-ag-root .ag-child-page-menu{
  display:grid!important;
  grid-column:1 / -1!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:8px!important;
  width:100%!important;
  min-width:0!important;
}

#jlpt180-ag-root .ag-child-page-menu button{
  min-width:0!important;
  min-height:54px!important;
  padding:7px 6px!important;
  border-radius:16px!important;
  border:1px solid rgba(89,122,98,.16)!important;
  background:#fff!important;
  color:#52616e!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  font-weight:900!important;
  box-shadow:0 4px 10px rgba(53,109,72,.06)!important;
}

#jlpt180-ag-root .ag-child-page-menu button.is-active{
  background:#58CC02!important;
  border-color:#58CC02!important;
  border-bottom:4px solid #58A700!important;
  color:#fff!important;
}

#jlpt180-ag-root .ag-child-page-menu span,
#jlpt180-ag-root .ag-child-page-menu b{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  line-height:1!important;
}

#jlpt180-ag-root .ag-child-page-menu span{
  font-size:12px!important;
}

#jlpt180-ag-root .ag-child-page-menu b{
  font-size:11px!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-align:center!important;
}

@media (min-width:821px){
  #jlpt180-ag-root .ag-route-switcher{
    display:flex!important;
    align-items:center!important;
    gap:18px!important;
  }

  #jlpt180-ag-root .ag-route-current{
    flex:1 1 auto!important;
    min-width:0!important;
    padding-right:20px!important;
  }

  #jlpt180-ag-root .ag-route-current b{
    display:block!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.4!important;
  }

  #jlpt180-ag-root .ag-route-levels,
  #jlpt180-ag-root .ag-route-change{
    flex:0 0 auto!important;
  }

  #jlpt180-ag-root .ag-step b{
    margin-bottom:12px!important;
  }

  #jlpt180-ag-root .ag-lesson-rail{
    padding:0 14px 0 0!important;
    box-sizing:border-box!important;
    scrollbar-gutter:stable!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-context-pills{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    margin-top:10px!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-lesson-rail .ag-context-pills span{
    flex:0 0 auto!important;
    width:auto!important;
    min-width:0!important;
    min-height:0!important;
    padding:6px 12px!important;
    border-radius:20px!important;
    background:#F0F4F8!important;
    border:1px solid #E5E5E5!important;
    font-size:12px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .ag-app-window .ag-app-foot{
    display:block!important;
  }

  #jlpt180-ag-root .ag-app-window[data-active-screen="review"] .ag-app-foot,
  #jlpt180-ag-root .ag-app-window[data-child-screen="review"] .ag-app-foot{
    display:block!important;
    grid-row:4!important;
  }

  #jlpt180-ag-root .ag-child-page-menu button{
    min-height:62px!important;
  }

  #jlpt180-ag-root .ag-child-page-menu b{
    font-size:12px!important;
  }
}

@media (min-width:1024px){
  #jlpt180-ag-root .ag-app-window .ag-app-foot{
    padding-left:270px!important;
    padding-right:320px!important;
  }

  #jlpt180-ag-root .ag-app-window[data-active-screen] .ag-app-foot,
  #jlpt180-ag-root .ag-app-window[data-child-screen] .ag-app-foot{
    display:block!important;
    padding-left:270px!important;
    padding-right:320px!important;
  }
}

@media (max-width:430px){
  #jlpt180-ag-root .ag-child-page-menu{
    gap:6px!important;
  }

  #jlpt180-ag-root .ag-child-page-menu button{
    min-height:52px!important;
    border-radius:14px!important;
  }

  #jlpt180-ag-root .ag-child-page-menu b{
    font-size:10px!important;
  }
}

/* v084: stabilize dashboard lower cards and route modal interaction */
#jlpt180-ag-root .ag-route-modal{
  z-index:1000001!important;
}

@media (min-width:821px){
  #jlpt180-ag-root .ag-board{
    overflow:visible!important;
    padding-bottom:28px!important;
  }

  #jlpt180-ag-root .ag-board .ag-steps{
    align-items:stretch!important;
  }

  #jlpt180-ag-root .ag-board .ag-step{
    min-height:238px!important;
    height:auto!important;
    padding-bottom:24px!important;
    overflow:visible!important;
  }

  #jlpt180-ag-root .ag-board .ag-step b{
    margin:8px 0 12px!important;
  }

  #jlpt180-ag-root .ag-board .ag-step a{
    margin-top:0!important;
  }
}

/* v086: let the desktop dashboard expand so lower panels are not clipped */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    height:auto!important;
    min-height:100vh!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:42px!important;
  }

  html body #jlpt180-ag-root > .ag-shell{
    height:auto!important;
    min-height:calc(100vh - 52px)!important;
    max-height:none!important;
    align-items:start!important;
    overflow:visible!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    height:auto!important;
    min-height:calc(100vh - 52px)!important;
    overflow:visible!important;
  }

  html body #jlpt180-ag-root .ag-main{
    height:auto!important;
    min-height:calc(100vh - 52px)!important;
    max-height:none!important;
    overflow:visible!important;
    padding-bottom:42px!important;
  }

  html body #jlpt180-ag-root .ag-board{
    margin-bottom:18px!important;
    padding-bottom:34px!important;
    overflow:visible!important;
  }

  html body #jlpt180-ag-root .ag-grid{
    position:relative!important;
    z-index:0!important;
    margin-top:18px!important;
  }
}

@media (max-width:820px){
  html body #jlpt180-ag-root > .ag-mobile-v4{
    padding-bottom:calc(108px + env(safe-area-inset-bottom))!important;
  }

  html body #jlpt180-ag-root > .ag-mobile-v4 > .m4-scroll-area{
    padding-bottom:calc(128px + env(safe-area-inset-bottom))!important;
  }
}

/* v087: restore desktop top safe space after the full-page height fix */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    padding-top:max(34px, env(safe-area-inset-top))!important;
    padding-right:18px!important;
    padding-bottom:42px!important;
    padding-left:18px!important;
    scroll-padding-top:34px!important;
  }

  html body #jlpt180-ag-root > .ag-shell,
  html body #jlpt180-ag-root .ag-sidebar,
  html body #jlpt180-ag-root .ag-main{
    min-height:calc(100vh - 76px)!important;
  }
}

/* v088: fixed desktop shell, only the main content panel scrolls */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow:hidden!important;
    padding:24px 18px!important;
  }

  html body #jlpt180-ag-root > .ag-shell{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    gap:18px!important;
    width:min(100%,1760px)!important;
    height:calc(100vh - 48px)!important;
    height:calc(100dvh - 48px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 48px)!important;
    margin:0 auto!important;
    overflow:hidden!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    flex:0 0 248px!important;
    width:248px!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    flex-shrink:0!important;
  }

  html body #jlpt180-ag-root .ag-main{
    flex:1 1 auto!important;
    width:auto!important;
    min-width:0!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    padding-top:24px!important;
    padding-bottom:42px!important;
  }

  html body #jlpt180-ag-root .ag-topbar{
    display:flex!important;
    justify-content:space-between!important;
    align-items:center!important;
    width:100%!important;
    margin-bottom:24px!important;
  }
}

/* v089: keep route title and level tabs inside the route card */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-route-switcher{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(360px,auto) auto!important;
    align-items:center!important;
    gap:18px!important;
    overflow:hidden!important;
  }

  html body #jlpt180-ag-root .ag-route-current{
    min-width:0!important;
    max-width:100%!important;
  }

  html body #jlpt180-ag-root .ag-route-current b{
    max-width:100%!important;
    overflow-wrap:anywhere!important;
    word-break:normal!important;
    line-height:1.35!important;
  }

  html body #jlpt180-ag-root .ag-route-levels{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;
    min-width:0!important;
    max-width:100%!important;
    gap:8px!important;
    padding:4px!important;
    overflow:hidden!important;
  }

  html body #jlpt180-ag-root .ag-route-levels button{
    flex:0 1 78px!important;
    min-width:62px!important;
    max-width:92px!important;
    padding-left:10px!important;
    padding-right:10px!important;
    white-space:nowrap!important;
  }

  html body #jlpt180-ag-root .ag-route-levels [data-route-level="MN"]{
    flex-basis:92px!important;
    min-width:86px!important;
    max-width:108px!important;
  }

  html body #jlpt180-ag-root .ag-route-change{
    flex:0 0 auto!important;
    min-width:92px!important;
    white-space:nowrap!important;
  }
}

@media (min-width:821px) and (max-width:1500px){
  html body #jlpt180-ag-root .ag-route-switcher{
    grid-template-columns:minmax(0,1fr) minmax(390px,auto) auto!important;
    gap:12px!important;
  }

  html body #jlpt180-ag-root .ag-route-levels{
    gap:6px!important;
  }

  html body #jlpt180-ag-root .ag-route-levels button{
    flex-basis:52px!important;
    min-width:50px!important;
    max-width:66px!important;
    padding-left:8px!important;
    padding-right:8px!important;
  }

  html body #jlpt180-ag-root .ag-route-levels [data-route-level="MN"]{
    flex-basis:88px!important;
    min-width:84px!important;
    max-width:96px!important;
  }
}

/* v117: stable app shell and compact route title */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    width:100vw!important;
    max-width:100vw!important;
    min-height:100dvh!important;
    height:100dvh!important;
    overflow:hidden!important;
    padding:24px!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
  }

  html body #jlpt180-ag-root > .ag-shell{
    display:grid!important;
    grid-template-columns:280px minmax(0,1fr)!important;
    gap:24px!important;
    width:min(100%,1720px)!important;
    max-width:1720px!important;
    height:calc(100dvh - 48px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 48px)!important;
    margin:0 auto!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    z-index:2!important;
    grid-column:1!important;
    width:280px!important;
    min-width:280px!important;
    max-width:280px!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    transform:none!important;
    overflow:hidden auto!important;
  }

  html body #jlpt180-ag-root .ag-main{
    position:relative!important;
    z-index:1!important;
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
    overflow:hidden auto!important;
    padding:28px 28px 44px!important;
  }

  html body #jlpt180-ag-root .ag-route-switcher{
    grid-template-columns:minmax(280px,1fr) auto auto!important;
    align-items:center!important;
    gap:18px!important;
  }

  html body #jlpt180-ag-root .ag-route-current b{
    font-size:clamp(26px,2.35vw,40px)!important;
    line-height:1.18!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:100%!important;
  }

  html body #jlpt180-ag-root .ag-route-current b i[data-ag-route="phase"]{
    white-space:nowrap!important;
  }

  html body #jlpt180-ag-root .ag-route-current small{
    max-width:620px!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

@media (min-width:821px) and (max-width:1180px){
  html body #jlpt180-ag-root{
    padding:16px!important;
  }

  html body #jlpt180-ag-root > .ag-shell{
    grid-template-columns:236px minmax(0,1fr)!important;
    gap:16px!important;
    height:calc(100dvh - 32px)!important;
    max-height:calc(100dvh - 32px)!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    width:236px!important;
    min-width:236px!important;
    max-width:236px!important;
  }

  html body #jlpt180-ag-root .ag-main{
    padding:20px 20px 36px!important;
  }
}

@media (max-width:820px){
  html body #jlpt180-ag-root > .ag-shell{
    display:none!important;
  }

  html body #jlpt180-ag-root > .ag-mobile-v4{
    display:block!important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   v118-polish: Dashboard-only visual polish
   Scope: .ag-shell desktop dashboard ONLY (min-width:821px)
   Does NOT touch: mobile .ag-mobile-v4, learn-app-shadow, child screens
   Prefix for new classes: ag-dash-*
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Color system override ── */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    --ag-green:#35B85A!important;
    --ag-green-dark:#208544!important;
    --ag-ink:#203047!important;
    --ag-muted:#66758A!important;
    --ag-line:rgba(44,96,60,.12)!important;
    --ag-shadow:0 12px 36px rgba(30,80,45,.10)!important;
    --ag-card:rgba(255,255,255,.92)!important;
    --ag-card-alt:#FBFFFC!important;
    color:var(--ag-ink)!important;
    font-family:"Be Vietnam Pro",Nunito,"Noto Sans JP","Hiragino Sans","Yu Gothic",system-ui,-apple-system,sans-serif!important;
  }
}

/* ── 2. Background: reduce flat-white feel, subtle gradient depth ── */
@media (min-width:821px){
  html body #jlpt180-ag-root{
    background:
      linear-gradient(168deg,rgba(235,250,240,.72) 0%,rgba(220,245,230,.48) 40%,rgba(240,248,255,.56) 100%),
      url("bg-desktop.webp") center/cover no-repeat!important;
  }
}

/* ── 3. Sidebar polish ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-sidebar{
    background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(251,255,252,.82))!important;
    border:1px solid rgba(44,96,60,.10)!important;
    box-shadow:0 8px 32px rgba(30,80,45,.08)!important;
    backdrop-filter:blur(24px)!important;
    -webkit-backdrop-filter:blur(24px)!important;
    border-radius:26px!important;
  }

  html body #jlpt180-ag-root .ag-brand{
    gap:11px!important;
    margin-bottom:18px!important;
    padding-bottom:16px!important;
    border-bottom:1px solid rgba(44,96,60,.08)!important;
  }

  html body #jlpt180-ag-root .ag-brand img{
    width:44px!important;
    height:44px!important;
    border-radius:14px!important;
    box-shadow:0 4px 12px rgba(30,80,45,.12)!important;
  }

  html body #jlpt180-ag-root .ag-brand b{
    font-size:21px!important;
    color:#203047!important;
    letter-spacing:-.03em!important;
    font-weight:900!important;
  }

  html body #jlpt180-ag-root .ag-brand span{
    background:linear-gradient(135deg,#35B85A,#6DD98E)!important;
    font-size:10.5px!important;
    font-weight:800!important;
    padding:2px 9px!important;
    letter-spacing:.02em!important;
  }

  html body #jlpt180-ag-root .ag-menu{
    gap:3px!important;
  }

  html body #jlpt180-ag-root .ag-menu a{
    min-height:42px!important;
    padding:0 13px!important;
    border-radius:14px!important;
    font-size:13.5px!important;
    font-weight:700!important;
    color:#4A5568!important;
    transition:all .16s ease!important;
    border:1px solid transparent!important;
  }

  html body #jlpt180-ag-root .ag-menu a span{
    width:26px!important;
    height:26px!important;
    display:grid!important;
    place-items:center!important;
    font-size:15px!important;
    color:#66758A!important;
    transition:color .16s ease!important;
  }

  html body #jlpt180-ag-root .ag-menu a:hover{
    background:rgba(53,184,90,.06)!important;
    color:#203047!important;
    border-color:rgba(44,96,60,.06)!important;
  }

  html body #jlpt180-ag-root .ag-menu a:hover span{
    color:#35B85A!important;
  }

  html body #jlpt180-ag-root .ag-menu a.is-active{
    background:linear-gradient(135deg,rgba(53,184,90,.14),rgba(53,184,90,.06))!important;
    color:#208544!important;
    border-color:rgba(53,184,90,.18)!important;
    box-shadow:0 2px 8px rgba(53,184,90,.08)!important;
  }

  html body #jlpt180-ag-root .ag-menu a.is-active span{
    color:#35B85A!important;
  }

  html body #jlpt180-ag-root .ag-user-card{
    margin-top:auto!important;
    min-height:128px!important;
    padding:14px!important;
    border-radius:20px!important;
    background:linear-gradient(135deg,rgba(251,255,252,.92),rgba(240,255,245,.80))!important;
    border:1px solid rgba(44,96,60,.10)!important;
    box-shadow:0 4px 16px rgba(30,80,45,.06)!important;
  }

  html body #jlpt180-ag-root .ag-user-card small{
    color:#66758A!important;
    font-size:11px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
  }

  html body #jlpt180-ag-root .ag-user-card b{
    font-size:24px!important;
    color:#203047!important;
    letter-spacing:-.02em!important;
  }

  html body #jlpt180-ag-root .ag-user-card img{
    width:92px!important;
    height:92px!important;
    right:-6px!important;
    bottom:-6px!important;
    opacity:.92!important;
  }

  html body #jlpt180-ag-root .ag-mini-progress{
    width:110px!important;
    height:7px!important;
    margin-top:12px!important;
    border-radius:999px!important;
    background:rgba(44,96,60,.08)!important;
  }

  html body #jlpt180-ag-root .ag-mini-progress i{
    background:linear-gradient(90deg,#35B85A,#6DD98E)!important;
  }
}

/* ── 4. Main panel ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-main{
    background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(251,255,252,.84))!important;
    border:1px solid rgba(44,96,60,.10)!important;
    box-shadow:0 12px 40px rgba(30,80,45,.08)!important;
    backdrop-filter:blur(20px)!important;
    -webkit-backdrop-filter:blur(20px)!important;
    border-radius:26px!important;
  }
}

/* ── 5. Topbar ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-eyebrow{
    color:#66758A!important;
    font-size:12.5px!important;
    font-weight:650!important;
  }

  html body #jlpt180-ag-root .ag-topbar h1{
    font-size:26px!important;
    color:#203047!important;
    letter-spacing:-.03em!important;
    font-weight:900!important;
  }

  html body #jlpt180-ag-root .ag-actions button{
    width:40px!important;
    height:40px!important;
    border-radius:14px!important;
    border:1px solid rgba(44,96,60,.10)!important;
    background:rgba(255,255,255,.88)!important;
    box-shadow:0 4px 12px rgba(30,80,45,.06)!important;
    transition:all .14s ease!important;
  }

  html body #jlpt180-ag-root .ag-actions button:hover{
    box-shadow:0 6px 18px rgba(30,80,45,.10)!important;
    border-color:rgba(53,184,90,.20)!important;
  }
}

/* ── 6. Stat cards ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-hero{
    min-height:108px!important;
    gap:12px!important;
    margin-bottom:14px!important;
    padding-right:108px!important;
  }

  html body #jlpt180-ag-root .ag-stat-card{
    min-height:102px!important;
    padding:14px 16px!important;
    border-radius:18px!important;
    border:1px solid rgba(44,96,60,.10)!important;
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 6px 20px rgba(30,80,45,.07)!important;
    transition:box-shadow .16s ease,transform .16s ease!important;
  }

  html body #jlpt180-ag-root .ag-stat-card:hover{
    box-shadow:0 10px 28px rgba(30,80,45,.11)!important;
    transform:translateY(-1px)!important;
  }

  html body #jlpt180-ag-root .ag-stat-card span{
    font-size:12px!important;
    font-weight:800!important;
    color:#66758A!important;
    letter-spacing:.01em!important;
  }

  html body #jlpt180-ag-root .ag-stat-card b{
    margin-top:8px!important;
    font-size:26px!important;
    font-weight:900!important;
    letter-spacing:-.03em!important;
    line-height:1!important;
  }

  html body #jlpt180-ag-root .ag-stat-card.fire b{color:#E8622C!important;}
  html body #jlpt180-ag-root .ag-stat-card.xp b{color:#4A7AE8!important;}
  html body #jlpt180-ag-root .ag-stat-card.level b{color:#D4960C!important;}
  html body #jlpt180-ag-root .ag-stat-card.cards b{color:#208544!important;}

  html body #jlpt180-ag-root .ag-stat-card small{
    margin-top:6px!important;
    font-size:11.5px!important;
    font-weight:700!important;
    color:#66758A!important;
  }

  html body #jlpt180-ag-root .ag-hero-mascot{
    width:114px!important;
    height:114px!important;
    right:0!important;
    bottom:-6px!important;
    filter:drop-shadow(0 6px 16px rgba(30,80,45,.12))!important;
  }
}

/* ── 7. Route switcher card ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-route-switcher{
    border:1px solid rgba(44,96,60,.10)!important;
    border-radius:22px!important;
    background:linear-gradient(135deg,rgba(240,255,245,.90),rgba(235,248,255,.78))!important;
    box-shadow:0 6px 22px rgba(30,80,45,.06)!important;
    padding:14px 18px!important;
    margin-bottom:14px!important;
  }

  html body #jlpt180-ag-root .ag-route-current span{
    color:#66758A!important;
    font-size:11px!important;
    font-weight:800!important;
    text-transform:uppercase!important;
    letter-spacing:.05em!important;
  }

  html body #jlpt180-ag-root .ag-route-current b{
    color:#203047!important;
  }

  html body #jlpt180-ag-root .ag-route-current small{
    color:#66758A!important;
    font-size:12px!important;
  }

  html body #jlpt180-ag-root .ag-route-levels{
    background:rgba(255,255,255,.72)!important;
    border:1px solid rgba(44,96,60,.10)!important;
    border-radius:999px!important;
    padding:4px!important;
    gap:4px!important;
  }

  html body #jlpt180-ag-root .ag-route-levels button{
    height:34px!important;
    border-radius:999px!important;
    font-size:13px!important;
    font-weight:800!important;
    color:#4A5568!important;
    background:transparent!important;
    border:none!important;
    border-bottom:none!important;
    transition:all .14s ease!important;
  }

  html body #jlpt180-ag-root .ag-route-levels button:hover{
    background:rgba(53,184,90,.08)!important;
    color:#208544!important;
  }

  html body #jlpt180-ag-root .ag-route-levels button.is-active{
    color:#fff!important;
    background:linear-gradient(180deg,#35B85A,#208544)!important;
    box-shadow:0 4px 14px rgba(53,184,90,.28)!important;
    border:none!important;
    border-bottom:none!important;
  }

  html body #jlpt180-ag-root .ag-route-change{
    min-height:38px!important;
    padding:0 20px!important;
    border-radius:999px!important;
    font-size:13px!important;
    font-weight:800!important;
    color:#fff!important;
    background:linear-gradient(180deg,#35B85A,#208544)!important;
    box-shadow:0 4px 14px rgba(53,184,90,.22)!important;
    border:none!important;
    transition:all .14s ease!important;
  }

  html body #jlpt180-ag-root .ag-route-change:hover{
    box-shadow:0 6px 20px rgba(53,184,90,.30)!important;
    transform:translateY(-1px)!important;
  }
}

/* ── 8. Board / Steps section ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-board{
    border:1px solid rgba(44,96,60,.10)!important;
    background:rgba(255,255,255,.88)!important;
    border-radius:22px!important;
    box-shadow:0 8px 28px rgba(30,80,45,.06)!important;
    padding:18px!important;
    padding-bottom:28px!important;
  }

  html body #jlpt180-ag-root .ag-section-head h2{
    font-size:19px!important;
    font-weight:900!important;
    color:#203047!important;
    letter-spacing:-.02em!important;
  }

  html body #jlpt180-ag-root .ag-section-head p{
    color:#66758A!important;
    font-size:12.5px!important;
  }

  html body #jlpt180-ag-root .ag-section-head > button{
    border:1px solid rgba(53,184,90,.20)!important;
    background:rgba(255,255,255,.80)!important;
    color:#208544!important;
    border-radius:999px!important;
    padding:8px 16px!important;
    font-size:12.5px!important;
    font-weight:800!important;
    transition:all .14s ease!important;
  }

  html body #jlpt180-ag-root .ag-section-head > button:hover{
    background:rgba(53,184,90,.08)!important;
    border-color:rgba(53,184,90,.30)!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-steps{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:12px!important;
    align-items:stretch!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step{
    min-height:244px!important;
    height:auto!important;
    padding:14px 12px 16px!important;
    border-radius:20px!important;
    border:1px solid rgba(44,96,60,.10)!important;
    background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(251,255,252,.88))!important;
    box-shadow:0 6px 20px rgba(30,80,45,.06)!important;
    overflow:visible!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    text-align:center!important;
    transition:box-shadow .16s ease,transform .16s ease!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step:hover{
    box-shadow:0 10px 30px rgba(30,80,45,.10)!important;
    transform:translateY(-2px)!important;
  }

  html body #jlpt180-ag-root .ag-step em{
    position:absolute!important;
    top:10px!important;
    left:10px!important;
    width:28px!important;
    height:28px!important;
    border-radius:999px!important;
    font-size:13px!important;
    font-weight:900!important;
    font-style:normal!important;
    display:grid!important;
    place-items:center!important;
    color:#fff!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step img{
    width:52px!important;
    height:52px!important;
    margin:8px auto 0!important;
    filter:drop-shadow(0 3px 8px rgba(30,80,45,.10))!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step h3{
    margin:8px 0 4px!important;
    font-size:15.5px!important;
    font-weight:800!important;
    color:#203047!important;
    line-height:1.2!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step p{
    min-height:0!important;
    height:auto!important;
    max-height:36px!important;
    overflow:hidden!important;
    margin:0!important;
    font-size:11.5px!important;
    line-height:1.38!important;
    color:#66758A!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step b{
    margin:8px 0 auto!important;
    font-size:13px!important;
    font-weight:800!important;
    color:#203047!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step a{
    width:100%!important;
    min-height:42px!important;
    max-height:42px!important;
    margin-top:12px!important;
    border-radius:14px!important;
    font-size:13px!important;
    font-weight:900!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-decoration:none!important;
    color:#fff!important;
    transition:transform .08s ease,box-shadow .14s ease!important;
    border:none!important;
    border-bottom:3px solid rgba(0,0,0,.12)!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step a:active{
    transform:translateY(2px)!important;
    border-bottom-width:0!important;
  }

  html body #jlpt180-ag-root .ag-step:nth-child(1) a{
    background:linear-gradient(180deg,#FF9600,#E88600)!important;
    border-bottom-color:#CC7400!important;
  }
  html body #jlpt180-ag-root .ag-step:nth-child(2) a{
    background:linear-gradient(180deg,#1CB0F6,#18A0E0)!important;
    border-bottom-color:#1690C8!important;
  }
  html body #jlpt180-ag-root .ag-step:nth-child(3) a{
    background:linear-gradient(180deg,#A855F7,#9333EA)!important;
    border-bottom-color:#7E22CE!important;
  }
  html body #jlpt180-ag-root .ag-step:nth-child(4) a{
    background:linear-gradient(180deg,#FFC800,#E8B500)!important;
    border-bottom-color:#D0A000!important;
    color:#5A3B00!important;
  }
  html body #jlpt180-ag-root .ag-step:nth-child(5) a,
  html body #jlpt180-ag-root .ag-step.reward a{
    background:linear-gradient(180deg,#FFB020,#F0A010)!important;
    border-bottom-color:#D68900!important;
    color:#fff!important;
  }

  html body #jlpt180-ag-root .ag-step:nth-child(1) em{
    background:linear-gradient(135deg,#35B85A,#6DD98E)!important;
    box-shadow:0 4px 12px rgba(53,184,90,.25)!important;
  }
  html body #jlpt180-ag-root .ag-step:nth-child(2) em,
  html body #jlpt180-ag-root .ag-step[data-step="vocab"] em{
    background:linear-gradient(135deg,#1CB0F6,#60CCFF)!important;
    box-shadow:0 4px 12px rgba(28,176,246,.25)!important;
  }
  html body #jlpt180-ag-root .ag-step:nth-child(3) em,
  html body #jlpt180-ag-root .ag-step[data-step="grammar"] em{
    background:linear-gradient(135deg,#A855F7,#C88AFF)!important;
    box-shadow:0 4px 12px rgba(168,85,247,.25)!important;
  }
  html body #jlpt180-ag-root .ag-step:nth-child(4) em,
  html body #jlpt180-ag-root .ag-step[data-step="quiz"] em{
    background:linear-gradient(135deg,#F07CA3,#FFB4C8)!important;
    box-shadow:0 4px 12px rgba(240,124,163,.25)!important;
  }
  html body #jlpt180-ag-root .ag-step:nth-child(5) em,
  html body #jlpt180-ag-root .ag-step.reward em{
    background:linear-gradient(135deg,#F1B844,#FFD86E)!important;
    box-shadow:0 4px 12px rgba(241,184,68,.25)!important;
  }
}

/* ── 9. Lower grid panels ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-panel{
    border:1px solid rgba(44,96,60,.10)!important;
    background:rgba(255,255,255,.90)!important;
    border-radius:20px!important;
    box-shadow:0 6px 20px rgba(30,80,45,.06)!important;
  }

  html body #jlpt180-ag-root .ag-panel h2{
    font-size:18px!important;
    font-weight:900!important;
    color:#203047!important;
  }

  html body #jlpt180-ag-root .ag-goal{
    text-align:center!important;
  }

  html body #jlpt180-ag-root .ag-ring{
    background:
      radial-gradient(circle at center,#fff 58%,transparent 59%),
      conic-gradient(#35B85A 0 60%,rgba(44,96,60,.08) 60% 100%)!important;
  }

  html body #jlpt180-ag-root .ag-ring b{
    font-size:24px!important;
    color:#203047!important;
    font-weight:900!important;
  }

  html body #jlpt180-ag-root .ag-ring span{
    color:#66758A!important;
  }

  html body #jlpt180-ag-root .ag-goal p{
    color:#66758A!important;
    font-size:12.5px!important;
    line-height:1.5!important;
  }

  html body #jlpt180-ag-root .ag-decks div{
    border:1px solid rgba(44,96,60,.08)!important;
    background:rgba(251,255,252,.90)!important;
    border-radius:16px!important;
    transition:box-shadow .14s ease!important;
  }

  html body #jlpt180-ag-root .ag-decks div:hover{
    box-shadow:0 4px 14px rgba(30,80,45,.08)!important;
  }

  html body #jlpt180-ag-root .ag-decks b{
    font-size:13px!important;
    color:#203047!important;
    font-weight:800!important;
  }

  html body #jlpt180-ag-root .ag-decks span{
    color:#66758A!important;
    font-size:11.5px!important;
  }

  html body #jlpt180-ag-root .ag-decks i{
    background:linear-gradient(90deg,#35B85A,#6DD98E)!important;
    height:6px!important;
    border-radius:999px!important;
  }

  html body #jlpt180-ag-root .ag-activity li{
    border:1px solid rgba(44,96,60,.08)!important;
    background:rgba(255,255,255,.80)!important;
    border-radius:14px!important;
  }

  html body #jlpt180-ag-root .ag-activity li span{
    background:rgba(53,184,90,.08)!important;
    border-radius:12px!important;
  }

  html body #jlpt180-ag-root .ag-activity li b{
    font-size:13px!important;
    color:#203047!important;
  }

  html body #jlpt180-ag-root .ag-activity li em{
    color:#208544!important;
    font-weight:800!important;
  }
}

/* ── 10. Route modal polish ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-route-dialog{
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(251,255,252,.96))!important;
    border:1px solid rgba(44,96,60,.12)!important;
    box-shadow:0 32px 80px rgba(15,35,25,.20)!important;
    border-radius:26px!important;
  }

  html body #jlpt180-ag-root .ag-route-dialog h2{
    color:#203047!important;
  }

  html body #jlpt180-ag-root .ag-route-dialog p{
    color:#66758A!important;
  }

  html body #jlpt180-ag-root .ag-route-options button{
    border:1px solid rgba(44,96,60,.12)!important;
    background:rgba(255,255,255,.88)!important;
    border-radius:18px!important;
    transition:all .14s ease!important;
  }

  html body #jlpt180-ag-root .ag-route-options button:hover{
    border-color:rgba(53,184,90,.36)!important;
    box-shadow:0 8px 24px rgba(53,184,90,.12)!important;
    transform:translateY(-1px)!important;
  }

  html body #jlpt180-ag-root .ag-route-options b{
    color:#208544!important;
  }

  html body #jlpt180-ag-root .ag-route-options span{
    color:#66758A!important;
  }

  html body #jlpt180-ag-root .ag-route-close{
    border:1px solid rgba(44,96,60,.10)!important;
    background:#fff!important;
    color:#66758A!important;
    transition:all .14s ease!important;
  }

  html body #jlpt180-ag-root .ag-route-close:hover{
    background:rgba(53,184,90,.06)!important;
    color:#203047!important;
  }
}

/* ── 11. Viewport safety: 1366x700, 1440x720, 1536x740 ── */
@media (min-width:821px) and (max-width:1400px){
  html body #jlpt180-ag-root .ag-board .ag-step{
    min-height:220px!important;
    padding:12px 10px 14px!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step img{
    width:44px!important;
    height:44px!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step h3{
    font-size:14px!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step p{
    font-size:11px!important;
    max-height:32px!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step a{
    min-height:38px!important;
    max-height:38px!important;
    font-size:12px!important;
  }

  html body #jlpt180-ag-root .ag-stat-card{
    min-height:94px!important;
    padding:12px 14px!important;
  }

  html body #jlpt180-ag-root .ag-stat-card b{
    font-size:23px!important;
  }
}

@media (min-width:821px) and (max-height:760px){
  html body #jlpt180-ag-root{
    padding:16px!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step{
    min-height:200px!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step img{
    width:40px!important;
    height:40px!important;
  }

  html body #jlpt180-ag-root .ag-board .ag-step a{
    min-height:36px!important;
    max-height:36px!important;
  }
}

/* ── 12. Scrollbar styling for main panel ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-main::-webkit-scrollbar{
    width:6px!important;
  }

  html body #jlpt180-ag-root .ag-main::-webkit-scrollbar-track{
    background:transparent!important;
  }

  html body #jlpt180-ag-root .ag-main::-webkit-scrollbar-thumb{
    background:rgba(44,96,60,.14)!important;
    border-radius:999px!important;
  }

  html body #jlpt180-ag-root .ag-main::-webkit-scrollbar-thumb:hover{
    background:rgba(44,96,60,.24)!important;
  }

  html body #jlpt180-ag-root .ag-sidebar::-webkit-scrollbar{
    width:4px!important;
  }

  html body #jlpt180-ag-root .ag-sidebar::-webkit-scrollbar-track{
    background:transparent!important;
  }

  html body #jlpt180-ag-root .ag-sidebar::-webkit-scrollbar-thumb{
    background:rgba(44,96,60,.12)!important;
    border-radius:999px!important;
  }
}

/* ── 13. Sidebar Goal Polish (v118-sidebar-goal) ── */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-sidebar .ag-goal{
    margin-top:14px!important;
    padding:16px 12px!important;
    border-radius:20px!important;
    background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(240,255,245,.80))!important;
    border:1px solid rgba(44,96,60,.10)!important;
    box-shadow:0 4px 16px rgba(30,80,45,.06)!important;
    text-align:center!important;
    width:100%!important;
    display:block!important;
  }

  html body #jlpt180-ag-root .ag-sidebar .ag-goal h2{
    font-size:13px!important;
    font-weight:800!important;
    color:#66758A!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
    margin-bottom:12px!important;
  }

  html body #jlpt180-ag-root .ag-sidebar .ag-ring{
    width:86px!important;
    height:86px!important;
    margin:0 auto 12px!important;
    border-radius:999px!important;
    display:grid!important;
    place-items:center!important;
    background:
      radial-gradient(circle at center,#fff 58%,transparent 59%),
      conic-gradient(var(--ag-green) 0 60%,rgba(44,96,60,.08) 60% 100%)!important;
  }

  html body #jlpt180-ag-root .ag-sidebar .ag-ring b{
    font-size:19px!important;
    color:#203047!important;
    font-weight:900!important;
    grid-area:1/1!important;
  }

  html body #jlpt180-ag-root .ag-sidebar .ag-ring span{
    grid-area:1/1!important;
    transform:translateY(20px)!important;
    color:#66758A!important;
    font-size:10px!important;
    font-weight:800!important;
  }

  html body #jlpt180-ag-root .ag-sidebar .ag-goal p{
    color:#66758A!important;
    font-size:11.5px!important;
    line-height:1.4!important;
    margin:0!important;
  }
}

/* v0.1.119 — Dashboard-only live polish. Scope: outer Aurora dashboard, not Shadow/Learn App. */
#jlpt180-ag-root{
  --ag-green:#35B85A;
  --ag-green-dark:#208544;
  --ag-ink:#203047;
  --ag-muted:#66758A;
  --ag-card:#FFFFFF;
  --ag-soft:#F3FAF5;
  --ag-line:rgba(44,96,60,.12);
  --ag-shadow:0 16px 42px rgba(30,80,45,.10);
  --ag-radius:24px;
  font-family:"Be Vietnam Pro","Nunito",system-ui,-apple-system,"Segoe UI",Arial,sans-serif!important;
  color:var(--ag-ink)!important;
}

#jlpt180-ag-root .ag-shell{
  background:
    radial-gradient(circle at 8% 0%,rgba(74,184,90,.11),transparent 24%),
    radial-gradient(circle at 92% 4%,rgba(74,166,232,.09),transparent 24%),
    linear-gradient(180deg,#fbfffb,#eff8f1)!important;
}

#jlpt180-ag-root .ag-sidebar{
  background:rgba(255,255,255,.76)!important;
  border-right:1px solid var(--ag-line)!important;
  box-shadow:10px 0 36px rgba(40,89,55,.06)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}

#jlpt180-ag-root .ag-brand{
  padding-bottom:18px!important;
  border-bottom:1px solid rgba(44,96,60,.08)!important;
  margin-bottom:18px!important;
}

#jlpt180-ag-root .ag-brand img{
  width:48px!important;
  height:48px!important;
  filter:drop-shadow(0 8px 16px rgba(32,132,68,.16))!important;
}

#jlpt180-ag-root .ag-brand b{
  font-size:24px!important;
  letter-spacing:.01em!important;
  color:var(--ag-ink)!important;
}

#jlpt180-ag-root .ag-brand span{
  display:inline-flex!important;
  margin-top:4px!important;
  padding:5px 12px!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#67cc74,#35b85a)!important;
  color:#fff!important;
  font-weight:900!important;
  font-size:12px!important;
}

#jlpt180-ag-root .ag-menu a{
  min-height:48px!important;
  border-radius:16px!important;
  padding:0 16px!important;
  font-weight:800!important;
  color:#435067!important;
  transition:background .16s ease,color .16s ease,transform .16s ease!important;
}

#jlpt180-ag-root .ag-menu a span{
  width:20px!important;
  color:#57705e!important;
}

#jlpt180-ag-root .ag-menu a.is-active,
#jlpt180-ag-root .ag-menu a:hover{
  background:linear-gradient(90deg,#eaf9eb,#f7fff7)!important;
  color:var(--ag-green-dark)!important;
  box-shadow:inset 3px 0 0 var(--ag-green)!important;
}

#jlpt180-ag-root .ag-main{
  padding:22px 28px 28px!important;
}

#jlpt180-ag-root .ag-topbar{
  min-height:64px!important;
  margin-bottom:14px!important;
}

#jlpt180-ag-root .ag-eyebrow{
  color:var(--ag-muted)!important;
  font-weight:800!important;
  letter-spacing:.02em!important;
}

#jlpt180-ag-root .ag-topbar h1{
  font-size:34px!important;
  line-height:1.12!important;
  letter-spacing:-.02em!important;
  color:var(--ag-ink)!important;
}

#jlpt180-ag-root .ag-actions button{
  width:48px!important;
  height:48px!important;
  border-radius:16px!important;
  border:1px solid rgba(44,96,60,.10)!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 10px 26px rgba(38,72,48,.08)!important;
}

#jlpt180-ag-root .ag-hero{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr)) 90px!important;
  gap:14px!important;
  align-items:stretch!important;
  margin-bottom:18px!important;
}

#jlpt180-ag-root .ag-stat-card{
  min-height:116px!important;
  border-radius:22px!important;
  padding:18px 20px!important;
  border:1px solid var(--ag-line)!important;
  box-shadow:var(--ag-shadow)!important;
  background:#fff!important;
  overflow:hidden!important;
}

#jlpt180-ag-root .ag-stat-card.fire{background:linear-gradient(135deg,#fff8f2,#fff)!important;border-color:rgba(239,112,72,.18)!important;}
#jlpt180-ag-root .ag-stat-card.xp{background:linear-gradient(135deg,#f4f8ff,#fff)!important;border-color:rgba(92,127,231,.18)!important;}
#jlpt180-ag-root .ag-stat-card.level{background:linear-gradient(135deg,#fff8e6,#fff)!important;border-color:rgba(227,169,40,.18)!important;}
#jlpt180-ag-root .ag-stat-card.cards{background:linear-gradient(135deg,#fff3f8,#fff)!important;border-color:rgba(206,93,143,.16)!important;}

#jlpt180-ag-root .ag-stat-card span{
  font-size:12px!important;
  font-weight:900!important;
  color:#5f6d83!important;
  letter-spacing:.02em!important;
}

#jlpt180-ag-root .ag-stat-card b{
  margin-top:8px!important;
  font-size:30px!important;
  line-height:1!important;
  letter-spacing:-.02em!important;
}

#jlpt180-ag-root .ag-stat-card small{
  margin-top:8px!important;
  color:#607086!important;
  font-size:12px!important;
  font-weight:800!important;
}

#jlpt180-ag-root .ag-hero-mascot{
  position:static!important;
  width:90px!important;
  height:116px!important;
  object-fit:contain!important;
  align-self:end!important;
  filter:drop-shadow(0 14px 18px rgba(32,132,68,.14))!important;
}

#jlpt180-ag-root .ag-route-switcher{
  min-height:154px!important;
  padding:24px!important;
  border-radius:26px!important;
  border:1px solid rgba(53,184,90,.16)!important;
  background:linear-gradient(135deg,rgba(241,255,239,.96),rgba(237,250,255,.88))!important;
  box-shadow:var(--ag-shadow)!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto auto!important;
  gap:18px!important;
  align-items:center!important;
  margin-bottom:18px!important;
}

#jlpt180-ag-root .ag-route-current span{
  color:#6a778c!important;
  font-size:12px!important;
  font-weight:950!important;
  letter-spacing:.10em!important;
}

#jlpt180-ag-root .ag-route-current b{
  display:block!important;
  margin:6px 0 4px!important;
  font-size:34px!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
  color:#193a24!important;
}

#jlpt180-ag-root .ag-route-current small{
  color:#6d798f!important;
  font-size:14px!important;
  line-height:1.45!important;
}

#jlpt180-ag-root .ag-route-levels{
  display:flex!important;
  gap:8px!important;
  padding:6px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(44,96,60,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}

#jlpt180-ag-root .ag-route-levels button,
#jlpt180-ag-root .ag-route-change{
  height:42px!important;
  min-width:76px!important;
  border-radius:999px!important;
  font-weight:950!important;
}

#jlpt180-ag-root .ag-route-levels button.is-active,
#jlpt180-ag-root .ag-route-change{
  background:linear-gradient(135deg,#35b85a,#208544)!important;
  color:#fff!important;
  box-shadow:0 10px 22px rgba(32,132,68,.20)!important;
}

#jlpt180-ag-root .ag-board{
  border-radius:26px!important;
  padding:24px!important;
  border:1px solid var(--ag-line)!important;
  background:rgba(255,255,255,.88)!important;
  box-shadow:var(--ag-shadow)!important;
}

#jlpt180-ag-root .ag-section-head h2{
  font-size:24px!important;
  letter-spacing:-.015em!important;
}

#jlpt180-ag-root .ag-section-head p{
  color:#6e7c90!important;
  font-weight:700!important;
}

#jlpt180-ag-root .ag-steps{
  gap:14px!important;
}

#jlpt180-ag-root .ag-step{
  min-height:216px!important;
  border-radius:22px!important;
  padding:18px!important;
  box-shadow:0 12px 34px rgba(30,80,45,.08)!important;
  border-width:1px!important;
}

#jlpt180-ag-root .ag-step em{
  width:36px!important;
  height:36px!important;
  font-size:15px!important;
}

#jlpt180-ag-root .ag-step img{
  width:58px!important;
  height:58px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 8px 12px rgba(30,80,45,.10))!important;
}

#jlpt180-ag-root .ag-step h3{
  font-size:20px!important;
  line-height:1.15!important;
  color:#26344a!important;
}

#jlpt180-ag-root .ag-step p{
  color:#738197!important;
  line-height:1.45!important;
}

#jlpt180-ag-root .ag-step b{
  color:#1f2d42!important;
  font-size:17px!important;
}

#jlpt180-ag-root .ag-step a{
  height:48px!important;
  min-height:48px!important;
  border-radius:16px!important;
  font-weight:950!important;
}

#jlpt180-ag-root .ag-goal{
  background:rgba(255,255,255,.86)!important;
  border:1px solid var(--ag-line)!important;
  box-shadow:var(--ag-shadow)!important;
  border-radius:22px!important;
  padding:18px!important;
}

#jlpt180-ag-root .ag-ring{
  width:150px!important;
  height:150px!important;
  margin:12px auto!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  text-align:center!important;
}

#jlpt180-ag-root .ag-ring b{
  font-size:28px!important;
  line-height:1!important;
}

#jlpt180-ag-root .ag-ring span{
  display:block!important;
  margin-top:5px!important;
  color:#66758A!important;
  font-weight:900!important;
}

#jlpt180-ag-root .ag-route-modal{
  background:rgba(17,25,39,.38)!important;
  backdrop-filter:blur(10px)!important;
  -webkit-backdrop-filter:blur(10px)!important;
}

#jlpt180-ag-root .ag-route-dialog{
  width:min(680px,calc(100vw - 32px))!important;
  max-height:calc(100dvh - 48px)!important;
  overflow:auto!important;
  border-radius:26px!important;
  padding:24px!important;
  box-shadow:0 24px 80px rgba(15,23,42,.24)!important;
}

#jlpt180-ag-root .ag-route-dialog h2{
  font-size:26px!important;
  line-height:1.15!important;
  letter-spacing:-.015em!important;
}

#jlpt180-ag-root .ag-route-dialog p{
  max-width:540px!important;
  color:#66758A!important;
  font-size:15px!important;
  line-height:1.5!important;
}

#jlpt180-ag-root .ag-route-options{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin-top:18px!important;
}

#jlpt180-ag-root .ag-route-options button{
  min-height:104px!important;
  padding:14px!important;
  border-radius:18px!important;
  border:1px solid rgba(44,96,60,.12)!important;
  background:#fff!important;
  text-align:left!important;
  box-shadow:0 8px 22px rgba(30,80,45,.06)!important;
}

#jlpt180-ag-root .ag-route-options button:hover,
#jlpt180-ag-root .ag-route-options button.is-active{
  border-color:rgba(53,184,90,.45)!important;
  background:#f2fff1!important;
}

#jlpt180-ag-root .ag-route-options b{
  display:block!important;
  color:#1f8d40!important;
  font-size:22px!important;
  line-height:1.02!important;
  letter-spacing:-.025em!important;
}

#jlpt180-ag-root .ag-route-options span{
  display:block!important;
  margin-top:7px!important;
  color:#637187!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:800!important;
}

@media (max-width:1280px){
  #jlpt180-ag-root .ag-hero{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  #jlpt180-ag-root .ag-hero-mascot{display:none!important;}
  #jlpt180-ag-root .ag-route-switcher{grid-template-columns:1fr!important;align-items:start!important;}
  #jlpt180-ag-root .ag-route-levels{justify-content:center!important;}
}

@media (max-width:900px){
  #jlpt180-ag-root .ag-route-options{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}

/* v159: grouped route picker */
#jlpt180-ag-root .ag-route-dialog{
  width:min(960px,calc(100vw - 28px))!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"]{
  display:flex!important;
  flex-direction:column!important;
  gap:14px!important;
  margin-top:18px!important;
}

#jlpt180-ag-root .ag-route-group{
  --route-accent:#22c55e;
  --route-soft:#f0fdf4;
  --route-line:rgba(34,197,94,.28);
  border:2px solid var(--route-line)!important;
  background:
    radial-gradient(circle at 92% 0, color-mix(in srgb, var(--route-accent) 22%, transparent), transparent 34%),
    linear-gradient(135deg,var(--route-soft),rgba(255,255,255,.94))!important;
  border-radius:20px!important;
  padding:12px!important;
  box-shadow:0 14px 28px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.78)!important;
}

#jlpt180-ag-root .ag-route-group-mn{--route-accent:#0f766e;--route-soft:#ccfbf1;--route-line:rgba(15,118,110,.55)}
#jlpt180-ag-root .ag-route-group-n5{--route-accent:#16a34a;--route-soft:#dcfce7;--route-line:rgba(22,163,74,.56)}
#jlpt180-ag-root .ag-route-group-n4{--route-accent:#0284c7;--route-soft:#dbeafe;--route-line:rgba(2,132,199,.55)}
#jlpt180-ag-root .ag-route-group-n3{--route-accent:#d97706;--route-soft:#fef3c7;--route-line:rgba(217,119,6,.58)}
#jlpt180-ag-root .ag-route-group-n2{--route-accent:#dc2626;--route-soft:#ffe4e6;--route-line:rgba(220,38,38,.52)}
#jlpt180-ag-root .ag-route-group-n1{--route-accent:#7c3aed;--route-soft:#ede9fe;--route-line:rgba(124,58,237,.56)}

#jlpt180-ag-root .ag-route-group-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin-bottom:10px!important;
}

#jlpt180-ag-root .ag-route-group-head b{
  display:block!important;
  color:var(--route-accent)!important;
  font-size:20px!important;
  line-height:1.1!important;
}

#jlpt180-ag-root .ag-route-group-head span{
  display:block!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
  margin-top:2px!important;
}

#jlpt180-ag-root .ag-route-group-head em{
  flex:0 0 auto!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid var(--route-line)!important;
  color:var(--route-accent)!important;
  padding:6px 10px!important;
  font-size:12px!important;
  font-weight:900!important;
  font-style:normal!important;
}

#jlpt180-ag-root .ag-route-group-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:10px!important;
}

#jlpt180-ag-root .ag-route-bucket + .ag-route-bucket{
  margin-top:12px!important;
  padding-top:12px!important;
  border-top:1px dashed var(--route-line)!important;
}

#jlpt180-ag-root .ag-route-bucket-label{
  display:inline-flex!important;
  align-items:center!important;
  min-height:24px!important;
  margin:0 0 8px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.86)!important;
  border:1px solid var(--route-line)!important;
  color:var(--route-accent)!important;
  padding:4px 10px!important;
  font-size:11px!important;
  font-weight:900!important;
}

#jlpt180-ag-root .ag-route-textbook .ag-route-bucket-label{
  background:linear-gradient(135deg,var(--source-soft, rgba(255,255,255,.92)),rgba(255,255,255,.96))!important;
  border-color:var(--source-line, var(--route-line))!important;
  color:var(--source-accent, var(--route-accent))!important;
  box-shadow:0 8px 18px var(--source-glow, rgba(15,23,42,.06))!important;
}

#jlpt180-ag-root .ag-route-source-mimikara{--source-accent:#e11d48;--source-soft:#ffe4ec;--source-line:rgba(225,29,72,.42);--source-glow:rgba(225,29,72,.14)}
#jlpt180-ag-root .ag-route-source-somatome{--source-accent:#7c3aed;--source-soft:#ede9fe;--source-line:rgba(124,58,237,.44);--source-glow:rgba(124,58,237,.15)}
#jlpt180-ag-root .ag-route-source-shinkanzen{--source-accent:#2563eb;--source-soft:#dbeafe;--source-line:rgba(37,99,235,.44);--source-glow:rgba(37,99,235,.15)}
#jlpt180-ag-root .ag-route-source-minna{--source-accent:#0891b2;--source-soft:#cffafe;--source-line:rgba(8,145,178,.44);--source-glow:rgba(8,145,178,.14)}
#jlpt180-ag-root .ag-route-source-tudien{--source-accent:#16a34a;--source-soft:#dcfce7;--source-line:rgba(22,163,74,.42);--source-glow:rgba(22,163,74,.14)}

#jlpt180-ag-root .ag-route-textbook .ag-route-card{
  border-color:var(--source-line, var(--route-line))!important;
  background:
    linear-gradient(90deg,var(--source-accent, var(--route-accent)) 0 7px, transparent 7px),
    linear-gradient(135deg,var(--source-soft, #fff),rgba(255,255,255,.96))!important;
  box-shadow:0 10px 20px var(--source-glow, rgba(15,23,42,.08)), 0 4px 0 rgba(15,23,42,.08)!important;
}

#jlpt180-ag-root .ag-route-textbook .ag-route-card:hover,
#jlpt180-ag-root .ag-route-textbook .ag-route-card.is-active{
  border-color:var(--source-accent, var(--route-accent))!important;
  box-shadow:0 14px 26px var(--source-glow, rgba(15,23,42,.10)), 0 5px 0 color-mix(in srgb, var(--source-accent, var(--route-accent)) 35%, #0000)!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card{
  min-height:72px!important;
  border-radius:16px!important;
  border:1px solid var(--route-line)!important;
  background:rgba(255,255,255,.86)!important;
  box-shadow:0 8px 18px rgba(15,23,42,.05)!important;
  padding:12px 14px!important;
  position:relative!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card:hover,
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card.is-active{
  border-color:var(--route-accent)!important;
  background:#fff!important;
  transform:translateY(-1px)!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card b{
  color:#172033!important;
  font-size:18px!important;
  line-height:1.1!important;
  padding-right:78px!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card span{
  color:#64748b!important;
  font-size:12px!important;
  margin-top:5px!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card::after{
  content:attr(data-route-kind);
  position:absolute!important;
  top:10px!important;
  right:10px!important;
  max-width:74px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  border-radius:999px!important;
  background:var(--source-soft, var(--route-soft))!important;
  border:1px solid var(--source-line, var(--route-line))!important;
  color:var(--source-accent, var(--route-accent))!important;
  padding:4px 8px!important;
  font-size:10px!important;
  font-weight:900!important;
}

@media (min-width:700px){
  #jlpt180-ag-root .ag-route-group-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media (min-width:1040px){
  #jlpt180-ag-root .ag-route-group-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
}

@media (max-width:520px){
  #jlpt180-ag-root .ag-route-dialog{
    width:calc(100vw - 18px)!important;
    max-height:calc(100dvh - 18px)!important;
    padding:16px!important;
    border-radius:22px!important;
  }
  #jlpt180-ag-root .ag-route-group{
    padding:10px!important;
  }
}

/* v163: stronger route picker affordance + loading feedback */
#jlpt180-ag-root .ag-route-dialog{
  overflow:hidden!important;
  border:2px solid rgba(34,197,94,.24)!important;
  background:
    radial-gradient(circle at 0 0, rgba(34,197,94,.12), transparent 32%),
    radial-gradient(circle at 100% 0, rgba(59,130,246,.12), transparent 30%),
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,255,252,.98))!important;
}

#jlpt180-ag-root .ag-route-close{
  top:16px!important;
  right:18px!important;
  width:48px!important;
  height:48px!important;
  display:grid!important;
  place-items:center!important;
  border:2px solid rgba(239,68,68,.28)!important;
  background:linear-gradient(180deg,#fff1f2,#ffffff)!important;
  color:#dc2626!important;
  font-size:32px!important;
  line-height:1!important;
  font-weight:900!important;
  box-shadow:0 8px 0 rgba(190,18,60,.12), 0 14px 28px rgba(15,23,42,.12)!important;
  transform:none!important;
}

#jlpt180-ag-root .ag-route-close:hover{
  background:linear-gradient(180deg,#ffe4e6,#fff)!important;
  border-color:rgba(220,38,38,.48)!important;
  transform:translateY(-1px)!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card{
  min-height:84px!important;
  border-width:2px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(248,250,252,.96))!important;
  box-shadow:0 7px 0 rgba(15,23,42,.10), 0 16px 28px rgba(15,23,42,.08)!important;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card:hover,
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card:focus-visible,
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card.is-active{
  transform:translateY(-3px)!important;
  box-shadow:0 10px 0 color-mix(in srgb, var(--route-accent) 26%, rgba(15,23,42,.10)), 0 22px 38px rgba(15,23,42,.12)!important;
  outline:none!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card:active{
  transform:translateY(2px)!important;
  box-shadow:0 3px 0 rgba(15,23,42,.12), 0 10px 20px rgba(15,23,42,.08)!important;
}

#jlpt180-ag-root .ag-route-standard .ag-route-card{
  background:
    linear-gradient(90deg,var(--route-accent) 0 7px, transparent 7px),
    linear-gradient(180deg,#ffffff,var(--route-soft))!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card b{
  color:#132033!important;
  font-size:20px!important;
  font-weight:950!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card span{
  color:#475569!important;
  font-size:13px!important;
  font-weight:900!important;
}

#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card::before{
  content:"Chọn"!important;
  position:absolute!important;
  right:12px!important;
  bottom:10px!important;
  border-radius:999px!important;
  padding:4px 10px!important;
  background:linear-gradient(135deg,var(--source-accent, var(--route-accent)),#22c55e)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:950!important;
  box-shadow:0 6px 14px rgba(15,23,42,.14)!important;
}

#jlpt180-ag-root .ag-route-modal.is-loading-route .ag-route-dialog::before{
  content:"Đang tải lộ trình..."!important;
  position:absolute!important;
  inset:0!important;
  z-index:20!important;
  display:grid!important;
  place-items:center!important;
  background:rgba(255,255,255,.68)!important;
  color:#0f766e!important;
  font-size:20px!important;
  font-weight:950!important;
  backdrop-filter:blur(3px)!important;
}

#jlpt180-ag-root .ag-route-modal.is-loading-route .ag-route-dialog::after{
  content:""!important;
  position:absolute!important;
  z-index:21!important;
  left:50%!important;
  top:calc(50% + 38px)!important;
  width:42px!important;
  height:42px!important;
  margin-left:-21px!important;
  border-radius:999px!important;
  border:5px solid rgba(34,197,94,.22)!important;
  border-top-color:#16a34a!important;
  animation:agRouteSpin .8s linear infinite!important;
}

#jlpt180-ag-root .ag-route-card.is-route-loading::before{
  content:"Đang tải..."!important;
}

#jlpt180-ag-root .ag-route-modal.is-loading-route .ag-route-card{
  pointer-events:none!important;
  filter:saturate(.65) opacity(.78)!important;
}

@keyframes agRouteSpin{to{transform:rotate(360deg)}}

@media (max-width:520px){
  #jlpt180-ag-root .ag-route-close{
    top:10px!important;
    right:12px!important;
    width:44px!important;
    height:44px!important;
    font-size:28px!important;
  }
  #jlpt180-ag-root .ag-route-dialog h2{
    padding-right:54px!important;
  }
}


/* Aurora day route mini app */
#jlpt180-ag-root .ag-day-panel{
  width:100%!important;
  margin:12px 0 0!important;
  padding:14px!important;
  border:1px solid rgba(44,96,60,.12)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.94)!important;
  box-shadow:0 14px 34px rgba(40,78,54,.12)!important;
}

#jlpt180-ag-root .ag-day-panel[hidden]{display:none!important;}

#jlpt180-ag-root .ag-day-panel-head,
#jlpt180-ag-root .ag-day-panel-current,
#jlpt180-ag-root .ag-day-panel-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
}

#jlpt180-ag-root .ag-day-panel-head span,
#jlpt180-ag-root .ag-day-panel-current small{
  display:block!important;
  color:#64748b!important;
  font-size:12px!important;
  font-weight:800!important;
}

#jlpt180-ag-root .ag-day-panel-head b,
#jlpt180-ag-root .ag-day-panel-current strong{
  color:#1f2f46!important;
  font-size:18px!important;
  font-weight:950!important;
}

#jlpt180-ag-root .ag-day-panel-close{
  width:38px!important;
  height:38px!important;
  border:0!important;
  border-radius:999px!important;
  background:#eef7ef!important;
  color:#246b39!important;
  font-size:24px!important;
  font-weight:900!important;
  line-height:1!important;
}

#jlpt180-ag-root .ag-day-panel-current{
  margin:12px 0!important;
  padding:10px 12px!important;
  border-radius:14px!important;
  background:#f7fbf7!important;
}

#jlpt180-ag-root .ag-day-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  max-height:260px!important;
  overflow:auto!important;
  padding:2px 2px 8px!important;
}

#jlpt180-ag-root .ag-day-grid button{
  min-height:54px!important;
  padding:9px 10px!important;
  border:1px solid rgba(44,96,60,.12)!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#1f2f46!important;
  text-align:left!important;
  font-weight:950!important;
}

#jlpt180-ag-root .ag-day-grid button small{
  display:block!important;
  margin-top:3px!important;
  color:#64748b!important;
  font-size:11px!important;
  font-weight:850!important;
}

#jlpt180-ag-root .ag-day-grid button.is-selected,
#jlpt180-ag-root .ag-day-grid button.is-current{
  border-color:rgba(53,184,90,.42)!important;
  background:#edf9ef!important;
}

#jlpt180-ag-root .ag-day-grid button.is-locked{
  color:#94a3b8!important;
  background:#f5f7fa!important;
  cursor:not-allowed!important;
}

#jlpt180-ag-root .ag-day-panel-actions{
  margin-top:12px!important;
}

#jlpt180-ag-root .ag-day-panel-actions button{
  width:100%!important;
  min-height:46px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(135deg,#35b85a,#208544)!important;
  color:#fff!important;
  font-weight:950!important;
}

@media (min-width: 520px){
  #jlpt180-ag-root .ag-day-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
}

@media (min-width: 900px){
  #jlpt180-ag-root .ag-day-panel{max-width:520px!important; margin-left:auto!important;}
  #jlpt180-ag-root .ag-day-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
}


/* Aurora day panel mobile overflow guard */
@media (max-width: 520px){
  html body #jlpt180-ag-root,
  html body #jlpt180-ag-root *{
    box-sizing:border-box!important;
  }

  html body #jlpt180-ag-root{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  html body #jlpt180-ag-root .ag-shell,
  html body #jlpt180-ag-root .ag-main,
  html body #jlpt180-ag-root .ag-route-switcher,
  html body #jlpt180-ag-root .m4-route,
  html body #jlpt180-ag-root .ag-day-panel{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  html body #jlpt180-ag-root .ag-route-levels,
  html body #jlpt180-ag-root .m4-levels{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
  }

  html body #jlpt180-ag-root .ag-day-grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    overflow-x:hidden!important;
  }

  html body #jlpt180-ag-root .ag-day-panel-head,
  html body #jlpt180-ag-root .ag-day-panel-current{
    width:100%!important;
    min-width:0!important;
  }
}


/* Aurora day panel detail */
#jlpt180-ag-root .ag-day-detail{
  margin-top:12px!important;
  padding:12px!important;
  border:1px solid rgba(44,96,60,.12)!important;
  border-radius:16px!important;
  background:#fbfffc!important;
  max-height:380px!important;
  overflow:auto!important;
}
#jlpt180-ag-root .ag-day-detail-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:10px!important;
  margin-bottom:10px!important;
}
#jlpt180-ag-root .ag-day-detail-head b{
  display:block!important;
  font-size:16px!important;
  color:#203047!important;
}
#jlpt180-ag-root .ag-day-detail-head small{
  display:block!important;
  margin-top:3px!important;
  color:#66758a!important;
}
#jlpt180-ag-root .ag-day-detail-head em{
  font-style:normal!important;
  white-space:nowrap!important;
  padding:6px 10px!important;
  border-radius:999px!important;
  background:#eaf8e7!important;
  color:#208544!important;
  font-weight:800!important;
  font-size:12px!important;
}
#jlpt180-ag-root .ag-day-detail-block{
  margin-top:10px!important;
}
#jlpt180-ag-root .ag-day-detail-block h4{
  margin:0 0 8px!important;
  color:#208544!important;
  font-size:13px!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}
#jlpt180-ag-root .ag-day-detail-block article{
  padding:9px 10px!important;
  border:1px solid rgba(44,96,60,.10)!important;
  border-radius:12px!important;
  background:#fff!important;
  margin-bottom:7px!important;
}
#jlpt180-ag-root .ag-day-detail-block article b{
  display:block!important;
  color:#203047!important;
  font-size:14px!important;
}
#jlpt180-ag-root .ag-day-detail-block article span{
  display:block!important;
  margin-top:3px!important;
  color:#66758a!important;
  font-size:12px!important;
  line-height:1.35!important;
}
#jlpt180-ag-root .ag-day-detail-block article small{
  display:block!important;
  margin-top:5px!important;
  color:#8794a6!important;
  font-size:12px!important;
  line-height:1.35!important;
}
#jlpt180-ag-root .ag-day-detail-empty,
#jlpt180-ag-root .ag-day-detail-loading{
  margin:0!important;
  color:#66758a!important;
  font-size:13px!important;
}
@media (max-width:700px){
  #jlpt180-ag-root .ag-day-detail{max-height:300px!important;}
  #jlpt180-ag-root .ag-day-detail-head{display:block!important;}
  #jlpt180-ag-root .ag-day-detail-head em{display:inline-flex!important;margin-top:8px!important;}
}


/* v0.1.122: compact day picker + review selected day */
#jlpt180-ag-root .ag-day-panel{
  max-width:720px!important;
  padding:12px!important;
  margin:10px 0!important;
}
#jlpt180-ag-root .ag-day-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(58px,1fr))!important;
  gap:6px!important;
  max-height:150px!important;
  overflow:auto!important;
}
#jlpt180-ag-root .ag-day-grid button{
  min-height:46px!important;
  padding:6px!important;
  border-radius:12px!important;
}
#jlpt180-ag-root .ag-day-grid button span{
  font-size:12px!important;
}
#jlpt180-ag-root .ag-day-grid button small{
  font-size:10px!important;
}
#jlpt180-ag-root .ag-day-detail{
  max-height:260px!important;
}
#jlpt180-ag-root .ag-day-detail-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  flex-wrap:wrap!important;
}
#jlpt180-ag-root .ag-day-detail-actions button{
  min-height:34px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:12px!important;
  background:#35b85a!important;
  color:#fff!important;
  font-weight:800!important;
  cursor:pointer!important;
}
@media (max-width:700px){
  #jlpt180-ag-root .ag-day-panel{
    max-width:none!important;
  }
  #jlpt180-ag-root .ag-day-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    max-height:132px!important;
  }
  #jlpt180-ag-root .ag-day-detail{
    max-height:240px!important;
  }
  #jlpt180-ag-root .ag-day-detail-actions{
    justify-content:flex-start!important;
    margin-top:8px!important;
  }
}


/* v0.1.123: compact day picker for dashboard testing */
#jlpt180-ag-root .ag-day-panel{
  width:min(560px,100%)!important;
  max-width:560px!important;
  margin:10px auto 0!important;
  padding:10px!important;
  border-radius:16px!important;
  box-shadow:0 12px 28px rgba(40,78,54,.10)!important;
}

#jlpt180-ag-root .ag-day-panel-head{
  gap:8px!important;
  margin-bottom:8px!important;
}

#jlpt180-ag-root .ag-day-panel-head span{
  font-size:11px!important;
  letter-spacing:.04em!important;
}

#jlpt180-ag-root .ag-day-panel-head b{
  font-size:17px!important;
  line-height:1.1!important;
}

#jlpt180-ag-root .ag-day-panel-close{
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  border-radius:12px!important;
}

#jlpt180-ag-root .ag-day-panel-current{
  min-height:42px!important;
  padding:8px 10px!important;
  border-radius:12px!important;
  margin-bottom:8px!important;
}

#jlpt180-ag-root .ag-day-panel-current strong{
  font-size:14px!important;
}

#jlpt180-ag-root .ag-day-panel-current small{
  font-size:11px!important;
  line-height:1.25!important;
}

#jlpt180-ag-root .ag-day-grid{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:5px!important;
  max-height:112px!important;
  overflow:auto!important;
  padding:2px 2px 4px!important;
}

#jlpt180-ag-root .ag-day-grid button{
  min-height:38px!important;
  padding:4px!important;
  border-radius:10px!important;
}

#jlpt180-ag-root .ag-day-grid button span{
  display:block!important;
  font-size:11px!important;
  line-height:1.1!important;
  font-weight:850!important;
}

#jlpt180-ag-root .ag-day-grid button small{
  display:block!important;
  margin-top:2px!important;
  font-size:9px!important;
  line-height:1!important;
}

#jlpt180-ag-root .ag-day-detail{
  margin-top:8px!important;
  padding:10px!important;
  border-radius:14px!important;
  max-height:210px!important;
}

#jlpt180-ag-root .ag-day-detail-head{
  gap:8px!important;
  align-items:center!important;
  margin-bottom:8px!important;
}

#jlpt180-ag-root .ag-day-detail-head b{
  font-size:14px!important;
}

#jlpt180-ag-root .ag-day-detail-head small{
  font-size:11px!important;
  line-height:1.2!important;
}

#jlpt180-ag-root .ag-day-detail-actions{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex-wrap:wrap!important;
}

#jlpt180-ag-root .ag-day-detail-actions em{
  padding:5px 8px!important;
  font-size:11px!important;
}

#jlpt180-ag-root .ag-day-detail-actions button{
  min-height:30px!important;
  padding:0 10px!important;
  border-radius:10px!important;
  font-size:11px!important;
}

#jlpt180-ag-root .ag-day-detail-block{
  margin-top:8px!important;
}

#jlpt180-ag-root .ag-day-detail-block h4{
  margin:0 0 6px!important;
  font-size:11px!important;
}

#jlpt180-ag-root .ag-day-detail-block article{
  padding:7px 8px!important;
  border-radius:10px!important;
  margin-bottom:5px!important;
}

#jlpt180-ag-root .ag-day-detail-block article b{
  font-size:13px!important;
}

#jlpt180-ag-root .ag-day-detail-block article span,
#jlpt180-ag-root .ag-day-detail-block article small{
  font-size:11px!important;
  line-height:1.25!important;
}

#jlpt180-ag-root .ag-day-panel-actions{
  display:flex!important;
  justify-content:flex-end!important;
  margin-top:8px!important;
}

#jlpt180-ag-root .ag-day-panel-actions [data-ag-next-day-test]{
  min-height:34px!important;
  padding:0 12px!important;
  font-size:12px!important;
  border-radius:12px!important;
}

@media (max-width:700px){
  #jlpt180-ag-root .ag-day-panel{
    width:100%!important;
    max-width:none!important;
    margin:8px 0 0!important;
  }

  #jlpt180-ag-root .ag-day-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    max-height:104px!important;
  }

  #jlpt180-ag-root .ag-day-detail{
    max-height:190px!important;
  }

  #jlpt180-ag-root .ag-day-detail-head{
    display:block!important;
  }

  #jlpt180-ag-root .ag-day-detail-actions{
    justify-content:flex-start!important;
    margin-top:6px!important;
  }
}


/* v0.1.124: day picker action semantics */
#jlpt180-ag-root [data-ag-set-current-day]{
  background:#208544!important;
  color:#fff!important;
  border:0!important;
  font-weight:800!important;
}
#jlpt180-ag-root [data-ag-review-selected-day]{
  background:#35b85a!important;
  color:#fff!important;
}
#jlpt180-ag-root .ag-day-panel-actions{
  justify-content:flex-end!important;
}
#jlpt180-ag-root .ag-day-panel-actions [data-ag-set-current-day]{
  min-height:34px!important;
  padding:0 14px!important;
  border-radius:12px!important;
  font-size:12px!important;
}


/* v0.1.155: day picker can actively switch current day again */
#jlpt180-ag-root .ag-day-modal[hidden]{display:none!important;}
#jlpt180-ag-root .ag-day-modal{
  position:fixed!important;
  inset:0!important;
  z-index:99998!important;
  display:grid!important;
  place-items:center!important;
  padding:16px!important;
}
#jlpt180-ag-root .ag-day-modal-backdrop{
  position:absolute!important;
  inset:0!important;
  background:rgba(18,38,28,.30)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
}
#jlpt180-ag-root .ag-day-modal-slot{
  position:relative!important;
  z-index:1!important;
  width:min(620px,100%)!important;
  max-height:min(82dvh,680px)!important;
  overflow:auto!important;
}
#jlpt180-ag-root .ag-day-modal-slot .ag-day-panel{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:12px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 24px 70px rgba(20,55,32,.22)!important;
}
#jlpt180-ag-root .ag-day-modal-slot .ag-day-grid{
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:6px!important;
  max-height:140px!important;
  overflow:auto!important;
}
#jlpt180-ag-root .ag-day-modal-slot .ag-day-grid button{
  min-height:42px!important;
  padding:5px!important;
  border-radius:11px!important;
}
#jlpt180-ag-root .ag-day-modal-slot .ag-day-grid button span{font-size:12px!important;}
#jlpt180-ag-root .ag-day-modal-slot .ag-day-grid button small{font-size:10px!important;}
#jlpt180-ag-root .ag-day-modal-slot .ag-day-detail{
  max-height:280px!important;
  overflow:auto!important;
  margin-top:10px!important;
}
#jlpt180-ag-root .ag-day-modal-slot .ag-day-panel-actions{
  justify-content:flex-end!important;
}
#jlpt180-ag-root .ag-day-modal-slot [data-ag-set-current-day]{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:34px!important;
  padding:0 12px!important;
  border-radius:12px!important;
}
#jlpt180-ag-root .ag-day-modal-slot [data-ag-review-selected-day]{
  min-height:34px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:12px!important;
  background:#35b85a!important;
  color:#fff!important;
  font-weight:800!important;
}
@media (max-width:700px){
  #jlpt180-ag-root .ag-day-modal{
    padding:10px!important;
    align-items:start!important;
    padding-top:56px!important;
  }
  #jlpt180-ag-root .ag-day-modal-slot{
    max-height:calc(100dvh - 80px)!important;
  }
  #jlpt180-ag-root .ag-day-modal-slot .ag-day-grid{
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    max-height:124px!important;
  }
  #jlpt180-ag-root .ag-day-modal-slot .ag-day-detail{
    max-height:240px!important;
  }
  #jlpt180-ag-root .ag-day-detail-head{
    display:block!important;
  }
  #jlpt180-ag-root .ag-day-detail-actions{
    justify-content:flex-start!important;
    margin-top:8px!important;
  }
}

/* v164: mobile dashboard header/nav/progress cleanup */
@media (max-width:820px){
  #jlpt180-ag-root .m4-fixed-head{
    display:none!important;
  }
  #jlpt180-ag-root > .ag-mobile-v4,
  #jlpt180-ag-root .ag-mobile-v4{
    padding-top:0!important;
  }
  #jlpt180-ag-root .m4-route-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    margin-top:12px!important;
  }
  #jlpt180-ag-root .m4-route-actions .ag-route-change{
    width:100%!important;
    min-height:44px!important;
    margin:0!important;
    border-radius:16px!important;
  }
  #jlpt180-ag-root .m4-progress{
    grid-template-columns:minmax(0,1fr) 42px!important;
    gap:8px!important;
  }
  #jlpt180-ag-root .m4-progress-track{
    display:block!important;
    height:10px!important;
    border-radius:999px!important;
    background:#dfeee3!important;
    overflow:hidden!important;
    box-shadow:inset 0 1px 3px rgba(30,70,45,.16)!important;
  }
  #jlpt180-ag-root .m4-progress-track i,
  #jlpt180-ag-root .m4-progress i[data-m4-route-progress-bar]{
    display:block!important;
    width:0%;
    height:100%!important;
    border-radius:inherit!important;
    background:linear-gradient(90deg,#22c55e,#facc15)!important;
    transition:width .28s ease!important;
  }
  #jlpt180-ag-root > .ag-mobile-v4 > .m4-bottom,
  #jlpt180-ag-root .m4-bottom{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }
  #jlpt180-ag-root .m4-bottom a{
    gap:4px!important;
    text-decoration:none!important;
  }
  #jlpt180-ag-root .m4-bottom a span{
    font-size:18px!important;
  }
  #jlpt180-ag-root .m4-bottom a b{
    font-size:9px!important;
    line-height:1.1!important;
    white-space:normal!important;
    text-align:center!important;
  }
}

@media (max-width:380px){
  #jlpt180-ag-root .m4-route-actions{
    grid-template-columns:1fr!important;
  }
  #jlpt180-ag-root .m4-bottom a b{
    font-size:8px!important;
  }
}

/* v165: route picker scroll + clearer package labels */
#jlpt180-ag-root .ag-route-modal:not([hidden]){
  overflow:auto!important;
  align-items:flex-start!important;
  padding:24px 18px!important;
}
#jlpt180-ag-root .ag-route-dialog{
  max-height:calc(100dvh - 48px)!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-width:thin!important;
}
#jlpt180-ag-root .ag-route-dialog::-webkit-scrollbar{
  width:8px!important;
}
#jlpt180-ag-root .ag-route-dialog::-webkit-scrollbar-thumb{
  border-radius:999px!important;
  background:rgba(71,85,105,.42)!important;
}
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card{
  min-height:96px!important;
  padding:18px 76px 18px 18px!important;
}
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card b{
  font-size:18px!important;
  line-height:1.15!important;
}
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card span{
  display:block!important;
  margin-top:6px!important;
  font-size:13px!important;
  line-height:1.25!important;
}
@media (max-width:520px){
  #jlpt180-ag-root .ag-route-modal:not([hidden]){
    padding:10px!important;
  }
  #jlpt180-ag-root .ag-route-dialog{
    max-height:calc(100dvh - 20px)!important;
  }
  #jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card{
    min-height:88px!important;
    padding:16px 68px 16px 16px!important;
  }
}

/* v166: route picker readability + close-button alignment */
#jlpt180-ag-root .ag-route-dialog{
  padding-right:34px!important;
}
#jlpt180-ag-root .ag-route-dialog h2{
  padding-right:84px!important;
}
#jlpt180-ag-root .ag-route-close{
  top:18px!important;
  right:30px!important;
  width:46px!important;
  height:46px!important;
  z-index:30!important;
  border-radius:18px!important;
}
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card{
  display:grid!important;
  align-content:center!important;
  gap:6px!important;
  min-height:98px!important;
  padding:16px 18px!important;
  padding-right:18px!important;
  text-align:left!important;
}
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card b{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  padding-right:82px!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  color:#132033!important;
  font-size:21px!important;
  line-height:1.12!important;
}
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card span{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  margin-top:0!important;
  padding-right:58px!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:normal!important;
  font-size:13px!important;
  line-height:1.28!important;
}
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card::after{
  top:12px!important;
  right:12px!important;
}
#jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card::before{
  right:12px!important;
  bottom:12px!important;
}

@media (max-width:520px){
  #jlpt180-ag-root .ag-route-dialog{
    padding-right:16px!important;
  }
  #jlpt180-ag-root .ag-route-dialog h2{
    padding-right:62px!important;
  }
  #jlpt180-ag-root .ag-route-close{
    top:12px!important;
    right:14px!important;
    width:44px!important;
    height:44px!important;
  }
  #jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card{
    min-height:92px!important;
    padding:15px 16px!important;
  }
  #jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card b{
    padding-right:72px!important;
    font-size:19px!important;
  }
  #jlpt180-ag-root .ag-route-options[data-grouped="1"] .ag-route-card span{
    padding-right:54px!important;
    font-size:12px!important;
  }
}


/* ========================================================================
   v199 dashboard color/depth only
   Scope: Aurora outer dashboard only. No layout/grid/height changes.
   ======================================================================== */
@media (min-width:821px){
  #jlpt180-ag-root{
    --ag-depth-green:#16a34a;
    --ag-depth-blue:#0ea5e9;
    --ag-depth-purple:#9333ea;
    --ag-depth-gold:#f59e0b;
    --ag-depth-orange:#f97316;
  }

  #jlpt180-ag-root .ag-main,
  #jlpt180-ag-root .ag-sidebar{
    background:
      radial-gradient(circle at 8% 4%,rgba(34,197,94,.10),transparent 26%),
      linear-gradient(180deg,rgba(255,255,255,.92),rgba(250,255,252,.78))!important;
    border:1px solid rgba(255,255,255,.92)!important;
    box-shadow:
      0 22px 48px rgba(31,94,72,.12),
      inset 0 1px 0 rgba(255,255,255,.96)!important;
  }

  #jlpt180-ag-root .ag-stat-card{
    background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(248,250,252,.82))!important;
    border:1px solid rgba(255,255,255,.92)!important;
    box-shadow:
      0 12px 26px rgba(15,23,42,.07),
      inset 0 -4px 0 rgba(15,23,42,.045),
      inset 0 1px 0 rgba(255,255,255,.95)!important;
  }

  #jlpt180-ag-root .ag-stat-card:nth-child(1){
    background:linear-gradient(145deg,#fff7ed,#ffffff)!important;
    border-color:#fed7aa!important;
  }
  #jlpt180-ag-root .ag-stat-card:nth-child(2){
    background:linear-gradient(145deg,#eff6ff,#ffffff)!important;
    border-color:#bfdbfe!important;
  }
  #jlpt180-ag-root .ag-stat-card:nth-child(3){
    background:linear-gradient(145deg,#fffbeb,#ffffff)!important;
    border-color:#fde68a!important;
  }
  #jlpt180-ag-root .ag-stat-card:nth-child(4){
    background:linear-gradient(145deg,#fdf2f8,#ffffff)!important;
    border-color:#fbcfe8!important;
  }

  #jlpt180-ag-root .ag-route-switcher,
  #jlpt180-ag-root .ag-board,
  #jlpt180-ag-root .ag-panel{
    background:
      radial-gradient(circle at 88% 18%,rgba(34,197,94,.10),transparent 25%),
      linear-gradient(135deg,rgba(255,255,255,.94),rgba(239,246,255,.78))!important;
    border:1px solid rgba(187,247,208,.75)!important;
    box-shadow:
      0 18px 40px rgba(31,94,72,.10),
      inset 0 1px 0 rgba(255,255,255,.95)!important;
  }

  #jlpt180-ag-root .ag-level-tabs,
  #jlpt180-ag-root .ag-route-tabs,
  #jlpt180-ag-root [data-ag-level-tabs]{
    background:rgba(255,255,255,.86)!important;
    box-shadow:
      0 10px 20px rgba(15,23,42,.06),
      inset 0 -3px 0 rgba(15,23,42,.055)!important;
  }

  #jlpt180-ag-root .ag-section-head button,
  #jlpt180-ag-root .ag-panel button{
    background:linear-gradient(180deg,#ffffff,#f8fff9)!important;
    border-color:#bbf7d0!important;
    color:#15803d!important;
    box-shadow:0 8px 18px rgba(34,197,94,.10), inset 0 -2px 0 rgba(34,197,94,.08)!important;
  }

  #jlpt180-ag-root .ag-step{
    background:
      radial-gradient(circle at 50% 4%,color-mix(in srgb,var(--ag-step-accent,#22c55e) 10%,transparent),transparent 34%),
      linear-gradient(180deg,#ffffff,#f8fafc)!important;
    border:1px solid color-mix(in srgb,var(--ag-step-accent,#22c55e) 22%,rgba(15,23,42,.08))!important;
    border-bottom:5px solid color-mix(in srgb,var(--ag-step-accent,#22c55e) 72%,#0f172a)!important;
    box-shadow:
      0 12px 24px rgba(15,23,42,.075),
      inset 0 1px 0 rgba(255,255,255,.96)!important;
  }

  #jlpt180-ag-root .ag-step[data-step="review"]{--ag-step-accent:#22c55e;--ag-step-dark:#15803d}
  #jlpt180-ag-root .ag-step[data-step="vocab"]{--ag-step-accent:#25a8e8;--ag-step-dark:#0369a1}
  #jlpt180-ag-root .ag-step[data-step="grammar"]{--ag-step-accent:#a855f7;--ag-step-dark:#6d28d9}
  #jlpt180-ag-root .ag-step[data-step="quiz"]{--ag-step-accent:#fbbf24;--ag-step-dark:#d97706}
  #jlpt180-ag-root .ag-step[data-step="reward"]{--ag-step-accent:#fb923c;--ag-step-dark:#c2410c}

  #jlpt180-ag-root .ag-step em{
    background:linear-gradient(180deg,var(--ag-step-accent,#22c55e),var(--ag-step-dark,#15803d))!important;
    box-shadow:
      0 8px 16px color-mix(in srgb,var(--ag-step-accent,#22c55e) 28%,transparent),
      inset 0 -3px 0 rgba(0,0,0,.16)!important;
  }

  #jlpt180-ag-root .ag-step img{
    filter:drop-shadow(0 8px 12px color-mix(in srgb,var(--ag-step-accent,#22c55e) 22%,transparent))!important;
  }

  #jlpt180-ag-root .ag-step a{
    color:#fff!important;
    background:linear-gradient(180deg,var(--ag-step-accent,#22c55e),var(--ag-step-dark,#15803d))!important;
    border:0!important;
    box-shadow:
      inset 0 -4px 0 rgba(0,0,0,.18),
      0 10px 18px color-mix(in srgb,var(--ag-step-accent,#22c55e) 25%,transparent)!important;
  }

  #jlpt180-ag-root .ag-menu a.is-active,
  #jlpt180-ag-root .ag-menu .is-active,
  #jlpt180-ag-root .ag-menu a[aria-current="page"]{
    background:linear-gradient(135deg,#ecfdf5,#ffffff)!important;
    border-color:#bbf7d0!important;
    box-shadow:0 10px 24px rgba(34,197,94,.10), inset 0 -3px 0 rgba(22,163,74,.10)!important;
  }
}

@media (max-width:820px){
  #jlpt180-ag-root .ag-step{
    box-shadow:
      0 8px 18px rgba(15,23,42,.07),
      inset 0 -3px 0 rgba(15,23,42,.04)!important;
  }
}


/* ========================================================================
   v200 dashboard visible depth — still no layout change
   Stronger visual-only polish: colors, borders, shadows, CTA depth.
   ======================================================================== */
@media (min-width:821px){
  html body #jlpt180-ag-root .ag-main{
    background:
      radial-gradient(circle at 8% 3%,rgba(34,197,94,.13),transparent 28%),
      radial-gradient(circle at 96% 2%,rgba(14,165,233,.11),transparent 26%),
      linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,253,249,.86))!important;
    box-shadow:
      0 26px 60px rgba(21,94,59,.14),
      inset 0 1px 0 rgba(255,255,255,.96)!important;
  }

  html body #jlpt180-ag-root .ag-sidebar{
    background:
      linear-gradient(180deg,rgba(255,255,255,.96),rgba(240,253,244,.82))!important;
    box-shadow:
      0 24px 54px rgba(21,94,59,.16),
      inset 0 1px 0 rgba(255,255,255,.98)!important;
  }

  html body #jlpt180-ag-root .ag-stat-card{
    border-width:1px!important;
    box-shadow:
      0 14px 30px rgba(15,23,42,.08),
      inset 0 -5px 0 rgba(15,23,42,.055),
      inset 0 1px 0 rgba(255,255,255,.98)!important;
  }
  html body #jlpt180-ag-root .ag-stat-card:nth-child(1){
    background:linear-gradient(145deg,#fff1e6 0%,#fffaf5 60%,#ffffff 100%)!important;
    border-color:#fdba74!important;
  }
  html body #jlpt180-ag-root .ag-stat-card:nth-child(1) b{color:#ea580c!important}
  html body #jlpt180-ag-root .ag-stat-card:nth-child(2){
    background:linear-gradient(145deg,#e8f2ff 0%,#f8fbff 62%,#ffffff 100%)!important;
    border-color:#93c5fd!important;
  }
  html body #jlpt180-ag-root .ag-stat-card:nth-child(2) b{color:#2563eb!important}
  html body #jlpt180-ag-root .ag-stat-card:nth-child(3){
    background:linear-gradient(145deg,#fff3c4 0%,#fffaf0 62%,#ffffff 100%)!important;
    border-color:#facc15!important;
  }
  html body #jlpt180-ag-root .ag-stat-card:nth-child(3) b{color:#ca8a04!important}
  html body #jlpt180-ag-root .ag-stat-card:nth-child(4){
    background:linear-gradient(145deg,#ffe8f4 0%,#fff7fb 62%,#ffffff 100%)!important;
    border-color:#f9a8d4!important;
  }
  html body #jlpt180-ag-root .ag-stat-card:nth-child(4) b{color:#059669!important}

  html body #jlpt180-ag-root .ag-route-switcher,
  html body #jlpt180-ag-root .ag-board{
    background:
      radial-gradient(circle at 88% 16%,rgba(34,197,94,.16),transparent 28%),
      radial-gradient(circle at 10% 0%,rgba(14,165,233,.10),transparent 25%),
      linear-gradient(135deg,#f0fff7 0%,#eef9ff 55%,#ffffff 100%)!important;
    border-color:#b7f3cf!important;
    box-shadow:
      0 20px 46px rgba(21,94,59,.13),
      inset 0 -4px 0 rgba(34,197,94,.055),
      inset 0 1px 0 rgba(255,255,255,.96)!important;
  }

  html body #jlpt180-ag-root .ag-panel{
    background:linear-gradient(145deg,#ffffff,#f7fffb)!important;
    border-color:#d7fbe4!important;
    box-shadow:
      0 16px 34px rgba(15,23,42,.075),
      inset 0 -4px 0 rgba(15,23,42,.035)!important;
  }

  html body #jlpt180-ag-root .ag-section-head button,
  html body #jlpt180-ag-root .ag-panel button{
    background:linear-gradient(180deg,#ffffff 0%,#ecfdf5 100%)!important;
    border-color:#86efac!important;
    color:#15803d!important;
    box-shadow:
      0 10px 20px rgba(34,197,94,.13),
      inset 0 -3px 0 rgba(22,163,74,.12)!important;
  }

  html body #jlpt180-ag-root .ag-step{
    border-bottom-width:6px!important;
    box-shadow:
      0 16px 30px rgba(15,23,42,.10),
      inset 0 1px 0 rgba(255,255,255,.98)!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="review"]{
    background:linear-gradient(180deg,#ffffff 0%,#f0fdf4 100%)!important;
    border-color:#bbf7d0!important;
    border-bottom-color:#16a34a!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="vocab"]{
    background:linear-gradient(180deg,#ffffff 0%,#eef8ff 100%)!important;
    border-color:#bae6fd!important;
    border-bottom-color:#0ea5e9!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="grammar"]{
    background:linear-gradient(180deg,#ffffff 0%,#faf5ff 100%)!important;
    border-color:#e9d5ff!important;
    border-bottom-color:#9333ea!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="quiz"]{
    background:linear-gradient(180deg,#ffffff 0%,#fffbeb 100%)!important;
    border-color:#fde68a!important;
    border-bottom-color:#eab308!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="reward"]{
    background:linear-gradient(180deg,#ffffff 0%,#fff7ed 100%)!important;
    border-color:#fed7aa!important;
    border-bottom-color:#f97316!important;
  }

  html body #jlpt180-ag-root .ag-step em{
    box-shadow:
      0 9px 18px rgba(15,23,42,.14),
      inset 0 -4px 0 rgba(0,0,0,.18)!important;
  }

  html body #jlpt180-ag-root .ag-step img{
    transform:translateZ(0);
    filter:
      drop-shadow(0 10px 13px rgba(15,23,42,.12))
      saturate(1.12)!important;
  }

  html body #jlpt180-ag-root .ag-step a{
    box-shadow:
      inset 0 -5px 0 rgba(0,0,0,.20),
      0 12px 22px rgba(15,23,42,.12)!important;
    text-shadow:0 1px 0 rgba(0,0,0,.12)!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="review"] a{background:linear-gradient(180deg,#34d86f,#16a34a)!important}
  html body #jlpt180-ag-root .ag-step[data-step="vocab"] a{background:linear-gradient(180deg,#2bb9f0,#0ea5e9)!important}
  html body #jlpt180-ag-root .ag-step[data-step="grammar"] a{background:linear-gradient(180deg,#b45cff,#9333ea)!important}
  html body #jlpt180-ag-root .ag-step[data-step="quiz"] a{background:linear-gradient(180deg,#ffd23f,#eab308)!important;color:#713f12!important}
  html body #jlpt180-ag-root .ag-step[data-step="reward"] a{background:linear-gradient(180deg,#ffad32,#f97316)!important}

  html body #jlpt180-ag-root .ag-menu a,
  html body #jlpt180-ag-root .ag-menu button{
    transition:filter .16s ease, box-shadow .16s ease!important;
  }
  html body #jlpt180-ag-root .ag-menu a.is-active,
  html body #jlpt180-ag-root .ag-menu .is-active,
  html body #jlpt180-ag-root .ag-menu a[aria-current="page"]{
    background:linear-gradient(135deg,#e6fff1,#ffffff)!important;
    border-color:#86efac!important;
    box-shadow:
      0 12px 24px rgba(34,197,94,.14),
      inset 0 -3px 0 rgba(22,163,74,.12)!important;
  }
}


/* ========================================================================
   v201 dashboard color + goal ring fix
   Visual-only saturation pass and reliable 100% ring.
   ======================================================================== */
#jlpt180-ag-root .ag-ring{
  --ag-goal-percent:60;
  background:
    radial-gradient(circle at center,#fff 58%,transparent 59%),
    conic-gradient(var(--ag-green) 0 calc(var(--ag-goal-percent) * 1%),#dcefe1 0 100%)!important;
  box-shadow:
    0 12px 26px rgba(34,197,94,.18),
    inset 0 0 0 1px rgba(255,255,255,.92)!important;
}
#jlpt180-ag-root .ag-ring.is-complete{
  background:
    radial-gradient(circle at center,#fff 58%,transparent 59%),
    conic-gradient(#22c55e 0 100%,#22c55e 0 100%)!important;
}

@media (min-width:821px){
  html body #jlpt180-ag-root .ag-stat-card:nth-child(1){
    background:linear-gradient(145deg,#ffe9d7 0%,#fff7ef 58%,#ffffff 100%)!important;
    border-color:#fb923c!important;
  }
  html body #jlpt180-ag-root .ag-stat-card:nth-child(2){
    background:linear-gradient(145deg,#dbeafe 0%,#eff6ff 58%,#ffffff 100%)!important;
    border-color:#60a5fa!important;
  }
  html body #jlpt180-ag-root .ag-stat-card:nth-child(3){
    background:linear-gradient(145deg,#fef3c7 0%,#fff8e1 58%,#ffffff 100%)!important;
    border-color:#f59e0b!important;
  }
  html body #jlpt180-ag-root .ag-stat-card:nth-child(4){
    background:linear-gradient(145deg,#fce7f3 0%,#fff1f8 58%,#ffffff 100%)!important;
    border-color:#f472b6!important;
  }

  html body #jlpt180-ag-root .ag-route-switcher,
  html body #jlpt180-ag-root .ag-board{
    background:
      radial-gradient(circle at 88% 18%,rgba(34,197,94,.22),transparent 28%),
      radial-gradient(circle at 12% 4%,rgba(14,165,233,.16),transparent 26%),
      linear-gradient(135deg,#ecfff4 0%,#eaf8ff 52%,#ffffff 100%)!important;
    border-color:#86efac!important;
  }

  html body #jlpt180-ag-root .ag-step[data-step="review"]{
    background:linear-gradient(180deg,#ffffff 0%,#e9fff2 100%)!important;
    border-color:#86efac!important;
    border-bottom-color:#16a34a!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="vocab"]{
    background:linear-gradient(180deg,#ffffff 0%,#e3f5ff 100%)!important;
    border-color:#7dd3fc!important;
    border-bottom-color:#0284c7!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="grammar"]{
    background:linear-gradient(180deg,#ffffff 0%,#f3e8ff 100%)!important;
    border-color:#c084fc!important;
    border-bottom-color:#7c3aed!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="quiz"]{
    background:linear-gradient(180deg,#ffffff 0%,#fff3c4 100%)!important;
    border-color:#facc15!important;
    border-bottom-color:#ca8a04!important;
  }
  html body #jlpt180-ag-root .ag-step[data-step="reward"]{
    background:linear-gradient(180deg,#ffffff 0%,#ffedd5 100%)!important;
    border-color:#fb923c!important;
    border-bottom-color:#ea580c!important;
  }

  html body #jlpt180-ag-root .ag-step[data-step="review"] em{background:linear-gradient(180deg,#4ade80,#16a34a)!important}
  html body #jlpt180-ag-root .ag-step[data-step="vocab"] em{background:linear-gradient(180deg,#38bdf8,#0284c7)!important}
  html body #jlpt180-ag-root .ag-step[data-step="grammar"] em{background:linear-gradient(180deg,#c084fc,#7c3aed)!important}
  html body #jlpt180-ag-root .ag-step[data-step="quiz"] em{background:linear-gradient(180deg,#facc15,#ca8a04)!important}
  html body #jlpt180-ag-root .ag-step[data-step="reward"] em{background:linear-gradient(180deg,#fb923c,#ea580c)!important}

  html body #jlpt180-ag-root .ag-step[data-step="review"] a{background:linear-gradient(180deg,#36d96e,#16a34a)!important}
  html body #jlpt180-ag-root .ag-step[data-step="vocab"] a{background:linear-gradient(180deg,#28b9ee,#0284c7)!important}
  html body #jlpt180-ag-root .ag-step[data-step="grammar"] a{background:linear-gradient(180deg,#b45cff,#7c3aed)!important}
  html body #jlpt180-ag-root .ag-step[data-step="quiz"] a{background:linear-gradient(180deg,#ffd43b,#ca8a04)!important;color:#713f12!important}
  html body #jlpt180-ag-root .ag-step[data-step="reward"] a{background:linear-gradient(180deg,#ff9f2f,#ea580c)!important}
}


/* ========================================================================
   v202 dashboard: correct today XP + ring + colorful sidebar menu
   Scope: outer dashboard only. No grid/layout changes.
   ======================================================================== */
#jlpt180-ag-root .ag-ring{
  position:relative!important;
  isolation:isolate!important;
}
#jlpt180-ag-root .ag-ring.is-complete{
  background:
    radial-gradient(circle at center,#fff 58%,transparent 59%),
    conic-gradient(#22c55e 0 1turn)!important;
}
#jlpt180-ag-root .ag-ring.is-complete::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:999px;
  border:2px solid rgba(34,197,94,.18);
  pointer-events:none;
}

@media (min-width:821px){
  html body #jlpt180-ag-root .ag-sidebar{
    background:
      radial-gradient(circle at 18% 0%,rgba(34,197,94,.12),transparent 28%),
      linear-gradient(180deg,#ffffff 0%,#f4fff8 100%)!important;
  }

  html body #jlpt180-ag-root .ag-brand{
    padding-bottom:14px!important;
    border-bottom:1px solid rgba(34,197,94,.16)!important;
  }

  html body #jlpt180-ag-root .ag-menu{
    gap:8px!important;
    padding-top:4px!important;
  }

  html body #jlpt180-ag-root .ag-menu a{
    position:relative!important;
    border:1px solid transparent!important;
    background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(248,250,252,.54))!important;
    box-shadow:inset 0 -2px 0 rgba(15,23,42,.025)!important;
    overflow:hidden!important;
  }

  html body #jlpt180-ag-root .ag-menu a + a{
    margin-top:2px!important;
  }

  html body #jlpt180-ag-root .ag-menu a::before{
    content:"";
    position:absolute;
    left:0;
    top:13px;
    bottom:13px;
    width:4px;
    border-radius:0 999px 999px 0;
    background:var(--ag-menu-accent,#22c55e);
    opacity:.42;
  }

  html body #jlpt180-ag-root .ag-menu a span{
    width:30px!important;
    height:30px!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    color:var(--ag-menu-accent,#22c55e)!important;
    background:color-mix(in srgb,var(--ag-menu-accent,#22c55e) 13%,#ffffff)!important;
    box-shadow:
      inset 0 -2px 0 color-mix(in srgb,var(--ag-menu-accent,#22c55e) 12%,transparent),
      0 6px 14px color-mix(in srgb,var(--ag-menu-accent,#22c55e) 12%,transparent)!important;
  }

  html body #jlpt180-ag-root .ag-menu a:nth-child(1){--ag-menu-accent:#22c55e}
  html body #jlpt180-ag-root .ag-menu a:nth-child(2){--ag-menu-accent:#f97316}
  html body #jlpt180-ag-root .ag-menu a:nth-child(3){--ag-menu-accent:#0ea5e9}
  html body #jlpt180-ag-root .ag-menu a:nth-child(4){--ag-menu-accent:#9333ea}
  html body #jlpt180-ag-root .ag-menu a:nth-child(5){--ag-menu-accent:#eab308}
  html body #jlpt180-ag-root .ag-menu a:nth-child(6){--ag-menu-accent:#fb923c}
  html body #jlpt180-ag-root .ag-menu a:nth-child(7){--ag-menu-accent:#64748b}

  html body #jlpt180-ag-root .ag-menu a.is-active,
  html body #jlpt180-ag-root .ag-menu a[aria-current="page"]{
    color:#166534!important;
    background:
      linear-gradient(135deg,rgba(236,253,245,.98),rgba(255,255,255,.9))!important;
    border-color:#86efac!important;
    box-shadow:
      0 12px 24px rgba(34,197,94,.14),
      inset 0 -4px 0 rgba(22,163,74,.12),
      inset 0 1px 0 rgba(255,255,255,.95)!important;
  }

  html body #jlpt180-ag-root .ag-menu a.is-active::before,
  html body #jlpt180-ag-root .ag-menu a[aria-current="page"]::before{
    opacity:1!important;
    width:5px!important;
  }

  html body #jlpt180-ag-root .ag-user-card,
  html body #jlpt180-ag-root .ag-goal{
    border-color:rgba(134,239,172,.72)!important;
    background:
      radial-gradient(circle at 90% 15%,rgba(251,191,36,.12),transparent 30%),
      linear-gradient(145deg,#ffffff,#f0fdf4)!important;
    box-shadow:
      0 14px 30px rgba(21,128,61,.10),
      inset 0 1px 0 rgba(255,255,255,.95)!important;
  }

  html body #jlpt180-ag-root .ag-stat-card{
    border-width:1.5px!important;
  }

  html body #jlpt180-ag-root .ag-route-switcher,
  html body #jlpt180-ag-root .ag-board{
    background:
      radial-gradient(circle at 84% 20%,rgba(34,197,94,.24),transparent 26%),
      radial-gradient(circle at 12% 0%,rgba(14,165,233,.18),transparent 25%),
      linear-gradient(135deg,#eafff4 0%,#e6f8ff 54%,#fffdf8 100%)!important;
  }

  html body #jlpt180-ag-root .ag-step{
    border-width:1.5px!important;
    border-bottom-width:6px!important;
  }
}


/* ========================================================================
   v203 goal ring hard fix: layer ring, no conic seam at 100%
   ======================================================================== */
#jlpt180-ag-root .ag-ring{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  background:none!important;
  overflow:hidden!important;
}
#jlpt180-ag-root .ag-ring::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  border-radius:999px!important;
  background:conic-gradient(#22c55e 0 calc(var(--ag-goal-percent,60) * 1%), #dcefe1 0 100%)!important;
  box-shadow:0 12px 26px rgba(34,197,94,.18)!important;
  z-index:0!important;
}
#jlpt180-ag-root .ag-ring::after{
  content:""!important;
  position:absolute!important;
  inset:10px!important;
  border-radius:999px!important;
  background:#fff!important;
  border:1px solid rgba(34,197,94,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95)!important;
  z-index:1!important;
}
#jlpt180-ag-root .ag-ring.is-complete::before{
  background:#22c55e!important;
}
#jlpt180-ag-root .ag-ring b,
#jlpt180-ag-root .ag-ring span{
  position:relative!important;
  z-index:2!important;
}

/* v1.0.86: clean red close buttons, no admin redirect */
#jlpt180-ag-root .ag-day-panel,
#jlpt180-ag-root .ag-route-dialog,
#jlpt180-ag-root .ag-app-window{
  position:relative!important;
}
#jlpt180-ag-root .ag-day-panel-head,
#jlpt180-ag-root .ag-route-dialog,
#jlpt180-ag-root .ag-app-head{
  padding-right:96px!important;
}
#jlpt180-ag-root .ag-day-panel-close,
#jlpt180-ag-root [data-ag-day-panel-close],
#jlpt180-ag-root .ag-route-close,
#jlpt180-ag-root [data-route-close],
#jlpt180-ag-root .ag-app-close,
#jlpt180-ag-root [data-ag-app-close]{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  left:auto!important;
  width:76px!important;
  min-width:76px!important;
  height:36px!important;
  min-height:36px!important;
  padding:0 12px!important;
  border:0!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#ff6b6b 0%,#ef4444 62%,#dc2626 100%)!important;
  color:#fff!important;
  box-shadow:0 7px 0 #b91c1c,0 12px 22px rgba(220,38,38,.22)!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  text-align:center!important;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
  font-size:12px!important;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  white-space:nowrap!important;
  text-indent:0!important;
  text-transform:uppercase!important;
  z-index:2147483000!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  cursor:pointer!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
#jlpt180-ag-root .ag-day-panel-close:active,
#jlpt180-ag-root [data-ag-day-panel-close]:active,
#jlpt180-ag-root .ag-route-close:active,
#jlpt180-ag-root [data-route-close]:active,
#jlpt180-ag-root .ag-app-close:active,
#jlpt180-ag-root [data-ag-app-close]:active{
  transform:translateY(4px)!important;
  box-shadow:0 3px 0 #b91c1c,0 8px 16px rgba(220,38,38,.16)!important;
}
#jlpt180-ag-root .ag-day-modal,
#jlpt180-ag-root .ag-route-modal,
#jlpt180-ag-root .ag-app-overlay{
  pointer-events:auto!important;
}
#jlpt180-ag-root .ag-day-modal-slot,
#jlpt180-ag-root .ag-route-dialog,
#jlpt180-ag-root .ag-app-window{
  pointer-events:auto!important;
}



/* =========================================================
   v1.1.0 Linh Hoa Dock + mobile full-width patch
   Scope: Aurora mobile v4 only. No data/layout logic change.
   ========================================================= */
@media (max-width: 767px){
  html,
  body{
    overflow-x:hidden!important;
  }

  body #jlpt180-ag-root.jlpt180-ag{
    width:100vw!important;
    max-width:100vw!important;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 18% 0%, rgba(187,247,208,.45), transparent 28%),
      radial-gradient(circle at 88% 8%, rgba(191,219,254,.45), transparent 30%),
      linear-gradient(180deg,#ecfeff 0%,#f0fdf4 52%,#fff7ed 100%)!important;
  }

  #jlpt180-ag-root .ag-mobile-v4{
    width:100vw!important;
    max-width:100vw!important;
    min-width:0!important;
    margin:0!important;
    padding:10px max(10px, env(safe-area-inset-left)) calc(92px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right))!important;
    border-radius:0!important;
    overflow-x:hidden!important;
  }

  #jlpt180-ag-root .ag-mobile-v4 .m4-scroll-area{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    padding-bottom:14px!important;
  }

  #jlpt180-ag-root .m4-top-card,
  #jlpt180-ag-root .m4-today,
  #jlpt180-ag-root .m4-steps,
  #jlpt180-ag-root .m4-step{
    max-width:100%!important;
    min-width:0!important;
  }

  #jlpt180-ag-root .m4-step{
    gap:10px!important;
  }

  #jlpt180-ag-root .m4-step > div{
    min-width:0!important;
  }

  #jlpt180-ag-root .m4-step h3,
  #jlpt180-ag-root .m4-step p,
  #jlpt180-ag-root .m4-step em{
    overflow-wrap:anywhere;
  }

  #jlpt180-ag-root .m4-step button{
    flex:0 0 auto!important;
    min-width:72px!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .linh-hoa-dock{
    position:fixed!important;
    z-index:999999!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(420px, calc(100vw - 16px))!important;
    height:72px!important;
    display:grid!important;
    grid-template-columns:repeat(4, minmax(0,1fr))!important;
    gap:6px!important;
    padding:7px!important;
    border-radius:999px!important;
    border:1px solid rgba(34,197,94,.34)!important;
    background:
      radial-gradient(circle at 16% 0%, rgba(187,247,208,.65), transparent 32%),
      radial-gradient(circle at 82% 12%, rgba(191,219,254,.62), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.94), rgba(236,253,245,.86))!important;
    box-shadow:
      0 18px 42px rgba(15,118,110,.24),
      0 0 0 1px rgba(255,255,255,.88) inset,
      0 0 24px rgba(134,239,172,.20)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    pointer-events:auto!important;
  }

  #jlpt180-ag-root .linh-hoa-dock:before{
    content:"";
    position:absolute;
    inset:6px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.66);
    pointer-events:none;
    background:
      radial-gradient(circle at 18% 50%, rgba(34,197,94,.12), transparent 18%),
      radial-gradient(circle at 50% 50%, rgba(168,85,247,.08), transparent 20%),
      radial-gradient(circle at 82% 50%, rgba(14,165,233,.10), transparent 18%);
  }

  #jlpt180-ag-root .linh-hoa-dock button{
    position:relative!important;
    z-index:1!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    min-width:0!important;
    width:100%!important;
    height:58px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:3px!important;
    margin:0!important;
    padding:5px 2px!important;
    border:0!important;
    border-radius:999px!important;
    background:transparent!important;
    color:#2f5f55!important;
    font:inherit!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    box-shadow:none!important;
    text-decoration:none!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button span{
    width:30px!important;
    height:30px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    font-size:17px!important;
    line-height:1!important;
    background:rgba(255,255,255,.66)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 7px 14px rgba(15,118,110,.08)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button b{
    max-width:100%!important;
    font-size:10px!important;
    line-height:1.05!important;
    font-weight:1000!important;
    letter-spacing:-.03em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button.is-active,
  #jlpt180-ag-root .linh-hoa-dock button:focus-visible{
    transform:translateY(-3px)!important;
    outline:none!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-home.is-active,
  #jlpt180-ag-root .linh-hoa-dock .m4-nav-home:focus-visible{
    color:#14532d!important;
    background:linear-gradient(180deg,#dcfce7,#86efac)!important;
    box-shadow:0 12px 24px rgba(34,197,94,.28), inset 0 -3px 0 rgba(22,101,52,.12)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-library.is-active,
  #jlpt180-ag-root .linh-hoa-dock .m4-nav-library:focus-visible{
    color:#5b21b6!important;
    background:linear-gradient(180deg,#f3e8ff,#d8b4fe)!important;
    box-shadow:0 12px 24px rgba(168,85,247,.24), inset 0 -3px 0 rgba(91,33,182,.12)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-exam.is-active,
  #jlpt180-ag-root .linh-hoa-dock .m4-nav-exam:focus-visible{
    color:#92400e!important;
    background:linear-gradient(180deg,#fef3c7,#fcd34d)!important;
    box-shadow:0 12px 24px rgba(245,158,11,.24), inset 0 -3px 0 rgba(146,64,14,.12)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-listen.is-active,
  #jlpt180-ag-root .linh-hoa-dock .m4-nav-listen:focus-visible{
    color:#075985!important;
    background:linear-gradient(180deg,#e0f2fe,#7dd3fc)!important;
    box-shadow:0 12px 24px rgba(14,165,233,.24), inset 0 -3px 0 rgba(7,89,133,.12)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button.is-active span,
  #jlpt180-ag-root .linh-hoa-dock button:focus-visible span{
    background:rgba(255,255,255,.92)!important;
    box-shadow:0 0 0 4px rgba(255,255,255,.45), 0 8px 18px rgba(15,118,110,.14)!important;
  }

  #jlpt180-ag-root .m4-route-toast[hidden]{
    display:none!important;
  }

  #jlpt180-ag-root .m4-route-toast{
    position:fixed!important;
    z-index:1000000!important;
    left:0!important;
    right:0!important;
    bottom:calc(88px + env(safe-area-inset-bottom))!important;
    display:flex!important;
    justify-content:center!important;
    padding:0 12px!important;
    pointer-events:none!important;
  }

  #jlpt180-ag-root .m4-route-toast-card{
    width:min(380px, calc(100vw - 24px))!important;
    border-radius:22px!important;
    border:1px solid rgba(34,197,94,.34)!important;
    background:
      radial-gradient(circle at 12% 0%, rgba(187,247,208,.48), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,253,244,.96))!important;
    box-shadow:0 18px 42px rgba(15,118,110,.22), inset 0 1px 0 rgba(255,255,255,.94)!important;
    padding:15px 15px 13px!important;
    color:#164e3b!important;
    pointer-events:auto!important;
  }

  #jlpt180-ag-root .m4-route-toast-card strong{
    display:block!important;
    font-size:16px!important;
    font-weight:1000!important;
    margin:0 32px 5px 0!important;
    color:#047857!important;
  }

  #jlpt180-ag-root .m4-route-toast-card p{
    margin:0 0 12px!important;
    font-size:13px!important;
    line-height:1.35!important;
    color:#2f5f55!important;
    font-weight:800!important;
  }

  #jlpt180-ag-root .m4-route-toast-close{
    position:absolute!important;
    top:8px!important;
    right:10px!important;
    width:28px!important;
    height:28px!important;
    border-radius:50%!important;
    border:0!important;
    background:#fee2e2!important;
    color:#b91c1c!important;
    font-weight:1000!important;
  }

  #jlpt180-ag-root .m4-route-toast-actions{
    display:flex!important;
    gap:8px!important;
    align-items:center!important;
  }

  #jlpt180-ag-root .m4-toast-ok,
  #jlpt180-ag-root .m4-toast-open{
    flex:1 1 0!important;
    min-height:38px!important;
    border-radius:999px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    text-align:center!important;
    text-decoration:none!important;
    font-size:12px!important;
    font-weight:1000!important;
  }

  #jlpt180-ag-root .m4-toast-ok{
    border:0!important;
    background:linear-gradient(180deg,#dcfce7,#86efac)!important;
    color:#14532d!important;
  }

  #jlpt180-ag-root .m4-toast-open{
    border:0!important;
    background:linear-gradient(180deg,#e0f2fe,#7dd3fc)!important;
    color:#075985!important;
  }
}

@media (max-width: 374px){
  #jlpt180-ag-root .linh-hoa-dock{
    width:calc(100vw - 10px)!important;
    gap:4px!important;
    padding:6px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button b{
    font-size:9px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button span{
    width:28px!important;
    height:28px!important;
    font-size:16px!important;
  }
}



/* =========================================================
   v1.1.1 Aurora mobile width + Linh Hoa Dock v2
   Stronger Astra/container escape + softer real app dock.
   ========================================================= */
@media (max-width: 767px){
  html,
  body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.jlpt180-clean-lobby,
  body.page,
  body.single,
  body{
    background:#07111f!important;
  }

  body #page,
  body .site,
  body .site-content,
  body .ast-container,
  body .content-area,
  body .site-main,
  body article,
  body .entry-content,
  body .wp-block-post-content{
    max-width:none!important;
    width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow-x:visible!important;
  }

  body #jlpt180-ag-root.jlpt180-ag{
    position:relative!important;
    left:50%!important;
    right:auto!important;
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    margin-left:-50vw!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow-x:hidden!important;
    background:
      radial-gradient(circle at 14% 0%, rgba(187,247,208,.42), transparent 28%),
      radial-gradient(circle at 92% 0%, rgba(186,230,253,.42), transparent 30%),
      linear-gradient(180deg,#eefdf6 0%,#f4fff8 52%,#fff7ed 100%)!important;
  }

  #jlpt180-ag-root .ag-mobile-v4{
    width:100vw!important;
    max-width:100vw!important;
    min-width:100vw!important;
    margin:0!important;
    padding:8px 10px calc(92px + env(safe-area-inset-bottom)) 10px!important;
    border-radius:0!important;
    overflow-x:hidden!important;
    box-shadow:none!important;
  }

  #jlpt180-ag-root .m4-scroll-area{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow-x:hidden!important;
  }

  #jlpt180-ag-root .m4-fixed-head,
  #jlpt180-ag-root .m4-top-card,
  #jlpt180-ag-root .m4-today,
  #jlpt180-ag-root .m4-steps,
  #jlpt180-ag-root .m4-step{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  #jlpt180-ag-root .m4-top-card,
  #jlpt180-ag-root .m4-today{
    border-radius:22px!important;
  }

  #jlpt180-ag-root .m4-step{
    grid-template-columns:44px 46px minmax(0,1fr) auto!important;
    gap:9px!important;
    padding:12px 10px!important;
  }

  #jlpt180-ag-root .m4-step > div{
    min-width:0!important;
  }

  #jlpt180-ag-root .m4-step h3{
    font-size:18px!important;
    line-height:1.08!important;
    max-width:100%!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }

  #jlpt180-ag-root .m4-step p,
  #jlpt180-ag-root .m4-step em{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .m4-step button{
    min-width:76px!important;
    height:40px!important;
    padding:0 10px!important;
    white-space:nowrap!important;
  }

  #jlpt180-ag-root .linh-hoa-dock{
    position:fixed!important;
    z-index:999999!important;
    left:50%!important;
    right:auto!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:min(414px, calc(100vw - 14px))!important;
    height:66px!important;
    display:grid!important;
    grid-template-columns:repeat(4, minmax(0,1fr))!important;
    gap:5px!important;
    padding:6px!important;
    border-radius:999px!important;
    border:1px solid rgba(187,247,208,.72)!important;
    background:
      radial-gradient(circle at 18% 0%, rgba(220,252,231,.90), transparent 30%),
      radial-gradient(circle at 84% 8%, rgba(224,242,254,.82), transparent 32%),
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,253,244,.94))!important;
    box-shadow:
      0 14px 36px rgba(15,23,42,.20),
      0 0 0 1px rgba(255,255,255,.92) inset,
      0 0 22px rgba(134,239,172,.18)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    pointer-events:auto!important;
  }

  #jlpt180-ag-root .linh-hoa-dock:before{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.72);
    pointer-events:none;
    background:none!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button{
    position:relative!important;
    z-index:1!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    min-width:0!important;
    width:100%!important;
    height:54px!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:2px!important;
    margin:0!important;
    padding:3px 2px!important;
    border:0!important;
    border-radius:18px!important;
    background:rgba(255,255,255,.54)!important;
    color:#31594e!important;
    font:inherit!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.82)!important;
    text-decoration:none!important;
    transform:none!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button span{
    width:27px!important;
    height:27px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:50%!important;
    font-size:15px!important;
    line-height:1!important;
    background:rgba(255,255,255,.78)!important;
    box-shadow:0 5px 12px rgba(15,118,110,.08), inset 0 1px 0 rgba(255,255,255,.95)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button b{
    display:block!important;
    max-width:100%!important;
    font-size:9.5px!important;
    line-height:1.05!important;
    font-weight:1000!important;
    letter-spacing:-.04em!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-home{
    color:#166534!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-library{
    color:#6d28d9!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-exam{
    color:#b45309!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-listen{
    color:#0369a1!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button.is-active{
    transform:translateY(-2px)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-home.is-active{
    color:#14532d!important;
    background:linear-gradient(180deg,#dcfce7,#bbf7d0)!important;
    box-shadow:0 8px 18px rgba(34,197,94,.22), inset 0 -3px 0 rgba(22,101,52,.10)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-library.is-active{
    color:#581c87!important;
    background:linear-gradient(180deg,#f3e8ff,#e9d5ff)!important;
    box-shadow:0 8px 18px rgba(168,85,247,.18), inset 0 -3px 0 rgba(88,28,135,.08)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-exam.is-active{
    color:#92400e!important;
    background:linear-gradient(180deg,#fef3c7,#fde68a)!important;
    box-shadow:0 8px 18px rgba(245,158,11,.18), inset 0 -3px 0 rgba(146,64,14,.08)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock .m4-nav-listen.is-active{
    color:#075985!important;
    background:linear-gradient(180deg,#e0f2fe,#bae6fd)!important;
    box-shadow:0 8px 18px rgba(14,165,233,.18), inset 0 -3px 0 rgba(7,89,133,.08)!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button.is-active span{
    background:rgba(255,255,255,.96)!important;
    box-shadow:0 0 0 3px rgba(255,255,255,.42), 0 6px 14px rgba(15,118,110,.12)!important;
  }
}

@media (max-width: 374px){
  #jlpt180-ag-root .ag-mobile-v4{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock{
    width:calc(100vw - 10px)!important;
    gap:4px!important;
    padding:5px!important;
    height:64px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button{
    height:52px!important;
    border-radius:16px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button span{
    width:25px!important;
    height:25px!important;
    font-size:14px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button b{
    font-size:8.7px!important;
  }
}



/* =========================================================
   v1.1.2 FORCE mobile shell + dock
   This patch does not depend on viewport media query.
   It targets the rendered Aurora mobile shell directly.
   ========================================================= */
body:has(#jlpt180-ag-root .ag-mobile-v4) #page,
body:has(#jlpt180-ag-root .ag-mobile-v4) .site,
body:has(#jlpt180-ag-root .ag-mobile-v4) .site-content,
body:has(#jlpt180-ag-root .ag-mobile-v4) .ast-container,
body:has(#jlpt180-ag-root .ag-mobile-v4) .content-area,
body:has(#jlpt180-ag-root .ag-mobile-v4) .site-main,
body:has(#jlpt180-ag-root .ag-mobile-v4) article,
body:has(#jlpt180-ag-root .ag-mobile-v4) .entry-content{
  max-width:none!important;
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow-x:visible!important;
}

body #jlpt180-ag-root.jlpt180-ag:has(.ag-mobile-v4){
  position:relative!important;
  display:block!important;
  left:50%!important;
  width:100vw!important;
  max-width:100vw!important;
  min-width:100vw!important;
  margin-left:-50vw!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  overflow-x:hidden!important;
  background:
    radial-gradient(circle at 10% 0%, rgba(187,247,208,.42), transparent 30%),
    radial-gradient(circle at 92% 2%, rgba(186,230,253,.42), transparent 32%),
    linear-gradient(180deg,#eefdf6 0%,#f7fff9 54%,#fff7ed 100%)!important;
}

#jlpt180-ag-root .ag-mobile-v4{
  width:100vw!important;
  max-width:100vw!important;
  min-width:100vw!important;
  margin:0!important;
  padding:8px 10px calc(92px + env(safe-area-inset-bottom)) 10px!important;
  border-radius:0!important;
  overflow-x:hidden!important;
  background:transparent!important;
  box-shadow:none!important;
}

#jlpt180-ag-root .ag-mobile-v4 .m4-scroll-area{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  overflow-x:hidden!important;
}

#jlpt180-ag-root .ag-mobile-v4 .m4-fixed-head,
#jlpt180-ag-root .ag-mobile-v4 .m4-top-card,
#jlpt180-ag-root .ag-mobile-v4 .m4-today,
#jlpt180-ag-root .ag-mobile-v4 .m4-steps,
#jlpt180-ag-root .ag-mobile-v4 .m4-step{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}

#jlpt180-ag-root .ag-mobile-v4 .m4-step{
  grid-template-columns:44px 46px minmax(0,1fr) auto!important;
  gap:9px!important;
  padding:12px 10px!important;
}

#jlpt180-ag-root .ag-mobile-v4 .m4-step > div{
  min-width:0!important;
}

#jlpt180-ag-root .ag-mobile-v4 .m4-step h3{
  font-size:18px!important;
  line-height:1.08!important;
  max-width:100%!important;
}

#jlpt180-ag-root .ag-mobile-v4 .m4-step button{
  min-width:76px!important;
  height:40px!important;
  padding:0 10px!important;
  white-space:nowrap!important;
}

/* Dock v3: override all earlier .m4-bottom styles without relying on media query */
#jlpt180-ag-root .ag-mobile-v4 .linh-hoa-dock,
#jlpt180-ag-root .linh-hoa-dock{
  position:fixed!important;
  z-index:999999!important;
  left:50%!important;
  right:auto!important;
  bottom:calc(8px + env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  width:min(414px, calc(100vw - 14px))!important;
  height:66px!important;
  display:grid!important;
  grid-template-columns:repeat(4, minmax(0,1fr))!important;
  gap:5px!important;
  padding:6px!important;
  border-radius:999px!important;
  border:1px solid rgba(187,247,208,.72)!important;
  background:
    radial-gradient(circle at 18% 0%, rgba(220,252,231,.92), transparent 30%),
    radial-gradient(circle at 84% 8%, rgba(224,242,254,.86), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,253,244,.95))!important;
  box-shadow:
    0 14px 36px rgba(15,23,42,.20),
    0 0 0 1px rgba(255,255,255,.92) inset,
    0 0 22px rgba(134,239,172,.18)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
  pointer-events:auto!important;
}

#jlpt180-ag-root .linh-hoa-dock:before{
  content:""!important;
  position:absolute!important;
  inset:5px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.72)!important;
  pointer-events:none!important;
  background:none!important;
}

#jlpt180-ag-root .linh-hoa-dock button{
  position:relative!important;
  z-index:1!important;
  appearance:none!important;
  -webkit-appearance:none!important;
  min-width:0!important;
  width:100%!important;
  height:54px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:2px!important;
  margin:0!important;
  padding:3px 2px!important;
  border:0!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.56)!important;
  color:#31594e!important;
  font:inherit!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86)!important;
  text-decoration:none!important;
  transform:none!important;
  overflow:hidden!important;
}

#jlpt180-ag-root .linh-hoa-dock button span{
  width:27px!important;
  height:27px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  font-size:15px!important;
  line-height:1!important;
  background:rgba(255,255,255,.82)!important;
  box-shadow:0 5px 12px rgba(15,118,110,.08), inset 0 1px 0 rgba(255,255,255,.95)!important;
  flex:0 0 auto!important;
}

#jlpt180-ag-root .linh-hoa-dock button b{
  display:block!important;
  max-width:100%!important;
  font-size:9.5px!important;
  line-height:1.05!important;
  font-weight:1000!important;
  letter-spacing:-.04em!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  flex:0 0 auto!important;
}

#jlpt180-ag-root .linh-hoa-dock .m4-nav-home{
  color:#166534!important;
}

#jlpt180-ag-root .linh-hoa-dock .m4-nav-library{
  color:#6d28d9!important;
}

#jlpt180-ag-root .linh-hoa-dock .m4-nav-exam{
  color:#b45309!important;
}

#jlpt180-ag-root .linh-hoa-dock .m4-nav-listen{
  color:#0369a1!important;
}

#jlpt180-ag-root .linh-hoa-dock button.is-active{
  transform:translateY(-2px)!important;
}

#jlpt180-ag-root .linh-hoa-dock .m4-nav-home.is-active{
  color:#14532d!important;
  background:linear-gradient(180deg,#dcfce7,#bbf7d0)!important;
  box-shadow:0 8px 18px rgba(34,197,94,.22), inset 0 -3px 0 rgba(22,101,52,.10)!important;
}

#jlpt180-ag-root .linh-hoa-dock .m4-nav-library.is-active{
  color:#581c87!important;
  background:linear-gradient(180deg,#f3e8ff,#e9d5ff)!important;
  box-shadow:0 8px 18px rgba(168,85,247,.18), inset 0 -3px 0 rgba(88,28,135,.08)!important;
}

#jlpt180-ag-root .linh-hoa-dock .m4-nav-exam.is-active{
  color:#92400e!important;
  background:linear-gradient(180deg,#fef3c7,#fde68a)!important;
  box-shadow:0 8px 18px rgba(245,158,11,.18), inset 0 -3px 0 rgba(146,64,14,.08)!important;
}

#jlpt180-ag-root .linh-hoa-dock .m4-nav-listen.is-active{
  color:#075985!important;
  background:linear-gradient(180deg,#e0f2fe,#bae6fd)!important;
  box-shadow:0 8px 18px rgba(14,165,233,.18), inset 0 -3px 0 rgba(7,89,133,.08)!important;
}

#jlpt180-ag-root .linh-hoa-dock button.is-active span{
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.42), 0 6px 14px rgba(15,118,110,.12)!important;
}

@media (max-width:374px){
  #jlpt180-ag-root .ag-mobile-v4{
    padding-left:8px!important;
    padding-right:8px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock{
    width:calc(100vw - 10px)!important;
    gap:4px!important;
    padding:5px!important;
    height:64px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button{
    height:52px!important;
    border-radius:16px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button span{
    width:25px!important;
    height:25px!important;
    font-size:14px!important;
  }

  #jlpt180-ag-root .linh-hoa-dock button b{
    font-size:8.7px!important;
  }
}