/* Original tile interface inspired by the clarity of classic mobile dashboards. */
.learner-mode{--tile-gap:14px;--tile-radius:9px;--tile-shadow:0 12px 30px #26325a1a}
.learner-mode .metro-home,.learner-mode .metro-page{max-width:1180px;margin:auto}
.learner-mode .metro-welcome{border-radius:var(--tile-radius);box-shadow:var(--tile-shadow);background:linear-gradient(125deg,#5038bf 0%,#7659e6 58%,#936df2 100%)}
.learner-mode .metro-section{margin-top:34px}
.learner-mode .metro-section .section-title{margin:0 0 15px;padding:0 2px}
.learner-mode .metro-section .section-title h2{font-size:31px}
.learner-mode .metro-tile{position:relative;overflow:hidden;border:0;border-radius:var(--tile-radius);box-shadow:var(--tile-shadow);transition:transform .16s ease,filter .16s ease,box-shadow .16s ease;isolation:isolate}
.learner-mode .metro-tile:before{content:'';position:absolute;inset:auto -45px -70px auto;width:150px;height:150px;border:28px solid #ffffff18;border-radius:50%;z-index:-1}
.learner-mode .metro-tile:hover{transform:translateY(-3px);filter:saturate(1.06);box-shadow:0 17px 38px #26325a26}
.learner-mode .metro-tile:active{transform:scale(.975);filter:brightness(.96)}
.learner-mode .metro-grade-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:210px;gap:var(--tile-gap)}
.learner-mode .metro-grade-grid .grade-card{min-height:0!important;padding:25px;color:white;background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 72%,#20265d));display:grid;grid-template:1fr auto auto/1fr auto;align-items:end}
.learner-mode .metro-grade-grid .grade-card:nth-child(2){background:linear-gradient(145deg,#ff825c,#ec5574)}
.learner-mode .metro-grade-grid .grade-card:nth-child(3){background:linear-gradient(145deg,#12bca3,#078ba0)}
.learner-mode .metro-grade-grid .grade-card:nth-child(4){background:linear-gradient(145deg,#2572e8,#4940bd)}
.learner-mode .metro-grade-grid .metro-tile-wide{grid-column:span 2}
.learner-mode .metro-grade-grid .grade-icon{position:absolute;right:20px;top:18px;font-size:52px;opacity:.92}
.learner-mode .metro-grade-grid small{color:#fff;opacity:.82;margin:0;grid-column:1}
.learner-mode .metro-grade-grid strong{color:#fff!important;font-size:58px!important;line-height:.95;grid-column:1;margin:5px 0 8px}
.learner-mode .metro-grade-grid .metro-tile-wide strong{font-size:68px!important}
.learner-mode .metro-grade-grid .grade-card>span{grid-column:1/-1;border-color:#ffffff42;padding-top:12px;color:#fff}
.learner-mode .metro-language-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:var(--tile-gap)!important}
.learner-mode .metro-language-grid a{min-height:142px;border:0!important;border-radius:var(--tile-radius)!important;padding:20px!important;color:#fff!important;background:linear-gradient(145deg,#e15391,#a63caa);display:flex!important;flex-direction:column;align-items:flex-start!important;justify-content:flex-end!important}
.learner-mode .metro-language-grid a:nth-child(2){background:linear-gradient(145deg,#e34f50,#ed8b2e)}
.learner-mode .metro-language-grid a:nth-child(3){background:linear-gradient(145deg,#1696ad,#2870ca)}
.learner-mode .metro-language-grid .metro-tile-wide{grid-column:span 2}
.learner-mode .metro-language-grid i{font-style:normal;position:absolute;right:18px;top:14px;font-size:40px}
.learner-mode .metro-language-grid b{font:800 24px 'Baloo 2'}.learner-mode .metro-language-grid span{font-size:14px;color:#fff;opacity:.88}

.learner-mode .metro-subject-grid{max-width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:190px;gap:var(--tile-gap)}
.learner-mode .metro-subject-tile{min-height:0!important;border:0!important;border-radius:var(--tile-radius)!important;padding:25px!important;color:white;background:linear-gradient(145deg,var(--accent),color-mix(in srgb,var(--accent) 68%,#17225a));display:flex;align-items:flex-end;box-shadow:var(--tile-shadow)}
.learner-mode .metro-subject-tile.metro-tile-wide{grid-column:span 2}
.learner-mode .metro-subject-tile i{position:absolute;right:18px;top:17px;width:64px;height:64px;background:#ffffff24;font-size:35px;border-radius:4px}
.learner-mode .metro-subject-tile div{align-self:flex-end}.learner-mode .metro-subject-tile small{font-size:11px;letter-spacing:1.6px;font-weight:900;opacity:.76}
.learner-mode .metro-subject-tile h2{color:#fff;font-size:30px;margin:3px 0}.learner-mode .metro-subject-tile p{color:#fff;opacity:.83;margin:0}.learner-mode .metro-subject-tile>b{color:#fff;position:absolute;right:20px;bottom:18px}

/* Chapter controls follow the same visual hierarchy without hiding lesson detail. */
.learner-mode .chapter-head{border-left:7px solid #7357e8;padding-left:18px!important}
.learner-mode .mode-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.learner-mode .mode-actions a{border:0;border-radius:7px;background:#7157df;color:white;box-shadow:0 6px 14px #6048c92a}
.learner-mode .mode-actions a:nth-child(2){background:#e05a88}.learner-mode .mode-actions a:nth-child(3){background:#159a91}
.learner-mode .lesson-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--tile-gap)}
.learner-mode .lesson-row{min-height:132px;border:0;border-radius:var(--tile-radius);box-shadow:var(--tile-shadow);grid-template-columns:58px 1fr auto;background:#fff}
.learner-mode .lesson-row:hover{transform:translateY(-2px);box-shadow:0 15px 34px #26325a20}
.learner-mode .lesson-number{border-radius:5px}

@media(max-width:900px){
 .learner-mode .metro-grade-grid,.learner-mode .metro-subject-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .learner-mode .metro-language-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .learner-mode .lesson-list{grid-template-columns:1fr}
}
@media(max-width:700px){
 .learner-mode{--tile-gap:10px;--tile-radius:7px}
 .learner-mode .metro-welcome{min-height:270px;border-radius:var(--tile-radius);padding:28px 23px}.learner-mode .metro-welcome h1{font-size:35px}
 .learner-mode .metro-grade-grid{grid-auto-rows:175px}.learner-mode .metro-grade-grid .grade-card{display:grid!important;grid-template:1fr auto auto/1fr auto!important;padding:18px!important}
 .learner-mode .metro-grade-grid .metro-tile-wide{grid-column:span 2}.learner-mode .metro-grade-grid strong,.learner-mode .metro-grade-grid .metro-tile-wide strong{font-size:43px!important}
 .learner-mode .metro-grade-grid .grade-icon{font-size:39px}.learner-mode .metro-language-grid a{min-height:125px!important}
 .learner-mode .metro-subject-grid{grid-auto-rows:165px}.learner-mode .metro-subject-tile{padding:18px!important}.learner-mode .metro-subject-tile h2{font-size:25px}
 .learner-mode .chapter-head{border-left-width:5px}.learner-mode .mode-actions{grid-template-columns:1fr 1fr 1fr}.learner-mode .mode-actions a{justify-content:center;font-size:13px;padding:10px 7px}
}
@media(prefers-reduced-motion:reduce){.learner-mode .metro-tile,.learner-mode .lesson-row{transition:none}}