#page-teacher-homework { color:#09164f; min-width:0; }
body.teacher-mode:has(#page-teacher-homework:not(.hidden)) #page-title { color:#09164f; }
#page-teacher-homework * { box-sizing:border-box; }
.hw-workspace { display:grid; gap:20px; width:100%; max-width:1100px; min-width:0; margin-right:auto; }
#page-teacher-homework .panel { padding:20px; border-radius:18px; min-width:0; max-width:100%; }
#page-teacher-homework #teacher-homework-form { padding:20px; }
#page-teacher-homework h3 { color:#08124e; font-size:20px; margin:0 0 14px; }
.hw-group-tabs { display:flex; gap:16px; overflow:auto; margin-bottom:12px; padding-bottom:2px; }
.hw-group-tabs button { flex:none; border:1px solid #dce2ee; border-radius:10px; padding:10px 24px; background:#fff; color:#0b174c; font-weight:700; min-height:42px; }
.hw-group-tabs button.active { color:#163bde; background:#e5ebff; }
.hw-card-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 36px)/3); gap:18px; overflow-x:auto; padding-bottom:8px; }
.hw-card { position:relative; min-width:0; border:1px solid #e4eef1; border-radius:12px; padding:14px 16px 10px; background:linear-gradient(115deg,#f3faf8,#f7f9fa); cursor:pointer; }
.hw-card:focus-visible { outline:2px solid #476deb; outline-offset:-2px; }
#page-teacher-homework .horizontal-carousel.carousel-cards{margin-inline:0;max-width:100%}
#page-teacher-homework .hw-card-track{justify-content:flex-start!important}
#page-teacher-homework .carousel-fits{grid-template-columns:minmax(0,1fr);gap:0}
#page-teacher-homework .carousel-fits>.carousel-arrow{display:none}
.hw-card-top { display:flex; align-items:center; gap:10px; font-size:14px; color:#647197; }
.hw-card-top>i { width:15px; height:15px; border-radius:50%; background:#08bf85; flex:none; }
.hw-card-top>small { color:#00a86b; background:#dff8ee; padding:8px 12px; border-radius:8px; white-space:nowrap; font-size:12px; margin-left:auto; }
.hw-card-menu { margin-left:6px; }
.hw-card-menu summary { list-style:none; font-size:24px; padding:0 4px; color:#0c1648; }
.hw-card-menu summary::-webkit-details-marker { display:none; }
.hw-card-menu>div { position:absolute; right:12px; top:46px; z-index:10; box-shadow:0 8px 24px #172a4926; border:1px solid #dde5f0; border-radius:10px; padding:5px; background:#fff; }
.hw-card-menu button { display:block; border:0; background:#fff; padding:10px 14px; color:#172653; text-align:left; min-width:145px; }
.hw-card h4 { font-size:17px; margin:12px 0 6px; overflow-wrap:anywhere; }
.hw-card p { font-size:14px; margin:0; color:#8491b5; overflow-wrap:anywhere; }
.hw-card-counters { display:flex; justify-content:flex-end; gap:12px; margin-top:10px; }
.hw-card-counters span { display:inline-flex; align-items:center; gap:6px; background:#f8fafc; border:1px solid #dfe6ef; padding:5px 8px; border-radius:10px; font-size:13px; font-weight:700; }
.hw-icon { width:20px; height:20px; flex:none; }
.hw-file-icon .hw-icon { width:26px; height:26px; }
.hw-form-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* The card may grow; the creation form keeps its desktop proportions. */
.hw-form-content { width:100%; max-width:1050px; min-width:0; margin-right:auto; container:homework-form / inline-size; }
.hw-basics { display:grid; grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr)); width:100%; max-width:1020px; gap:20px; margin-bottom:16px; }
.hw-details { display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); width:100%; max-width:1020px; gap:20px; align-items:start; min-width:0; }
.hw-details>div { min-width:0; }
#page-teacher-homework label { display:block; min-width:0; color:#58668e; font-size:14px; font-weight:650; margin:0 0 6px; }
#page-teacher-homework :is(input,select) { width:100%; min-width:0; max-width:100%; border:1px solid #dae2f0; border-radius:10px; padding:12px 16px; min-height:44px; margin-top:5px; background:#fff; color:#0b174c; font-size:14px; }
#teacher-homework-form .hw-basics :is(input,select) { height:44px; min-height:44px; padding:10px 14px; }
.hw-editor { border:1px solid #dae2f0; border-radius:10px; overflow:hidden; margin:6px 0 0; }
#hw-description { min-height:74px; padding:12px 16px; outline:none; font-size:14px; color:#17254c; overflow-wrap:anywhere; }
#hw-description:empty::before { content:attr(data-placeholder); color:#929cb5; pointer-events:none; }
.hw-editor-toolbar { display:flex; overflow-x:auto; border-top:1px solid #e1e6ef; background:#f6f8fa; padding:4px 10px; gap:6px; }
.hw-editor-toolbar button { flex:none; border:0; background:transparent; color:#4d5e87; width:40px; height:38px; font-size:21px; }
.hw-file-picker { display:grid; grid-template-columns:44px auto minmax(0,1fr) auto; gap:8px 10px; align-items:center; border:1px solid #dae2f0; border-radius:10px; padding:12px; margin-top:6px; min-height:100px; }
.hw-file-icon { grid-row:1 / 3; border:1px solid #e3e8ef; background:#f5f7fa; border-radius:10px; display:grid; place-items:center; height:54px; font-size:15px; color:#53648b; }
.hw-file-picker .hw-file-button { position:relative; justify-self:start; border:1px solid #e2e7f0; background:#f2f5f8; border-radius:8px; padding:10px 14px; color:#08194b; font-size:13px; margin:0; cursor:pointer; }
.hw-file-button input { position:absolute; inset:0; opacity:0; cursor:pointer; margin:0!important; }
#teacher-homework-file-name { font-size:14px; color:#53648b; overflow-wrap:anywhere; min-width:0; }
.hw-file-picker>small { grid-column:2 / -1; font-size:12px; color:#8897b9; }
#hw-remove-file { border:0; background:transparent; font-size:24px; color:#697895; padding:6px; }
#page-teacher-homework .hw-attachment-field>.primary { display:block; flex:none; width:250px; max-width:100%; background:linear-gradient(110deg,#ff8b35,#ff233c); height:42px; min-height:42px; padding:8px 12px; margin:10px 0 0 auto; border-radius:8px; font-size:14px; font-weight:700; }
#page-teacher-homework :is(.hw-form-content,.hw-review)>.error:empty { display:none; }
.hw-review-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.95fr); gap:20px; align-items:end; }
.hw-students-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 12px; }
#page-teacher-homework .hw-students-head h3 { margin:0; }
.hw-students-head h3>small { font-size:13px; color:#8b98b5; background:#f0f3f8; border-radius:20px; padding:9px 13px; display:inline-block; margin-left:15px; white-space:nowrap; }
.hw-progress { display:flex; align-items:center; justify-self:end; gap:14px; max-width:100%; margin-bottom:8px; }
.hw-progress>strong { border-radius:10px; padding:7px 14px; background:#e5faf2; color:#00b478; font-size:20px; }
.hw-progress>div { width:170px; }
.hw-progress small { color:#8493b7; font-size:13px; }
.hw-progress span { display:block; height:9px; background:#e8edf5; border-radius:9px; margin-top:8px; overflow:hidden; }
.hw-progress i { display:block; height:100%; border-radius:9px; background:#00bd7b; }
.hw-table-wrap { overflow:auto; max-width:100%; border-radius:14px; }
.hw-table { width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed; }
.hw-table col:nth-child(1){width:5%;}.hw-table col:nth-child(2){width:34%;}.hw-table col:nth-child(3){width:20%;}.hw-table col:nth-child(4){width:18%;}.hw-table col:nth-child(5){width:23%;}
.hw-table th { background:#f1f6fa; color:#8290b1; font-size:12px; padding:9px 10px; text-align:left; }
.hw-table td { padding:7px 10px; border-bottom:1px solid #e8edf4; font-size:13px; vertical-align:middle; }
.hw-table .hw-number { text-align:center; }
.hw-pupil>span:first-child { float:left; margin-right:16px; }
.hw-pupil>span:last-child { display:block; overflow:hidden; }
.hw-pupil b { font-size:15px; font-weight:600; overflow-wrap:anywhere; display:block; }
.hw-pupil small { display:block; color:#8898bd; margin-top:6px; font-size:13px; }
.hw-avatar { display:grid; place-items:center; width:34px; height:34px; color:#95a1bb; background:#edf2f6; border-radius:10px; font-size:19px; font-weight:700; }
.hw-status { display:inline-flex; align-items:center; gap:9px; border-radius:22px; padding:8px 10px; background:#f3f6f9; color:#8a99b8; font-size:13px; white-space:nowrap; }
.hw-status i { display:grid; place-items:center; width:22px; height:22px; background:#e7edf2; font-style:normal; border-radius:50%; }
.hw-table .done td { background:#eafcf5; border-bottom-color:#c5f3e5; }
.hw-table .done .hw-avatar { color:#fff; background:linear-gradient(140deg,#05c488,#00a876); }
.hw-table .done .hw-status { background:#d5faed; color:#00ae75; font-weight:700; }.hw-table .done .hw-status i{background:#b7f4dd;}
.hw-result-line { display:flex; align-items:center; border:1px solid #d8e1ef; border-radius:11px; background:#fff; min-height:44px; padding:0 8px; min-width:0; }
#page-teacher-homework .hw-result-line input { border:0; padding:8px 4px; margin:0; min-height:40px; width:100%; }
.hw-result-line>span { flex:1; font-size:13px; overflow-wrap:anywhere; }
.hw-result-line button { flex:none; width:28px; height:36px; border:0; background:transparent; color:#18275b; }
.hw-result-menu { position:fixed; inset:auto; min-width:180px; border:1px solid #d9e3f2; padding:5px; border-radius:12px; box-shadow:0 8px 20px #153b7220; margin:0; background:#fff; z-index:200; }
.hw-result-menu button { display:block; width:100%; text-align:left; padding:12px; border:0; border-radius:7px; background:#fff; color:#162758; }.hw-result-menu button:hover{background:#e9f5ff;}
.hw-save-state { display:block; font-size:10px; color:#7a8caa; min-height:12px; margin-top:3px; }
.hw-action>button { width:100%; min-height:44px; padding:10px 8px; border:1px solid #00ba78; border-radius:10px; background:#f0fff9; color:#00ab6a; font-size:13px; font-weight:700; }
.hw-action>button.cancel { color:#ff3438; border-color:#ff9093; background:#fff7f7; }
.hw-action-short,.hw-label-short{display:none}
#page-teacher-homework .hw-status{display:flex;min-width:0;max-width:100%;padding:0 5px;border:1px solid #dce5f2;border-radius:7px;background:#fff;gap:4px}
#page-teacher-homework .hw-status>i{flex:none;width:16px;height:16px;font-size:13px;background:none;color:#bfc8da}
#page-teacher-homework .hw-status select{border:0;background:transparent;min-height:34px;height:34px;margin:0;padding:4px 0;font-size:12px;color:#6b7a9e;text-overflow:ellipsis}
#page-teacher-homework .done .hw-status>i{color:#00b875}
.hw-card-menu>div[popover]{position:fixed;inset:auto;right:auto;margin:0;width:180px;z-index:200}
.hw-card-menu>div[popover]:not(:popover-open){display:none}
@media(max-width:1366px){.hw-card-top{gap:7px;}.hw-card-top>small{padding:7px 8px;}.hw-table{min-width:850px;}.hw-progress>div{width:150px;}}
@media(max-width:1000px){.hw-progress>div{width:125px;}#page-teacher-homework .panel{padding:18px;}.hw-card-track{grid-auto-columns:82%;}}
@media(max-width:1000px){.hw-review-filters{grid-template-columns:1fr 1fr;}.hw-review-filters>.hw-progress{grid-column:1/-1;justify-self:end;}}
@media(max-width:1000px){#page-teacher-homework #teacher-homework-form{padding:18px;}}
@media(max-width:680px){#page-teacher-homework #teacher-homework-form{padding:16px;}}
@media(max-width:680px){
 #page-teacher-homework .panel{padding:14px;border-radius:16px}
 #page-teacher-homework h3{font-size:19px;line-height:1.2}
 .hw-workspace{gap:14px}
 .hw-review-filters{grid-template-columns:1fr 1fr;gap:10px}
 #page-teacher-homework label{font-size:12px}
 #page-teacher-homework :is(input,select){padding:8px;min-height:40px;font-size:12px}
 .hw-card{padding:11px 10px}
 .hw-card-top{gap:5px;flex-wrap:wrap;font-size:11px}
 .hw-card-top>i{width:10px;height:10px}
 .hw-card-top>small{padding:5px;font-size:10px}
 .hw-card-menu{margin-left:auto}
 .hw-card h4{font-size:16px;margin-top:9px}
 .hw-card p{font-size:12px}
 .hw-card-counters{gap:6px;margin-top:10px}
 .hw-card-counters span{font-size:12px;padding:4px 6px}
 .hw-file-picker{grid-template-columns:38px 1fr auto;gap:8px}
 .hw-file-icon{height:42px;grid-row:1/3}
 .hw-file-picker #teacher-homework-file-name{grid-column:2/-1;grid-row:2}
 .hw-file-picker>small{grid-column:1/-1;font-size:11px}
 .hw-file-picker .hw-file-button{grid-column:2;padding:8px;font-size:12px}
 .hw-editor-toolbar{gap:1px;padding:3px 5px}
 .hw-editor-toolbar button{width:34px;height:34px;font-size:18px}
 .hw-students-head{margin:14px 0 9px}
 #page-teacher-homework .hw-students-head h3{font-size:16px}
 .hw-students-head h3>small{margin-left:4px;padding:5px 7px;font-size:10px}
 .hw-progress{width:100%;margin-bottom:0}
 .hw-progress>div{flex:1;width:auto}
 .hw-progress>strong{padding:6px 10px;font-size:19px}
 .hw-table-wrap{overflow:auto;border-radius:9px}
 .hw-table{min-width:350px}
 .hw-table col:nth-child(1){width:5%}.hw-table col:nth-child(2){width:29%}.hw-table col:nth-child(3){width:24%}.hw-table col:nth-child(4){width:21%}.hw-table col:nth-child(5){width:21%}
 .hw-table th{padding:7px 3px;font-size:10px;line-height:1.2;overflow-wrap:anywhere}
 .hw-table td{padding:6px 3px;font-size:11px}
 .hw-avatar{display:none}
 .hw-pupil b{font-size:11px;line-height:1.3}
 .hw-pupil small{font-size:10px;overflow-wrap:anywhere;margin-top:3px}
 #page-teacher-homework .hw-status{gap:2px;padding:0 3px}
 #page-teacher-homework .hw-status>i{width:8px;height:8px;font-size:9px}
 #page-teacher-homework .hw-status select{font-size:10px;height:34px;min-height:34px;padding:3px 0}
 .hw-result-line{padding:0 3px;min-height:34px;border-radius:7px}
 #page-teacher-homework .hw-result-line input{font-size:11px;min-height:32px;padding:4px 0}
 .hw-result-line>span{font-size:10px}
 .hw-result-line button{width:19px;height:32px}
 .hw-save-state{min-height:0;font-size:9px}
 .hw-save-state:empty{display:none}
 .hw-action>button{font-size:10px;padding:5px 3px;min-height:34px;border-radius:6px}
 .hw-action-long{display:none}.hw-action-short{display:inline}
 .hw-label-long{display:none}.hw-label-short{display:inline}
 .hw-form-heading{align-items:flex-start;flex-wrap:wrap}
}
/* Reflow by usable form width, including when the sidebar occupies space. */
@container homework-form (max-width:740px) {
 .hw-basics { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:576px; gap:16px; }
 .hw-basics>label:first-child { grid-column:1 / -1; width:100%; max-width:420px; }
 .hw-details { grid-template-columns:minmax(0,1fr); gap:16px; }
 .hw-description-field { width:100%; max-width:600px; }
 .hw-attachment-field { width:100%; max-width:400px; }
 .hw-form-heading { align-items:flex-start; flex-wrap:wrap; }
}
@container homework-form (max-width:520px) {
 .hw-basics { grid-template-columns:minmax(0,1fr); max-width:100%; gap:12px; }
 .hw-basics>label:first-child { grid-column:auto; max-width:100%; }
 .hw-details { gap:12px; }
 .hw-description-field,.hw-attachment-field { max-width:100%; }
 .hw-file-picker { grid-template-columns:38px minmax(0,1fr) auto; gap:8px; }
 #teacher-homework-file-name { grid-column:2 / -1; grid-row:2; }
 .hw-file-picker>small { grid-column:1 / -1; }
 #page-teacher-homework .hw-attachment-field>.primary { width:100%; font-size:13px; }
}