:root{
  --navy:#0c1831;--navy2:#13284d;--cream:#f5f0e6;--paper:#fbf8f2;--gold:#c6a56d;--gold2:#e2c89b;
  --ink:#12213d;--muted:#6f7888;--white:#fff;--line:rgba(12,24,49,.08);--shadow:0 16px 40px rgba(12,24,49,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;background:var(--paper);font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);overscroll-behavior:none}
body{overflow:hidden}
button,input,select{font:inherit}
button{cursor:pointer}
#app{position:fixed;inset:0;background:var(--paper)}
.screen{position:absolute;inset:0;background:var(--paper);opacity:0;visibility:hidden;pointer-events:none;transform:translateX(10px);transition:opacity .28s ease,transform .28s ease;overflow:hidden}
.screen.active{opacity:1;visibility:visible;pointer-events:auto;transform:none}

/* true mobile splash */
.splash{display:grid;place-items:center;background:linear-gradient(180deg,#08152d,#0c1831);color:white}
.splash-orbit{position:absolute;width:72vw;max-width:300px;aspect-ratio:1;border-radius:50%;border:1px solid rgba(198,165,109,.14);box-shadow:0 0 0 48px rgba(198,165,109,.035),0 0 0 96px rgba(198,165,109,.018)}
.splash-center{display:grid;place-items:center;position:relative;z-index:2;margin-top:-40px}
.splash-logo{width:min(50vw,190px);max-height:210px;object-fit:contain;filter:drop-shadow(0 16px 35px rgba(0,0,0,.22))}
.splash-sub{font-size:9px;letter-spacing:.2em;color:var(--gold2);margin-top:8px;text-align:center}
.splash-line{width:44px;height:1px;background:rgba(226,200,155,.55);margin:18px 0}
.splash-quote{font-family:Caveat,cursive;font-size:23px;color:rgba(255,255,255,.85)}
.splash-quote b{display:block;color:#e9b65d;font-size:38px;line-height:.8;font-weight:600;text-align:center}
.splash-loading{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));display:grid;place-items:center;gap:8px;font-size:8px;letter-spacing:.2em;color:rgba(255,255,255,.45)}
.splash-loading i{width:24px;height:24px;border-radius:50%;border:3px solid rgba(255,255,255,.08);border-top-color:var(--gold);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* native-ish login */
.login{background:linear-gradient(180deg,#fcfaf6,#f4efe6)}
.login-page{height:100%;overflow:auto;padding:calc(14px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
.login-header{display:flex;align-items:center;justify-content:space-between;height:54px}
.login-logo{width:78px;height:58px;object-fit:contain;object-position:left center}
.circle-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.78);color:var(--muted);font-size:12px;font-weight:800}
.login-intro{margin-top:18px}
.login-intro>span{font-size:8px;letter-spacing:.21em;color:#a77c3b;font-weight:800}
.login-intro h1{font-family:"Playfair Display",serif;font-size:34px;line-height:1;margin:7px 0 7px}
.login-intro p{font-size:12px;color:var(--muted);margin:0}
.role-switch{display:grid;grid-template-columns:repeat(3,1fr);background:#eae4da;border-radius:14px;padding:4px;margin-top:20px}
.role-switch button{height:38px;border:0;border-radius:11px;background:transparent;color:#7b8390;font-size:10px;font-weight:700}
.role-switch button.active{background:#fff;color:var(--navy);box-shadow:0 3px 10px rgba(12,24,49,.07)}
.role-panel{display:none;background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:18px;padding:13px;margin-top:10px}
.role-panel.active{display:block}
.role-panel-title{display:flex;align-items:center;gap:10px;margin-bottom:11px}.role-icon{width:36px;height:36px;border-radius:12px;background:#f2eadb;display:grid;place-items:center;font-size:18px}.role-panel-title b,.role-panel-title span{display:block}.role-panel-title b{font-size:11px}.role-panel-title span{font-size:8px;color:var(--muted);margin-top:2px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.native-field>span,.app-input>span{display:block;font-size:8px;color:#7d8593;font-weight:700;margin:0 0 5px 3px}
.native-field select{width:100%;height:40px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:0 9px;color:var(--ink);font-size:10px;outline:0}
.login-form{display:grid;gap:10px;margin-top:12px}
.app-input>div{height:49px;border:1px solid var(--line);background:#fff;border-radius:14px;display:flex;align-items:center;padding:0 11px;box-shadow:0 6px 18px rgba(12,24,49,.035)}
.app-input i{font-style:normal;width:24px;color:#a67b3b}.app-input input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:12px;color:var(--ink)}.app-input button{border:0;background:none;color:#808897;font-size:8px}
.login-row{display:flex;justify-content:space-between;align-items:center;font-size:8px;color:#747d8b}.login-row label{display:flex;gap:5px;align-items:center}.login-row a{color:#747d8b}
.primary-action{height:50px;border:0;border-radius:14px;background:var(--navy);color:white;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 14px 28px rgba(12,24,49,.15)}
.login-message{display:none;border-radius:12px;padding:9px 10px;font-size:9px;font-weight:700}.login-message.error{display:block;background:#fff0f0;color:#963131;border:1px solid #efc9c9}
.demo-credentials{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px auto 0;font-size:8px;color:#8c7b63}.demo-credentials span{color:#a77a3b;font-weight:800}.demo-credentials em{font-style:normal;color:#b9ad9e}

/* home */
.home{background:#f4efe6}
.home-header{height:116px;padding:calc(18px + env(safe-area-inset-top)) 16px 20px;background:linear-gradient(135deg,#08152d,#10264a);color:white;display:flex;align-items:end;justify-content:space-between;border-radius:0 0 26px 26px}
.home-header small{font-size:9px;color:rgba(255,255,255,.56)}.home-header h2{font-size:18px;margin:3px 0 0}.profile-chip{width:39px;height:39px;border-radius:13px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:white;font-size:10px;font-weight:800}
.home-scroll{height:calc(100% - 116px);overflow:auto;padding:13px 12px 88px}
.headline-card{background:#fff;border-radius:21px;padding:16px;box-shadow:var(--shadow)}.headline-top{display:flex;justify-content:space-between;font-size:9px;color:var(--muted)}.headline-top b{color:#3a906c}.headline-value{display:flex;align-items:end;gap:9px;margin-top:7px}.headline-value strong{font-family:"Playfair Display";font-size:43px;line-height:.9}.headline-value span{font-size:8px;color:var(--muted);padding-bottom:3px}.headline-card svg{width:100%;height:58px;margin-top:5px;color:var(--gold)}
.stat-row,.teacher-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}.stat-row article,.teacher-stats article{background:#fff;border-radius:16px;padding:11px;box-shadow:0 6px 18px rgba(12,24,49,.045)}.stat-row span,.stat-row small,.teacher-stats span,.teacher-stats small{display:block;font-size:7px;color:var(--muted)}.stat-row b,.teacher-stats b{display:block;font-size:18px;margin:3px 0}.stat-row small{color:#3a906c;font-weight:800}
.app-card{background:#fff;border-radius:20px;padding:14px;margin-top:10px;box-shadow:0 7px 22px rgba(12,24,49,.045)}.app-card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.app-card-head h3{font-size:12px;margin:0}.app-card-head button{border:0;background:none;color:#a77a3b;font-size:8px;font-weight:800}
.timeline{display:grid;grid-template-columns:38px 7px 1fr;gap:7px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.timeline:first-of-type{border-top:0}.timeline time{font-size:9px;font-weight:800}.timeline i{width:6px;height:6px;border-radius:50%}.timeline .g{background:var(--gold)}.timeline .b{background:#3d72b9}.timeline .gr{background:#4d9b72}.timeline b,.timeline span{display:block}.timeline b{font-size:10px}.timeline span{font-size:7px;color:var(--muted);margin-top:1px}
.quote{font-family:"Playfair Display";font-size:12px;line-height:1.55;color:#3a455b;margin:0}
.student-summary{background:linear-gradient(135deg,#0e1d39,#17315b);color:white;border-radius:21px;padding:16px;display:flex;align-items:center;justify-content:space-between}.student-summary span{font-size:8px;color:rgba(255,255,255,.55)}.student-summary strong{display:block;font-size:30px}.progress-ring{width:67px;height:67px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) 0 67%,rgba(255,255,255,.10) 67% 100%);position:relative}.progress-ring:after{content:"";position:absolute;inset:6px;background:#11284b;border-radius:50%}.progress-ring span{position:relative;z-index:1;color:white;font-size:10px;font-weight:800}
.task{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.task:first-of-type{border-top:0}.task>span{width:28px;height:28px;border-radius:9px;background:#f3eadc;display:grid;place-items:center;color:#a77b3a;font-size:10px}.task.done{opacity:.62}.task b,.task small{display:block}.task b{font-size:10px}.task small{font-size:7px;color:var(--muted);margin-top:2px}
.exam-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.exam-grid div{background:#f7f3eb;border-radius:13px;padding:10px}.exam-grid small,.exam-grid b{display:block}.exam-grid small{font-size:7px;color:var(--muted)}.exam-grid b{font-size:16px;margin-top:3px}.positive{color:#3a906c}
.motivation{margin-top:10px;border-radius:20px;padding:15px;background:linear-gradient(135deg,#e7c78f,#c99d55);color:#13213d}.motivation span,.motivation b,.motivation small{display:block}.motivation span{font-size:8px;font-weight:800}.motivation b{font-size:14px;margin:5px 0 3px}.motivation small{font-size:8px}
.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.quick-actions button{border:1px solid var(--line);background:#faf7f0;border-radius:13px;padding:10px 5px;display:grid;place-items:center;gap:4px}.quick-actions i{font-style:normal;color:#a77c3c;font-size:14px}.quick-actions span{font-size:7px;color:var(--ink);font-weight:700}
.class-item{display:grid;grid-template-columns:40px 1fr 16px;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.class-item:first-of-type{border-top:0}.class-item>span{width:40px;height:40px;border-radius:12px;background:var(--navy);color:white;display:grid;place-items:center;font-size:9px;font-weight:800}.class-item b,.class-item small{display:block}.class-item b{font-size:10px}.class-item small{font-size:7px;color:var(--muted);margin-top:2px}.class-item em{font-style:normal;color:#a77b3a}

/* tabbar */
.tabbar{position:fixed;left:8px;right:8px;bottom:calc(6px + env(safe-area-inset-bottom));height:60px;border-radius:19px;border:1px solid var(--line);background:rgba(255,255,255,.94);backdrop-filter:blur(18px);display:grid;grid-template-columns:repeat(5,1fr);padding:6px;box-shadow:0 12px 34px rgba(12,24,49,.13)}
.tabbar button{border:0;background:none;color:#8b93a0;display:grid;place-items:center;gap:2px;font-size:14px}.tabbar span{font-size:6px}.tabbar .active{color:var(--navy);font-weight:800}

/* desktop only: visual preview, mobile always full viewport */
@media(min-width:900px){
  body{background:#07142a}
  #app{position:relative;width:390px;height:844px;max-height:94vh;margin:3vh auto;border-radius:36px;overflow:hidden;box-shadow:0 35px 100px rgba(0,0,0,.45)}
}
@media(max-width:359px){
  .two-col{grid-template-columns:1fr}.login-intro h1{font-size:31px}.home-header h2{font-size:16px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


/* V5 role app + nested screens */
.role-app{background:#f4efe6}
.app-topbar{height:114px;padding:calc(17px + env(safe-area-inset-top)) 14px 18px;background:linear-gradient(135deg,#08152d,#10264a);color:white;display:flex;align-items:end;gap:10px;border-radius:0 0 25px 25px}
.topbar-copy{flex:1;min-width:0}
.topbar-copy small{font-size:8px;color:rgba(255,255,255,.55)}
.topbar-copy h2{font-size:17px;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar-icon{width:36px;height:36px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;border-radius:12px}
.topbar-icon.hidden{display:none}
.view-container{height:calc(100% - 114px);overflow:auto;padding:12px 11px 88px}
.view{display:none}.view.active{display:block;animation:viewIn .22s ease}
@keyframes viewIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

.page-heading{margin:3px 2px 12px}
.page-heading span{font-size:8px;letter-spacing:.16em;color:#9d7539;font-weight:800}
.page-heading h3{font-family:"Playfair Display",serif;font-size:25px;line-height:1.05;margin:4px 0 5px}
.page-heading p{font-size:9px;line-height:1.5;color:var(--muted);margin:0}

.pill-row{display:flex;gap:6px;overflow:auto;padding-bottom:3px;scrollbar-width:none}
.pill-row::-webkit-scrollbar{display:none}
.pill{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 11px;font-size:8px;color:#6e7787}
.pill.active{background:var(--navy);color:#fff;border-color:var(--navy)}

.summary-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:9px 0}
.summary-strip article{background:#fff;border-radius:15px;padding:10px;box-shadow:0 6px 16px rgba(12,24,49,.04)}
.summary-strip span,.summary-strip small{display:block;font-size:7px;color:var(--muted)}
.summary-strip b{display:block;font-size:17px;margin:3px 0}
.summary-strip .good{color:#378f6b}.summary-strip .bad{color:#b95555}

.list-card{background:#fff;border-radius:19px;padding:12px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.list-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.list-card-head h4{font-size:11px;margin:0}
.list-card-head span,.list-card-head button{font-size:7px;color:#a77a3b}
.list-card-head button{border:0;background:none;font-weight:800}

.student-line{display:grid;grid-template-columns:34px 1fr auto;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.student-line:first-of-type{border-top:0}
.student-avatar{width:34px;height:34px;border-radius:11px;background:#f2eadc;display:grid;place-items:center;color:#8f6a34;font-size:9px;font-weight:800}
.student-line b,.student-line small{display:block}.student-line b{font-size:9px}.student-line small{font-size:7px;color:var(--muted);margin-top:2px}
.status{min-width:28px;height:28px;padding:0 8px;border-radius:10px;display:grid;place-items:center;font-size:9px;font-weight:800}
.status.ok{background:#e9f5ef;color:#378f6b}
.status.no{background:#fbe9e9;color:#b24b4b}
.status.wait{background:#f8f0dd;color:#9b7338}

.segment{display:grid;grid-template-columns:repeat(2,1fr);background:#e9e2d7;border-radius:13px;padding:3px;margin-top:8px}
.segment button{height:35px;border:0;border-radius:10px;background:transparent;color:#777f8d;font-size:8px;font-weight:700}
.segment button.active{background:#fff;color:var(--navy);box-shadow:0 3px 9px rgba(12,24,49,.06)}

.assignment-card{background:#fff;border-radius:18px;padding:12px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.assignment-head{display:flex;justify-content:space-between;gap:8px}
.assignment-head div b,.assignment-head div span{display:block}
.assignment-head b{font-size:10px}.assignment-head span{font-size:7px;color:var(--muted);margin-top:2px}
.assignment-head em{font-style:normal;font-size:7px;color:#9d7338;background:#f4ead7;border-radius:999px;padding:6px 8px;height:max-content}
.progressbar{height:7px;border-radius:999px;background:#eee7dd;overflow:hidden;margin:11px 0 5px}
.progressbar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#c6a56d,#e2c89b)}
.assignment-meta{display:flex;justify-content:space-between;font-size:7px;color:var(--muted)}

.grade-row{display:grid;grid-template-columns:1fr 54px 58px;gap:7px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.grade-row:first-of-type{border-top:0}
.grade-row b,.grade-row small{display:block}.grade-row b{font-size:9px}.grade-row small{font-size:7px;color:var(--muted);margin-top:2px}
.score-badge{height:34px;border-radius:10px;background:#f5f0e7;display:grid;place-items:center;font-size:10px;font-weight:800}
.score-change{font-size:8px;font-weight:800;text-align:right}.score-change.up{color:#378f6b}.score-change.down{color:#b24b4b}

.skill-card{background:#fff;border-radius:18px;padding:12px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.skill-card-head{display:flex;justify-content:space-between;align-items:center}
.skill-card-head b{font-size:10px}.skill-card-head span{font-size:9px;font-weight:800;color:#9d7338}
.skill-bar{height:7px;background:#eee7dd;border-radius:999px;overflow:hidden;margin:9px 0 5px}
.skill-bar i{display:block;height:100%;background:linear-gradient(90deg,#0d1d3b,#c6a56d);border-radius:inherit}
.skill-card p{font-size:7px;line-height:1.5;color:var(--muted);margin:0}

.class-card{background:#fff;border-radius:18px;padding:12px;margin-top:9px;display:grid;grid-template-columns:45px 1fr auto;gap:10px;align-items:center;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.class-code{width:45px;height:45px;border-radius:13px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:10px}
.class-card b,.class-card small{display:block}.class-card b{font-size:10px}.class-card small{font-size:7px;color:var(--muted);margin-top:2px}
.class-card button{border:0;background:#f3eadc;color:#9b7338;width:31px;height:31px;border-radius:10px}

.report-card{background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:20px;padding:14px;margin-top:9px}
.report-card small{font-size:7px;color:rgba(255,255,255,.55)}
.report-card h4{font-family:"Playfair Display";font-size:18px;margin:4px 0}
.report-card p{font-size:8px;line-height:1.55;color:rgba(255,255,255,.68);margin:0}
.report-actions{display:flex;gap:7px;margin-top:10px}.report-actions button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;border-radius:10px;padding:8px 10px;font-size:7px}

.notification-line{display:grid;grid-template-columns:31px 1fr;gap:8px;padding:9px 0;border-top:1px solid var(--line)}
.notification-line:first-of-type{border-top:0}
.notification-icon{width:31px;height:31px;border-radius:10px;background:#f3eadc;display:grid;place-items:center;font-size:12px}
.notification-line b,.notification-line small{display:block}.notification-line b{font-size:9px}.notification-line small{font-size:7px;color:var(--muted);margin-top:2px}

.tabbar button{position:relative}
.tabbar button.active:after{content:"";position:absolute;top:0;width:18px;height:2px;border-radius:999px;background:var(--gold)}

/* V6 back navigation */
.topbar-icon:not(.hidden){
  display:grid;
  place-items:center;
  flex:0 0 36px;
  font-size:18px;
  transition:transform .18s ease,background .18s ease;
}
.topbar-icon:not(.hidden):active{
  transform:scale(.94);
  background:rgba(255,255,255,.14);
}


/* V7 Student Experience */
.student-task{display:grid;grid-template-columns:30px 1fr auto;gap:9px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.student-task:first-of-type{border-top:0}
.student-task-icon{width:30px;height:30px;border-radius:10px;background:#f1e9dc;display:grid;place-items:center;color:#9b7338;font-size:10px;font-weight:800}
.student-task b,.student-task small{display:block}.student-task b{font-size:9px}.student-task small{font-size:7px;color:var(--muted);margin-top:2px}
.student-task em{font-style:normal;font-size:7px;color:#9b7338}.student-task.done{opacity:.62}

.student-feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.student-feature-grid button{border:1px solid var(--line);background:#fff;border-radius:17px;padding:13px;text-align:left;display:grid;gap:3px;box-shadow:0 6px 18px rgba(12,24,49,.04)}
.student-feature-grid button>span{font-size:18px;color:#a77c3c}.student-feature-grid b{font-size:9px}.student-feature-grid small{font-size:7px;color:var(--muted)}

.teacher-avatar{width:36px;height:36px;border-radius:12px;background:linear-gradient(145deg,#d9c6a6,#9d7540);display:grid;place-items:center;color:#fff;font-size:9px;font-weight:800;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.teacher-avatar.photo-like{position:relative;overflow:hidden}
.teacher-avatar.photo-like:before{content:"";position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 50% 33%,rgba(255,255,255,.35) 0 20%,transparent 21%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.12));opacity:.5}
.teacher-avatar.photo-like{font-size:8px}
.teacher-avatar.demila{background:linear-gradient(145deg,#c68d98,#7b5067)}

.student-lesson-mini{display:grid;grid-template-columns:38px 36px 1fr 14px;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.student-lesson-mini:first-of-type{border-top:0}.student-lesson-mini time{font-size:8px;font-weight:800}.student-lesson-mini b,.student-lesson-mini small{display:block}.student-lesson-mini b{font-size:9px}.student-lesson-mini small{font-size:7px;color:var(--muted);margin-top:2px}.student-lesson-mini>span{color:#a77b3a}

.student-homework-card{background:#fff;border-radius:19px;padding:13px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.student-homework-top{display:grid;grid-template-columns:36px 1fr auto;gap:9px;align-items:center}
.student-homework-top span,.student-homework-top b{display:block}.student-homework-top span{font-size:7px;color:#9d7338;font-weight:800}.student-homework-top b{font-size:9px;margin-top:1px}
.student-homework-top em{font-style:normal;font-size:7px;color:var(--muted);background:#f6f2eb;border-radius:999px;padding:6px 8px}
.student-homework-card h4{font-size:11px;margin:12px 0 3px}

.schedule-day-card{background:#fff;border-radius:20px;padding:13px;margin-top:10px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.schedule-day-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.schedule-day-head b,.schedule-day-head span{display:block}.schedule-day-head b{font-size:12px}.schedule-day-head span{font-size:7px;color:var(--muted)}.schedule-day-head em{font-style:normal;font-size:7px;color:#9d7338;background:#f4ead7;padding:6px 8px;border-radius:999px}
.lesson-card{display:grid;grid-template-columns:43px 36px 1fr 14px;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.lesson-card:first-of-type{border-top:0}
.lesson-time b,.lesson-time span{display:block}.lesson-time b{font-size:8px}.lesson-time span{font-size:6px;color:var(--muted);margin-top:2px}
.lesson-copy b,.lesson-copy span,.lesson-copy small{display:block}.lesson-copy b{font-size:9px}.lesson-copy span{font-size:7px;color:#8e6a35;margin-top:1px}.lesson-copy small{font-size:6px;color:var(--muted);margin-top:2px}.lesson-card em{font-style:normal;color:#a77b3a}

.progress-detail-card{background:#fff;border-radius:19px;padding:13px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045);cursor:pointer}
.progress-detail-main{display:flex;align-items:center;justify-content:space-between}
.progress-detail-main>div:first-child span,.progress-detail-main>div:first-child b,.progress-detail-main>div:first-child small{display:block}
.progress-detail-main>div:first-child span{font-size:8px;color:var(--muted)}.progress-detail-main>div:first-child b{font-size:22px;margin:2px 0}.progress-detail-main>div:first-child small{font-size:7px;color:#378f6b;font-weight:800}
.mini-ring{--score:80;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--score)*1%),#eee7dd 0);position:relative}
.mini-ring:after{content:"";position:absolute;inset:5px;background:#fff;border-radius:50%}.mini-ring span{position:relative;z-index:1;font-size:8px;font-weight:800}
.progress-detail-body{max-height:0;overflow:hidden;transition:max-height .34s ease,margin .34s ease;display:grid;gap:7px}
.progress-detail-card.expanded .progress-detail-body{max-height:260px;margin-top:10px}
.strength-box,.gap-box,.study-suggestion{border-radius:13px;padding:10px}.strength-box{background:#edf7f1}.gap-box{background:#fff1ed}.study-suggestion{background:#f4ead7}
.strength-box span,.gap-box span{font-size:7px;font-weight:800}.strength-box span{color:#378f6b}.gap-box span{color:#b65d4d}.strength-box p,.gap-box p{font-size:7px;line-height:1.5;margin:4px 0 0;color:#596475}.study-suggestion b,.study-suggestion span{display:block}.study-suggestion b{font-size:7px;color:#9b7338}.study-suggestion span{font-size:7px;margin-top:3px;color:#596475}
.student-coach-card{display:grid;grid-template-columns:36px 1fr;gap:10px;background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:19px;padding:13px;margin-top:10px}
.student-coach-card span{font-size:8px;color:var(--gold2);font-weight:800}.student-coach-card p{font-size:7px;line-height:1.55;color:rgba(255,255,255,.72);margin:4px 0 0}

.circle-results{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
.circle-result{background:#fff;border-radius:18px;padding:13px;display:grid;place-items:center;text-align:center;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.result-ring{--score:80;width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--score)*1%),#eee7dd 0);position:relative;animation:ringPop .65s cubic-bezier(.2,.8,.2,1)}
.result-ring:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
.result-ring>div{position:relative;z-index:1}.result-ring b{font-size:20px}.result-ring span{font-size:8px;color:var(--muted)}
.circle-result h4{font-size:9px;margin:9px 0 2px}.circle-result small{font-size:6px;color:var(--muted)}.circle-result em{font-style:normal;font-size:7px;color:#378f6b;font-weight:800;margin-top:4px}
@keyframes ringPop{from{transform:scale(.86);opacity:.3}to{transform:none;opacity:1}}

.message-teachers{display:flex;gap:7px;overflow:auto;padding-bottom:4px;scrollbar-width:none}.message-teachers::-webkit-scrollbar{display:none}
.message-teacher{flex:0 0 175px;border:1px solid var(--line);background:#fff;border-radius:17px;padding:10px;display:grid;grid-template-columns:36px 1fr 10px;gap:8px;align-items:center;text-align:left}
.message-teacher.active{border-color:rgba(198,165,109,.65);background:#fffaf1}.message-teacher b,.message-teacher small{display:block}.message-teacher b{font-size:8px}.message-teacher small{font-size:6px;color:var(--muted);margin-top:2px}.message-teacher em{font-style:normal;color:#a77b3a}
.chat-card{background:#fff;border-radius:20px;margin-top:10px;overflow:hidden;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.chat-head{display:grid;grid-template-columns:36px 1fr 10px;gap:9px;align-items:center;padding:12px;border-bottom:1px solid var(--line)}.chat-head b,.chat-head span{display:block}.chat-head b{font-size:9px}.chat-head span{font-size:6px;color:var(--muted);margin-top:2px}.chat-head i{font-style:normal;color:#44a070;font-size:8px}
.chat-body{padding:12px;background:#f8f4ec;display:grid;gap:9px;max-height:360px;overflow:auto}
.bubble{max-width:88%;padding:10px 11px;border-radius:15px}.bubble small{display:block;font-size:6px;color:var(--muted);margin-bottom:4px}.bubble p{font-size:8px;line-height:1.55;margin:0}
.bubble.incoming{background:#fff;border-top-left-radius:5px}.bubble.outgoing{background:#0f2346;color:#fff;margin-left:auto;border-top-right-radius:5px}.bubble.outgoing small{color:rgba(255,255,255,.55)}
.chat-compose{display:grid;grid-template-columns:34px 1fr 34px;gap:7px;padding:9px;border-top:1px solid var(--line)}.chat-compose button{border:0;background:#f1e9dc;border-radius:10px;color:#9b7338}.chat-compose input{height:38px;border:0;background:#f6f2eb;border-radius:11px;padding:0 11px;outline:0;font-size:8px}

@media(max-width:380px){
  .circle-results{grid-template-columns:1fr 1fr}
  .message-teacher{flex-basis:160px}
}

.role-app[data-active-role="student"] .tabbar{grid-template-columns:repeat(6,1fr)}
.role-app[data-active-role="student"] .tabbar button{font-size:12px}
.role-app[data-active-role="student"] .tabbar span{font-size:5.5px}

.role-app[data-active-role="parent"] .tabbar{grid-template-columns:repeat(6,1fr)}
.role-app[data-active-role="parent"] .tabbar button{font-size:12px}
.role-app[data-active-role="parent"] .tabbar span{font-size:5.5px}

/* V8 Parent Experience */
.parent-profile-card{display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;background:#fff;border-radius:20px;padding:12px;margin-bottom:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.parent-profile-card.large{grid-template-columns:64px 1fr auto;padding:14px}
.memoji-avatar{width:50px;height:50px;border-radius:17px;background:linear-gradient(145deg,#f0d5bd,#d6b295);display:grid;place-items:center;font-size:31px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
.memoji-avatar.big{width:64px;height:64px;border-radius:20px;font-size:39px}
.parent-profile-card span,.parent-profile-card h3,.parent-profile-card small{display:block}.parent-profile-card span{font-size:7px;color:#9d7338;font-weight:800}.parent-profile-card h3{font-size:13px;margin:2px 0}.parent-profile-card small{font-size:7px;color:var(--muted)}.parent-profile-card>em{font-style:normal;font-size:8px;color:#378f6b;background:#e9f5ef;padding:7px 9px;border-radius:999px;font-weight:800}

.parent-alert-card{margin-top:10px;border-radius:19px;padding:14px;background:linear-gradient(135deg,#e7c78f,#c99d55);color:#13213d}
.parent-alert-card span,.parent-alert-card b{display:block}.parent-alert-card span{font-size:7px;letter-spacing:.14em;font-weight:800}.parent-alert-card b{font-size:11px;margin:5px 0}.parent-alert-card p{font-size:8px;line-height:1.5;margin:0}

.issue-metric{padding:11px 0;border-top:1px solid var(--line)}.issue-metric:first-of-type{border-top:0}
.issue-top{display:flex;justify-content:space-between;gap:10px}.issue-top b,.issue-top small{display:block}.issue-top b{font-size:9px}.issue-top small{font-size:7px;color:var(--muted);margin-top:2px;max-width:230px;line-height:1.45}.issue-top>span{height:max-content;font-size:6px;color:#8e6a34;background:#f4ead7;padding:5px 7px;border-radius:999px;white-space:nowrap}
.issue-score{display:grid;grid-template-columns:1fr 34px 32px;gap:7px;align-items:center;margin-top:7px}.issue-score .progressbar{margin:0}.issue-score strong{font-size:8px}.issue-score em{font-style:normal;font-size:7px;color:#378f6b;font-weight:800}

.teacher-comment{display:grid;grid-template-columns:36px 1fr;gap:9px;padding:11px 0;border-top:1px solid var(--line)}.teacher-comment:first-of-type{border-top:0}
.teacher-comment-head{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.teacher-comment-head b{font-size:8px}.teacher-comment-head span{font-size:6px;color:#9d7338;background:#f4ead7;border-radius:999px;padding:4px 6px}
.teacher-comment p{font-size:7px;line-height:1.55;color:#596475;margin:5px 0 0}

.parent-homework-card{position:relative;background:#fff;border-radius:19px;padding:13px 13px 13px 17px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045);overflow:hidden}
.parent-homework-card .homework-state-strip{position:absolute;left:0;top:0;bottom:0;width:4px;background:#c6a56d}
.parent-homework-card.done .homework-state-strip{background:#3e966f}.parent-homework-card.done{background:#fbfffc}
.parent-homework-card.late .homework-state-strip{background:#c74e4e}.parent-homework-card.late{background:#fff9f9;border:1px solid rgba(199,78,78,.13)}
.parent-homework-card.late .student-homework-top em{background:#fae5e5;color:#ad4545}
.parent-homework-card h4{font-size:10px;margin:11px 0 3px}
.homework-summary-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line);font-size:8px}.homework-summary-row:first-of-type{border-top:0}.homework-summary-row .good{color:#378f6b}.homework-summary-row .bad{color:#b24b4b}

.month-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:9px}.month-selector button{height:35px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#7b8390;font-size:8px;font-weight:700}.month-selector .active{background:var(--navy);color:#fff;border-color:var(--navy)}
.monthly-score-card{display:grid;grid-template-columns:1fr 82px;gap:10px;align-items:center;background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:20px;padding:15px}
.monthly-score-card span,.monthly-score-card b,.monthly-score-card strong,.monthly-score-card small{display:block}.monthly-score-card span{font-size:7px;color:var(--gold2);font-weight:800}.monthly-score-card b{font-size:9px;margin-top:3px}.monthly-score-card strong{font-family:"Playfair Display";font-size:34px;margin:3px 0}.monthly-score-card small{font-size:7px;color:rgba(255,255,255,.6)}
.monthly-ring{--score:80;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--score)*1%),rgba(255,255,255,.10) 0);position:relative}.monthly-ring:after{content:"";position:absolute;inset:7px;border-radius:50%;background:#122a50}.monthly-ring span{position:relative;z-index:1;color:#fff;font-size:13px;font-weight:800}

.week-score-row{display:grid;grid-template-columns:1fr 38px 52px;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.week-score-row:first-of-type{border-top:0}
.week-score-row b,.week-score-row small{display:block}.week-score-row b{font-size:9px}.week-score-row small{font-size:7px;color:var(--muted);margin-top:2px}.week-score-badge{width:38px;height:32px;border-radius:9px;background:#f4ead7;display:grid;place-items:center;font-size:9px;font-weight:800;color:#8e6936}.week-score-row em{font-style:normal;text-align:right;font-size:7px;color:#378f6b;font-weight:800}

.problem-status-row{display:grid;grid-template-columns:1fr auto;gap:9px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.problem-status-row:first-of-type{border-top:0}.problem-status-row b,.problem-status-row small{display:block}.problem-status-row b{font-size:9px}.problem-status-row small{font-size:7px;color:var(--muted);margin-top:2px}.problem-status-row>span{font-size:6px;font-weight:800;padding:6px 8px;border-radius:999px;white-space:nowrap}.problem-status-row .good{background:#e8f5ee;color:#378f6b}.problem-status-row .wait{background:#f6efde;color:#9d7338}.problem-status-row .warn{background:#fae9e5;color:#b35649}

.privacy-note{display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;margin-top:9px;background:#eef1f5;border-radius:14px;padding:10px}.privacy-note span{font-size:13px}.privacy-note p{font-size:6.5px;line-height:1.5;color:#677181;margin:0}


/* V9 Full Product */
.role-switch.four{grid-template-columns:repeat(4,1fr)}
.role-switch.four button{font-size:8px;padding:0 3px}

.role-app[data-active-role="admin"] .tabbar{grid-template-columns:repeat(6,1fr)}
.role-app[data-active-role="admin"] .tabbar button{font-size:12px}
.role-app[data-active-role="admin"] .tabbar span{font-size:5.5px}

.mood-card{background:#fff;border-radius:18px;padding:13px;margin-top:10px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.mood-card>span{font-size:7px;letter-spacing:.13em;color:#9d7338;font-weight:800}
.mood-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin:9px 0 5px}
.mood-row button{height:39px;border:1px solid var(--line);background:#faf7f0;border-radius:12px;font-size:19px}
.mood-card small{font-size:6px;color:var(--muted)}

.badge-shelf{background:#fff;border-radius:18px;padding:13px;margin-top:10px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.badge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.badge-grid div{background:#f7f2e9;border-radius:13px;padding:10px 5px;display:grid;place-items:center;gap:5px;font-size:18px}
.badge-grid b{font-size:6px;text-align:center}

.goal-card{background:#fff;border-radius:18px;padding:13px;margin-top:10px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.goal-top{display:flex;justify-content:space-between;gap:10px}.goal-top span,.goal-top b{display:block}.goal-top span{font-size:6px;color:#9d7338;font-weight:800}.goal-top b{font-size:9px;margin-top:2px}.goal-top em{font-style:normal;font-size:6px;color:#378f6b;background:#e8f5ee;padding:5px 7px;border-radius:999px;height:max-content}
.goal-scale{display:grid;grid-template-columns:25px 1fr 25px;gap:6px;align-items:center;margin-top:9px}.goal-scale>span{font-size:7px;color:var(--muted);text-align:center}.goal-scale .progressbar{margin:0}.goal-card>small{font-size:6px;color:var(--muted)}

.mastery-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.mastery-row:first-of-type{border-top:0}.mastery-row b,.mastery-row small{display:block}.mastery-row b{font-size:8px}.mastery-row small{font-size:6px;color:var(--muted);margin-top:2px}.mastery-row>span{font-size:7px;font-weight:800;padding:6px 7px;border-radius:999px}.mastery-row .good{background:#e8f5ee;color:#378f6b}.mastery-row .wait{background:#f6efde;color:#9d7338}.mastery-row .bad{background:#fae9e5;color:#b35649}

.submission-card{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-radius:18px;padding:13px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.submission-card span,.submission-card b,.submission-card small{display:block}.submission-card span{font-size:6px;color:#9d7338;font-weight:800}.submission-card b{font-size:9px;margin-top:2px}.submission-card small{font-size:6px;color:var(--muted);margin-top:2px}.submission-card button{border:0;background:var(--navy);color:#fff;border-radius:10px;padding:8px 9px;font-size:6px}

.weekly-summary-card{background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:20px;padding:14px;margin-top:10px}
.weekly-summary-card>span{font-size:6px;letter-spacing:.13em;color:var(--gold2);font-weight:800}.weekly-summary-score{display:flex;align-items:end;gap:7px;margin-top:7px}.weekly-summary-score strong{font-family:"Playfair Display";font-size:33px}.weekly-summary-score small{font-size:6px;color:rgba(255,255,255,.55);padding-bottom:5px}.weekly-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:9px}.weekly-summary-grid div{background:rgba(255,255,255,.07);border-radius:10px;padding:8px 4px;text-align:center}.weekly-summary-grid b,.weekly-summary-grid span{display:block}.weekly-summary-grid b{font-size:10px}.weekly-summary-grid span{font-size:5px;color:rgba(255,255,255,.55)}.weekly-summary-card p{font-size:6.5px;line-height:1.5;color:rgba(255,255,255,.7);margin:10px 0 0}

.appointment-card{display:flex;justify-content:space-between;gap:10px;align-items:center;background:#fff;border-radius:18px;padding:13px;margin-top:10px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.appointment-card span,.appointment-card b,.appointment-card small{display:block}.appointment-card span{font-size:6px;color:#9d7338;font-weight:800}.appointment-card b{font-size:9px;margin-top:2px}.appointment-card small{font-size:6px;color:var(--muted);margin-top:2px}.appointment-card button{border:0;background:#f3eadc;color:#8e6936;border-radius:10px;padding:8px;font-size:6px;font-weight:800}

.timeline-dev{background:#fff;border-radius:18px;padding:13px;margin-top:10px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.timeline-point{display:grid;grid-template-columns:12px 1fr;gap:8px;padding:8px 0;position:relative}.timeline-point i{width:8px;height:8px;border-radius:50%;background:var(--gold);margin-top:3px;box-shadow:0 0 0 4px #f3eadc}.timeline-point:not(:last-child):after{content:"";position:absolute;left:3px;top:18px;bottom:-4px;width:1px;background:#e7dece}.timeline-point span,.timeline-point b,.timeline-point small{display:block}.timeline-point span{font-size:6px;color:#9d7338;font-weight:800}.timeline-point b{font-size:8px;margin-top:2px}.timeline-point small{font-size:6px;color:var(--muted);margin-top:2px}

.admin-kpi-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.admin-kpi{background:#fff;border-radius:16px;padding:12px;box-shadow:0 6px 18px rgba(12,24,49,.045)}.admin-kpi b,.admin-kpi span,.admin-kpi small{display:block}.admin-kpi b{font-size:22px}.admin-kpi span{font-size:7px;margin-top:2px}.admin-kpi small{font-size:6px;color:var(--muted);margin-top:2px}.admin-kpi.good b{color:#378f6b}.admin-kpi.bad b{color:#b35649}.admin-kpi.wait b{color:#9d7338}

.admin-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.admin-action-grid button{border:1px solid var(--line);background:#faf7f0;border-radius:14px;padding:11px;text-align:left;display:grid;gap:3px}.admin-action-grid i{font-style:normal;font-size:16px;color:#9d7338}.admin-action-grid b{font-size:8px}.admin-action-grid small{font-size:6px;color:var(--muted)}

.search-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin-bottom:9px}.search-row input{height:39px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:0 10px;font-size:8px}.search-row button{border:0;background:var(--navy);color:#fff;border-radius:11px;padding:0 12px;font-size:7px}
.class-card.staff{grid-template-columns:36px 1fr auto}.class-card.staff em{display:block;font-style:normal;font-size:6px;color:var(--muted);margin-top:3px}

.admin-chart-card{background:#fff;border-radius:18px;padding:13px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.bar-chart{height:150px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:end;margin-top:10px}.bar-col{height:100%;display:grid;grid-template-rows:1fr auto auto;gap:3px;align-items:end;text-align:center}.bar-col>div{height:110px;display:flex;align-items:end;justify-content:center}.bar-col i{display:block;width:30px;border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,var(--gold2),var(--gold))}.bar-col span{font-size:6px;color:var(--muted)}.bar-col b{font-size:7px}

.setting-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.setting-row:first-of-type{border-top:0}.setting-row b,.setting-row small{display:block}.setting-row b{font-size:8px}.setting-row small{font-size:6px;color:var(--muted);margin-top:2px}.setting-row>span{font-size:6px;font-weight:800;padding:6px 8px;border-radius:999px}.setting-row .on{background:#e8f5ee;color:#378f6b}.setting-row .locked{background:#eef1f5;color:#596475}

.form-card-pro{background:#fff;border-radius:18px;padding:13px;display:grid;gap:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}.form-card-pro .native-field input{width:100%;height:40px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:0 9px;color:var(--ink);font-size:8px}
.appointment-list{display:grid;grid-template-columns:60px 1fr auto;gap:8px;align-items:center;background:#fff;border-radius:16px;padding:11px;margin-top:8px;box-shadow:0 6px 18px rgba(12,24,49,.04)}.appointment-list time{font-size:7px;font-weight:800}.appointment-list b,.appointment-list small{display:block}.appointment-list b{font-size:8px}.appointment-list small{font-size:6px;color:var(--muted);margin-top:2px}.appointment-list span{font-size:6px;color:#9d7338;background:#f4ead7;padding:5px 7px;border-radius:999px}

@media(max-width:360px){
  .weekly-summary-grid{grid-template-columns:repeat(2,1fr)}
  .role-switch.four button{font-size:7px}
}


/* V10 Advanced feature set */
.live-status-card{display:grid;grid-template-columns:58px 1fr 10px;gap:10px;align-items:center;background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:20px;padding:14px}
.live-status-card span,.live-status-card b,.live-status-card small{display:block}.live-status-card span{font-size:6px;color:var(--gold2);font-weight:800}.live-status-card b{font-size:10px;margin-top:2px}.live-status-card small{font-size:6px;color:rgba(255,255,255,.55);margin-top:2px}
.live-dot{width:8px;height:8px;border-radius:50%;background:#51c38b;box-shadow:0 0 0 5px rgba(81,195,139,.12);animation:livePulse 1.5s ease-in-out infinite}
@keyframes livePulse{50%{transform:scale(.8);opacity:.55}}

.qr-card{background:#fff;border-radius:20px;padding:16px;margin-top:10px;text-align:center;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.qr-demo{width:158px;height:158px;margin:3px auto 12px;background:#fff;border:8px solid #f7f3eb;border-radius:18px;padding:9px;box-shadow:0 10px 30px rgba(12,24,49,.08)}
.qr-grid{display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr);gap:2px;width:100%;height:100%}.qr-grid i{background:#fff;border-radius:1px}.qr-grid i.on{background:#0c1831}
.qr-card>span,.qr-card>b,.qr-card>small{display:block}.qr-card>span{font-size:6px;color:#9d7338;font-weight:800}.qr-card>b{font-size:12px;margin-top:3px}.qr-card>small{font-size:6px;color:var(--muted);margin:4px 0 10px}.qr-card>button{border:0;background:var(--navy);color:#fff;border-radius:12px;padding:10px 13px;font-size:7px;font-weight:800}
.qr-result{display:none;margin-top:10px;border-radius:12px;padding:9px}.qr-result.success{display:block;background:#e8f5ee;color:#307e5e}.qr-result b,.qr-result span{display:block}.qr-result b{font-size:8px}.qr-result span{font-size:6px;margin-top:3px}

.eval-head-card{background:#fff;border-radius:18px;padding:12px;box-shadow:0 7px 20px rgba(12,24,49,.045)}.eval-head-card span,.eval-head-card b,.eval-head-card small{display:block}.eval-head-card span{font-size:6px;color:#9d7338}.eval-head-card b{font-size:11px;margin-top:3px}.eval-head-card small{font-size:6px;color:var(--muted)}
.quick-eval-card{background:#fff;border-radius:18px;padding:12px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.quick-eval-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}.quick-eval-head b{font-size:9px}
.eval-line{display:grid;grid-template-columns:62px 1fr;gap:8px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}.eval-line span{font-size:7px;color:var(--muted)}.eval-stars{display:flex;gap:4px}.eval-stars button{border:0;background:none;color:#d9d2c8;font-size:14px;padding:0}.eval-stars button.selected{color:#c6a56d}
.wide-action{width:100%;margin-top:8px;border:1px solid var(--line);background:#f8f3ea;border-radius:14px;padding:10px;display:grid;grid-template-columns:30px 1fr 14px;gap:8px;align-items:center;text-align:left}.wide-action>span{font-size:15px}.wide-action b,.wide-action small{display:block}.wide-action b{font-size:8px}.wide-action small{font-size:6px;color:var(--muted);margin-top:2px}.wide-action em{font-style:normal;color:#9d7338}

.exam-hero{display:grid;grid-template-columns:1fr 76px;gap:10px;align-items:center;background:linear-gradient(135deg,#0e1d39,#17315b);color:white;border-radius:20px;padding:14px}.exam-hero span,.exam-hero b,.exam-hero small{display:block}.exam-hero span{font-size:6px;color:var(--gold2);font-weight:800}.exam-hero b{font-family:"Playfair Display";font-size:34px;margin-top:3px}.exam-hero small{font-size:6px;color:rgba(255,255,255,.6);margin-top:2px}
.exam-subject-card{background:#fff;border-radius:18px;padding:12px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}.exam-subject-head{display:grid;grid-template-columns:1fr 48px;gap:8px;align-items:center}.exam-subject-head span,.exam-subject-head b,.exam-subject-head small{display:block}.exam-subject-head span{font-size:6px;color:#9d7338}.exam-subject-head b{font-size:10px;margin-top:2px}.exam-subject-head small{font-size:6px;color:var(--muted);margin-top:2px}

.focus-card{background:linear-gradient(160deg,#0b1934,#17315c);color:#fff;border-radius:24px;padding:18px;text-align:center;position:relative;overflow:hidden}
.focus-card>span{font-size:6px;letter-spacing:.15em;color:var(--gold2);font-weight:800}.focus-timer{font-family:"Playfair Display";font-size:52px;line-height:1;margin:24px 0 16px}.focus-ring-visual{width:120px;height:120px;margin:auto;border-radius:50%;border:1px solid rgba(226,200,155,.18);box-shadow:0 0 0 20px rgba(226,200,155,.035),0 0 0 40px rgba(226,200,155,.018);display:grid;place-items:center}.focus-ring-visual i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 -48px 0 var(--gold)}
.focus-card p{font-size:7px;color:rgba(255,255,255,.6);line-height:1.5;margin:20px auto 0;max-width:220px}.focus-actions{display:flex;justify-content:center;gap:8px;margin-top:15px}.focus-actions button{border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#fff;border-radius:12px;padding:10px 15px;font-size:7px;font-weight:800}.focus-actions button:first-child{background:var(--gold);color:var(--navy);border-color:var(--gold)}

.wrong-card{display:grid;grid-template-columns:44px 1fr auto;gap:9px;align-items:center;background:#fff;border-radius:18px;padding:12px;margin-top:9px;box-shadow:0 7px 20px rgba(12,24,49,.045)}.wrong-thumb{width:44px;height:44px;border-radius:12px;background:#f3eadc;display:grid;place-items:center;font-family:"Playfair Display";font-size:22px;color:#9d7338}.wrong-card span,.wrong-card b,.wrong-card small{display:block}.wrong-card span{font-size:6px;color:#9d7338}.wrong-card b{font-size:9px;margin-top:2px}.wrong-card small{font-size:6px;color:var(--muted);margin-top:2px}.wrong-card button{border:0;background:#f3eadc;color:#8e6936;border-radius:9px;padding:8px;font-size:6px}

@media(max-width:360px){
  .focus-timer{font-size:45px}
  .qr-demo{width:140px;height:140px}
}


/* V11 remaining features */
.daily-plan-hero{display:grid;grid-template-columns:1fr 76px;gap:10px;align-items:center;background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:20px;padding:14px}
.daily-plan-hero span,.daily-plan-hero b,.daily-plan-hero small{display:block}.daily-plan-hero span{font-size:6px;color:var(--gold2);font-weight:800}.daily-plan-hero b{font-size:11px;margin-top:3px}.daily-plan-hero small{font-size:6px;color:rgba(255,255,255,.55);margin-top:2px}.progress-ring.big{width:70px;height:70px}
.plan-item{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.plan-item:first-of-type{border-top:0}.plan-item time{font-size:7px;font-weight:800}.plan-item b,.plan-item small{display:block}.plan-item b{font-size:8px}.plan-item small{font-size:6px;color:var(--muted);margin-top:2px}.plan-item span{font-size:6px;padding:5px 7px;border-radius:999px}.plan-item.done span{background:#e8f5ee;color:#378f6b}.plan-item.wait span{background:#f5efdf;color:#9d7338}

.xp-hero{display:grid;grid-template-columns:1fr 76px;gap:10px;align-items:center;background:linear-gradient(135deg,#e7c78f,#c99d55);border-radius:20px;padding:14px;color:#13213d}.xp-hero span,.xp-hero b,.xp-hero small{display:block}.xp-hero span{font-size:6px;font-weight:800}.xp-hero b{font-size:24px;margin-top:3px}.xp-hero small{font-size:6px}.xp-ring{width:70px;height:70px;border-radius:50%;background:conic-gradient(#0c1831 83%,rgba(255,255,255,.35) 0);display:grid;place-items:center;position:relative}.xp-ring:after{content:"";position:absolute;inset:6px;background:#d4aa62;border-radius:50%}.xp-ring span{position:relative;z-index:1;font-size:10px}
.xp-row{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line);font-size:7px}.xp-row:first-of-type{border-top:0}.xp-row b{color:#9d7338}

.observation-card{background:#fff;border-radius:19px;padding:13px;box-shadow:0 7px 20px rgba(12,24,49,.045)}.rating-field{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-top:1px solid var(--line)}.rating-field:first-of-type{border-top:0}.rating-field>span{font-size:8px}.rating-field>div{display:flex;gap:4px}.rating-field button{width:25px;height:25px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:7px}.rating-field button.active{background:var(--navy);color:#fff}.observation-card label>span{font-size:7px;color:var(--muted)}.observation-card textarea,.wide-textarea{width:100%;min-height:78px;border:1px solid var(--line);background:#faf7f0;border-radius:12px;padding:9px;font-size:7px;resize:vertical;outline:0;margin-top:5px}

.document-row{display:grid;grid-template-columns:38px 1fr 30px;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.document-row:first-of-type{border-top:0}.doc-icon{width:38px;height:38px;border-radius:10px;background:#f3eadc;color:#9d7338;display:grid;place-items:center;font-size:7px;font-weight:800}.document-row b,.document-row small{display:block}.document-row b{font-size:8px}.document-row small{font-size:6px;color:var(--muted);margin-top:2px}.document-row button{border:0;background:#f6f2eb;border-radius:9px;height:30px}

.appointment-teacher{display:grid;grid-template-columns:36px 1fr;gap:8px;align-items:center;background:#fff;border-radius:16px;padding:11px;margin-bottom:9px}.appointment-teacher b,.appointment-teacher span{display:block}.appointment-teacher b{font-size:9px}.appointment-teacher span{font-size:6px;color:var(--muted);margin-top:2px}.time-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:9px 0}.time-grid button{height:39px;border:1px solid var(--line);background:#fff;border-radius:11px;font-size:8px}.time-grid button.selected{background:var(--navy);color:#fff;border-color:var(--navy)}.primary-action.standalone{width:100%;margin-top:9px}

.child-switch-card{display:grid;grid-template-columns:50px 1fr auto;gap:9px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;margin-top:9px}.child-switch-card.active{border-color:rgba(198,165,109,.6);background:#fffaf1}.child-switch-card b,.child-switch-card span{display:block}.child-switch-card b{font-size:9px}.child-switch-card span{font-size:6px;color:var(--muted);margin-top:2px}.child-switch-card em{font-style:normal;font-size:6px;color:#9d7338}

.teacher-day-hero{display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:20px;padding:14px}.teacher-day-hero span,.teacher-day-hero b,.teacher-day-hero small{display:block}.teacher-day-hero span{font-size:6px;color:var(--gold2)}.teacher-day-hero b{font-size:11px;margin-top:3px}.teacher-day-hero small{font-size:6px;color:rgba(255,255,255,.55);margin-top:2px}.teacher-day-hero em{font-style:normal;font-family:"Playfair Display";font-size:26px;color:var(--gold2)}.agenda-item{display:grid;grid-template-columns:43px 1fr 24px;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.agenda-item:first-of-type{border-top:0}.agenda-item time{font-size:7px;font-weight:800}.agenda-item b,.agenda-item small{display:block}.agenda-item b{font-size:8px}.agenda-item small{font-size:6px;color:var(--muted)}.agenda-item span{font-size:8px}.agenda-item.done{opacity:.6}

.payment-row{display:grid;grid-template-columns:1fr 64px auto;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.payment-row:first-of-type{border-top:0}.payment-row b,.payment-row small{display:block}.payment-row b{font-size:8px}.payment-row small{font-size:6px;color:var(--muted)}.payment-row strong{font-size:8px}.payment-row span{font-size:6px;padding:5px 7px;border-radius:999px}.payment-row .ok{background:#e8f5ee;color:#378f6b}.payment-row .no{background:#fae9e5;color:#b35649}.payment-row .wait{background:#f6efde;color:#9d7338}

.satisfaction-score{background:linear-gradient(135deg,#e7c78f,#c99d55);border-radius:20px;padding:14px;text-align:center;color:#13213d}.satisfaction-score span,.satisfaction-score b,.satisfaction-score small{display:block}.satisfaction-score span{font-size:6px;font-weight:800}.satisfaction-score b{font-family:"Playfair Display";font-size:38px;margin-top:3px}.satisfaction-score div{font-size:18px;letter-spacing:.08em}.satisfaction-score small{font-size:6px;margin-top:4px}

.emergency-card{background:linear-gradient(135deg,#6d1f1f,#a63d3d);color:#fff;border-radius:20px;padding:14px;margin-bottom:9px}.emergency-card span,.emergency-card b{display:block}.emergency-card span{font-size:6px;letter-spacing:.15em;color:#ffd7d7;font-weight:800}.emergency-card b{font-size:11px;margin-top:4px}.emergency-card p{font-size:7px;line-height:1.5;color:rgba(255,255,255,.72);margin:6px 0 0}.danger-action{height:48px;border:0;border-radius:13px;background:#a63d3d;color:#fff;font-size:8px;font-weight:800}

.profile-avatar-card{background:#fff;border-radius:20px;padding:18px;text-align:center;box-shadow:0 7px 20px rgba(12,24,49,.045)}.memoji-avatar.huge{width:100px;height:100px;border-radius:30px;font-size:60px;margin:0 auto 10px}.profile-avatar-card b,.profile-avatar-card span{display:block}.profile-avatar-card b{font-size:13px}.profile-avatar-card span{font-size:7px;color:var(--muted);margin-top:2px}.profile-avatar-card button{margin-top:10px;border:0;background:#f3eadc;color:#8e6936;border-radius:10px;padding:9px 12px;font-size:7px}

/* V12 enterprise 21-40 */
.risk-filter{display:grid;grid-template-columns:repeat(4,1fr);background:#e9e2d7;border-radius:13px;padding:3px;margin-bottom:9px}.risk-filter button{height:34px;border:0;background:transparent;border-radius:10px;font-size:7px;color:#777}.risk-filter .active{background:#fff;color:var(--navy)}
.risk-student{display:grid;grid-template-columns:50px 1fr auto;gap:9px;align-items:center;background:#fff;border-radius:17px;padding:11px;margin-top:8px;box-shadow:0 6px 18px rgba(12,24,49,.04)}.risk-student b,.risk-student small{display:block}.risk-student b{font-size:9px}.risk-student small{font-size:6px;color:var(--muted);margin-top:2px}.risk-student>span{font-size:6px;padding:6px 8px;border-radius:999px}.risk-student .ok{background:#e8f5ee;color:#378f6b}.risk-student .wait{background:#f6efde;color:#9d7338}.risk-student .no{background:#fae9e5;color:#b35649}
.digital-report-hero{display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:center;background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:20px;padding:14px}.digital-report-hero span,.digital-report-hero b,.digital-report-hero small{display:block}.digital-report-hero span{font-size:6px;color:var(--gold2)}.digital-report-hero b{font-size:12px;margin-top:3px}.digital-report-hero small{font-size:6px;color:rgba(255,255,255,.55);margin-top:2px}
.intervention-card{background:#fff;border-radius:18px;padding:13px;box-shadow:0 7px 20px rgba(12,24,49,.045)}.intervention-card span,.intervention-card b,.intervention-card small{display:block}.intervention-card span{font-size:6px;color:#9d7338;font-weight:800}.intervention-card b{font-size:10px;margin-top:3px}.intervention-card small{font-size:6px;color:var(--muted);margin-top:3px}.intervention-card.action{background:#fffaf1}.intervention-card.result{background:#edf7f1}.intervention-arrow{text-align:center;color:#9d7338;padding:5px;font-size:14px}
.private-note{display:grid;grid-template-columns:36px 1fr;gap:9px;background:#fff;border-radius:17px;padding:11px;margin-top:8px;box-shadow:0 6px 18px rgba(12,24,49,.04)}.private-note span,.private-note b{display:block}.private-note span{font-size:6px;color:#9d7338}.private-note b{font-size:8px;margin-top:2px}.private-note p{font-size:7px;line-height:1.5;color:var(--muted);margin:4px 0 0}.private-note.locked{border:1px solid rgba(12,24,49,.12);background:#f3f5f8}
.automation-rule{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-radius:17px;padding:11px;margin-top:8px}.automation-rule span,.automation-rule b,.automation-rule small{display:block}.automation-rule span{font-size:6px;color:#9d7338}.automation-rule b{font-size:8px;margin-top:2px}.automation-rule small{font-size:6px;color:var(--muted);margin-top:2px}.automation-rule em{font-style:normal;font-size:6px;color:#378f6b;background:#e8f5ee;padding:5px 7px;border-radius:999px}
.chat-thread{display:grid;grid-template-columns:36px 1fr auto;gap:8px;align-items:center;background:#fff;border-radius:17px;padding:11px;margin-top:8px}.chat-thread b,.chat-thread span,.chat-thread small{display:block}.chat-thread b{font-size:8px}.chat-thread span{font-size:6px;color:#9d7338}.chat-thread small{font-size:6px;color:var(--muted);margin-top:2px}.chat-thread em{font-style:normal;font-size:6px;color:#b35649}
.announcement-stat{display:grid;grid-template-columns:1fr 48px;gap:8px;align-items:center;background:#fff;border-radius:18px;padding:12px;margin-top:8px}.announcement-stat span,.announcement-stat b,.announcement-stat small{display:block}.announcement-stat span{font-size:6px;color:#9d7338}.announcement-stat b{font-size:9px;margin-top:2px}.announcement-stat small{font-size:6px;color:var(--muted);margin-top:2px}
.heatmap-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.heat-cell{border-radius:16px;padding:15px 10px;display:flex;justify-content:space-between;align-items:center}.heat-cell b{font-size:8px}.heat-cell span{font-size:10px;font-weight:800}.heat-cell.good{background:#e8f5ee;color:#2f795a}.heat-cell.wait{background:#f6efde;color:#8e6936}.heat-cell.bad{background:#fae9e5;color:#a44e43}
.trend-card{display:grid;grid-template-columns:1fr 20px 1fr;gap:8px;align-items:center;background:#fff;border-radius:18px;padding:13px;margin-top:8px}.trend-card>div{background:#f8f4ed;border-radius:12px;padding:10px}.trend-card span,.trend-card small,.trend-card b{display:block}.trend-card span{font-size:7px}.trend-card small{font-size:6px;color:var(--muted)}.trend-card b{font-size:19px;margin-top:3px}.trend-card i{font-style:normal;color:#9d7338;text-align:center}
.teacher-ops{display:grid;grid-template-columns:36px 1fr;gap:9px;background:#fff;border-radius:17px;padding:11px;margin-top:8px}.teacher-ops b,.teacher-ops span,.teacher-ops small{display:block}.teacher-ops b{font-size:8px}.teacher-ops span{font-size:6px;color:#9d7338}.teacher-ops small{font-size:6px;color:var(--muted);margin-top:2px}
.missed-lesson-card{background:#fff1ed;border-radius:18px;padding:13px}.missed-lesson-card span,.missed-lesson-card b,.missed-lesson-card small{display:block}.missed-lesson-card span{font-size:6px;color:#b35649;font-weight:800}.missed-lesson-card b{font-size:10px;margin-top:3px}.missed-lesson-card small{font-size:6px;color:var(--muted);margin-top:2px}
.makeup-slot{display:grid;grid-template-columns:78px 1fr auto;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}.makeup-slot:first-of-type{border-top:0}.makeup-slot time{font-size:7px;font-weight:800}.makeup-slot b,.makeup-slot small{display:block}.makeup-slot b{font-size:8px}.makeup-slot small{font-size:6px;color:var(--muted)}.makeup-slot button{border:0;background:#f3eadc;color:#8e6936;border-radius:9px;padding:7px;font-size:6px}
.event-card{background:#fff;border-radius:18px;padding:13px;margin-top:8px}.event-card>span,.event-card>b,.event-card>small{display:block}.event-card>span{font-size:6px;color:#9d7338}.event-card>b{font-size:10px;margin-top:3px}.event-card>small{font-size:6px;color:var(--muted);margin-top:2px}.event-card>div{display:flex;justify-content:space-between;align-items:center;margin-top:10px}.event-card em{font-style:normal;font-size:6px}.event-card button{border:0;background:var(--navy);color:#fff;border-radius:9px;padding:7px;font-size:6px}
.meal-card{background:#fff;border-radius:18px;padding:13px;margin-top:8px}.meal-card span{font-size:6px;color:#9d7338;font-weight:800}.meal-card p{font-size:8px;line-height:1.5;margin:5px 0 0;color:#596475}
.branch-card{display:grid;grid-template-columns:1.1fr repeat(3,.8fr);gap:7px;background:#fff;border-radius:18px;padding:12px;margin-top:8px}.branch-card span,.branch-card small,.branch-card b{display:block}.branch-card span{font-size:6px;color:#9d7338}.branch-card small{font-size:5px;color:var(--muted)}.branch-card b{font-size:8px;margin-top:2px}
.superadmin-preview{background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:22px;padding:18px}.superadmin-preview span{font-size:6px;color:var(--gold2)}.superadmin-preview h3{font-family:"Playfair Display";font-size:22px;margin:8px 0}.superadmin-preview p{font-size:7px;line-height:1.5;color:rgba(255,255,255,.65)}.superadmin-preview a{display:inline-block;margin-top:9px;background:var(--gold);color:var(--navy);text-decoration:none;border-radius:10px;padding:9px 11px;font-size:7px;font-weight:800}


/* =========================================================
   V13 MOTION SYSTEM — premium mobile app transitions
   ========================================================= */
:root{
  --ease-premium:cubic-bezier(.2,.8,.2,1);
  --ease-spring:cubic-bezier(.18,1.15,.35,1);
}

/* top-level screen transitions */
.screen{
  transition:
    opacity .34s var(--ease-premium),
    transform .40s var(--ease-premium),
    filter .34s ease;
  will-change:transform,opacity;
}
.screen.screen-enter{
  animation:screenEnter .42s var(--ease-premium) both;
}
.screen.screen-leave{
  animation:screenLeave .26s ease both;
  pointer-events:none!important;
}
@keyframes screenEnter{
  from{opacity:0;transform:translateY(18px) scale(.985);filter:blur(5px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes screenLeave{
  to{opacity:0;transform:scale(.985);filter:blur(3px)}
}

/* in-app page transitions */
.view{
  transform-origin:50% 20%;
  will-change:transform,opacity;
}
.view.view-exit{
  animation:viewExit .14s ease both;
}
.view.view-exit-back{
  animation:viewExitBack .14s ease both;
}
.view.view-enter,.view.view-enter-back{
  opacity:0;
}
.view.view-enter{
  transform:translateX(22px) scale(.992);
}
.view.view-enter-back{
  transform:translateX(-18px) scale(.994);
}
.view.view-enter-active{
  opacity:1;
  transform:none;
  transition:opacity .32s ease,transform .38s var(--ease-premium);
}
@keyframes viewExit{
  to{opacity:0;transform:translateX(-12px) scale(.994)}
}
@keyframes viewExitBack{
  to{opacity:0;transform:translateX(12px) scale(.994)}
}

/* staggered card entrance */
.stagger-item{
  opacity:0;
  transform:translateY(12px) scale(.992);
  animation:staggerReveal .42s var(--ease-premium) forwards;
  animation-delay:var(--stagger,0ms);
}
@keyframes staggerReveal{
  to{opacity:1;transform:none}
}

/* tap feedback / ripple */
button,a{
  position:relative;
  overflow:hidden;
}
.tap-ripple{
  position:absolute;
  width:10px;height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:rgba(255,255,255,.34);
  pointer-events:none;
  animation:ripple .52s ease-out forwards;
  z-index:20;
}
@keyframes ripple{
  to{transform:scale(22);opacity:0}
}

/* modernized tab bar */
.tabbar{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:
    0 18px 42px rgba(12,24,49,.16),
    inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
}
.tabbar button{
  border-radius:14px;
  transition:transform .2s var(--ease-spring),background .22s ease,color .22s ease;
}
.tabbar button:active{transform:scale(.9)}
.tabbar button.active{
  background:linear-gradient(180deg,rgba(198,165,109,.15),rgba(198,165,109,.04));
}
.tabbar button.active:after{
  top:3px;
  width:20px;
  height:3px;
  box-shadow:0 2px 12px rgba(198,165,109,.42);
}

/* glass topbar */
.app-topbar,.home-header,.dash-header{
  position:relative;
  overflow:hidden;
  box-shadow:0 14px 36px rgba(7,18,41,.12);
}
.app-topbar:before,.home-header:before,.dash-header:before{
  content:"";
  position:absolute;
  width:180px;height:180px;
  right:-80px;top:-100px;
  border-radius:50%;
  border:1px solid rgba(226,200,155,.16);
  box-shadow:0 0 0 34px rgba(226,200,155,.025);
  pointer-events:none;
}
.profile-chip,.topbar-icon{
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .22s var(--ease-spring),background .2s ease;
}
.profile-chip:active,.topbar-icon:active{transform:scale(.9)}

/* modern cards */
.list-card,.skill-card,.assignment-card,.student-homework-card,
.parent-homework-card,.report-card,.class-card,.goal-card,
.weekly-summary-card,.appointment-card,.student-feature-grid button,
.admin-kpi,.event-card,.meal-card,.trend-card,.announcement-stat,
.automation-rule,.risk-student{
  transition:
    transform .24s var(--ease-spring),
    box-shadow .25s ease,
    border-color .25s ease;
}
.list-card:active,.skill-card:active,.assignment-card:active,
.student-homework-card:active,.parent-homework-card:active,
.class-card:active,.student-feature-grid button:active,
.event-card:active,.trend-card:active{
  transform:scale(.985);
}
.student-feature-grid button:hover,.class-card:hover,.event-card:hover{
  box-shadow:0 12px 30px rgba(12,24,49,.08);
}

/* subtle premium gradients */
.view-container,.home-scroll,.dash-scroll{
  background:
    radial-gradient(circle at 100% 0%,rgba(198,165,109,.055),transparent 26%),
    linear-gradient(180deg,#f7f3eb 0%,#f3eee5 100%);
}
.list-card,.skill-card,.assignment-card,.student-homework-card,.parent-homework-card{
  border:1px solid rgba(255,255,255,.7);
  box-shadow:
    0 8px 24px rgba(12,24,49,.045),
    inset 0 1px 0 rgba(255,255,255,.75);
}

/* progress animations */
.progressbar i,.skill-bar i{
  transform-origin:left;
  animation:progressGrow .8s var(--ease-premium) both;
}
@keyframes progressGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
.result-ring,.mini-ring,.monthly-ring,.progress-ring,.xp-ring{
  animation:ringFloat .65s var(--ease-spring) both;
}
@keyframes ringFloat{
  from{opacity:0;transform:scale(.86) rotate(-8deg)}
  to{opacity:1;transform:none}
}

/* live/pulse elements */
.live-dot{
  animation:livePulse 1.4s ease-in-out infinite;
}
.status.ok,.good,.positive{
  animation:softGlow 2.4s ease-in-out infinite;
}
@keyframes softGlow{
  50%{filter:drop-shadow(0 0 7px rgba(55,143,107,.22))}
}

/* smoother chat bubbles */
.bubble.incoming{animation:bubbleInLeft .34s var(--ease-premium) both}
.bubble.outgoing{animation:bubbleInRight .34s var(--ease-premium) both}
@keyframes bubbleInLeft{from{opacity:0;transform:translateX(-10px) scale(.98)}}
@keyframes bubbleInRight{from{opacity:0;transform:translateX(10px) scale(.98)}}

/* splash refinement */
.splash-logo{
  animation:logoReveal 1s var(--ease-premium) both;
}
.splash-quote{
  animation:splashText .8s .35s var(--ease-premium) both;
}
.splash-loading{
  animation:splashText .8s .55s var(--ease-premium) both;
}
@keyframes logoReveal{
  from{opacity:0;transform:scale(.84) translateY(14px);filter:blur(8px)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes splashText{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* role switch modern segmented motion */
.role-switch button{
  transition:background .26s ease,color .24s ease,transform .18s var(--ease-spring),box-shadow .25s ease;
}
.role-switch button:active{transform:scale(.94)}
.role-switch button.active{
  box-shadow:0 5px 16px rgba(12,24,49,.1);
}

/* back button reveal */
.topbar-icon:not(.hidden){
  animation:backButtonIn .28s var(--ease-spring) both;
}
@keyframes backButtonIn{
  from{opacity:0;transform:translateX(-8px) scale(.85)}
  to{opacity:1;transform:none}
}

/* desktop super-admin polish */
@media(min-width:900px){
  #app{
    box-shadow:
      0 44px 120px rgba(0,0,0,.5),
      0 0 0 1px rgba(255,255,255,.04);
  }
}

/* accessibility */
@media(prefers-reduced-motion:reduce){
  .screen,.view,.stagger-item,.progressbar i,.skill-bar i,.result-ring,.mini-ring,.monthly-ring,.progress-ring,.xp-ring,
  .splash-logo,.splash-quote,.splash-loading,.bubble,.topbar-icon{
    animation:none!important;
    transition:none!important;
    transform:none!important;
    filter:none!important;
  }
}


/* =========================================================
   V14 — Premium Welcome / Login
   ========================================================= */
.login{
  background:
    radial-gradient(circle at 85% -10%,rgba(198,165,109,.16),transparent 30%),
    radial-gradient(circle at -10% 30%,rgba(25,53,94,.08),transparent 28%),
    linear-gradient(180deg,#fbf8f2 0%,#f2ece1 100%);
}
.premium-login-header{
  position:relative;
  z-index:3;
}
.brand-mini{
  display:flex;
  align-items:center;
  gap:10px;
}
.brand-mini .login-logo{
  width:62px;
  height:48px;
  object-fit:contain;
}
.brand-mini>div{
  display:grid;
  gap:1px;
}
.brand-mini span{
  font-size:9px;
  letter-spacing:.13em;
  font-weight:800;
  color:var(--navy);
}
.brand-mini small{
  font-size:6px;
  letter-spacing:.18em;
  color:#9d7338;
}
.login-hero{
  position:relative;
  overflow:hidden;
  margin-top:13px;
  padding:22px 18px 18px;
  border-radius:26px;
  background:
    linear-gradient(145deg,rgba(10,25,52,.98),rgba(20,48,86,.96));
  color:white;
  box-shadow:
    0 22px 55px rgba(12,24,49,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  isolation:isolate;
}
.login-hero:before{
  content:"";
  position:absolute;
  width:170px;height:170px;
  right:-68px;top:-74px;
  border-radius:50%;
  border:1px solid rgba(226,200,155,.18);
  box-shadow:
    0 0 0 34px rgba(226,200,155,.035),
    0 0 0 68px rgba(226,200,155,.015);
  z-index:-1;
}
.login-hero:after{
  content:"";
  position:absolute;
  left:-35px;
  bottom:-55px;
  width:130px;height:130px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(198,165,109,.18),transparent 65%);
  z-index:-1;
}
.login-hero-glow{
  position:absolute;
  inset:0;
  background:linear-gradient(115deg,transparent 0%,rgba(255,255,255,.035) 45%,transparent 70%);
  transform:translateX(-100%);
  animation:heroShine 5.5s ease-in-out infinite;
}
@keyframes heroShine{
  0%,65%{transform:translateX(-100%)}
  85%,100%{transform:translateX(100%)}
}
.login-hero-kicker{
  display:block;
  font-size:6px;
  letter-spacing:.19em;
  color:var(--gold2);
  font-weight:800;
  margin-bottom:8px;
}
.login-hero h1{
  font-family:"Playfair Display",serif;
  font-size:36px;
  line-height:1;
  margin:0 0 8px;
  letter-spacing:-.02em;
}
.login-hero p{
  max-width:300px;
  font-size:8px;
  line-height:1.6;
  color:rgba(255,255,255,.62);
  margin:0;
}
.login-hero-signature{
  margin-top:13px;
  font-family:Caveat,cursive;
  font-size:17px;
  color:rgba(255,255,255,.8);
  transform:rotate(-1deg);
}
.login-hero-signature b{
  color:#e8b45d;
  font-size:23px;
  font-weight:600;
}
.login-hero-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:14px;
}
.login-hero-metrics>div{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px;
  padding:8px 7px;
  backdrop-filter:blur(10px);
}
.login-hero-metrics strong,
.login-hero-metrics span{
  display:block;
}
.login-hero-metrics strong{
  font-size:12px;
  color:#fff;
}
.login-hero-metrics span{
  margin-top:2px;
  font-size:5.5px;
  color:rgba(255,255,255,.5);
}

/* login controls refined */
.role-switch{
  margin-top:12px;
  background:rgba(12,24,49,.06);
  border:1px solid rgba(12,24,49,.035);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}
.role-switch button.active{
  background:linear-gradient(180deg,#fff,#faf7f0);
  box-shadow:
    0 5px 16px rgba(12,24,49,.08),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.role-panel{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 8px 22px rgba(12,24,49,.04);
}
.login-form{
  margin-top:11px;
}
.app-input>div{
  height:50px;
  border-radius:15px;
  box-shadow:
    0 8px 22px rgba(12,24,49,.045),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.primary-action{
  background:linear-gradient(135deg,#0c1831,#18355f);
  box-shadow:
    0 15px 32px rgba(12,24,49,.18),
    inset 0 1px 0 rgba(255,255,255,.08);
  transition:transform .2s var(--ease-spring),box-shadow .2s ease;
}
.primary-action:active{
  transform:scale(.985);
  box-shadow:0 10px 22px rgba(12,24,49,.14);
}
.demo-credentials{
  background:rgba(198,165,109,.10);
  border:1px solid rgba(198,165,109,.12);
  padding:8px 10px;
  border-radius:12px;
}

/* small screens */
@media(max-width:360px){
  .login-hero{padding:18px 15px 15px;border-radius:22px}
  .login-hero h1{font-size:32px}
  .login-hero-metrics{gap:5px}
  .brand-mini .login-logo{width:56px;height:44px}
}


/* =========================================================
   V15 — Light / Dark Theme System
   ========================================================= */
.theme-actions,
.topbar-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.theme-toggle-btn,
.topbar-theme-btn{
  width:34px;
  height:34px;
  border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.72);
  color:var(--navy);
  display:grid;
  place-items:center;
  font-size:13px;
  transition:transform .2s var(--ease-spring),background .2s ease,color .2s ease,border-color .2s ease;
}
.theme-toggle-btn:active,
.topbar-theme-btn:active{
  transform:scale(.9);
}
.theme-toggle-btn.active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.topbar-theme-btn{
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#fff;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Dark palette */
html[data-theme="dark"]{
  --navy:#dfe9fb;
  --navy2:#c7d6ee;
  --cream:#07111f;
  --paper:#091524;
  --gold:#cda96e;
  --gold2:#e3c995;
  --ink:#eef4ff;
  --muted:#97a7bc;
  --white:#0e1b2d;
  --line:rgba(255,255,255,.08);
  --shadow:0 18px 48px rgba(0,0,0,.28);
}

html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] .screen,
html[data-theme="dark"] .role-app,
html[data-theme="dark"] .home{
  background:#07111f;
  color:var(--ink);
}

html[data-theme="dark"] .login{
  background:
    radial-gradient(circle at 85% -10%,rgba(198,165,109,.12),transparent 30%),
    radial-gradient(circle at -10% 30%,rgba(34,71,121,.12),transparent 28%),
    linear-gradient(180deg,#07111f 0%,#0a1627 100%);
}

html[data-theme="dark"] .login-page,
html[data-theme="dark"] .view-container,
html[data-theme="dark"] .home-scroll,
html[data-theme="dark"] .dash-scroll{
  background:
    radial-gradient(circle at 100% 0%,rgba(198,165,109,.04),transparent 26%),
    linear-gradient(180deg,#091524 0%,#07111f 100%);
}

html[data-theme="dark"] .list-card,
html[data-theme="dark"] .skill-card,
html[data-theme="dark"] .assignment-card,
html[data-theme="dark"] .student-homework-card,
html[data-theme="dark"] .parent-homework-card,
html[data-theme="dark"] .goal-card,
html[data-theme="dark"] .appointment-card,
html[data-theme="dark"] .student-feature-grid button,
html[data-theme="dark"] .class-card,
html[data-theme="dark"] .risk-student,
html[data-theme="dark"] .event-card,
html[data-theme="dark"] .meal-card,
html[data-theme="dark"] .trend-card,
html[data-theme="dark"] .announcement-stat,
html[data-theme="dark"] .automation-rule,
html[data-theme="dark"] .teacher-comment,
html[data-theme="dark"] .role-panel,
html[data-theme="dark"] .app-input>div,
html[data-theme="dark"] .native-field select,
html[data-theme="dark"] .native-field input,
html[data-theme="dark"] .form-card-pro,
html[data-theme="dark"] .observation-card,
html[data-theme="dark"] .document-row,
html[data-theme="dark"] .chat-card,
html[data-theme="dark"] .timeline-dev,
html[data-theme="dark"] .badge-shelf,
html[data-theme="dark"] .parent-profile-card,
html[data-theme="dark"] .child-switch-card,
html[data-theme="dark"] .quick-eval-card,
html[data-theme="dark"] .eval-head-card,
html[data-theme="dark"] .schedule-day-card,
html[data-theme="dark"] .student-homework-card,
html[data-theme="dark"] .wrong-card{
  background:#0d1a2c;
  border-color:rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

html[data-theme="dark"] .role-switch,
html[data-theme="dark"] .segment,
html[data-theme="dark"] .risk-filter{
  background:#101e31;
}

html[data-theme="dark"] .role-switch button.active,
html[data-theme="dark"] .segment button.active,
html[data-theme="dark"] .risk-filter button.active{
  background:#182941;
  color:#fff;
  box-shadow:0 5px 16px rgba(0,0,0,.22);
}

html[data-theme="dark"] .app-input>div,
html[data-theme="dark"] .native-field select,
html[data-theme="dark"] .native-field input,
html[data-theme="dark"] .wide-textarea,
html[data-theme="dark"] .observation-card textarea,
html[data-theme="dark"] .chat-compose input,
html[data-theme="dark"] .search-row input{
  color:#eef4ff;
  background:#101e31;
  border-color:rgba(255,255,255,.07);
}

html[data-theme="dark"] .app-input input{
  color:#eef4ff;
}

html[data-theme="dark"] .app-input input::placeholder,
html[data-theme="dark"] .chat-compose input::placeholder,
html[data-theme="dark"] .search-row input::placeholder{
  color:#728299;
}

html[data-theme="dark"] .tabbar{
  background:rgba(9,21,36,.84);
  border-color:rgba(255,255,255,.07);
  box-shadow:0 18px 42px rgba(0,0,0,.34);
}

html[data-theme="dark"] .tabbar button{
  color:#7f91aa;
}
html[data-theme="dark"] .tabbar button.active{
  color:#eef4ff;
  background:linear-gradient(180deg,rgba(198,165,109,.14),rgba(198,165,109,.03));
}

html[data-theme="dark"] .theme-toggle-btn{
  background:#101e31;
  color:#b8c6d9;
  border-color:rgba(255,255,255,.08);
}
html[data-theme="dark"] .theme-toggle-btn.active{
  background:#c6a56d;
  color:#07111f;
  border-color:#c6a56d;
}

html[data-theme="dark"] .circle-btn{
  background:#101e31;
  color:#aebbd0;
  border-color:rgba(255,255,255,.08);
}

html[data-theme="dark"] .demo-credentials{
  background:rgba(198,165,109,.08);
  border-color:rgba(198,165,109,.11);
}

html[data-theme="dark"] .progressbar,
html[data-theme="dark"] .skill-bar{
  background:#182638;
}

html[data-theme="dark"] .mini-ring:after,
html[data-theme="dark"] .result-ring:after{
  background:#0d1a2c;
}

html[data-theme="dark"] .student-feature-grid button,
html[data-theme="dark"] .quick-actions button,
html[data-theme="dark"] .admin-action-grid button{
  color:#eef4ff;
}

html[data-theme="dark"] .teacher-avatar,
html[data-theme="dark"] .student-avatar{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
}

html[data-theme="dark"] .quote,
html[data-theme="dark"] .teacher-comment p,
html[data-theme="dark"] .meal-card p{
  color:#b1bfd2;
}

html[data-theme="dark"] .chat-body{
  background:#091524;
}
html[data-theme="dark"] .bubble.incoming{
  background:#122138;
  color:#eef4ff;
}
html[data-theme="dark"] .bubble.outgoing{
  background:#1e3a63;
}

html[data-theme="dark"] .homework-state-strip{
  opacity:.9;
}

/* Smooth theme transition */
html.theme-transition *,
html[data-theme] body,
html[data-theme] .screen,
html[data-theme] .list-card,
html[data-theme] .skill-card,
html[data-theme] .tabbar,
html[data-theme] .role-panel,
html[data-theme] .app-input>div{
  transition:
    background-color .28s ease,
    color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;
}

@media(max-width:360px){
  .theme-actions{gap:4px}
  .theme-toggle-btn{width:31px;height:31px}
}


/* V16 Student Study Hub */
.study-hero-card{display:grid;grid-template-columns:1fr 55px;gap:10px;align-items:center;background:linear-gradient(135deg,#0e1d39,#17315b);color:#fff;border-radius:20px;padding:14px;margin-bottom:10px}
.study-hero-card span,.study-hero-card b,.study-hero-card small{display:block}.study-hero-card span{font-size:6px;color:var(--gold2);font-weight:800}.study-hero-card b{font-size:16px;margin-top:3px}.study-hero-card small{font-size:6px;color:rgba(255,255,255,.55);margin-top:2px}
.study-play-badge{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:var(--gold2);font-size:18px}

.question-set-card{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;background:#fff;border-radius:18px;padding:12px;margin-top:8px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.question-set-icon{width:42px;height:42px;border-radius:13px;background:#f3eadc;color:#9d7338;display:grid;place-items:center;font-family:"Playfair Display";font-size:21px}
.question-set-card span,.question-set-card b,.question-set-card small{display:block}.question-set-card span{font-size:6px;color:#9d7338}.question-set-card b{font-size:9px;margin-top:2px}.question-set-card small{font-size:6px;color:var(--muted);margin-top:2px}.question-set-card button{border:0;background:var(--navy);color:#fff;border-radius:9px;padding:8px;font-size:6px}

.solved-test-row{display:grid;grid-template-columns:1fr 75px 42px;gap:8px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}.solved-test-row:first-of-type{border-top:0}.solved-test-row b,.solved-test-row small{display:block}.solved-test-row b{font-size:8px}.solved-test-row small{font-size:6px;color:var(--muted)}.solved-test-row span{font-size:7px}.solved-test-row em{font-style:normal;font-size:7px;color:#378f6b;font-weight:800}

.lesson-video-card{display:grid;grid-template-columns:66px 1fr 26px;gap:9px;align-items:center;background:#fff;border-radius:18px;padding:10px;margin-top:8px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.video-thumb{width:66px;height:48px;border-radius:12px;background:linear-gradient(135deg,#0e1d39,#17315b);display:flex;align-items:center;justify-content:center;gap:5px;color:#fff}.video-thumb .teacher-avatar{width:28px;height:28px;border-radius:9px;font-size:6px}.video-thumb>span{font-size:12px;color:var(--gold2)}
.lesson-video-card>div:nth-child(2) span,.lesson-video-card b,.lesson-video-card small,.lesson-video-card em{display:block}.lesson-video-card>div:nth-child(2)>span{font-size:6px;color:#9d7338}.lesson-video-card b{font-size:8px;margin-top:2px}.lesson-video-card small{font-size:6px;color:var(--muted);margin-top:2px}.lesson-video-card em{font-style:normal;font-size:6px;color:#378f6b;margin-top:3px}.lesson-video-card>button{border:0;background:#f3eadc;color:#8e6936;width:26px;height:26px;border-radius:8px}

.question-card{background:#fff;border-radius:20px;padding:15px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.question-card>span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:#f3eadc;color:#9d7338;font-size:8px;font-weight:800}.question-card h3{font-size:12px;line-height:1.5;margin:13px 0}
.answer-grid{display:grid;gap:8px}.answer-grid button{border:1px solid var(--line);background:#faf7f0;border-radius:12px;padding:11px;text-align:left;font-size:8px}.answer-grid button:active{background:#f3eadc}
.question-actions{display:flex;justify-content:space-between;margin-top:12px}.question-actions button{border:0;background:var(--navy);color:#fff;border-radius:10px;padding:8px 10px;font-size:7px}
.question-progress-card{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.question-progress-card>div{background:#fff;border-radius:14px;padding:10px;text-align:center}.question-progress-card span,.question-progress-card b{display:block}.question-progress-card span{font-size:6px;color:var(--muted)}.question-progress-card b{font-size:15px;margin-top:2px}

.video-player-demo{background:#fff;border-radius:20px;padding:10px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.video-screen{height:190px;border-radius:15px;background:linear-gradient(145deg,#0c1831,#1d3d6a);display:grid;place-items:center;position:relative;overflow:hidden;color:#fff}.video-screen:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(198,165,109,.16),transparent 30%)}.teacher-video-badge{position:absolute;top:12px;left:12px;width:34px;height:34px;border-radius:11px;background:#f3eadc;color:#8e6936;display:grid;place-items:center;font-size:8px;font-weight:800}.fake-play{width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.08);color:#fff;font-size:18px;backdrop-filter:blur(10px)}.video-screen>span{position:absolute;left:12px;bottom:12px;font-size:8px}
.video-progress{height:6px;border-radius:999px;background:#eee7dd;overflow:hidden;margin-top:9px}.video-progress i{display:block;height:100%;background:var(--gold)}.video-meta{display:flex;justify-content:space-between;font-size:6px;color:var(--muted);margin-top:4px}

html[data-theme="dark"] .question-set-card,
html[data-theme="dark"] .lesson-video-card,
html[data-theme="dark"] .question-card,
html[data-theme="dark"] .question-progress-card>div,
html[data-theme="dark"] .video-player-demo{
  background:#0d1a2c;
}
html[data-theme="dark"] .answer-grid button{
  background:#101e31;
  color:#eef4ff;
}


/* V17 — One-to-One Online Lesson */
.live-class-hero{
  display:grid;
  grid-template-columns:48px 1fr auto;
  gap:10px;
  align-items:center;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(135deg,#0e1d39,#17315b);
  color:#fff;
  box-shadow:0 14px 35px rgba(12,24,49,.14);
}
.live-teacher{width:48px;height:48px;border-radius:15px}
.live-class-hero span,.live-class-hero b,.live-class-hero small{display:block}
.live-class-hero>div:nth-child(2)>span{font-size:6px;color:var(--gold2);font-weight:800}
.live-class-hero>div:nth-child(2)>b{font-size:10px;margin-top:3px}
.live-class-hero>div:nth-child(2)>small{font-size:6px;color:rgba(255,255,255,.55);margin-top:2px}
.live-countdown{text-align:right}.live-countdown strong,.live-countdown span{display:block}.live-countdown strong{font-size:14px;color:var(--gold2)}.live-countdown span{font-size:5px;color:rgba(255,255,255,.5)}

.live-class-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}
.live-class-actions button{border:1px solid var(--line);background:#fff;border-radius:17px;padding:13px;text-align:left;display:grid;gap:3px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.live-class-actions button>span{font-size:17px;color:#a77c3c}.live-class-actions b{font-size:9px}.live-class-actions small{font-size:6px;color:var(--muted)}

.live-lesson-row{display:grid;grid-template-columns:52px 36px 1fr auto;gap:8px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.live-lesson-row:first-of-type{border-top:0}
.live-date b,.live-date span{display:block}.live-date b{font-size:7px}.live-date span{font-size:6px;color:var(--muted)}
.live-lesson-row>div:nth-child(3) span,.live-lesson-row>div:nth-child(3) b,.live-lesson-row>div:nth-child(3) small{display:block}
.live-lesson-row>div:nth-child(3) span{font-size:6px;color:#9d7338}.live-lesson-row>div:nth-child(3) b{font-size:8px;margin-top:1px}.live-lesson-row>div:nth-child(3) small{font-size:6px;color:var(--muted);margin-top:1px}
.live-lesson-row em{font-style:normal;font-size:6px;color:#378f6b;background:#e8f5ee;padding:5px 7px;border-radius:999px}

.past-live-row{display:grid;grid-template-columns:1fr auto;gap:8px;padding:9px 0;border-top:1px solid var(--line)}
.past-live-row:first-of-type{border-top:0}.past-live-row span,.past-live-row b,.past-live-row small{display:block}.past-live-row span{font-size:6px;color:#9d7338}.past-live-row b{font-size:8px;margin-top:2px}.past-live-row small{font-size:6px;color:var(--muted);margin-top:2px}.past-live-row>div:last-child{text-align:right}

.live-teacher-picker{display:grid;gap:8px}
.live-teacher-card{width:100%;display:grid;grid-template-columns:36px 1fr auto;gap:9px;align-items:center;border:1px solid var(--line);background:#fff;border-radius:17px;padding:11px;text-align:left}
.live-teacher-card.active{border-color:rgba(198,165,109,.7);background:#fffaf1}
.live-teacher-card b,.live-teacher-card span,.live-teacher-card small{display:block}.live-teacher-card b{font-size:8px}.live-teacher-card span{font-size:6px;color:#9d7338;margin-top:1px}.live-teacher-card small{font-size:6px;color:var(--muted);margin-top:2px}.live-teacher-card em{font-style:normal;color:#9d7338}

.live-room{background:#07111f;border-radius:22px;padding:10px;box-shadow:0 18px 44px rgba(0,0,0,.28)}
.live-video-stage{height:280px;border-radius:17px;background:radial-gradient(circle at 65% 20%,rgba(198,165,109,.12),transparent 25%),linear-gradient(145deg,#102344,#07111f);position:relative;overflow:hidden}
.teacher-camera{position:absolute;inset:0;display:grid;place-items:center;color:#fff;text-align:center}.teacher-camera-avatar{width:110px;height:110px;border-radius:34px;background:linear-gradient(145deg,#d9c6a6,#9d7540);display:grid;place-items:center;font-size:30px;font-weight:800;box-shadow:0 20px 45px rgba(0,0,0,.24)}.teacher-camera span{font-size:10px;font-weight:800;margin-top:10px}.teacher-camera small{font-size:6px;color:rgba(255,255,255,.5);margin-top:-22px}
.student-camera{position:absolute;right:10px;bottom:10px;width:92px;height:118px;border-radius:16px;background:#f3eadc;display:grid;place-items:center;padding:8px;box-shadow:0 12px 30px rgba(0,0,0,.3)}.student-camera .memoji-avatar{width:55px;height:55px;font-size:34px}.student-camera span{font-size:7px;color:#13213d;font-weight:800}
.live-room-badge{position:absolute;left:10px;top:10px;background:rgba(0,0,0,.38);color:#fff;border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(8px);border-radius:999px;padding:6px 8px;font-size:6px}.live-room-badge i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#e04f4f;margin-right:4px;animation:livePulse 1.2s ease infinite}
.live-room-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}.live-room-controls button{border:0;background:#122139;color:#fff;border-radius:12px;padding:8px 3px;display:grid;place-items:center;gap:3px;font-size:12px}.live-room-controls button span{font-size:5px;color:rgba(255,255,255,.55)}.live-room-controls button.active{background:#1a3154}.live-room-controls button.danger{background:#802d2d}

.shared-board-card{background:#fff;border-radius:20px;padding:13px;margin-top:10px;box-shadow:0 7px 20px rgba(12,24,49,.045)}
.shared-board{min-height:170px;border-radius:15px;background:#faf7f0;border:1px dashed rgba(12,24,49,.12);padding:15px;position:relative;overflow:hidden}
.shared-board>span{font-size:6px;color:#9d7338;font-weight:800}.shared-board p{font-size:11px;line-height:1.5;max-width:250px}.teacher-scribble{font-family:Caveat,cursive;color:#1f4a84;font-size:22px;transform:rotate(-3deg);margin-top:15px}

.live-chat-mini{background:#fff;border-radius:20px;margin-top:10px;overflow:hidden;box-shadow:0 7px 20px rgba(12,24,49,.045)}

html[data-theme="dark"] .live-class-actions button,
html[data-theme="dark"] .live-teacher-card,
html[data-theme="dark"] .shared-board-card,
html[data-theme="dark"] .live-chat-mini{
  background:#0d1a2c;
}
html[data-theme="dark"] .live-teacher-card.active{background:#182231}
html[data-theme="dark"] .shared-board{background:#101e31;border-color:rgba(255,255,255,.08)}
html[data-theme="dark"] .teacher-scribble{color:#89aee0}