/* School layer: staff panel (school.html) and «کلاس من» in the learner/parent app. Builds on questa.css tokens. */
.att-tag{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:8px;background:var(--g-accent-soft);color:var(--g-accent-ink);white-space:nowrap}
.att-tag.green{background:var(--g-good-bg);color:var(--g-good)}.att-tag.red{background:var(--g-bad-bg);color:#a8344a}.att-tag.amber{background:var(--g-amber-bg);color:var(--g-amber)}.att-tag.blue{background:var(--g-accent-soft);color:#2f5f9e}
.plain-list{list-style:none;margin:0;padding:0}.plain-list li{padding:11px 0;border-bottom:1px solid var(--border);line-height:1.9}.plain-list li:last-child{border-bottom:0}.plain-list small{color:var(--muted)}
.muted{opacity:.55}.grow{flex:1;min-width:180px}.row.wrap{flex-wrap:wrap}
.points{font-weight:900;color:var(--green)}.points.neg,.neg{color:var(--g-amber)}
.notice.red-notice{background:var(--g-bad-bg);border-color:#f3c3cd;color:#8f2f41}
textarea{width:100%;background:var(--g-accent-soft);color:var(--g-muted);border:1px solid var(--g-accent-line);border-radius:11px;padding:12px;font:inherit;resize:vertical}
.check-line{display:flex;align-items:center;gap:8px;font-weight:500}.check-line input{width:auto;min-height:0}
details.card summary{cursor:pointer;list-style:none}details.card summary::-webkit-details-marker{display:none}details.card[open] summary{margin-bottom:6px}
.section-head{margin:26px 0 12px}

/* tiles and tables */
.school-tiles{grid-template-columns:repeat(5,1fr)}.school-tiles .card strong{font-size:26px;display:block}.school-tiles .card small{color:var(--muted)}.school-tiles .card.warn{border-color:var(--g-amber-line);background:var(--g-paper)}
.table-card{padding:6px 10px;overflow-x:auto}
.school-table{width:100%;border-collapse:collapse;font-size:13px}.school-table th,.school-table td{padding:10px 8px;border-bottom:1px solid var(--border);text-align:right;vertical-align:middle}.school-table th{color:var(--muted);font-weight:700;font-size:12px}.school-table th small{display:block;font-weight:400}.school-table tr:last-child td{border-bottom:0}.school-table td small{color:var(--muted)}.school-table input,.school-table select{min-height:38px;padding:7px 9px}
.warn-row td{background:var(--g-paper)}
.timetable td{min-width:130px}.timetable tbody th{white-space:nowrap}

/* onboarding and cards */
.school-onboard{display:grid;grid-template-columns:1fr 1fr;gap:20px}.school-onboard h3{margin-top:0}
.school-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.class-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.class-card{display:flex;flex-direction:column;gap:6px;text-align:right;color:var(--ink);cursor:pointer}.class-card b{font-size:18px}.class-card small{color:var(--muted)}.class-card:hover{border-color:#a6c4e6}
.today-slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.slot-card h3{margin:10px 0}.slot-card.done{border-color:#bfe5cd}.slot-period{font-weight:900;color:var(--purple)}.slot-period small{display:block;font-weight:500;color:var(--muted);font-size:11px}
.join-card small{display:block;color:var(--muted)}.join-code{display:block;font-size:26px;letter-spacing:4px;color:var(--purple);margin:4px 0}
.class-tabs{margin:0 0 18px;overflow-x:auto}.class-tabs button{white-space:nowrap}
.news-card p,.work-card p{margin:8px 0;font-size:13px}.work-card small{display:block;color:var(--muted);margin-top:4px}.work-stats{display:flex;gap:6px;flex-wrap:wrap}
.review-list{margin-top:10px;border-top:1px solid var(--border)}
.cal-form{align-items:end}.cal-form>div label{margin-top:0}

/* attendance: big tap targets for phones */
.roll-head .row{align-items:end}.roll-head label{margin-top:0}.roll-head small{display:block;color:var(--muted)}
.roll-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin:14px 0 90px}
.roll-item{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:56px;padding:12px 16px;border-radius:14px;border:2px solid var(--g-good-line);background:#f2fbf6;color:var(--g-good);font-weight:600;text-align:right}
.roll-item b{font-size:12px;padding:4px 10px;border-radius:8px;background:#ffffffaa}
.roll-item.red{border-color:var(--g-bad-line);background:var(--g-bad-bg);color:#a8344a}.roll-item.amber{border-color:#f3d79a;background:var(--g-ivory);color:var(--g-amber)}.roll-item.blue{border-color:#bcd4f5;background:var(--g-accent-soft);color:#2f5f9e}
.roll-save{position:sticky;bottom:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;z-index:3;box-shadow:0 10px 30px #2f527a22}

/* behavior and chips */
.pick-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-bottom:8px}
.pick{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:10px 14px;border-radius:12px;border:2px solid var(--border);background:var(--g-accent-soft);color:var(--ink);font-weight:600;text-align:right}.pick small{color:var(--green);font-weight:800}.pick.on{border-color:var(--purple);background:var(--g-accent-soft)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px;align-items:center}
.chip{min-height:42px;padding:8px 14px;border-radius:12px;border:2px solid var(--border);background:var(--g-accent-soft);color:var(--ink);font-weight:700}.chip.on{border-color:var(--purple);background:var(--g-accent-soft);color:var(--g-accent-ink)}
.chip.plus{color:var(--green)}.chip.minus{color:var(--g-amber)}.chip.plus.on{background:var(--g-good-bg);border-color:#62b487}.chip.minus.on{background:var(--g-amber-bg);border-color:#e2b85c}
.check-chip{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:600}.check-chip input{width:auto;min-height:0}
.max-input{width:110px;min-height:42px}
.gradebook-card{padding:10px;min-width:0;max-width:100%}.gradebook-wrap{overflow:auto;max-height:70vh;max-width:100%;border:1px solid var(--border);border-radius:12px;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.gradebook{border-collapse:separate;border-spacing:0;font-size:13px;min-width:100%}.gradebook th,.gradebook td{padding:8px 10px;border-bottom:1px solid var(--border);border-left:1px solid var(--border);white-space:nowrap;text-align:center;vertical-align:middle;background:var(--g-content)}
.gradebook thead th{position:sticky;top:0;z-index:2;background:var(--g-ivory);font-weight:700;min-width:96px}.gradebook thead th small{display:block;color:var(--muted);font-weight:400;font-size:11px}.gradebook thead th .att-tag{font-size:10px;margin-top:3px}
.gradebook .gb-name{position:sticky;right:0;inset-inline-start:0;z-index:1;text-align:right;font-weight:700;min-width:120px;max-width:44vw;white-space:normal;box-shadow:-2px 0 0 var(--border)}.gradebook thead .gb-name{z-index:3}
.gradebook td.gb-low{color:var(--g-amber);background:var(--g-ivory)}.gradebook td.gb-empty{color:var(--muted)}.gradebook td sup{color:var(--g-blue);font-size:10px;margin-inline-start:2px}
.audit-detail{max-width:340px;white-space:normal;word-break:break-word;font-size:12px;color:var(--muted)}.pager{justify-content:center;gap:12px;margin:12px 0}
.report-head h2{margin:0 0 4px}.report-head p{margin:2px 0}.trend-list li{display:block}.trend-bars{display:flex;align-items:flex-end;gap:6px;height:72px;margin-top:8px;overflow-x:auto}.trend-bars span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:30px;height:100%}.trend-bars i{display:block;width:18px;height:var(--v);background:#7cc49a;border-radius:6px 6px 0 0}.trend-bars small{font-size:10px;color:var(--muted)}
@media print{body.print-report *{visibility:hidden!important}body.print-report .print-area,body.print-report .print-area *{visibility:visible!important}body.print-report .print-area{position:absolute;inset:0 0 auto 0;margin:0;padding:12px;background:var(--g-content)}body.print-report .no-print{display:none!important}body.print-report .table-card,body.print-report .gradebook-wrap{overflow:visible!important;max-height:none!important}body.print-report .card{break-inside:avoid;box-shadow:none!important}}
.grade-fixed{color:var(--g-blue)}
.sheet-wrap{overflow-x:auto;max-width:100%}.grade-sheet td:first-child{position:sticky;right:0;z-index:1;background:var(--g-content)}
.grade-input{width:90px;min-height:38px}.grade-sheet td:first-child{font-weight:600}.grade-actions{margin-top:14px;justify-content:flex-start}
.periods{display:flex;flex-direction:column;gap:8px}.period-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.period-row input{width:130px}

/* «کلاس من» (learner and parent app) */
.myclass-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.myclass-head h1{margin:0}.class-points{font-size:30px;font-weight:900;color:var(--green)}.class-points.neg{color:var(--g-amber)}
.week-table td.now{background:var(--g-accent-soft);font-weight:800}.week-table td.bell-cur{background:var(--g-good-bg);box-shadow:inset 0 0 0 2px #3f9a62}.week-table td.bell-next{box-shadow:inset 0 0 0 2px #6d9bd6}
.bell-now{margin:0 0 10px;padding:8px 10px;border-radius:12px;background:var(--g-content)}.bell-now p{margin:3px 0}.plain-list li.bell-cur{background:var(--g-good-bg);border-radius:10px}.plain-list li.bell-next{background:var(--g-accent-soft);border-radius:10px}.due-soon{border:1px solid var(--g-amber-line);background:var(--g-paper)}
.school-digest{border:2px solid #b8d2f0}.school-digest .digest-list li{display:flex;justify-content:space-between;gap:10px;align-items:center}
.school-digest .digest-title{margin:14px 0 4px;font-size:14px;color:var(--g-muted)}.school-digest .digest-title small{color:var(--g-muted);font-weight:400}
.teacher-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}.teacher-list div{background:var(--g-accent-soft);border:1px solid var(--border);border-radius:12px;padding:10px 12px}.teacher-list small{display:block;color:var(--muted)}
.find-results li{display:flex;justify-content:space-between;align-items:center;gap:10px}

/* More menu items (کلاس من) must still clear the sidebar art on shorter laptop screens. */
@media (min-width:768px) and (max-height:980px){.learning-app nav button{min-height:42px;margin-bottom:3px;padding-top:9px;padding-bottom:9px}}
@media(max-width:1100px){.school-tiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:767px){.school-onboard{grid-template-columns:1fr}.school-tiles{grid-template-columns:1fr 1fr}.roll-list{grid-template-columns:1fr}.pick-list{grid-template-columns:1fr 1fr}.roll-save{bottom:84px}.school-table{font-size:12px}.timetable td{min-width:110px}}

/* Groups: Telegram-style chat (public/groups.js) */
.chat-list{padding:6px}.chat-row{display:flex;align-items:center;gap:12px;width:100%;padding:12px;border-radius:14px;background:none;text-align:right;color:var(--ink)}.chat-row:hover{background:var(--g-accent-soft)}.chat-row+.chat-row{border-top:1px solid var(--border)}
.chat-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.chat-row-main small{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px}.chat-row-side small{color:var(--muted);font-size:11px}
.chat-avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;color:var(--g-content);font-weight:900;flex-shrink:0;font-size:18px}.chat-avatar.sm{width:32px;height:32px;font-size:13px;align-self:flex-end}.chat-avatar-gap{width:32px;flex-shrink:0}
.chat-unread{min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#4fae7b;color:var(--g-content);font-size:11px;font-weight:800;display:grid;place-items:center}
#chat-root:empty{display:none}
.chat{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:var(--g-accent-soft) radial-gradient(var(--g-accent-line) 1px,transparent 1px) 0 0/22px 22px}
@media(min-width:900px){.chat{inset:24px max(24px,calc(50% - 470px));border-radius:22px;overflow:hidden;box-shadow:0 30px 120px #18314d66}#chat-root:not(:empty)::before{content:'';position:fixed;inset:0;background:#18314d55;z-index:59}}
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--g-content);border-bottom:1px solid var(--border)}.chat-title{flex:1;min-width:0;display:flex;flex-direction:column}.chat-title small{color:var(--muted);font-size:11px}
.chat-back,.chat-tool{width:40px;height:40px;border-radius:50%;background:var(--g-accent-soft);color:var(--purple);font-size:18px;display:grid;place-items:center}
.chat-body{flex:1;overflow-y:auto;padding:12px 10px 6px;display:flex;flex-direction:column;gap:3px;overscroll-behavior:contain}
.chat-day{text-align:center;margin:10px 0}.chat-day span{background:#ffffffcc;color:var(--g-muted);font-size:11px;padding:4px 12px;border-radius:12px}
.chat-older{align-self:center;background:var(--g-content);color:var(--purple);border-radius:12px;padding:6px 14px;font-size:12px;margin-bottom:8px}
.chat-empty{margin:auto;color:#6b8097;background:#ffffffaa;padding:12px 18px;border-radius:14px}
.chat-msg{display:flex;align-items:flex-end;gap:6px;max-width:100%}.chat-msg.first{margin-top:6px}.chat-msg.mine{justify-content:flex-end}.chat-msg.mine .chat-avatar-gap{display:none}.chat-msg.flash .chat-bubble{box-shadow:0 0 0 3px var(--g-focus)}
.chat-bubble{position:relative;max-width:min(78%,520px);background:var(--g-content);border-radius:16px 16px 16px 6px;padding:7px 11px 6px;box-shadow:0 1px 1px #24405f14;line-height:1.75;font-size:14px;overflow-wrap:anywhere}
.chat-msg.mine .chat-bubble{background:var(--g-accent-soft);border-radius:16px 16px 6px 16px}.chat-bubble p{margin:2px 0 0;white-space:pre-wrap}.chat-bubble.deleted{color:var(--muted);font-size:12px;background:#ffffffb3}
.chat-name{display:block;font-size:12px}.chat-role{font-size:10px;font-weight:600;background:var(--g-accent-soft);color:var(--g-accent-ink);border-radius:6px;padding:1px 6px}
.chat-meta{float:left;font-size:10px;color:var(--g-muted);margin:6px 8px 0 0}
.chat-actions{position:absolute;top:-14px;left:8px;display:none;gap:4px}.chat-bubble:hover .chat-actions,.chat-bubble:focus-within .chat-actions{display:flex}.chat-actions button{width:28px;height:28px;border-radius:50%;background:var(--g-content);box-shadow:0 2px 8px #24405f22;font-size:13px}
@media(hover:none){.chat-actions{display:flex;position:static;float:left;margin:4px 6px 0 0}.chat-actions button{width:26px;height:26px;box-shadow:none;background:#00000008}}
.chat-quote{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:right;border-inline-start:3px solid var(--purple);background:#5289c712;border-radius:8px;padding:4px 8px;margin:2px 0 4px;font-size:12px;color:var(--ink)}.chat-quote span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.chat-media{display:block;width:min(340px,100%);max-height:420px;border-radius:12px;background:#0001;margin:2px 0;padding:0;overflow:hidden}.chat-image img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.chat-audio{display:flex;align-items:center;gap:6px}.chat-audio audio{height:38px;max-width:240px}.chat-audio small{color:var(--muted)}
.chat-bubble.uploading{min-width:200px}.chat-progress{height:6px;background:#0001;border-radius:4px;margin:6px 0;overflow:hidden}.chat-progress i{display:block;height:100%;background:var(--purple);transition:width .2s}
.chat-replybar{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--g-content);border-top:1px solid var(--border);padding:8px 14px;font-size:12px;color:var(--muted)}.chat-replybar span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-replybar button{background:none;font-size:20px;color:var(--muted)}
.chat-compose,.chat-recording{display:flex;align-items:flex-end;gap:8px;padding:8px 10px max(8px,env(safe-area-inset-bottom));background:var(--g-content);border-top:1px solid var(--border)}
.chat-compose textarea{flex:1;min-height:44px;max-height:140px;resize:none;border-radius:22px;padding:10px 16px;line-height:1.6}
.chat-attach,.chat-mic,.chat-send{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:19px;flex-shrink:0;cursor:pointer;margin:0;background:var(--g-accent-soft)}.chat-send{background:var(--purple);color:var(--g-content);transform:scaleX(-1)}
.chat-recording{align-items:center}.chat-recording small{flex:1;color:var(--muted)}.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--g-badge);animation:recpulse 1s infinite}@keyframes recpulse{50%{opacity:.3}}
.chat-locked{background:var(--g-content);border-top:1px solid var(--border);text-align:center;padding:14px;color:var(--muted);font-size:13px}
.lightbox{position:fixed;inset:0;z-index:80;background:#070e16f2;display:flex;flex-direction:column;color:var(--g-content)}
.lightbox-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;font-size:12px;color:var(--g-accent-line)}.lightbox-bar a,.lightbox-bar button{color:var(--g-content);background:#ffffff1a;width:38px;height:38px;border-radius:50%;display:inline-grid;place-items:center;margin-right:6px;font-size:17px}
.lightbox-stage{flex:1;overflow:auto;display:grid;place-items:center}.lightbox-stage img{display:block;max-width:none;cursor:zoom-out}.lightbox.fit .lightbox-stage img{max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in}.lightbox.fit .lightbox-stage{overflow:hidden;padding:8px}
.lightbox-caption{text-align:center;margin:0;padding:10px 16px 16px;color:var(--g-accent-soft);white-space:pre-wrap}
.chat-bubble.has-media{max-width:min(78%,362px)}.chat-audio small{white-space:nowrap}.chat-audio audio{min-width:0;flex:1}
.chat-attach svg,.chat-mic svg{width:22px;height:22px;stroke:var(--purple);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* Grouped navigation (public/nav.js) */
.nav-groups .nav-section+.nav-section{margin-top:6px}
.nav-title{display:block;font-size:10.5px;font-weight:800;color:var(--g-muted);margin:12px 14px 2px;letter-spacing:.2px}
.learning-app nav.nav-groups button{position:relative}
.nav-badge{min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--g-badge);color:var(--g-content);font-size:10.5px;font-weight:800;display:inline-grid;place-items:center;margin-inline-start:auto;line-height:1}
.nav-more{display:none!important}
@media (min-width:768px){.learning-app #sidebar nav.nav-groups button{min-height:40px;margin:0 0 2px;padding:7px 12px;font-size:13px;gap:12px}.nav-title{margin:8px 14px 1px}.learning-app #sidebar .brand-logo{margin-bottom:0}}
@media (max-width:767px){
 .learning-app #sidebar nav.nav-groups{justify-content:space-around;overflow:visible}
 .nav-groups .nav-section{display:contents}.nav-title{display:none}
 .learning-app #sidebar nav.nav-groups button:not(.primary){display:none}
 .learning-app #sidebar nav.nav-groups .nav-more{display:flex!important}
 .learning-app #sidebar nav.nav-groups button{flex:1;max-width:80px;min-width:0}
 .learning-app #sidebar nav.nav-groups .nav-label{font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
 .learning-app #sidebar nav.nav-groups .nav-badge{position:absolute;top:2px;left:calc(50% - 22px);height:17px;min-width:17px;font-size:9.5px;padding:0 4px}
}
.nav-sheet{position:fixed;inset:0;z-index:70;background:#18314d66;display:flex;align-items:flex-end;justify-content:center}
.nav-sheet-panel{width:min(560px,100%);max-height:82vh;overflow:auto;background:var(--g-content);border-radius:24px 24px 0 0;padding:10px 16px max(18px,env(safe-area-inset-bottom));box-shadow:0 -10px 40px #18314d33}
.nav-sheet-grip{width:44px;height:5px;border-radius:3px;background:var(--g-accent-line);margin:2px auto 10px}
.nav-sheet-section b{display:block;font-size:12px;color:var(--g-muted);margin:12px 4px 8px}
.nav-sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.nav-sheet-grid button,.nav-sheet-extra button{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:16px;background:var(--g-accent-soft);color:var(--g-muted);font-size:11.5px;font-weight:700;text-align:center}
.nav-sheet-grid button.active{background:var(--g-accent-soft);color:var(--g-accent-ink)}.nav-sheet-grid .nav-badge{position:absolute;top:6px;left:8px}
.nav-sheet-extra{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;border-top:1px solid var(--border);padding-top:14px}.nav-sheet-extra button{flex-direction:row;justify-content:center;background:var(--g-content);border:1px solid var(--border)}

/* Medal board (public/medals.js). Locked medals render as a dark silhouette. */
.medal-art{position:relative;display:grid;place-items:center;width:84px;height:84px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 35% 30%,var(--g-content),var(--g-accent-soft));box-shadow:inset 0 0 0 4px var(--ring,var(--g-accent-line)),0 6px 16px #3b628f1f}
.medal-art.bronze{--ring:#d9a273}.medal-art.silver{--ring:var(--g-disabled)}.medal-art.gold{--ring:#f2c44d}
.medal-art img{width:72%;height:72%;object-fit:contain}.medal-emoji{font-size:40px;line-height:1}
.medal-art.locked{background:#ece7f2;box-shadow:inset 0 0 0 4px #ddd5e8}.medal-art.locked img,.medal-art.locked .medal-emoji{filter:brightness(0);opacity:.22}
.medal-lock{position:absolute;bottom:-2px;left:-2px;font-style:normal;font-size:14px;background:var(--g-content);border-radius:50%;width:26px;height:26px;display:grid;place-items:center;box-shadow:0 2px 6px #0002}
.medal-art.lg{width:96px;height:96px}.medal-art.xl{width:150px;height:150px;margin:6px auto 12px}.medal-art.xl .medal-emoji{font-size:72px}
.medal-summary{display:flex;align-items:center;gap:18px}.medal-summary b{font-size:20px}.medal-summary small{display:block;color:var(--muted);margin-top:6px}
.medal-meter{display:block;height:7px;border-radius:5px;background:var(--g-accent-soft);overflow:hidden;width:100%}.medal-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--g-accent),#62c08e);border-radius:5px}.medal-meter.big{height:11px;margin-top:8px}
.medal-filters{margin:16px 0}
.medal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:14px}



.medal-how{min-height:38px}.medal-date{color:var(--green)!important;font-weight:700}.medal-count{font-weight:700}
.medal-detail{text-align:center}.medal-detail p{color:#4f5e70}.medal-detail.celebrate .medal-art{animation:medalpop .6s ease-out}@keyframes medalpop{0%{transform:scale(.4) rotate(-12deg);opacity:0}70%{transform:scale(1.08)}100%{transform:none;opacity:1}}
@media (max-width:767px){.medal-grid{grid-template-columns:1fr 1fr;gap:10px}.medal-art{width:70px;height:70px}.medal-emoji{font-size:32px}}


/* staff header: role and profile stay visible (the learner theme hides .pill.xp and .profile-button) */
.role-pill{display:flex;flex-direction:column;align-items:center;background:var(--g-good-bg);color:var(--g-good);border-color:var(--g-good-line)}.role-pill small{font-weight:500;font-size:10px}
.learning-app .stats .profile-button.staff-profile{display:flex;align-items:center;gap:8px;background:var(--g-content);border:1px solid var(--border);border-radius:14px;padding:5px 10px 5px 6px;color:var(--ink)}

/* Chat sides (RTL convention): own messages on the right, others on the left with their avatar at the far left. */
.chat-msg{flex-direction:row-reverse;justify-content:flex-start}.chat-msg.mine{flex-direction:row;justify-content:flex-start}
.chat-bubble{border-radius:16px 16px 16px 6px}.chat-msg.mine .chat-bubble{border-radius:16px 16px 6px 16px}
.chat-meta{float:left}.chat-msg:not(.mine) .chat-actions{left:auto;right:8px}

/* Teacher quiz builder (quiz-staff.js) */
.qz-card{display:flex;flex-direction:column;gap:6px}.qz-card small{color:var(--muted)}
.qz-item{padding:14px 16px}.qz-item p{margin:8px 0}.qz-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px}.qz-item-head label{display:flex;align-items:center;gap:6px;margin:0;font-weight:500}
.qz-options{margin:6px 0;padding-inline-start:22px;font-size:13px}.qz-options li.correct{color:var(--green);font-weight:800}.qz-options li.correct::after{content:' ✓'}
.qz-pick{display:flex;gap:12px;align-items:flex-start;cursor:pointer}.qz-pick input{width:auto;min-height:0;margin-top:6px}
.qz-lessons{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:12px;padding:6px 12px;margin-bottom:8px}.qz-lessons summary{cursor:pointer;font-weight:700;padding:6px 0}
.qz-add .row{margin-top:8px;justify-content:flex-start}
.qf-opt{display:flex;align-items:center;gap:8px;margin:6px 0}.qf-opt input[type=radio]{width:22px;min-height:22px;flex-shrink:0}
/* Learner quiz sheet (quiz-student.js) */
.quiz-card.open,.quiz-card.in_progress{border-color:var(--g-good-line)}.quiz-score b{font-size:20px;color:var(--green)}
#quiz-root:empty{display:none}
.quiz-sheet{position:fixed;inset:0;z-index:65;background:var(--g-accent-soft);display:flex;flex-direction:column}
@media(min-width:900px){.quiz-sheet{inset:24px max(24px,calc(50% - 470px));border-radius:22px;overflow:hidden;box-shadow:0 30px 120px #18314d66}#quiz-root:not(:empty)::before{content:'';position:fixed;inset:0;background:#18314d55;z-index:64}}
.quiz-head{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--g-content);border-bottom:1px solid var(--border)}
.quiz-timer{font-weight:900;font-size:20px;color:var(--purple);background:var(--g-accent-soft);border-radius:12px;padding:6px 14px;min-width:84px;text-align:center}.quiz-timer.low{background:var(--g-bad-bg);color:var(--red)}
.quiz-final{font-weight:900;font-size:20px;color:var(--green)}
.quiz-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:12px}.quiz-q p{margin:8px 0;line-height:1.9}
.quiz-options{display:flex;flex-direction:column;gap:8px}.quiz-option{text-align:right;padding:12px 14px;border-radius:12px;border:2px solid var(--border);background:var(--g-accent-soft);color:var(--ink);font-weight:600}.quiz-option.on{border-color:var(--purple);background:var(--g-accent-soft)}
.quiz-parts>div{margin:8px 0}.quiz-figure{max-width:100%;border-radius:12px}
.quiz-feedback{font-weight:700;border-radius:10px;padding:8px 12px}.quiz-feedback.ok{background:var(--g-good-bg);color:var(--g-good)}.quiz-feedback.bad{background:var(--g-bad-bg);color:#a8344a}.quiz-feedback.pending{background:var(--g-amber-bg);color:var(--g-amber)}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px max(10px,env(safe-area-inset-bottom));background:var(--g-content);border-top:1px solid var(--border)}
.qz-options{list-style:none;padding-inline-start:4px}.qz-letter{color:var(--muted);font-weight:700;margin-inline-end:4px}

/* Chat member list (learners and teachers; parents are silent readers and never listed) */
button.chat-title{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:start;cursor:pointer;display:grid}
.chat-roster{position:absolute;inset:0;z-index:5;background:#0f1e3a66;display:grid;place-items:center;padding:16px}
.chat-roster-card{background:var(--g-content);border-radius:18px;width:min(420px,100%);max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 18px 40px #0f1e3a40}
.chat-roster-card header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #eee}
.chat-roster-card header button{border:0;background:var(--g-accent-soft);border-radius:50%;width:36px;height:36px;font-size:20px;cursor:pointer}
.chat-roster-card ul{list-style:none;margin:0;padding:6px 10px;overflow:auto}
.chat-roster-card li{display:flex;align-items:center;gap:10px;padding:8px 4px;border-bottom:1px solid #f3f3f3}
.chat-roster-card li small{margin-inline-start:auto;color:#5d6b82}

/* School stage 3: class list, moving up a year, official holidays */
.roster-card .row{gap:8px}
.roster-list{max-height:320px;overflow:auto;margin-top:10px}
.roster-preview{columns:2;margin:8px 0 12px;padding-inline-start:22px}
.rollover-table input.ro-name{width:100%;min-width:120px;margin-top:4px}.rollover-table input.ro-grade{width:64px}
.rollover-table tr.finish .ro-name,.rollover-table tr.finish .ro-grade{opacity:.35;pointer-events:none}
.holiday-list{max-height:52vh;overflow:auto}.holiday-list label{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.pt-start{margin:0 0 10px}
/* teacher review queue, «my week» and the period in progress */
.review-queue .row select{min-height:38px;border-radius:10px}
.review-queue h3 .badge{margin-inline-start:6px}
.my-week summary{cursor:pointer;padding:2px 0}
.my-week .timetable.readonly td{vertical-align:top;min-width:84px}
.my-week .timetable.readonly td b{display:block;font-size:13px}.my-week .timetable.readonly td small{color:var(--muted)}
.my-week tr.is-today th,.my-week tr.is-today td{background:var(--g-amber-bg)}
.slot-card.is-now{outline:3px solid #2fb4ff;outline-offset:2px}
.slot-now{display:inline-block;margin-bottom:6px;padding:2px 10px;border-radius:99px;background:#2fb4ff;color:var(--g-content);font-size:12px;font-weight:800}
.review-queue .review-list li>span:first-child small{display:block;margin-top:2px}
.account-security{margin-top:18px}.account-security form{border-top:1px solid rgba(80,60,140,.14);padding-top:12px;margin-top:12px}.account-security h4{margin:0 0 6px}.account-security .otp-row{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
/* Chat safety (2026-11-04): supervision label, delivery status, report sheet, warnings */
.chat-watch{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;justify-content:center;padding:6px 12px;background:var(--g-amber-bg);border-bottom:1px solid #f0dfb0;color:#6b5210;font-size:12px;text-align:center}.chat-watch small{color:#8a6d1a}
.chat-bubble.sending{opacity:.75}.chat-bubble.failed{outline:2px solid #e0a0a0}.chat-fail{color:#b03a3a;font-weight:700}
.chat-retry{border:0;background:var(--g-accent-soft);color:var(--purple);border-radius:10px;padding:2px 8px;font:inherit;font-size:11px;cursor:pointer}.chat-tick{color:#3a9a66}
.chat-unread.muted{background:#b2bbc6}
.chat-report-person{margin-inline-start:auto;border:0;background:var(--g-bad-bg);color:#a5302c;border-radius:10px;padding:4px 8px;font:inherit;font-size:12px;cursor:pointer}.chat-roster-card li small+.chat-report-person{margin-inline-start:8px}
.chat-sheet-body{padding:12px 16px;overflow:auto;display:grid;gap:8px}.chat-menu-item{display:block;width:100%;text-align:start;border:1px solid #eee;background:var(--g-content);border-radius:12px;padding:12px;font:inherit;cursor:pointer}.chat-menu-item:hover,.chat-menu-item:focus-visible{background:var(--g-accent-soft)}
.chat-reasons{border:0;padding:0;margin:0;display:grid;gap:6px}.chat-quote-static{margin:0;padding:8px 10px;border-inline-start:3px solid var(--purple);background:var(--g-accent-soft);border-radius:8px;font-size:13px}
.chat-sheet textarea{width:100%;font:inherit;border:1px solid #ddd;border-radius:10px;padding:8px}.chat-warning{border:2px solid #e8c36a}
.cr-item{margin-top:12px}.cr-item h3{margin:0}.cr-snapshot{margin:8px 0;padding:8px 12px;border-inline-start:3px solid var(--g-accent);background:var(--g-accent-soft);border-radius:8px;white-space:pre-wrap}.cr-actions{gap:8px;align-items:end;margin-top:8px}.cr-days{display:inline-flex;gap:6px;align-items:center;font-size:13px}.cr-tabs{gap:8px;margin-bottom:8px}

/* Minimums: no text under 12px in the live panel and chat classes (DESIGN-SYSTEM §8-12). */
.nav-title,.chat-role,.chat-meta,.att-tag,.gradebook thead th .att-tag,.gradebook thead th small,.slot-period small,.chat-unread,.chat-day span,.chat-retry{font-size:12px}
.nav-badge{font-size:12px;min-width:20px}
@media (max-width:767px){.learning-app #sidebar nav.nav-groups .nav-label{font-size:12px}.learning-app #sidebar nav.nav-groups .nav-badge{height:18px;min-width:18px;font-size:12px;line-height:18px}}