/* Interactive, illustrative grades and calendar — scaled within the existing 2.5D laptop. */
.library-tabs{gap:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.library-tabs::-webkit-scrollbar{display:none}
.library-tabs button{flex:none;font-size:10px;letter-spacing:-.04em}
.hero-widget-panel[hidden],.library-tools[hidden],.library-heading[hidden],.material-grid[hidden],.no-results[hidden]{display:none!important}
.hero-widget-panel{font-family:var(--font);color:#0b2340;font-size:11px;min-width:0}
.hero-widget-eyebrow{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.045em;font-weight:850;color:#425b7a}
.widget-indicator{width:7px;height:7px;border-radius:2px;background:#ff285b;box-shadow:2px 2px 0 #ffc2d0;flex:none}
.widget-demo{color:#8b6480;background:#fff0f5;border:1px solid #ffd4e3;padding:3px 6px;border-radius:4px;font-size:8px;letter-spacing:.075em}
.grade-metrics{display:grid;grid-template-columns:1fr 1.18fr .85fr;gap:9px;margin:12px 0 9px}
.grade-metric{background:white;border:1px solid #cfdfeb;border-radius:9px;padding:9px 11px 8px;display:flex;flex-direction:column;min-width:0;box-shadow:2px 3px 0 #e3edf4}
.grade-metric span{font-size:10px;font-weight:800;color:#53708c}
.grade-metric strong{font-size:31px;line-height:1.13;font-weight:850;letter-spacing:-.085em;margin-top:3px}
.grade-metric small{font-size:9px;color:#66819b}
.grade-metric-featured{background:#e7fff5;border:1.5px solid #079777;box-shadow:2px 3px 0 #b0e5d6}
.grade-metric-featured strong{color:#00795f}
.grade-goal{background:#f1f5ff}
.grade-track{height:8px;border:1px solid #bfd2df;border-radius:9px;overflow:hidden;display:flex;background:#eff3f9;gap:2px}
.grade-track span{height:100%}
.grade-track-exam{width:40%;background:#00a27d}
.grade-track-activity{width:20%;background:#80d3b9}
.grade-track-pending{flex:1;background:#ced7e4}
.grade-lines{border:1px solid #d3e2ef;border-radius:9px;overflow:hidden;background:white;margin-top:11px}
.grade-line{min-height:42px;padding:0 10px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #e1eaf2}
.grade-line:last-child{border-bottom:0}
.grade-check,.grade-pending-icon{width:21px;height:21px;border-radius:5px;background:#e0f8ed;color:#008965;font-size:13px;font-weight:850;display:grid;place-items:center}
.grade-pending-icon{background:#ffe9f0;color:#f02558}
.grade-line strong{flex:1;font-size:11px;font-weight:800}
.grade-line strong em{color:#eb3060;font-style:normal;font-weight:700}
.grade-line small{font-weight:700;color:#64809b;font-size:10px}
.grade-line b{margin-left:17px;font-size:13px}
.grade-line-pending{background:#fff9fb}
.grade-line-pending input{margin-left:11px;border:1.5px solid #e85176;border-radius:5px;width:58px;height:29px;padding:0 5px;text-align:center;font-weight:850;color:#c9174e;background:#fff;outline-offset:1px}
.grade-line-pending input:invalid{border-color:#e43c4a;background:#ffe3e7}
.grade-feedback{background:#f0f6ff;border-left:3px solid #3169c5;color:#235079;padding:9px 10px;border-radius:4px;margin-top:10px;font-size:10px;line-height:1.3;min-height:31px}
.grade-actions{display:flex;gap:7px;margin-top:9px}
.grade-actions button{border:1px solid #163957;border-radius:5px;padding:7px 10px;background:#fff;color:#0c3054;font-size:10px;font-weight:800;box-shadow:1px 2px 0 #bacbd9}
.grade-actions button:first-child{background:#05365a;color:white;border-color:#05365a}
.grade-actions button:hover{transform:translateY(-1px);box-shadow:1px 3px 0 #bacbd9}
.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:10px}
.calendar-month-wrap{display:flex;flex-direction:column;gap:5px}
.calendar-month-wrap>strong{font-size:20px;letter-spacing:-.06em;text-transform:capitalize;font-weight:850}
.calendar-nav{display:flex;align-items:center;gap:5px}
.calendar-nav button{border:1px solid #cedce9;border-radius:6px;background:#fff;min-width:27px;height:27px;display:grid;place-items:center;color:#0b3453;font-size:18px;font-weight:750;line-height:1}
.calendar-nav button#calendarToday{font-size:10px;padding:0 9px}
.calendar-nav button:hover{border-color:#1c6fa3;background:#f0f7ff}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.calendar-weekdays{border-top:1px solid #e5edf5;padding:8px 0 6px}
.calendar-weekdays span{text-align:center;font-size:10px;font-weight:850;color:#617d9d}
.calendar-days{grid-auto-rows:31px}
.calendar-days .calendar-outside{background:transparent}
.calendar-days button{background:#fff;border:1px solid #dce7f2;border-radius:5px;position:relative;font-size:11px;font-weight:750;color:#254b6d;padding:0;display:flex;justify-content:flex-start;align-items:flex-start;padding-left:8px;padding-top:4px}
.calendar-days button:hover{background:#e9f5ff;border-color:#7bb9e3}
.calendar-days button.is-today{border-color:#f63363;color:#c41446}
.calendar-days button.is-selected{background:#0b3155;color:white;border-color:#0b3155;box-shadow:1px 2px 0 #91aac0}
.calendar-dots{position:absolute;bottom:4px;left:8px;display:flex;gap:3px}
.calendar-dots i{width:5px;height:5px;display:block;border-radius:50%;background:#049a78}
.calendar-dots i.type-assessment{background:#fa3768}
.calendar-dots i.type-delivery{background:#ee9823}
.calendar-agenda{margin-top:11px;border:1px solid #d7e4f0;border-radius:9px;background:white;overflow:hidden}
.calendar-agenda-head{padding:9px 11px 7px;border-bottom:1px solid #e6edf5;display:flex;justify-content:space-between;align-items:center;gap:8px}
.calendar-agenda-head strong{font-size:11px;font-weight:850;letter-spacing:-.02em}
.calendar-agenda-head span{font-size:9px;color:#5e7793;font-weight:700}
.calendar-agenda-items{min-height:48px;max-height:75px;overflow:auto}
.calendar-event{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid #eff2f7}
.calendar-event:last-child{border-bottom:0}
.calendar-event>i{width:5px;height:31px;border-radius:4px;background:#009c80;flex:none}
.calendar-event>i.type-assessment{background:#fb3866}
.calendar-event>i.type-delivery{background:#ed9b2f}
.calendar-event div{display:flex;flex-direction:column;gap:3px;min-width:0}
.calendar-event strong{font-size:10px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-event small{font-size:9px;color:#57718d}
.calendar-empty{font-size:10px;color:#627d99;margin:12px}