@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Inter",sans-serif;
}

:root{
    --primary:#294fc3;
    --primary-dark:#1d3e99;
    --primary-soft:#f4f6ff;
    --primary-line:#dfe7ff;
    --bg:#f5f7fb;
    --surface:#ffffff;
    --surface-soft:#f8fafd;
    --surface-muted:#f2f5fa;
    --text:#202437;
    --text-soft:#50586d;
    --muted:#7d8497;
    --muted-light:#aeb5c5;
    --line:#e5eaf2;
    --line-soft:#eef2f7;
    --success:#5f7067;
    --success-bg:#f8faf8;
    --success-line:#e4ece7;
    --warning:#756e5f;
    --warning-bg:#fbf8f2;
    --warning-line:#eee7dc;
    --danger:#805b5b;
    --danger-bg:#fbf4f4;
    --danger-line:#eadada;
    --neutral-bg:#f4f6f9;
    --neutral-line:#e2e7ef;
    --shadow:0 18px 42px rgba(31,45,90,.05);
    --shadow-soft:0 10px 26px rgba(31,45,90,.035);
    --shadow-card:0 14px 34px rgba(31,45,90,.045);
    --radius:24px;
    --radius-sm:14px;
    --ease:cubic-bezier(.2,.8,.2,1);
}

html[data-theme="dark"]{
    --primary:#3b82f6;
    --primary-dark:#2563eb;
    --primary-soft:#1e293b;
    --primary-line:#334155;
    --bg:#0f172a;
    --surface:#111827;
    --surface-soft:#182235;
    --surface-muted:#22304a;
    --text:#f8fafc;
    --text-soft:#cbd5e1;
    --muted:#94a3b8;
    --muted-light:#cbd5e1;
    --line:#334155;
    --line-soft:#1f2937;
    --success:#d1fae5;
    --success-bg:#065f46;
    --success-line:#047857;
    --warning:#fef3c7;
    --warning-bg:#92400e;
    --warning-line:#b45309;
    --danger:#fee2e2;
    --danger-bg:#991b1b;
    --danger-line:#b91c1c;
    --neutral-bg:#1e293b;
    --neutral-line:#334155;
    --shadow:0 18px 42px rgba(0,0,0,.18);
    --shadow-soft:0 10px 26px rgba(0,0,0,.14);
    --shadow-card:0 14px 34px rgba(0,0,0,.16);
}

html{
    scroll-behavior:smooth;
}

body{
    min-height:100vh;
    background:
        radial-gradient(circle at top left,rgba(41,79,195,.045),transparent 34%),
        linear-gradient(180deg,#f7f9fd 0%,#f1f4fa 100%);
    color:var(--text);
    overflow-x:hidden;
}

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
select,
textarea{
    font:inherit;
}

button{
    border:none;
    background:none;
}

h1{
    font-size:28px;
    letter-spacing:-.045em;
    line-height:1.12;
    color:var(--text);
}

h2,
h3,
h4{
    line-height:1.2;
}

.app{
    width:100%;
    min-height:100vh;
    display:grid;
    grid-template-columns:238px minmax(0,1fr);
    gap:24px;
    padding:22px;
    align-items:start;
}

.sidebar{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(230,235,243,.9);
    border-radius:28px;
    padding:24px 18px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:var(--shadow);
    position:sticky;
    top:22px;
    height:calc(100vh - 44px);
    overflow:hidden;
    backdrop-filter:blur(18px);
}

.logo{
    display:flex;
    align-items:center;
    font-size:22px;
    font-weight:900;
    color:var(--primary);
    margin-bottom:38px;
    letter-spacing:-.055em;
}

.menu-title{
    font-size:10.5px;
    color:var(--muted-light);
    font-weight:900;
    margin:24px 0 10px;
    letter-spacing:.08em;
}

.nav-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.nav-item{
    min-height:42px;
    padding:0 12px;
    display:flex;
    align-items:center;
    gap:12px;
    border-radius:15px;
    color:#3d4456;
    font-size:13.5px;
    font-weight:750;
    transition:background .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}

.nav-symbol{
    width:22px;
    height:22px;
    display:grid;
    place-items:center;
    font-size:10.5px;
    font-weight:900;
    color:inherit;
    flex:0 0 auto;
    border-radius:8px;
    background:transparent;
}

.nav-item:hover{
    background:var(--primary-soft);
    color:var(--primary);
    transform:translateX(2px);
}

.nav-item.active{
    background:var(--primary-soft);
    color:var(--primary);
}

.nav-item.active .nav-symbol{
    background:#ffffff;
    box-shadow:inset 0 0 0 1px var(--primary-line);
}

.logout{
    color:var(--danger);
}

.main{
    width:100%;
    max-width:none;
    display:flex;
    flex-direction:column;
    gap:22px;
    min-width:0;
}

.topbar{
    min-height:76px;
    display:grid;
    grid-template-columns:1fr auto;
    gap:18px;
    align-items:center;
    background:rgba(255,255,255,.82);
    border:1px solid rgba(226,232,241,.92);
    border-radius:26px;
    padding:16px 18px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(16px);
}

.topbar h1{
    width:max-content;
    max-width:100%;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafd 100%);
    border:1px solid var(--line);
    border-radius:18px;
    padding:10px 15px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.topbar p{
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
    margin-top:7px;
}

.date{
    min-height:52px;
    min-width:128px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:
        linear-gradient(180deg,#ffffff 0%,#f8fafd 100%);
    padding:14px 18px;
    border-radius:20px;
    font-size:13px;
    font-weight:900;
    color:var(--primary);
    border:1px solid var(--primary-line);
    box-shadow:0 14px 30px rgba(31,45,90,.055);
    white-space:nowrap;
}

.card,
.lesson-table,
.filter-panel,
.panel,
.clean-panel,
.profile-card{
    background:rgba(255,255,255,.9);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:22px;
    box-shadow:var(--shadow-soft);
    backdrop-filter:blur(14px);
}

.card,
.clean-panel,
.panel,
.kpi,
.course-card,
.course-tab,
.task{
    transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

.card:hover,
.clean-panel:hover,
.panel:hover{
    border-color:#d9e0ec;
    box-shadow:0 16px 36px rgba(31,45,90,.052);
}

.card-head,
.panel-head{
    margin-bottom:16px;
}

.card-head h2,
.clean-panel-head h2,
.panel-head h3,
.profile-card h2{
    font-size:20px;
    font-weight:900;
    letter-spacing:-.035em;
    color:var(--text);
    margin-bottom:5px;
}

.card-head p,
.clean-panel-head p,
.profile-card p{
    color:var(--muted);
    font-size:12.5px;
    line-height:1.55;
    margin-top:5px;
}

.clean-panel-head{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
    margin-bottom:18px;
}

.section-space{
    margin-top:18px;
}

.forms{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.compact-form{
    grid-template-columns:repeat(4,minmax(0,1fr));
}

.full{
    grid-column:1/-1;
}

.field{
    display:grid;
    gap:6px;
}

.field label{
    color:var(--text-soft);
    font-size:11.5px;
    font-weight:900;
}

.field input,
.field select,
.field textarea{
    width:100%;
    min-height:42px;
    padding:10px 12px;
    border-radius:13px;
    border:1px solid var(--line);
    background:var(--surface-soft);
    color:var(--text);
    outline:0;
    font-size:12.5px;
    transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}

.field textarea{
    min-height:88px;
    resize:vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:var(--primary-line);
    background:#ffffff;
    box-shadow:0 0 0 4px rgba(41,79,195,.06);
}

.field-active label{
    color:var(--primary);
}

.button-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    margin-top:10px;
}

.btn{
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 13px;
    border-radius:13px;
    border:1px solid transparent;
    font-size:11.5px;
    font-weight:900;
    cursor:pointer;
    transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
    white-space:nowrap;
    text-align:center;
}

.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 10px 20px rgba(31,45,90,.052);
}

.btn-primary{
    background:var(--primary);
    color:#ffffff;
}

.btn-secondary,
.btn-info,
.btn-icon,
.btn-outline,
.btn-ghost{
    background:#ffffff;
    color:var(--primary);
    border-color:var(--primary-line);
}

.btn-success{
    background:#ffffff;
    color:var(--text);
    border-color:var(--line);
}

.btn-danger{
    background:#ffffff;
    color:var(--danger);
    border-color:var(--danger-line);
}

.status{
    min-height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:5px 10px;
    border-radius:999px;
    font-size:10.5px;
    font-weight:900;
    background:var(--neutral-bg);
    color:#596171;
    border:1px solid var(--neutral-line);
    white-space:nowrap;
    box-shadow:none;
}

.status.good{
    background:var(--success-bg);
    color:var(--success);
    border-color:var(--success-line);
}

.status.warning{
    background:var(--warning-bg);
    color:var(--warning);
    border-color:var(--warning-line);
}

.status.danger{
    background:var(--danger-bg);
    color:var(--danger);
    border-color:var(--danger-line);
}

.error{
    display:none;
    padding:12px 13px;
    border-radius:14px;
    background:var(--danger-bg);
    color:var(--danger);
    border:1px solid var(--danger-line);
    font-size:12.5px;
    text-align:center;
    font-weight:700;
}

.error.show{
    display:block;
}

table{
    width:100%;
    border-collapse:collapse;
    min-width:720px;
}

th{
    text-align:left;
    font-size:10.5px;
    color:var(--muted-light);
    font-weight:900;
    padding:10px;
    letter-spacing:.04em;
}

td{
    padding:14px 10px;
    font-size:13px;
    font-weight:700;
    border-top:1px solid var(--line-soft);
    vertical-align:middle;
}

td:first-child{
    display:flex;
    align-items:center;
    gap:12px;
}

td small{
    color:var(--muted-light);
    font-size:11px;
}

.table{
    min-width:720px;
}

.row-active{
    background:var(--surface-soft);
}

.mini-avatar{
    width:34px;
    height:34px;
    border-radius:13px;
    display:grid;
    place-items:center;
    font-size:12px;
    font-weight:900;
    flex:0 0 auto;
    background:var(--primary-soft);
    color:var(--primary);
}

.notice{
    background:var(--surface-soft);
    color:var(--text-soft);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    margin-top:8px;
    font-size:12.5px;
    font-weight:700;
    line-height:1.45;
}

.notice.warning{
    background:var(--warning-bg);
    color:var(--warning);
    border-color:var(--warning-line);
}

.notice.danger{
    background:var(--danger-bg);
    color:var(--danger);
    border-color:var(--danger-line);
}

.notice.good{
    background:var(--success-bg);
    color:var(--success);
    border-color:var(--success-line);
}

.subtask-box{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px;
    margin-top:10px;
    display:grid;
    gap:8px;
}

.subtask-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:12.5px;
    font-weight:700;
}

.student-overview-card,
.task-command-card,
.schedule-hero,
.language-hero{
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    border-radius:28px;
    padding:30px;
    color:#fff;
    box-shadow:0 18px 42px rgba(31,54,120,.105);
    overflow:hidden;
    position:relative;
}

.student-overview-card:after,
.task-command-card:after,
.schedule-hero:after,
.language-hero:after{
    content:"";
    position:absolute;
    width:280px;
    height:280px;
    right:-120px;
    top:-140px;
    background:rgba(255,255,255,.07);
    border-radius:999px;
}

.student-overview-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) 260px;
    gap:24px;
    align-items:end;
}

.task-command-card{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
}

.student-overview-main,
.student-overview-status,
.task-command-card > div,
.schedule-hero > div,
.language-hero > div{
    position:relative;
    z-index:1;
}

.student-overview-main span,
.task-command-card span,
.schedule-hero span,
.language-hero span{
    display:block;
    color:rgba(255,255,255,.74);
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.2em;
    margin-bottom:12px;
}

.student-overview-main h2,
.task-command-card h2,
.schedule-hero h2,
.language-hero h2{
    color:#fff;
    font-size:34px;
    line-height:1.05;
    letter-spacing:-.055em;
    max-width:680px;
}

.student-overview-main p,
.task-command-card p{
    color:rgba(255,255,255,.76);
    font-size:13px;
    line-height:1.55;
    margin-top:10px;
    max-width:680px;
}

.student-overview-status{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
    border-radius:22px;
    padding:18px;
    display:grid;
    gap:8px;
    backdrop-filter:blur(10px);
}

.student-overview-status small{
    color:rgba(255,255,255,.72);
    font-size:11px;
    font-weight:900;
}

.student-overview-status strong{
    color:#fff;
    font-size:20px;
    font-weight:900;
}

.student-overview-status .status{
    width:max-content;
    background:rgba(255,255,255,.14);
    color:#fff;
    border-color:rgba(255,255,255,.2);
}

.simple-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}

.simple-summary-card,
.metric-card,
.routine-card{
    background:rgba(255,255,255,.9);
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    display:grid;
    gap:8px;
    box-shadow:var(--shadow-soft);
    transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}

.simple-summary-card:hover,
.metric-card:hover,
.routine-card:hover{
    transform:translateY(-2px);
    border-color:#d9e0ec;
    box-shadow:0 16px 32px rgba(31,45,90,.055);
}

.simple-summary-card span,
.metric-card span,
.routine-card span{
    color:var(--muted-light);
    font-size:10.5px;
    font-weight:900;
    line-height:1.35;
}

.simple-summary-card strong,
.metric-card strong,
.routine-card strong{
    color:var(--text);
    font-size:22px;
    font-weight:900;
    line-height:1.15;
    letter-spacing:-.04em;
}

.simple-summary-card small{
    color:var(--muted);
    font-size:12px;
    font-weight:700;
}

.simple-summary-card.good{
    background:#ffffff;
    border-color:var(--success-line);
}

.simple-summary-card.warning{
    background:#ffffff;
    border-color:var(--warning-line);
}

.simple-summary-card.danger{
    background:#ffffff;
    border-color:var(--danger-line);
}

.dashboard-focus-grid{
    display:grid;
    grid-template-columns:1.25fr .75fr;
    gap:18px;
}

.recommendation-stack{
    display:grid;
    gap:12px;
}

.recommendation-card{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:14px;
    align-items:start;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    padding:15px;
}

.recommendation-card.primary{
    background:#ffffff;
    border-color:var(--primary-line);
}

.recommendation-icon{
    width:42px;
    height:42px;
    border-radius:14px;
    display:grid;
    place-items:center;
    background:var(--primary-soft);
    color:var(--primary);
    font-size:12.5px;
    font-weight:900;
}

.recommendation-card strong{
    display:block;
    font-size:13.5px;
    font-weight:900;
    color:var(--text);
    margin-bottom:5px;
}

.recommendation-card p{
    color:var(--text-soft);
    font-size:12.5px;
    line-height:1.5;
    font-weight:700;
}

.load-meter-card{
    display:grid;
    gap:14px;
}

.load-meter-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.load-meter-top div,
.mini-stat-list div{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px;
}

.load-meter-top span,
.mini-stat-list span{
    display:block;
    color:var(--muted-light);
    font-size:10.5px;
    font-weight:900;
    margin-bottom:8px;
}

.load-meter-top strong,
.mini-stat-list strong{
    color:var(--primary);
    font-size:22px;
    font-weight:900;
}

.load-meter{
    height:9px;
    background:#eef2f8;
    border-radius:999px;
    overflow:hidden;
}

.load-meter span{
    display:block;
    height:100%;
    background:var(--primary);
    border-radius:999px;
    transition:width .6s var(--ease);
}

.load-meter-bottom{
    display:flex;
    justify-content:space-between;
    color:var(--muted-light);
    font-size:10.5px;
    font-weight:800;
}

.mini-stat-list{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
    margin-top:14px;
}

.mini-stat-list.vertical{
    grid-template-columns:1fr;
    margin-top:0;
}

.flag-pill-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.flag-pill{
    padding:7px 10px;
    border-radius:999px;
    background:var(--neutral-bg);
    color:#596171;
    font-size:11.5px;
    font-weight:900;
    border:1px solid var(--neutral-line);
}

.flag-pill.good{
    background:var(--success-bg);
    color:var(--success);
    border-color:var(--success-line);
}

.flag-pill.warning{
    background:var(--warning-bg);
    color:var(--warning);
    border-color:var(--warning-line);
}

.flag-pill.danger{
    background:var(--danger-bg);
    color:var(--danger);
    border-color:var(--danger-line);
}

.activity-overview-card{
    padding:24px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(249,251,254,.96) 100%);
    border:1px solid #e2e8f1;
    box-shadow:0 18px 44px rgba(31,45,90,.05);
}

.activity-overview-grid{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:16px;
    align-items:stretch;
}

.activity-panel{
    position:relative;
    background:#ffffff;
    border:1px solid #e4eaf2;
    border-radius:22px;
    padding:18px;
    min-height:230px;
    overflow:hidden;
}

.activity-panel:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(41,79,195,.025),transparent 45%);
    pointer-events:none;
}

.activity-panel-head{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:16px;
}

.activity-panel-head h3{
    color:var(--text);
    font-size:16px;
    font-weight:900;
    letter-spacing:-.025em;
}

.activity-flag-wrap{
    position:relative;
    z-index:1;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-content:flex-start;
}

.flags-panel{
    background:
        radial-gradient(circle at top right,rgba(41,79,195,.035),transparent 36%),
        #ffffff;
}

.tasks-panel{
    background:
        radial-gradient(circle at top left,rgba(41,79,195,.03),transparent 38%),
        #ffffff;
}

.activity-task-list{
    position:relative;
    z-index:1;
    display:grid;
    gap:10px;
}

.activity-task-item{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:14px;
    align-items:center;
    background:#f9fbfe;
    border:1px solid #e6ebf3;
    border-radius:17px;
    padding:14px 14px 14px 16px;
    overflow:hidden;
    transition:transform .2s var(--ease), border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}

.activity-task-item:before{
    content:"";
    position:absolute;
    left:0;
    top:12px;
    bottom:12px;
    width:3px;
    border-radius:999px;
    background:#c9d2df;
}

.activity-task-item:hover{
    transform:translateY(-1px);
    background:#ffffff;
    border-color:#dbe3ef;
    box-shadow:0 12px 24px rgba(31,45,90,.035);
}

.activity-task-item.critical:before,
.activity-task-item.high:before{
    background:#d6c8a6;
}

.activity-task-item.medium:before{
    background:#d4ccba;
}

.activity-task-item.low:before{
    background:#d4dde6;
}

.activity-task-item strong{
    display:block;
    color:var(--text);
    font-size:13.5px;
    font-weight:900;
    line-height:1.25;
}

.activity-task-item span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    margin-top:5px;
}

.quick-action-grid{
    display:grid;
    gap:10px;
}

.quick-action-card{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px;
    display:grid;
    grid-template-columns:40px 1fr;
    gap:12px;
    align-items:center;
    transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
}

.quick-action-card:hover{
    transform:translateY(-2px);
    border-color:var(--primary-line);
    background:#ffffff;
}

.quick-action-card span{
    width:40px;
    height:40px;
    border-radius:14px;
    background:var(--primary-soft);
    color:var(--primary);
    display:grid;
    place-items:center;
    font-weight:900;
}

.quick-action-card strong{
    display:block;
    color:var(--text);
    font-size:13px;
    font-weight:900;
}

.quick-action-card small{
    display:block;
    color:var(--muted);
    margin-top:4px;
    font-size:11.5px;
    font-weight:700;
}

.compact-task-list{
    display:grid;
    gap:10px;
}

.compact-task-item{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    padding:14px;
}

.compact-task-item strong{
    display:block;
    color:var(--text);
    font-size:13px;
    font-weight:900;
}

.compact-task-item span{
    display:block;
    color:var(--muted);
    font-size:12px;
    margin-top:4px;
}

.compact-empty{
    background:var(--surface-soft);
    border:1px dashed #dbe2ee;
    border-radius:18px;
    padding:18px;
    display:grid;
    gap:5px;
}

.compact-empty strong{
    color:var(--text);
    font-size:14px;
}

.compact-empty span{
    color:var(--muted);
    font-size:12px;
}

.task-command-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    position:relative;
    z-index:1;
}

.task-command-actions .btn-outline{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.22);
    color:#fff;
}

.task-simple-form{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.focus-simplified-list,
.task-board-list{
    display:grid;
    gap:14px;
}

.focus-simplified-card,
.task-board-item{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    display:grid;
    gap:14px;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
}

.focus-simplified-card{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
}

.focus-simplified-card:hover,
.task-board-item:hover{
    transform:translateY(-2px);
    background:#ffffff;
    box-shadow:0 14px 30px rgba(31,45,90,.045);
}

.focus-simplified-main span,
.task-board-main span{
    display:inline-flex;
    width:max-content;
    background:#ffffff;
    color:var(--text-soft);
    border:1px solid var(--line);
    border-radius:999px;
    padding:5px 9px;
    font-size:10px;
    font-weight:900;
    margin-bottom:8px;
}

.focus-simplified-main h3,
.task-board-main h3{
    color:var(--text);
    font-size:16px;
    font-weight:900;
}

.focus-simplified-main p,
.task-board-main p{
    color:var(--muted);
    font-size:12px;
    margin-top:5px;
    font-weight:700;
}

.focus-simplified-advice{
    margin-top:12px;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:11px 12px;
    color:var(--text-soft);
    font-size:12.5px;
    line-height:1.45;
    font-weight:700;
}

.task-board-main{
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:flex-start;
}

.task-board-badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}

.task-control-panel form{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}

.task-control-panel.compact form{
    justify-content:flex-start;
}

.task-control{
    min-width:82px;
    border:1px solid var(--line);
    border-radius:15px;
    padding:10px 12px;
    cursor:pointer;
    display:grid;
    gap:2px;
    text-align:center;
    font-weight:900;
    background:#ffffff;
    color:var(--text-soft);
    transition:transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}

.task-control:hover{
    transform:translateY(-1px);
    border-color:var(--primary-line);
}

.task-control-panel.compact .task-control{
    min-width:auto;
    padding:9px 12px;
}

.task-control span{
    font-size:12px;
}

.task-control small{
    font-size:10px;
    opacity:.7;
}

.task-control.start{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.task-control.done,
.task-control.mute,
.task-control.link{
    background:#ffffff;
    color:var(--text-soft);
    border-color:var(--line);
}

.task-control.delete{
    background:#ffffff;
    color:var(--danger);
    border-color:var(--danger-line);
}

.task-control-links{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:8px;
}

.task-control-links a{
    color:var(--primary);
    font-size:12px;
    font-weight:900;
}

.schedule-page{
    gap:20px;
}

.schedule-hero,
.language-hero{
    min-height:150px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
}

.schedule-hero-stats{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
}

.schedule-hero-stats div{
    min-width:150px;
    padding:14px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.16);
}

.schedule-hero-stats small{
    display:block;
    color:rgba(255,255,255,.68);
    font-size:11px;
    font-weight:800;
    margin-bottom:6px;
}

.schedule-hero-stats strong{
    display:block;
    font-size:24px;
    color:#ffffff;
}

.schedule-layout{
    display:grid;
    grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr);
    gap:18px;
}

.schedule-form{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.schedule-side-card{
    display:flex;
    flex-direction:column;
}

.schedule-side-card .btn{
    margin-top:auto;
    width:max-content;
}

.schedule-metric{
    padding:15px;
    border-radius:18px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    margin-bottom:12px;
}

.schedule-metric span{
    display:block;
    color:var(--muted-light);
    font-size:10.5px;
    font-weight:900;
    margin-bottom:8px;
}

.schedule-metric strong{
    display:block;
    color:var(--primary);
    font-size:24px;
    font-weight:900;
}

.routine-grid{
    display:grid;
    grid-template-columns:repeat(6,minmax(120px,1fr));
    gap:14px;
}

.mini-calendar{
    display:grid;
    grid-template-columns:repeat(7,minmax(130px,1fr));
    gap:12px;
    overflow-x:auto;
    padding-bottom:4px;
}

.calendar-day{
    min-height:230px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:20px;
    overflow:hidden;
}

.calendar-day-head{
    min-height:58px;
    padding:13px;
    background:#ffffff;
    border-bottom:1px solid var(--line);
}

.calendar-day-head strong{
    display:block;
    color:var(--primary);
    font-size:15px;
    font-weight:900;
}

.calendar-day-head span{
    display:block;
    color:var(--muted);
    font-size:10.5px;
    font-weight:800;
    margin-top:3px;
}

.calendar-items{
    padding:10px;
    display:grid;
    gap:9px;
}

.calendar-item{
    padding:11px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid var(--line);
}

.calendar-item strong{
    display:block;
    color:var(--text);
    font-size:12.5px;
    font-weight:900;
    line-height:1.25;
    margin-bottom:6px;
}

.calendar-item span{
    display:block;
    color:var(--primary);
    font-size:11px;
    font-weight:900;
    margin-bottom:4px;
}

.calendar-item small{
    display:block;
    color:var(--muted);
    font-size:10.5px;
    font-weight:700;
}

.calendar-empty,
.weekly-empty{
    min-height:120px;
    display:grid;
    place-items:center;
    text-align:center;
    color:var(--muted-light);
    font-size:11px;
    font-weight:900;
    border:1px dashed var(--line);
    border-radius:14px;
    background:#fff;
}

.language-page{
    gap:20px;
}

.language-hero{
    justify-content:flex-start;
}

.language-mode-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:18px;
}

.language-mode-card{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:24px;
    padding:20px;
    box-shadow:var(--shadow-soft);
    display:grid;
    gap:22px;
    transition:transform .22s var(--ease), border-color .22s var(--ease);
}

.language-mode-card:hover{
    transform:translateY(-2px);
}

.language-mode-card.active{
    border-color:var(--primary-line);
    background:var(--primary-soft);
}

.language-mode-top{
    display:flex;
    gap:14px;
    align-items:flex-start;
}

.language-mark{
    width:48px;
    height:48px;
    border-radius:16px;
    background:#ffffff;
    color:var(--primary);
    border:1px solid var(--line);
    display:grid;
    place-items:center;
    font-size:13px;
    font-weight:900;
    flex:0 0 auto;
}

.language-mode-card h3{
    font-size:18px;
    font-weight:900;
    color:var(--text);
    margin-bottom:6px;
}

.language-mode-card p{
    color:var(--muted);
    font-size:12px;
    line-height:1.45;
    font-weight:700;
}

.language-mode-card .btn{
    width:max-content;
}

.record-history-grid{
    display:grid;
    gap:18px;
}

.record-history-card{
    position:relative;
    background:
        linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
    border:1px solid #dfe5ee;
    border-radius:24px;
    padding:20px;
    display:grid;
    gap:16px;
    box-shadow:0 14px 34px rgba(31,45,90,.045);
    overflow:hidden;
}

.record-history-card:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:linear-gradient(180deg,var(--primary),#7892e7);
    opacity:.68;
}

.record-history-card:hover{
    border-color:#d4dce9;
    box-shadow:0 18px 40px rgba(31,45,90,.06);
}

.record-history-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    padding-left:4px;
}

.record-history-top span{
    display:inline-flex;
    color:var(--primary);
    background:#f7f9ff;
    border:1px solid var(--primary-line);
    border-radius:999px;
    padding:5px 10px;
    font-size:10px;
    font-weight:900;
    margin-bottom:8px;
}

.record-history-top h3{
    font-size:17px;
    font-weight:900;
    color:var(--text);
    letter-spacing:-.02em;
}

.record-history-top p{
    color:var(--muted);
    font-size:12px;
    margin-top:5px;
    font-weight:750;
}

.record-score-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.record-score-row div{
    background:#ffffff;
    border:1px solid #e3e8f1;
    border-radius:18px;
    padding:13px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.record-score-row small{
    display:block;
    color:#9aa3b4;
    font-size:10px;
    font-weight:900;
    margin-bottom:7px;
}

.record-score-row strong{
    color:var(--primary);
    font-size:20px;
    font-weight:900;
}

.meta-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:10px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid #e6ebf3;
}

.record-guidance-strip{
    display:grid;
    gap:10px;
}

.record-guidance-strip div{
    position:relative;
    background:#ffffff;
    border:1px solid #e2e8f1;
    border-radius:16px;
    padding:12px 13px 12px 15px;
    color:var(--text-soft);
    font-size:12px;
    font-weight:750;
    line-height:1.5;
    box-shadow:0 8px 18px rgba(31,45,90,.025);
    overflow:hidden;
}

.record-guidance-strip div:before{
    content:"";
    position:absolute;
    left:0;
    top:12px;
    bottom:12px;
    width:3px;
    border-radius:999px;
    background:#c6cfdd;
}

.record-guidance-strip div strong{
    color:var(--text);
    font-size:11.5px;
    font-weight:900;
}

.weekly-calendar-panel{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:28px;
    padding:24px;
    box-shadow:var(--shadow-soft);
    overflow:hidden;
}

.weekly-calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(190px,1fr));
    gap:14px;
    overflow-x:auto;
    padding:2px 2px 10px;
    scrollbar-width:thin;
}

.weekly-calendar-grid::-webkit-scrollbar,
.mini-calendar::-webkit-scrollbar{
    height:8px;
}

.weekly-calendar-grid::-webkit-scrollbar-track,
.mini-calendar::-webkit-scrollbar-track{
    background:#eef2f8;
    border-radius:999px;
}

.weekly-calendar-grid::-webkit-scrollbar-thumb,
.mini-calendar::-webkit-scrollbar-thumb{
    background:#c8d0df;
    border-radius:999px;
}

.weekly-day-card{
    min-height:330px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:22px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}

.weekly-day-card:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 34px rgba(31,45,90,.055);
    border-color:#d9e0ec;
}

.weekly-day-head{
    min-height:78px;
    padding:16px;
    background:#ffffff;
    border-bottom:1px solid var(--line);
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.weekly-day-head strong{
    display:block;
    color:var(--primary);
    font-size:20px;
    font-weight:900;
    line-height:1;
}

.weekly-day-head span{
    display:block;
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    margin-top:5px;
}

.weekly-day-head small{
    color:var(--text-soft);
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 9px;
    font-size:10.5px;
    font-weight:900;
    white-space:nowrap;
}

.weekly-day-body{
    padding:14px;
    display:grid;
    gap:11px;
    align-content:start;
}

.weekly-block{
    position:relative;
    border-radius:17px;
    padding:13px 13px 13px 15px;
    display:grid;
    gap:5px;
    overflow:hidden;
    background:#ffffff;
    border:1px solid var(--line);
    transition:transform .18s var(--ease), border-color .18s var(--ease);
}

.weekly-block:hover{
    transform:translateY(-1px);
    border-color:#d9e0ec;
}

.weekly-block:before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    border-radius:999px;
    background:#c8d0df;
}

.weekly-block span{
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.02em;
    color:var(--muted);
}

.weekly-block strong{
    font-size:13px;
    font-weight:900;
    color:var(--text);
    line-height:1.25;
}

.weekly-block p{
    color:var(--text-soft);
    font-size:12px;
    font-weight:700;
    line-height:1.4;
}

.weekly-block small{
    color:var(--muted);
    font-size:10.5px;
    font-weight:800;
    line-height:1.35;
}

.study-block:before{
    background:var(--primary);
}

.study-block span{
    color:var(--primary);
}

.weekly-unscheduled{
    margin-top:18px;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
}

.weekly-unscheduled > strong{
    display:block;
    color:var(--text);
    font-size:15px;
    font-weight:900;
    margin-bottom:6px;
}

.weekly-unscheduled > p{
    color:var(--text-soft);
    font-size:12.5px;
    font-weight:700;
    line-height:1.5;
    margin-bottom:14px;
}

.weekly-unscheduled-list{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.weekly-unscheduled-list div{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:16px;
    padding:13px;
}

.weekly-unscheduled-list span{
    display:block;
    color:var(--muted);
    font-size:10.5px;
    font-weight:900;
    margin-bottom:5px;
}

.weekly-unscheduled-list strong{
    display:block;
    color:var(--text);
    font-size:13px;
    font-weight:900;
    line-height:1.3;
}

.weekly-unscheduled-list small{
    display:block;
    color:var(--muted);
    margin-top:5px;
    font-size:10.5px;
    font-weight:800;
}

.tab-buttons{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.tab-button{
    min-height:36px;
    padding:8px 13px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid var(--line);
    color:var(--text-soft);
    cursor:pointer;
    font-size:11.5px;
    font-weight:900;
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.tab-button:hover{
    transform:translateY(-1px);
    border-color:var(--primary-line);
}

.tab-button.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.tab-panel{
    display:none;
    animation:fadeSlide .28s var(--ease) both;
}

.tab-panel.active{
    display:block;
}

.month-calendar-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:14px;
}

.month-calendar-head strong{
    color:var(--text);
    font-size:18px;
    font-weight:900;
}

.month-calendar-head span{
    color:var(--text-soft);
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 11px;
    font-size:11px;
    font-weight:900;
}

.month-calendar-grid{
    display:grid;
    grid-template-columns:repeat(7,minmax(120px,1fr));
    gap:10px;
}

.month-day-card{
    min-height:130px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
    display:grid;
    gap:7px;
    align-content:start;
    transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}

.month-day-card:hover{
    transform:translateY(-2px);
    border-color:#d9e0ec;
    background:#ffffff;
    box-shadow:0 12px 26px rgba(31,45,90,.04);
}

.month-day-card.busy{
    background:#ffffff;
    border-color:var(--primary-line);
}

.month-day-card > span{
    color:var(--primary);
    font-size:18px;
    font-weight:900;
    line-height:1;
}

.month-day-card > small{
    color:var(--muted);
    font-size:10.5px;
    font-weight:900;
}

.month-task-dot{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:12px;
    padding:8px;
    display:grid;
    gap:3px;
}

.month-task-dot strong{
    color:var(--primary);
    font-size:10.5px;
    font-weight:900;
}

.month-task-dot em{
    color:var(--text-soft);
    font-style:normal;
    font-size:10.5px;
    font-weight:700;
    line-height:1.25;
}

.month-day-card p{
    color:var(--muted);
    font-size:10.5px;
    font-weight:900;
}

.menu-wrap{
    position:relative;
}

.dot-action{
    width:36px;
    height:36px;
    border-radius:13px;
    background:#ffffff;
    border:1px solid var(--line);
    color:var(--text-soft);
    font-weight:900;
    cursor:pointer;
    display:grid;
    place-items:center;
    line-height:1;
    transition:background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.dot-action:hover{
    background:var(--primary-soft);
    border-color:var(--primary-line);
    color:var(--primary);
}

.popup-menu{
    position:absolute;
    right:0;
    top:44px;
    min-width:190px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 20px 44px rgba(31,45,90,.12);
    padding:8px;
    display:none;
    z-index:30;
    animation:popIn .18s var(--ease) both;
}

.popup-menu.open{
    display:grid;
    gap:4px;
}

.popup-menu button,
.popup-menu a,
.popup-menu span{
    width:100%;
    min-height:34px;
    padding:8px 10px;
    border-radius:10px;
    text-align:left;
    color:var(--text);
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    background:#fff;
}

.popup-menu button:hover,
.popup-menu a:hover{
    background:var(--surface-soft);
    color:var(--primary);
}

.popup-menu form{
    display:block;
}

.modal-shell{
    position:fixed;
    inset:0;
    background:rgba(20,30,55,.38);
    backdrop-filter:blur(8px);
    z-index:60;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.modal-shell.open{
    display:flex;
    animation:fadeIn .18s var(--ease) both;
}

.modal-card{
    width:min(520px,100%);
    background:#fff;
    border:1px solid var(--line);
    border-radius:24px;
    box-shadow:0 30px 70px rgba(20,30,55,.2);
    overflow:hidden;
    animation:modalUp .24s var(--ease) both;
}

.modal-card.large{
    width:min(760px,100%);
}

.modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    padding:18px 20px;
    border-bottom:1px solid var(--line);
    background:var(--surface-soft);
}

.modal-head h3{
    color:var(--text);
    font-size:18px;
    font-weight:900;
}

.modal-head button{
    width:34px;
    height:34px;
    border-radius:12px;
    background:#fff;
    border:1px solid var(--line);
    color:var(--text-soft);
    font-size:20px;
    cursor:pointer;
}

.modal-body{
    padding:20px;
    display:grid;
    gap:14px;
}

.modal-body p{
    color:var(--text-soft);
    font-size:13px;
    line-height:1.55;
}

.modal-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.modal-grid div{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:16px;
    padding:13px;
}

.modal-grid span{
    display:block;
    color:var(--muted-light);
    font-size:10.5px;
    font-weight:900;
    margin-bottom:7px;
}

.modal-grid strong{
    color:var(--text);
    font-size:13px;
    font-weight:900;
}

.monitoring-board{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:28px;
    padding:24px;
    box-shadow:var(--shadow-soft);
}

.monitoring-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
}

.monitor-card{
    position:relative;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    display:grid;
    gap:14px;
    transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
}

.monitor-card:hover{
    transform:translateY(-2px);
    border-color:#d9e0ec;
    box-shadow:0 14px 30px rgba(31,45,90,.05);
}

.monitor-card.good,
.monitor-card.warning,
.monitor-card.danger{
    background:#ffffff;
    border-color:var(--line);
}

.monitor-card-top{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.monitor-card-top span{
    display:inline-flex;
    width:max-content;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:999px;
    color:var(--text-soft);
    padding:5px 9px;
    font-size:10px;
    font-weight:900;
    margin-bottom:8px;
}

.monitor-card-top h3{
    color:var(--text);
    font-size:16px;
    font-weight:900;
}

.monitor-card-top p{
    color:var(--muted);
    font-size:11.5px;
    margin-top:4px;
    font-weight:700;
}

.monitor-status-row{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    padding:10px;
    border-radius:16px;
    background:#f8fafc;
    border:1px solid var(--line);
}

.monitor-mini-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.monitor-mini-grid div{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px;
}

.monitor-mini-grid span{
    display:block;
    color:var(--muted-light);
    font-size:10px;
    font-weight:900;
    margin-bottom:6px;
}

.monitor-mini-grid strong{
    color:var(--text);
    font-size:12px;
    font-weight:900;
    line-height:1.25;
}

.monitor-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
}

.monitor-foot span{
    color:var(--text-soft);
    font-size:12px;
    font-weight:900;
}

.user-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.minimal-login-page{
    min-height:100vh;
    background:var(--primary);
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    padding:24px;
}

.minimal-login-page:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 15% 90%,rgba(255,255,255,.08) 0 18%,transparent 18.5%),
        radial-gradient(circle at 78% 12%,rgba(255,255,255,.06) 0 22%,transparent 22.5%);
}

.login-blob{
    position:absolute;
    border-radius:45% 55% 60% 40%;
    background:rgba(20,45,130,.22);
    animation:floatBlob 8s var(--ease) infinite alternate;
}

.blob-one{
    width:650px;
    height:430px;
    top:100px;
    right:150px;
    transform:rotate(-7deg);
}

.blob-two{
    width:390px;
    height:330px;
    left:-100px;
    bottom:-30px;
    transform:rotate(18deg);
}

.blob-three{
    width:360px;
    height:300px;
    right:-90px;
    bottom:40px;
    transform:rotate(-20deg);
}

.minimal-login-card{
    width:min(360px,100%);
    position:relative;
    z-index:2;
    display:grid;
    justify-items:center;
    gap:18px;
}

.minimal-login-brand{
    text-align:center;
    margin-bottom:10px;
}

.minimal-login-brand h1{
    color:#ffffff;
    font-size:38px;
    font-weight:900;
    letter-spacing:-.055em;
    margin-bottom:4px;
}

.minimal-login-brand p{
    color:rgba(255,255,255,.76);
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
}

.minimal-login-form{
    width:100%;
    display:grid;
    gap:16px;
}

.minimal-input{
    height:44px;
    width:100%;
    border:1px solid rgba(255,255,255,.58);
    border-radius:8px;
    background:rgba(255,255,255,.04);
    display:grid;
    grid-template-columns:42px 1fr;
    align-items:center;
    color:#ffffff;
    transition:background .2s var(--ease), border-color .2s var(--ease);
}

.minimal-input:focus-within{
    background:rgba(255,255,255,.08);
    border-color:#ffffff;
}

.minimal-input span{
    display:grid;
    place-items:center;
    color:rgba(255,255,255,.85);
    font-size:17px;
    font-weight:800;
}

.minimal-input input{
    width:100%;
    height:100%;
    border:0;
    outline:0;
    background:transparent;
    color:#ffffff;
    font-size:13px;
    font-weight:700;
    letter-spacing:.04em;
}

.minimal-input input::placeholder{
    color:rgba(255,255,255,.6);
}

.minimal-login-btn{
    width:100%;
    height:44px;
    background:#ffffff;
    color:var(--primary);
    border-radius:8px;
    font-size:13px;
    font-weight:900;
    letter-spacing:.04em;
    box-shadow:0 10px 18px rgba(20,35,90,.16);
    cursor:pointer;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}

.minimal-login-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 24px rgba(20,35,90,.22);
}

.forgot-link{
    color:rgba(255,255,255,.82);
    font-size:13px;
    font-weight:600;
    margin-top:-4px;
}

.integration-panel{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
}

.integration-panel span{
    display:block;
    color:var(--muted-light);
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.08em;
    margin-bottom:7px;
}

.integration-panel h3{
    font-size:22px;
    font-weight:900;
    letter-spacing:-.04em;
    color:var(--text);
    margin-bottom:6px;
}

.integration-panel p{
    color:var(--text-soft);
    font-size:13px;
    line-height:1.5;
    font-weight:700;
}

.rule-basis-list{
    display:grid;
    gap:10px;
}

.rule-basis-list.compact{
    margin-top:12px;
}

.rule-basis-card{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:16px;
    padding:13px;
    display:grid;
    gap:5px;
}

.rule-basis-card strong{
    color:var(--text);
    font-size:12.5px;
    font-weight:900;
}

.rule-basis-card span{
    color:var(--primary);
    font-size:11.5px;
    font-weight:900;
}

.rule-basis-card p{
    color:var(--text-soft);
    font-size:12px;
    line-height:1.45;
    font-weight:700;
}

.task-detail-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:12px;
}

.task-detail-grid div{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:11px;
}

.task-detail-grid span{
    display:block;
    color:var(--muted-light);
    font-size:10px;
    font-weight:900;
    margin-bottom:6px;
}

.task-detail-grid strong{
    display:block;
    color:var(--text);
    font-size:12.5px;
    font-weight:900;
    line-height:1.25;
}

.task-feasibility-note{
    margin-top:10px;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:15px;
    padding:11px 12px;
    color:var(--text-soft);
    font-size:12.5px;
    line-height:1.45;
    font-weight:700;
}

.rule-details{
    margin-top:10px;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px;
}

.rule-details summary{
    cursor:pointer;
    color:var(--primary);
    font-size:12px;
    font-weight:900;
    list-style:none;
}

.rule-details summary::-webkit-details-marker{
    display:none;
}

.validation-scenario-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.validation-scenario-card{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    display:grid;
    gap:12px;
}

.validation-scenario-top{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
}

.validation-scenario-top span{
    display:block;
    color:var(--muted-light);
    font-size:10.5px;
    font-weight:900;
    margin-bottom:6px;
}

.validation-scenario-top h3{
    color:var(--text);
    font-size:17px;
    font-weight:900;
}

@keyframes fadeSlide{
    from{
        opacity:0;
        transform:translateY(8px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

@keyframes popIn{
    from{
        opacity:0;
        transform:translateY(-6px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes modalUp{
    from{
        opacity:0;
        transform:translateY(16px) scale(.98);
    }
    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@keyframes pageEnter{
    from{
        opacity:0;
        transform:translateY(14px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes floatBlob{
    from{
        transform:translate3d(0,0,0) rotate(-7deg);
    }
    to{
        transform:translate3d(18px,-14px,0) rotate(2deg);
    }
}

.page-enter,
.is-visible{
    animation:pageEnter .45s var(--ease) both;
}

@media(max-width:1400px){
    .weekly-calendar-grid{
        grid-template-columns:repeat(7,minmax(180px,1fr));
    }

    .monitoring-grid,
    .user-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:1200px){
    .app{
        grid-template-columns:92px minmax(0,1fr);
        gap:18px;
    }

    .sidebar{
        align-items:center;
        padding:20px 12px;
    }

    .logo span,
    .menu-title,
    .nav-item span:last-child,
    .sidebar-bottom{
        display:none;
    }

    .nav-item{
        justify-content:center;
        width:46px;
        height:46px;
        padding:0;
    }

    .student-overview-card,
    .dashboard-focus-grid,
    .activity-overview-grid,
    .schedule-layout{
        grid-template-columns:1fr;
    }

    .simple-summary-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .routine-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .mini-calendar{
        grid-template-columns:repeat(4,minmax(150px,1fr));
    }

    .weekly-calendar-grid{
        grid-template-columns:repeat(4,minmax(190px,1fr));
    }

    .weekly-unscheduled-list{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .focus-simplified-card{
        grid-template-columns:1fr;
    }

    .task-control-panel form{
        justify-content:flex-start;
    }

    .month-calendar-grid{
        grid-template-columns:repeat(4,minmax(130px,1fr));
    }
}

@media(max-width:980px){
    .language-mode-grid{
        grid-template-columns:1fr;
    }

    .language-hero h2{
        font-size:26px;
    }
}

@media(max-width:860px){
    body{
        background:#f6f8fc;
    }

    .app{
        grid-template-columns:1fr;
        padding:14px;
    }

    .sidebar{
        position:static;
        width:100%;
        height:auto;
        display:block;
        padding:12px;
        border-radius:22px;
    }

    .sidebar .logo,
    .sidebar .menu-title,
    .sidebar .sidebar-bottom{
        display:none;
    }

    .sidebar .nav-list{
        display:flex;
        flex-direction:row;
        overflow-x:auto;
        gap:8px;
        padding-bottom:2px;
    }

    .sidebar .nav-item{
        width:auto;
        min-width:max-content;
        height:40px;
        padding:0 12px;
    }

    .sidebar .nav-item span:last-child{
        display:inline;
        font-size:12px;
    }

    .topbar{
        grid-template-columns:1fr;
        height:auto;
        align-items:start;
    }

    .date{
        width:max-content;
    }

    .forms,
    .compact-form,
    .schedule-form,
    .task-simple-form,
    .load-meter-top,
    .mini-stat-list,
    .modal-grid,
    .monitoring-grid,
    .user-grid{
        grid-template-columns:1fr;
    }

    .clean-panel-head,
    .section-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .schedule-hero,
    .student-overview-card,
    .task-command-card{
        align-items:flex-start;
        flex-direction:column;
    }

    .student-overview-card{
        display:flex;
    }

    .schedule-hero h2,
    .student-overview-main h2,
    .task-command-card h2{
        font-size:27px;
    }

    .student-overview-status{
        width:100%;
    }

    .mini-calendar{
        grid-template-columns:repeat(2,minmax(150px,1fr));
    }

    .weekly-calendar-grid{
        grid-template-columns:repeat(2,minmax(190px,1fr));
    }

    .weekly-unscheduled-list{
        grid-template-columns:1fr;
    }

    .month-calendar-grid{
        grid-template-columns:repeat(2,minmax(130px,1fr));
    }

    .task-board-main,
    .compact-task-item,
    .activity-task-item,
    .record-history-top{
        flex-direction:column;
        align-items:flex-start;
    }

    .task-command-actions,
    .task-command-actions .btn,
    .task-control,
    .task-control-panel form{
        width:100%;
    }

    .task-control-links{
        justify-content:flex-start;
    }

    table,
    .table{
        min-width:680px;
    }

    .card:has(table),
    .clean-panel:has(table){
        overflow-x:auto;
    }
}

@media(max-width:720px){
    h1{
        font-size:24px;
    }

    .student-overview-main h2,
    .task-command-card h2{
        font-size:25px;
    }

    .simple-summary-grid,
    .routine-grid,
    .record-score-row,
    .monitor-mini-grid{
        grid-template-columns:1fr;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        padding:22px;
    }
}

@media(max-width:560px){
    .minimal-login-page{
        padding:20px;
    }

    .minimal-login-card{
        width:100%;
        max-width:330px;
    }

    .minimal-login-brand h1{
        font-size:32px;
    }

    .blob-one{
        width:480px;
        height:330px;
        top:80px;
        right:-180px;
    }

    .blob-two{
        width:330px;
        height:280px;
    }
}

@media(max-width:520px){
    .app{
        padding:10px;
        gap:12px;
    }

    .main{
        gap:14px;
    }

    .button-row{
        display:grid;
        width:100%;
    }

    .button-row .btn,
    .button-row form,
    .button-row form .btn{
        width:100%;
    }

    .card,
    .clean-panel,
    .weekly-calendar-panel,
    .monitoring-board,
    .profile-card{
        padding:16px;
        border-radius:22px;
    }

    .mini-calendar,
    .weekly-calendar-grid,
    .month-calendar-grid{
        grid-template-columns:1fr;
    }

    .weekly-day-card{
        min-height:auto;
    }

    .schedule-hero-stats,
    .schedule-hero-stats div{
        width:100%;
    }

    .topbar p{
        font-size:12px;
    }

    .simple-summary-card,
    .routine-card{
        padding:15px;
    }

    .focus-simplified-card,
    .task-board-item,
    .activity-panel,
    .monitor-card{
        padding:14px;
        border-radius:20px;
    }

    .monitor-status-row{
        padding:8px;
    }

    .modal-shell{
        padding:10px;
    }

    .modal-card{
        border-radius:20px;
    }

    .modal-head,
    .modal-body{
        padding:16px;
    }
}

@media(max-width:860px){
    .integration-panel{
        grid-template-columns:1fr;
    }

    .validation-scenario-grid{
        grid-template-columns:1fr;
    }

    .task-detail-grid{
        grid-template-columns:1fr;
    }
}

@media(prefers-reduced-motion:reduce){
    *,
    *:before,
    *:after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.001ms !important;
    }
}

.preload-screen{
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    background:
        radial-gradient(circle at 18% 82%,rgba(255,255,255,.08) 0 18%,transparent 18.5%),
        radial-gradient(circle at 82% 14%,rgba(255,255,255,.06) 0 22%,transparent 22.5%),
        linear-gradient(135deg,var(--primary),var(--primary-dark));
    transition:opacity .35s var(--ease), visibility .35s var(--ease);
}

.preload-screen.loaded{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.preload-hero{
    width:min(680px,92vw);
    min-height:440px;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:22px;
    text-align:center;
    animation:preloadUp .45s var(--ease) both;
}

.preload-image-wrap{
    width:min(380px,74vw);
    height:min(380px,74vw);
    display:grid;
    place-items:center;
    border-radius:42px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 30px 76px rgba(10,24,80,.24);
    overflow:hidden;
}

.preload-image-wrap img{
    width:100%;
    height:100%;
    object-fit:contain;
    padding:28px;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.16));
}

.preload-hero h1{
    color:#ffffff;
    font-size:clamp(44px,8vw,84px);
    font-weight:900;
    letter-spacing:-.075em;
    line-height:.95;
    text-shadow:0 18px 38px rgba(10,24,80,.22);
}

.preload-line{
    width:min(280px,60vw);
    height:6px;
    border-radius:999px;
    background:rgba(255,255,255,.18);
    overflow:hidden;
}

.preload-line span{
    display:block;
    width:45%;
    height:100%;
    border-radius:999px;
    background:#ffffff;
    animation:preloadMove 1.05s var(--ease) infinite;
}

body.preloading{
    overflow:hidden;
}

@keyframes preloadMove{
    0%{
        transform:translateX(-120%);
    }

    100%{
        transform:translateX(240%);
    }
}

@keyframes preloadUp{
    from{
        opacity:0;
        transform:translateY(14px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

@media(max-width:560px){
    .preload-hero{
        min-height:360px;
        gap:18px;
    }

    .preload-image-wrap{
        width:min(280px,76vw);
        height:min(280px,76vw);
        border-radius:30px;
    }

    .preload-image-wrap img{
        padding:22px;
    }
}
.task-page{
    gap:20px;
}

.task-workload-overview{
    display:grid;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);
    gap:18px;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    color:#ffffff;
    border-radius:30px;
    padding:24px;
    box-shadow:0 18px 42px rgba(31,54,120,.105);
    position:relative;
    overflow:hidden;
}

.task-workload-overview:after{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    right:-130px;
    top:-150px;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.task-workload-main{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:minmax(0,1fr) 120px;
    gap:14px;
    align-items:end;
    min-height:150px;
}

.task-workload-main span{
    display:block;
    color:rgba(255,255,255,.72);
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.14em;
    margin-bottom:10px;
    text-transform:uppercase;
}

.task-workload-main h2{
    color:#ffffff;
    font-size:42px;
    font-weight:900;
    letter-spacing:-.06em;
    line-height:.95;
}

.task-workload-ratio{
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    border-radius:22px;
    padding:16px;
    display:grid;
    gap:6px;
    backdrop-filter:blur(10px);
}

.task-workload-ratio small{
    color:rgba(255,255,255,.7);
    font-size:11px;
    font-weight:900;
}

.task-workload-ratio strong{
    color:#ffffff;
    font-size:26px;
    font-weight:900;
}

.task-workload-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
}

.task-workload-grid div{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15);
    border-radius:18px;
    padding:14px;
    backdrop-filter:blur(10px);
}

.task-workload-grid span{
    display:block;
    color:rgba(255,255,255,.68);
    font-size:10px;
    font-weight:900;
    margin-bottom:8px;
}

.task-workload-grid strong{
    display:block;
    color:#ffffff;
    font-size:21px;
    font-weight:900;
    line-height:1;
}

.task-capacity-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
}

.task-capacity-grid div{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
}

.task-capacity-grid span{
    display:block;
    color:var(--muted-light);
    font-size:10.5px;
    font-weight:900;
    margin-bottom:8px;
}

.task-capacity-grid strong{
    display:block;
    color:var(--primary);
    font-size:24px;
    font-weight:900;
}

.task-focus-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.task-focus-card{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    display:grid;
    gap:14px;
    box-shadow:var(--shadow-soft);
    position:relative;
    overflow:hidden;
}

.task-focus-card:before{
    content:"";
    position:absolute;
    left:0;
    top:16px;
    bottom:16px;
    width:4px;
    border-radius:999px;
    background:#c9d2df;
}

.task-focus-card.critical:before,
.task-focus-card.high:before{
    background:#d7c6a4;
}

.task-focus-card.medium:before{
    background:#d8d0bd;
}

.task-focus-card.low:before{
    background:#d5dee7;
}

.task-focus-main{
    padding-left:4px;
}

.task-focus-main span{
    display:inline-flex;
    width:max-content;
    padding:5px 9px;
    border-radius:999px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    color:var(--text-soft);
    font-size:10px;
    font-weight:900;
    margin-bottom:8px;
}

.task-focus-main h3{
    color:var(--text);
    font-size:16px;
    font-weight:900;
}

.task-focus-main p{
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    margin-top:5px;
}

.task-focus-note{
    display:grid;
    gap:8px;
}

.task-focus-note div{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    color:var(--text-soft);
    font-size:12px;
    font-weight:700;
    line-height:1.45;
}

.task-inline-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.task-adjust-panel{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:20px;
    padding:16px;
}

.task-adjust-choice-grid{
    display:grid;
    gap:10px;
}

.task-adjust-choice{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:13px;
}

.task-adjust-choice strong{
    display:block;
    color:var(--text);
    font-size:13px;
    font-weight:900;
}

.task-adjust-choice span{
    display:block;
    color:var(--muted);
    font-size:11.5px;
    font-weight:700;
    margin-top:4px;
}

.task-adjust-choice > div:last-child{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.routine-collapse{
    padding:0;
    overflow:hidden;
}

.routine-collapse summary{
    list-style:none;
    cursor:pointer;
    padding:20px 22px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    background:linear-gradient(180deg,#ffffff 0%,#f8fafd 100%);
}

.routine-collapse summary::-webkit-details-marker{
    display:none;
}

.routine-collapse summary span{
    color:var(--text);
    font-size:20px;
    font-weight:900;
    letter-spacing:-.035em;
}

.routine-collapse summary strong{
    color:var(--primary);
    background:var(--primary-soft);
    border:1px solid var(--primary-line);
    border-radius:999px;
    padding:8px 12px;
    font-size:11px;
    font-weight:900;
}

.routine-collapse-body{
    padding:0 22px 22px;
    display:grid;
    gap:16px;
}

.task-filter-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.task-filter{
    min-height:36px;
    padding:8px 13px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid var(--line);
    color:var(--text-soft);
    cursor:pointer;
    font-size:11.5px;
    font-weight:900;
    transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}

.task-filter:hover{
    transform:translateY(-1px);
    border-color:var(--primary-line);
}

.task-filter.active{
    background:var(--primary);
    color:#ffffff;
    border-color:var(--primary);
}

.compact-task-board{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
}

.compact-task-card{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    display:grid;
    gap:14px;
    position:relative;
    overflow:hidden;
    box-shadow:var(--shadow-soft);
}

.compact-task-card:before{
    content:"";
    position:absolute;
    left:0;
    top:16px;
    bottom:16px;
    width:4px;
    border-radius:999px;
    background:#ccd4df;
}

.compact-task-card.critical:before,
.compact-task-card.high:before{
    background:#d7c6a4;
}

.compact-task-card.medium:before{
    background:#d8d0bd;
}

.compact-task-card.low:before{
    background:#d5dee7;
}

.compact-task-card.is-hidden{
    display:none;
}

.compact-task-main{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
}

.compact-task-main span{
    display:block;
    color:var(--muted);
    font-size:10.5px;
    font-weight:900;
    margin-bottom:7px;
}

.compact-task-main h3{
    color:var(--text);
    font-size:16px;
    font-weight:900;
    line-height:1.25;
}

.compact-task-badges{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:7px;
}

.compact-task-meta{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.compact-task-meta div{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px;
}

.compact-task-meta span{
    display:block;
    color:var(--muted-light);
    font-size:10px;
    font-weight:900;
    margin-bottom:6px;
}

.compact-task-meta strong{
    display:block;
    color:var(--text);
    font-size:12.5px;
    font-weight:900;
}

.compact-task-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.compact-task-actions form{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.preload-image-wrap{
    display:none;
}

.preload-hero{
    width:min(900px,92vw);
    min-height:360px;
    display:grid;
    justify-items:center;
    align-content:center;
    gap:30px;
    text-align:center;
}

.preload-hero h1{
    color:#ffffff;
    font-size:clamp(72px,13vw,160px);
    font-weight:900;
    letter-spacing:-.09em;
    line-height:.82;
    text-shadow:0 26px 60px rgba(10,24,80,.28);
}

.preload-hero h1:after{
    content:"Grade Evaluation Decision Support";
    display:block;
    margin-top:22px;
    color:rgba(255,255,255,.72);
    font-size:clamp(12px,1.6vw,18px);
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.preload-line{
    width:min(360px,64vw);
    height:7px;
}

@media(max-width:1200px){
    .task-workload-overview,
    .compact-task-board,
    .task-focus-grid{
        grid-template-columns:1fr;
    }

    .task-workload-grid,
    .task-capacity-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:720px){
    .task-workload-main,
    .task-workload-grid,
    .task-capacity-grid,
    .compact-task-meta{
        grid-template-columns:1fr;
    }

    .task-adjust-choice,
    .compact-task-main{
        grid-template-columns:1fr;
    }

    .task-workload-main h2{
        font-size:34px;
    }

    .preload-hero h1{
        font-size:clamp(56px,17vw,96px);
    }
}
body.modal-open{
    overflow:hidden;
}

.btn.is-loading{
    opacity:.72;
    pointer-events:none;
}

.validation-page{
    gap:20px;
}

.validation-compact-summary{
    display:grid;
    grid-template-columns:minmax(240px,.45fr) minmax(0,1fr);
    gap:16px;
    align-items:stretch;
    background:linear-gradient(135deg,var(--primary),var(--primary-dark));
    border-radius:28px;
    padding:18px;
    color:#ffffff;
    box-shadow:0 18px 42px rgba(31,54,120,.105);
    overflow:hidden;
    position:relative;
}

.validation-compact-summary:after{
    content:"";
    position:absolute;
    width:240px;
    height:240px;
    right:-110px;
    top:-120px;
    background:rgba(255,255,255,.07);
    border-radius:999px;
}

.validation-summary-title{
    position:relative;
    z-index:1;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    gap:14px;
    min-height:110px;
}

.validation-summary-title h2{
    color:#ffffff;
    font-size:26px;
    font-weight:900;
    letter-spacing:-.045em;
}

.validation-summary-title .status{
    width:max-content;
    background:rgba(255,255,255,.14);
    color:#ffffff;
    border-color:rgba(255,255,255,.22);
}

.validation-summary-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
}

.validation-summary-grid div{
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15);
    border-radius:18px;
    padding:14px;
    backdrop-filter:blur(10px);
}

.validation-summary-grid span{
    display:block;
    color:rgba(255,255,255,.68);
    font-size:10px;
    font-weight:900;
    margin-bottom:8px;
}

.validation-summary-grid strong{
    color:#ffffff;
    font-size:22px;
    font-weight:900;
}

.validation-search-panel{
    padding:18px;
}

.validation-filter-form{
    display:grid;
    gap:12px;
}

.validation-search-row{
    display:grid;
    grid-template-columns:minmax(260px,1.35fr) repeat(3,minmax(150px,.55fr)) auto;
    gap:10px;
    align-items:end;
}

.validation-search-field input{
    min-height:44px;
}

.validation-filter-actions{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-end;
}

.validation-advanced-filter{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    padding:0;
    overflow:hidden;
}

.validation-advanced-filter summary{
    list-style:none;
    cursor:pointer;
    padding:13px 15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    background:#ffffff;
}

.validation-advanced-filter summary::-webkit-details-marker{
    display:none;
}

.validation-advanced-filter summary span{
    color:var(--text);
    font-size:13px;
    font-weight:900;
}

.validation-advanced-filter summary strong{
    color:var(--primary);
    background:var(--primary-soft);
    border:1px solid var(--primary-line);
    border-radius:999px;
    padding:6px 10px;
    font-size:10.5px;
    font-weight:900;
}

.validation-advanced-filter .forms{
    padding:14px;
    grid-template-columns:repeat(4,minmax(0,1fr));
}

@media(max-width:1400px){
    .validation-search-row{
        grid-template-columns:minmax(260px,1fr) repeat(2,minmax(150px,.5fr)) auto;
    }
}

@media(max-width:1200px){
    .validation-compact-summary{
        grid-template-columns:1fr;
    }

    .validation-summary-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .validation-search-row{
        grid-template-columns:1fr 1fr;
    }

    .validation-filter-actions{
        justify-content:flex-start;
    }
}

@media(max-width:980px){
    .validation-advanced-filter .forms{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:860px){
    .validation-search-row,
    .validation-advanced-filter .forms{
        grid-template-columns:1fr;
    }

    .validation-summary-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:520px){
    .validation-filter-actions{
        display:grid;
        width:100%;
    }

    .validation-filter-actions .btn{
        width:100%;
    }

    .validation-compact-summary{
        padding:22px;
    }
}
.schedule-page .monitoring-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.schedule-page .monitor-card{
    background:linear-gradient(180deg,#ffffff 0%,#fafcff 100%);
    border:1px solid var(--line);
    box-shadow:var(--shadow-soft);
}

.schedule-page .monitor-card-top{
    align-items:flex-start;
}

.schedule-page .monitor-card-top .status{
    margin-top:2px;
}

.schedule-page .monitor-mini-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.schedule-page .monitor-mini-grid div{
    min-height:76px;
}

.schedule-page .monitor-mini-grid strong{
    font-size:15px;
}

.validation-page .modal-card.large,
.monitor-page .modal-card.large{
    max-height:88vh;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.validation-page .modal-body,
.monitor-page .modal-body{
    overflow-y:auto;
}

.validation-page .modal-body.forms,
.monitor-page .modal-body.forms{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.validation-page .modal-body.forms .full,
.monitor-page .modal-body.forms .full{
    grid-column:1/-1;
}

.validation-page .monitor-card,
.monitor-page .monitor-card{
    background:linear-gradient(180deg,#ffffff 0%,#fafcff 100%);
}

.validation-page .monitor-mini-grid,
.monitor-page .monitor-mini-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.validation-page .record-guidance-strip,
.monitor-page .record-guidance-strip,
.schedule-page .record-guidance-strip{
    margin-top:2px;
}

.validation-page .popup-menu button,
.monitor-page .popup-menu button,
.validation-page .popup-menu a,
.monitor-page .popup-menu a{
    min-height:38px;
}

.month-task-dot em{
    display:block;
    color:var(--text-soft);
    font-style:normal;
    font-size:10.5px;
    font-weight:700;
    line-height:1.25;
}

.calendar-item small{
    display:block;
    color:var(--muted);
    font-size:10.5px;
    font-weight:800;
    margin-top:4px;
}

.calendar-empty{
    min-height:74px;
    display:grid;
    place-items:center;
    text-align:center;
    color:var(--muted-light);
    font-size:11px;
    font-weight:900;
    border:1px dashed var(--line);
    border-radius:14px;
    background:#ffffff;
}

.mini-calendar{
    display:grid;
    grid-template-columns:repeat(7,minmax(140px,1fr));
    gap:12px;
    overflow-x:auto;
    padding-bottom:8px;
}

.calendar-day{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    overflow:hidden;
    min-height:220px;
}

.calendar-day-head{
    background:#ffffff;
    border-bottom:1px solid var(--line);
    padding:13px;
    display:flex;
    justify-content:space-between;
    gap:10px;
    align-items:center;
}

.calendar-day-head strong{
    color:var(--primary);
    font-size:17px;
    font-weight:900;
}

.calendar-day-head span{
    color:var(--muted);
    font-size:10.5px;
    font-weight:900;
}

.calendar-items{
    padding:12px;
    display:grid;
    gap:9px;
}

.calendar-item{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:11px;
    display:grid;
    gap:4px;
}

.calendar-item strong{
    color:var(--text);
    font-size:12.5px;
    font-weight:900;
}

.calendar-item span{
    color:var(--primary);
    font-size:11px;
    font-weight:800;
}

@media(max-width:1200px){
    .schedule-page .monitoring-grid,
    .validation-page .monitoring-grid,
    .monitor-page .monitoring-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .mini-calendar{
        grid-template-columns:repeat(4,minmax(150px,1fr));
    }
}

@media(max-width:860px){
    .schedule-page .monitoring-grid,
    .validation-page .monitoring-grid,
    .monitor-page .monitoring-grid,
    .validation-page .modal-body.forms,
    .monitor-page .modal-body.forms{
        grid-template-columns:1fr;
    }

    .schedule-page .monitor-mini-grid,
    .validation-page .monitor-mini-grid,
    .monitor-page .monitor-mini-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .mini-calendar{
        grid-template-columns:repeat(2,minmax(150px,1fr));
    }
}

@media(max-width:560px){
    .schedule-page .monitor-mini-grid,
    .validation-page .monitor-mini-grid,
    .monitor-page .monitor-mini-grid,
    .mini-calendar{
        grid-template-columns:1fr;
    }
}

.group-summary-metrics{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin-top:10px;
}

.group-summary-metrics div{
    background:#ffffff;
    border:1px solid var(--line);
    border-radius:14px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.group-summary-metrics span{
    color:var(--muted);
    font-size:11px;
    font-weight:800;
    margin:0;
}

.group-summary-metrics strong{
    color:var(--text);
    font-size:14px;
    font-weight:900;
}

#summary .compact-task-item{
    align-items:stretch;
    display:grid;
    gap:8px;
}

#summary .compact-task-item > div:first-child{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:10px;
}

.compact-record-section{
    padding:18px;
}

.compact-record-section .clean-panel-head{
    margin-bottom:14px;
}

.compact-record-card{
    padding:16px;
    gap:12px;
    border-radius:20px;
}

.compact-record-card .record-history-top span{
    margin-bottom:6px;
}

.compact-record-card .record-history-top h3{
    font-size:15px;
}

.compact-record-card .record-history-top p{
    font-size:11.5px;
}

.compact-record-card .record-score-row{
    gap:8px;
}

.compact-record-card .record-score-row div{
    border-radius:14px;
    padding:10px 11px;
}

.compact-record-card .record-score-row small{
    margin-bottom:5px;
}

.compact-record-card .record-score-row strong{
    font-size:16px;
}

.compact-record-card .meta-row{
    padding:8px;
    gap:6px;
}

.compact-guidance{
    gap:8px;
}

.compact-guidance div{
    padding:10px 11px 10px 13px;
    font-size:11.5px;
    border-radius:14px;
}

.is-hidden{
    display:none !important;
}

@media(max-width:680px){
    .group-summary-metrics{
        grid-template-columns:1fr;
    }

    #summary .compact-task-item > div:first-child{
        display:grid;
        gap:4px;
    }
}
.is-hidden{
    display:none!important;
}
[data-role-field].is-hidden,
.competency-field.is-hidden,
.is-hidden {
    display: none !important;
}

[data-role-form] .field input[readonly] {
    background: #f5f7fb;
    color: #667085;
    cursor: not-allowed;
}

[data-role-form] .compact-empty.full {
    grid-column: 1 / -1;
    border: 1px dashed #d8deea;
    background: #f8fafc;
    border-radius: 16px;
    padding: 18px;
}

.user-grid .monitor-mini-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.user-grid .monitor-card {
    min-height: auto;
}

.record-history-card.warning,
.record-history-card.danger,
.record-history-card.good {
    border-color: #e2e8f0;
}

.record-history-card .status.warning,
.record-history-card .status.danger,
.record-history-card .status.good {
    white-space: nowrap;
}

.record-guidance-strip.compact-guidance {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.record-guidance-strip.compact-guidance div {
    padding: 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e6ebf3;
}

.compact-task-card.focus-task {
    border-color: #b9c8ff;
    background: linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%);
}

.compact-focus-note {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.compact-focus-note div {
    padding: 10px 12px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #e6ebf3;
    color: #344054;
    font-size: 13px;
    line-height: 1.45;
}

.compact-task-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
}

.compact-task-actions form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.compact-task-actions .btn {
    min-height: 34px;
}

.compact-task-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
}

.task-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.task-filter {
    border: 1px solid #e3e8f2;
    background: #ffffff;
    color: #344054;
    border-radius: 999px;
    padding: 9px 13px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}

.task-filter.active {
    background: #2f57d6;
    border-color: #2f57d6;
    color: #ffffff;
}

.compact-task-board .compact-empty {
    grid-column: 1 / -1;
}

.validation-compact-summary,
.validation-search-panel {
    opacity: 0;
    transform: translateY(10px);
}

.validation-compact-summary.is-visible,
.validation-search-panel.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .35s ease, transform .35s ease;
}

.validation-summary-grid {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}

@media (max-width: 900px) {
    .compact-task-actions,
    .compact-task-actions form,
    .task-filter-tabs {
        width: 100%;
    }

    .compact-task-actions .btn,
    .compact-task-actions form .btn,
    .task-filter-tabs .btn,
    .task-filter {
        flex: 1 1 auto;
        justify-content: center;
    }

    .compact-task-badges {
        justify-content: flex-start;
    }
}

.theme-toggle{
    width:100%;
    border:0;
    background:transparent;
    font:inherit;
    cursor:pointer;
    text-align:left;
}

html[data-theme="dark"] body{
    background:radial-gradient(circle at top left,rgba(59,130,246,.08),transparent 34%),linear-gradient(180deg,var(--bg) 0%,#0b1120 100%) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .app,
html[data-theme="dark"] .main,
html[data-theme="dark"] .minimal-login-page{
    background:transparent !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .sidebar{
    background:rgba(15,23,42,.92) !important;
    border-color:var(--line-soft) !important;
    box-shadow:var(--shadow) !important;
}

html[data-theme="dark"] .logo,
html[data-theme="dark"] .logo span,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong{
    color:var(--text) !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] label,
html[data-theme="dark"] span{
    color:inherit;
}

html[data-theme="dark"] .menu-title{
    color:var(--muted-light) !important;
}

html[data-theme="dark"] .nav-item{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .nav-item:hover,
html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .theme-toggle:hover{
    background:var(--primary-soft) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .nav-item.active .nav-symbol,
html[data-theme="dark"] .nav-symbol{
    background:var(--surface-soft) !important;
    color:var(--text-soft) !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .logout{
    color:#fecaca !important;
}

html[data-theme="dark"] .topbar{
    background:rgba(17,24,39,.92) !important;
    border-color:var(--line-soft) !important;
    color:var(--text) !important;
    box-shadow:var(--shadow-soft) !important;
}

html[data-theme="dark"] .topbar h1{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .topbar p{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .date,
html[data-theme="dark"] .topbar .date{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .lesson-table,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .clean-panel,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .weekly-calendar-panel,
html[data-theme="dark"] .monitoring-board,
html[data-theme="dark"] .schedule-form-card,
html[data-theme="dark"] .schedule-side-card,
html[data-theme="dark"] .activity-overview-card,
html[data-theme="dark"] .activity-panel,
html[data-theme="dark"] .flags-panel,
html[data-theme="dark"] .tasks-panel,
html[data-theme="dark"] .validation-search-panel{
    background:rgba(17,24,39,.94) !important;
    border-color:var(--line-soft) !important;
    color:var(--text) !important;
    box-shadow:var(--shadow-soft) !important;
}

html[data-theme="dark"] .card:hover,
html[data-theme="dark"] .clean-panel:hover,
html[data-theme="dark"] .panel:hover{
    border-color:var(--line) !important;
    box-shadow:0 16px 36px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .card-head h2,
html[data-theme="dark"] .clean-panel-head h2,
html[data-theme="dark"] .panel-head h3,
html[data-theme="dark"] .profile-card h2,
html[data-theme="dark"] .activity-panel-head h3{
    color:var(--text) !important;
}

html[data-theme="dark"] .card-head p,
html[data-theme="dark"] .clean-panel-head p,
html[data-theme="dark"] .profile-card p,
html[data-theme="dark"] .activity-task-item span,
html[data-theme="dark"] .quick-action-card small,
html[data-theme="dark"] .compact-task-item span{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .field label,
html[data-theme="dark"] .field-active label{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
    background:var(--bg) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus{
    background:var(--surface-soft) !important;
    border-color:#60a5fa !important;
    box-shadow:0 0 0 4px rgba(59,130,246,.16) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:var(--muted) !important;
}

html[data-theme="dark"] .field input[readonly],
html[data-theme="dark"] [data-role-form] .field input[readonly]{
    background:var(--surface-muted) !important;
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-icon,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .task-control,
html[data-theme="dark"] .task-control.done,
html[data-theme="dark"] .task-control.mute,
html[data-theme="dark"] .task-control.link,
html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .task-filter,
html[data-theme="dark"] .dot-action{
    background:var(--surface-soft) !important;
    color:var(--text) !important;
    border-color:var(--line) !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .tab-button.active,
html[data-theme="dark"] .task-filter.active,
html[data-theme="dark"] .task-control.start{
    background:var(--primary) !important;
    color:#ffffff !important;
    border-color:var(--primary) !important;
}

html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .task-control.delete{
    background:var(--danger-bg) !important;
    color:var(--danger) !important;
    border-color:var(--danger-line) !important;
}

html[data-theme="dark"] .status,
html[data-theme="dark"] .flag-pill{
    background:var(--neutral-bg) !important;
    color:var(--text-soft) !important;
    border-color:var(--neutral-line) !important;
}

html[data-theme="dark"] .status.good,
html[data-theme="dark"] .flag-pill.good{
    background:var(--success-bg) !important;
    color:var(--success) !important;
    border-color:var(--success-line) !important;
}

html[data-theme="dark"] .status.warning,
html[data-theme="dark"] .flag-pill.warning{
    background:var(--warning-bg) !important;
    color:var(--warning) !important;
    border-color:var(--warning-line) !important;
}

html[data-theme="dark"] .status.danger,
html[data-theme="dark"] .flag-pill.danger{
    background:var(--danger-bg) !important;
    color:var(--danger) !important;
    border-color:var(--danger-line) !important;
}

html[data-theme="dark"] .error.show,
html[data-theme="dark"] .notice.danger{
    background:var(--danger-bg) !important;
    border-color:var(--danger-line) !important;
    color:var(--danger) !important;
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .compact-empty,
html[data-theme="dark"] .subtask-box,
html[data-theme="dark"] .rule-basis-card,
html[data-theme="dark"] .rule-details,
html[data-theme="dark"] .task-feasibility-note,
html[data-theme="dark"] .focus-simplified-advice,
html[data-theme="dark"] .task-detail-grid div,
html[data-theme="dark"] .modal-grid div,
html[data-theme="dark"] .validation-scenario-card,
html[data-theme="dark"] [data-role-form] .compact-empty.full{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .notice.warning{
    background:var(--warning-bg) !important;
    border-color:var(--warning-line) !important;
    color:var(--warning) !important;
}

html[data-theme="dark"] .notice.good{
    background:var(--success-bg) !important;
    border-color:var(--success-line) !important;
    color:var(--success) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table{
    background:var(--surface) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] th,
html[data-theme="dark"] .table th{
    background:var(--surface-muted) !important;
    color:var(--text-soft) !important;
    border-color:var(--line) !important;
}

html[data-theme="dark"] td,
html[data-theme="dark"] .table td{
    background:var(--surface) !important;
    color:var(--text) !important;
    border-color:var(--line-soft) !important;
}

html[data-theme="dark"] td small{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .row-active{
    background:var(--surface-soft) !important;
}

html[data-theme="dark"] .mini-avatar,
html[data-theme="dark"] .recommendation-icon,
html[data-theme="dark"] .quick-action-card span,
html[data-theme="dark"] .language-mark{
    background:var(--surface-muted) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .student-overview-card,
html[data-theme="dark"] .task-command-card,
html[data-theme="dark"] .schedule-hero,
html[data-theme="dark"] .language-hero{
    background:linear-gradient(135deg,#12204a 0%,#172554 100%) !important;
    border:1px solid rgba(96,165,250,.18) !important;
    color:#ffffff !important;
    box-shadow:var(--shadow) !important;
}

html[data-theme="dark"] .student-overview-main span,
html[data-theme="dark"] .task-command-card span,
html[data-theme="dark"] .schedule-hero span,
html[data-theme="dark"] .language-hero span,
html[data-theme="dark"] .student-overview-main p,
html[data-theme="dark"] .task-command-card p{
    color:#dbeafe !important;
}

html[data-theme="dark"] .student-overview-main h2,
html[data-theme="dark"] .task-command-card h2,
html[data-theme="dark"] .schedule-hero h2,
html[data-theme="dark"] .language-hero h2{
    color:#ffffff !important;
}

html[data-theme="dark"] .student-overview-status,
html[data-theme="dark"] .schedule-hero-stats div{
    background:rgba(30,41,59,.86) !important;
    border-color:var(--line) !important;
}

html[data-theme="dark"] .student-overview-status small,
html[data-theme="dark"] .student-overview-status strong,
html[data-theme="dark"] .schedule-hero-stats small,
html[data-theme="dark"] .schedule-hero-stats strong{
    color:#ffffff !important;
}

html[data-theme="dark"] .simple-summary-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .routine-card,
html[data-theme="dark"] .recommendation-card,
html[data-theme="dark"] .recommendation-card.primary,
html[data-theme="dark"] .activity-task-item,
html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] .compact-task-item,
html[data-theme="dark"] .focus-simplified-card,
html[data-theme="dark"] .task-board-item,
html[data-theme="dark"] .schedule-metric,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .weekly-day-card,
html[data-theme="dark"] .month-day-card,
html[data-theme="dark"] .weekly-unscheduled,
html[data-theme="dark"] .weekly-unscheduled-list div,
html[data-theme="dark"] .group-summary-metrics div,
html[data-theme="dark"] .record-history-card,
html[data-theme="dark"] .monitor-card,
html[data-theme="dark"] .monitor-card.good,
html[data-theme="dark"] .monitor-card.warning,
html[data-theme="dark"] .monitor-card.danger,
html[data-theme="dark"] .compact-task-card,
html[data-theme="dark"] .task-workload-overview,
html[data-theme="dark"] .language-mode-card,
html[data-theme="dark"] .language-mode-card.active{
    background:var(--surface) !important;
    border-color:var(--line-soft) !important;
    color:var(--text) !important;
    box-shadow:var(--shadow-soft) !important;
}

html[data-theme="dark"] .language-mode-card.active{
    background:var(--surface-soft) !important;
    border-color:var(--primary) !important;
}

html[data-theme="dark"] .language-mode-card h3,
html[data-theme="dark"] .language-mode-card strong{
    color:var(--text) !important;
}

html[data-theme="dark"] .language-mode-card p,
html[data-theme="dark"] .language-mode-card small,
html[data-theme="dark"] .language-mode-card span{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .simple-summary-card.good,
html[data-theme="dark"] .simple-summary-card.warning,
html[data-theme="dark"] .simple-summary-card.danger{
    background:var(--surface) !important;
}

html[data-theme="dark"] .simple-summary-card span,
html[data-theme="dark"] .metric-card span,
html[data-theme="dark"] .routine-card span,
html[data-theme="dark"] .load-meter-top span,
html[data-theme="dark"] .mini-stat-list span,
html[data-theme="dark"] .schedule-metric span,
html[data-theme="dark"] .monitor-mini-grid span,
html[data-theme="dark"] .record-score-row small,
html[data-theme="dark"] .task-workload-grid span,
html[data-theme="dark"] .task-workload-main span,
html[data-theme="dark"] .task-workload-ratio small,
html[data-theme="dark"] .compact-task-meta span,
html[data-theme="dark"] .modal-grid span,
html[data-theme="dark"] .task-detail-grid span,
html[data-theme="dark"] .validation-scenario-top span{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .simple-summary-card strong,
html[data-theme="dark"] .metric-card strong,
html[data-theme="dark"] .routine-card strong,
html[data-theme="dark"] .load-meter-top strong,
html[data-theme="dark"] .mini-stat-list strong,
html[data-theme="dark"] .schedule-metric strong,
html[data-theme="dark"] .monitor-mini-grid strong,
html[data-theme="dark"] .record-score-row strong,
html[data-theme="dark"] .task-workload-grid strong,
html[data-theme="dark"] .task-workload-main h2,
html[data-theme="dark"] .task-workload-ratio strong,
html[data-theme="dark"] .compact-task-meta strong,
html[data-theme="dark"] .modal-grid strong,
html[data-theme="dark"] .task-detail-grid strong{
    color:var(--text) !important;
}

html[data-theme="dark"] .load-meter-top div,
html[data-theme="dark"] .mini-stat-list div,
html[data-theme="dark"] .task-workload-grid div,
html[data-theme="dark"] .task-workload-ratio,
html[data-theme="dark"] .monitor-mini-grid div,
html[data-theme="dark"] .record-score-row div,
html[data-theme="dark"] .compact-task-meta div,
html[data-theme="dark"] .task-capacity-grid div,
html[data-theme="dark"] .validation-summary-grid div{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .validation-compact-summary{
    background:linear-gradient(135deg,var(--primary) 0%,var(--primary-dark) 100%) !important;
    border-color:rgba(96,165,250,.25) !important;
    color:#ffffff !important;
}

html[data-theme="dark"] .validation-compact-summary h2,
html[data-theme="dark"] .validation-compact-summary span,
html[data-theme="dark"] .validation-compact-summary small,
html[data-theme="dark"] .validation-compact-summary strong{
    color:#ffffff !important;
}

html[data-theme="dark"] .validation-search-row,
html[data-theme="dark"] .validation-filter-form{
    color:var(--text) !important;
}

html[data-theme="dark"] .validation-advanced-filter{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .validation-advanced-filter summary{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .validation-advanced-filter summary span{
    color:var(--text) !important;
}

html[data-theme="dark"] .validation-advanced-filter summary strong{
    background:var(--surface-muted) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .load-meter{
    background:var(--surface-muted);
}

html[data-theme="dark"] .load-meter span{
    background:var(--primary);
}

html[data-theme="dark"] .load-meter-bottom,
html[data-theme="dark"] .load-meter-bottom span{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .calendar-day-head,
html[data-theme="dark"] .weekly-day-head,
html[data-theme="dark"] .month-calendar-head{
    background:var(--surface-muted) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .calendar-day-head strong,
html[data-theme="dark"] .weekly-day-head strong,
html[data-theme="dark"] .month-calendar-head strong,
html[data-theme="dark"] .month-day-card > span{
    color:var(--text) !important;
}

html[data-theme="dark"] .calendar-day-head span,
html[data-theme="dark"] .weekly-day-head span,
html[data-theme="dark"] .weekly-day-head small,
html[data-theme="dark"] .month-calendar-head span,
html[data-theme="dark"] .month-day-card > small{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .calendar-items,
html[data-theme="dark"] .weekly-day-body{
    background:transparent !important;
}

html[data-theme="dark"] .calendar-item,
html[data-theme="dark"] .weekly-block,
html[data-theme="dark"] .month-task-dot{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .calendar-item strong,
html[data-theme="dark"] .weekly-block strong,
html[data-theme="dark"] .month-task-dot strong{
    color:var(--text) !important;
}

html[data-theme="dark"] .calendar-item span,
html[data-theme="dark"] .weekly-block span,
html[data-theme="dark"] .study-block span{
    color:#93c5fd !important;
}

html[data-theme="dark"] .calendar-item small,
html[data-theme="dark"] .weekly-block small,
html[data-theme="dark"] .weekly-block p,
html[data-theme="dark"] .month-task-dot em{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .calendar-empty,
html[data-theme="dark"] .weekly-empty{
    background:var(--bg) !important;
    border-color:var(--line) !important;
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .weekly-calendar-grid::-webkit-scrollbar-track,
html[data-theme="dark"] .mini-calendar::-webkit-scrollbar-track{
    background:var(--surface-muted);
}

html[data-theme="dark"] .weekly-calendar-grid::-webkit-scrollbar-thumb,
html[data-theme="dark"] .mini-calendar::-webkit-scrollbar-thumb{
    background:var(--line);
}

html[data-theme="dark"] .record-history-card{
    background:linear-gradient(180deg,var(--surface) 0%,var(--surface-soft) 100%) !important;
}

html[data-theme="dark"] .record-history-top span,
html[data-theme="dark"] .focus-simplified-main span,
html[data-theme="dark"] .task-board-main span,
html[data-theme="dark"] .monitor-card-top span{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .record-history-top h3,
html[data-theme="dark"] .focus-simplified-main h3,
html[data-theme="dark"] .task-board-main h3,
html[data-theme="dark"] .monitor-card-top h3,
html[data-theme="dark"] .activity-task-item strong,
html[data-theme="dark"] .quick-action-card strong,
html[data-theme="dark"] .compact-task-item strong,
html[data-theme="dark"] .rule-basis-card strong,
html[data-theme="dark"] .validation-scenario-top h3{
    color:var(--text) !important;
}

html[data-theme="dark"] .record-history-top p,
html[data-theme="dark"] .focus-simplified-main p,
html[data-theme="dark"] .task-board-main p,
html[data-theme="dark"] .monitor-card-top p,
html[data-theme="dark"] .rule-basis-card p,
html[data-theme="dark"] .modal-body p{
    color:var(--text-soft) !important;
}

html[data-theme="dark"] .meta-row,
html[data-theme="dark"] .monitor-status-row{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
}

html[data-theme="dark"] .record-guidance-strip div,
html[data-theme="dark"] .task-focus-note div,
html[data-theme="dark"] .compact-focus-note div{
    background:var(--surface-soft) !important;
    border-color:var(--line) !important;
    color:var(--text-soft) !important;
    box-shadow:none;
}

html[data-theme="dark"] .record-guidance-strip div strong{
    color:var(--text) !important;
}

html[data-theme="dark"] .compact-task-card.focus-task{
    background:#12204a !important;
    border-color:var(--primary) !important;
}

html[data-theme="dark"] .task-workload-main{
    background:transparent !important;
}

html[data-theme="dark"] details.routine-collapse,
html[data-theme="dark"] details.task-entry-collapse{
    background:var(--surface) !important;
    border-color:var(--line-soft) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] details.routine-collapse > summary,
html[data-theme="dark"] details.task-entry-collapse > summary{
    background:var(--surface-soft) !important;
    background-image:none !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] details.routine-collapse > summary > span,
html[data-theme="dark"] details.task-entry-collapse > summary > span{
    background:transparent !important;
    color:var(--text) !important;
}

html[data-theme="dark"] details.routine-collapse > summary > strong,
html[data-theme="dark"] details.task-entry-collapse > summary > strong{
    background:var(--surface-muted) !important;
    border:1px solid var(--line) !important;
    color:var(--text) !important;
    box-shadow:none !important;
}

html[data-theme="dark"] details.routine-collapse[open] > summary,
html[data-theme="dark"] details.task-entry-collapse[open] > summary{
    background:var(--surface-soft) !important;
}

html[data-theme="dark"] .routine-collapse-body{
    background:var(--surface) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .routine-collapse-body *,
html[data-theme="dark"] .task-entry-collapse *{
    color:var(--text);
}

html[data-theme="dark"] .popup-menu,
html[data-theme="dark"] .popup-menu button,
html[data-theme="dark"] .popup-menu a,
html[data-theme="dark"] .popup-menu span{
    background:var(--surface) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .popup-menu button:hover,
html[data-theme="dark"] .popup-menu a:hover{
    background:var(--surface-soft) !important;
    color:var(--primary) !important;
}

html[data-theme="dark"] .modal-shell{
    background:rgba(2,6,23,.76);
}

html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .modal-head button{
    background:var(--surface) !important;
    border-color:var(--line) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .modal-head{
    background:var(--surface-soft) !important;
}

html[data-theme="dark"] .preload-screen{
    background:var(--bg);
}

html[data-theme="dark"] .preload-hero h1{
    color:var(--text);
}

html[data-theme="dark"] .preload-line{
    background:var(--surface-muted);
}

html[data-theme="dark"] .minimal-input{
    border-color:rgba(255,255,255,.45);
    background:rgba(255,255,255,.05);
}

html[data-theme="dark"] .minimal-input input{
    color:#ffffff !important;
}

html[data-theme="dark"] .minimal-input input::placeholder{
    color:rgba(255,255,255,.65) !important;
}

html[data-theme="dark"] .minimal-login-btn{
    background:#ffffff;
    color:var(--primary);
}

@media(max-width:860px){
    html[data-theme="dark"] body{
        background:var(--bg) !important;
    }
}

html[data-theme="dark"]{
    --bg:#0f172a;
    --surface:#111827;
    --surface-soft:#111827;
    --surface-muted:#111827;
    --text:#f8fafc;
    --text-soft:#dbe3ef;
    --muted:#cbd5e1;
    --muted-light:#cbd5e1;
    --line:#1f2937;
    --line-soft:#1f2937;
    --primary:#3b82f6;
    --primary-dark:#2563eb;
    --primary-soft:#182235;
    --primary-line:#334155;
    --neutral-bg:#111827;
    --neutral-line:#334155;
    --success-bg:#065f46;
    --success:#d1fae5;
    --success-line:#047857;
    --warning-bg:#92400e;
    --warning:#fef3c7;
    --warning-line:#b45309;
    --danger-bg:#991b1b;
    --danger:#fee2e2;
    --danger-line:#b91c1c;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .app,
html[data-theme="dark"] .main,
html[data-theme="dark"] .minimal-login-page{
    background:#0f172a !important;
    color:#f8fafc !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .clean-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .student-overview-card,
html[data-theme="dark"] .task-command-card,
html[data-theme="dark"] .schedule-hero,
html[data-theme="dark"] .language-hero,
html[data-theme="dark"] .task-workload-overview,
html[data-theme="dark"] .task-entry-collapse,
html[data-theme="dark"] .routine-collapse,
html[data-theme="dark"] .routine-collapse-body,
html[data-theme="dark"] .activity-overview-card,
html[data-theme="dark"] .activity-panel,
html[data-theme="dark"] .flags-panel,
html[data-theme="dark"] .tasks-panel,
html[data-theme="dark"] .monitoring-board,
html[data-theme="dark"] .monitor-card,
html[data-theme="dark"] .record-history-card,
html[data-theme="dark"] .compact-task-card,
html[data-theme="dark"] .schedule-form-card,
html[data-theme="dark"] .schedule-side-card,
html[data-theme="dark"] .language-mode-card,
html[data-theme="dark"] .validation-hero,
html[data-theme="dark"] .review-output-card,
html[data-theme="dark"] .review-outputs,
html[data-theme="dark"] .validation-summary-card,
html[data-theme="dark"] .validation-search-panel,
html[data-theme="dark"] .validation-filter-panel,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .search-panel,
html[data-theme="dark"] .validation-compact-summary,
html[data-theme="dark"] .validation-scenario-card,
html[data-theme="dark"] .integration-panel,
html[data-theme="dark"] .validation-card,
html[data-theme="dark"] .lesson-table{
    background:#111827 !important;
    background-image:none !important;
    border-color:#1f2937 !important;
    color:#f8fafc !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .student-overview-card:after,
html[data-theme="dark"] .task-command-card:after,
html[data-theme="dark"] .schedule-hero:after,
html[data-theme="dark"] .language-hero:after{
    background:transparent !important;
}

html[data-theme="dark"] .topbar *,
html[data-theme="dark"] .card *,
html[data-theme="dark"] .clean-panel *,
html[data-theme="dark"] .panel *,
html[data-theme="dark"] .profile-card *,
html[data-theme="dark"] .student-overview-card *,
html[data-theme="dark"] .task-command-card *,
html[data-theme="dark"] .schedule-hero *,
html[data-theme="dark"] .language-hero *,
html[data-theme="dark"] .task-workload-overview *,
html[data-theme="dark"] .task-entry-collapse *,
html[data-theme="dark"] .routine-collapse *,
html[data-theme="dark"] .activity-overview-card *,
html[data-theme="dark"] .activity-panel *,
html[data-theme="dark"] .monitoring-board *,
html[data-theme="dark"] .monitor-card *,
html[data-theme="dark"] .record-history-card *,
html[data-theme="dark"] .compact-task-card *,
html[data-theme="dark"] .schedule-form-card *,
html[data-theme="dark"] .schedule-side-card *,
html[data-theme="dark"] .language-mode-card *,
html[data-theme="dark"] .validation-hero *,
html[data-theme="dark"] .review-output-card *,
html[data-theme="dark"] .review-outputs *,
html[data-theme="dark"] .validation-summary-card *,
html[data-theme="dark"] .validation-search-panel *,
html[data-theme="dark"] .validation-filter-panel *,
html[data-theme="dark"] .filter-panel *,
html[data-theme="dark"] .search-panel *,
html[data-theme="dark"] .validation-compact-summary *,
html[data-theme="dark"] .validation-scenario-card *,
html[data-theme="dark"] .integration-panel *,
html[data-theme="dark"] .validation-card *,
html[data-theme="dark"] .lesson-table *{
    color:#f8fafc;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] label{
    color:#f8fafc !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] small,
html[data-theme="dark"] span,
html[data-theme="dark"] .menu-title,
html[data-theme="dark"] .date,
html[data-theme="dark"] .card-head p,
html[data-theme="dark"] .clean-panel-head p,
html[data-theme="dark"] .profile-card p,
html[data-theme="dark"] .topbar p,
html[data-theme="dark"] .field label,
html[data-theme="dark"] .compact-task-item span,
html[data-theme="dark"] .activity-task-item span,
html[data-theme="dark"] .calendar-item small,
html[data-theme="dark"] .calendar-day-head span,
html[data-theme="dark"] .weekly-day-head small,
html[data-theme="dark"] .month-calendar-head span,
html[data-theme="dark"] .simple-summary-card small,
html[data-theme="dark"] .recommendation-card p{
    color:#cbd5e1 !important;
}

html[data-theme="dark"] .simple-summary-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .routine-card,
html[data-theme="dark"] .student-overview-status,
html[data-theme="dark"] .schedule-hero-stats div,
html[data-theme="dark"] .task-workload-main,
html[data-theme="dark"] .task-workload-ratio,
html[data-theme="dark"] .task-workload-grid div,
html[data-theme="dark"] .recommendation-card,
html[data-theme="dark"] .recommendation-card.primary,
html[data-theme="dark"] .load-meter-card,
html[data-theme="dark"] .load-meter-top div,
html[data-theme="dark"] .mini-stat-list div,
html[data-theme="dark"] .activity-task-item,
html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] .compact-task-item,
html[data-theme="dark"] .compact-empty,
html[data-theme="dark"] .focus-simplified-card,
html[data-theme="dark"] .task-board-item,
html[data-theme="dark"] .focus-simplified-advice,
html[data-theme="dark"] .task-control,
html[data-theme="dark"] .schedule-metric,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .calendar-day-head,
html[data-theme="dark"] .calendar-item,
html[data-theme="dark"] .calendar-empty,
html[data-theme="dark"] .weekly-calendar-panel,
html[data-theme="dark"] .weekly-day-card,
html[data-theme="dark"] .weekly-day-head,
html[data-theme="dark"] .weekly-day-body,
html[data-theme="dark"] .weekly-block,
html[data-theme="dark"] .weekly-empty,
html[data-theme="dark"] .month-day-card,
html[data-theme="dark"] .month-calendar-head,
html[data-theme="dark"] .month-task-dot,
html[data-theme="dark"] .record-score-row div,
html[data-theme="dark"] .record-guidance-strip div,
html[data-theme="dark"] .monitor-mini-grid div,
html[data-theme="dark"] .task-capacity-grid div,
html[data-theme="dark"] .compact-task-meta div,
html[data-theme="dark"] .task-focus-note div,
html[data-theme="dark"] .compact-focus-note div,
html[data-theme="dark"] .notice,
html[data-theme="dark"] .subtask-box,
html[data-theme="dark"] .subtask-item,
html[data-theme="dark"] .modal-grid div,
html[data-theme="dark"] .validation-summary-grid div,
html[data-theme="dark"] .validation-stat,
html[data-theme="dark"] .validation-record-card,
html[data-theme="dark"] .scenario-card,
html[data-theme="dark"] .language-mark{
    background:#111827 !important;
    background-image:none !important;
    border-color:#1f2937 !important;
    color:#f8fafc !important;
    box-shadow:none !important;
}

html[data-theme="dark"] details.routine-collapse > summary,
html[data-theme="dark"] details.task-entry-collapse > summary,
html[data-theme="dark"] details > summary,
html[data-theme="dark"] details > summary *{
    background:#111827 !important;
    background-image:none !important;
    border-color:#1f2937 !important;
    color:#f8fafc !important;
    box-shadow:none !important;
}

html[data-theme="dark"] details.routine-collapse > summary > strong,
html[data-theme="dark"] details.task-entry-collapse > summary > strong,
html[data-theme="dark"] .topbar .date,
html[data-theme="dark"] .weekly-day-head small,
html[data-theme="dark"] .calendar-day-head span,
html[data-theme="dark"] .status,
html[data-theme="dark"] .flag-pill{
    background:#111827 !important;
    border-color:#1f2937 !important;
    color:#f8fafc !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] .minimal-input{
    background:#111827 !important;
    border-color:#1f2937 !important;
    color:#f8fafc !important;
    box-shadow:none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{
    color:#94a3b8 !important;
}

html[data-theme="dark"] .field input:focus,
html[data-theme="dark"] .field select:focus,
html[data-theme="dark"] .field textarea:focus{
    background:#111827 !important;
    border-color:#3b82f6 !important;
    box-shadow:0 0 0 3px rgba(59,130,246,.16) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] .table,
html[data-theme="dark"] thead,
html[data-theme="dark"] tbody,
html[data-theme="dark"] tr,
html[data-theme="dark"] th,
html[data-theme="dark"] td{
    background:#111827 !important;
    border-color:#1f2937 !important;
    color:#f8fafc !important;
}

html[data-theme="dark"] th,
html[data-theme="dark"] td small{
    color:#cbd5e1 !important;
}

html[data-theme="dark"] .row-active,
html[data-theme="dark"] tr:hover,
html[data-theme="dark"] .calendar-item:hover,
html[data-theme="dark"] .activity-task-item:hover,
html[data-theme="dark"] .focus-simplified-card:hover,
html[data-theme="dark"] .task-board-item:hover,
html[data-theme="dark"] .quick-action-card:hover{
    background:#111827 !important;
    border-color:#334155 !important;
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] button,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .task-filter,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-icon,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .task-control.done,
html[data-theme="dark"] .task-control.mute,
html[data-theme="dark"] .task-control.link{
    background:#111827 !important;
    border-color:#1f2937 !important;
    color:#f8fafc !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] button:hover,
html[data-theme="dark"] .tab-button:hover,
html[data-theme="dark"] .task-filter:hover,
html[data-theme="dark"] .nav-item:hover{
    background:#182235 !important;
    border-color:#334155 !important;
    color:#f8fafc !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .tab-button.active,
html[data-theme="dark"] .task-filter.active,
html[data-theme="dark"] .task-control.start{
    background:#2563eb !important;
    border-color:#2563eb !important;
    color:#ffffff !important;
}

html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .task-control.delete{
    background:#991b1b !important;
    border-color:#b91c1c !important;
    color:#ffffff !important;
}

html[data-theme="dark"] .status.good,
html[data-theme="dark"] .flag-pill.good{
    background:#065f46 !important;
    border-color:#047857 !important;
    color:#d1fae5 !important;
}

html[data-theme="dark"] .status.warning,
html[data-theme="dark"] .flag-pill.warning{
    background:#92400e !important;
    border-color:#b45309 !important;
    color:#fef3c7 !important;
}

html[data-theme="dark"] .status.danger,
html[data-theme="dark"] .flag-pill.danger{
    background:#991b1b !important;
    border-color:#b91c1c !important;
    color:#fee2e2 !important;
}

html[data-theme="dark"] .status *,
html[data-theme="dark"] .flag-pill *{
    color:inherit !important;
}

html[data-theme="dark"] .nav-item,
html[data-theme="dark"] .nav-symbol{
    background:transparent !important;
    color:#cbd5e1 !important;
}

html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .nav-item.active .nav-symbol{
    background:#182235 !important;
    color:#f8fafc !important;
}

html[data-theme="dark"] .logo span{
    color:#f8fafc !important;
}

html[data-theme="dark"] .load-meter,
html[data-theme="dark"] .preload-line{
    background:#0f172a !important;
}

html[data-theme="dark"] .load-meter span,
html[data-theme="dark"] .preload-line span{
    background:#2563eb !important;
}

html[data-theme="dark"] .popup-menu,
html[data-theme="dark"] .popup-menu button,
html[data-theme="dark"] .popup-menu a,
html[data-theme="dark"] .popup-menu span,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .modal-body{
    background:#111827 !important;
    border-color:#1f2937 !important;
    color:#f8fafc !important;
}

html[data-theme="dark"] .modal-shell{
    background:rgba(2,6,23,.76) !important;
}

html[data-theme="dark"] .preload-screen{
    background:#0f172a !important;
}

html[data-theme="dark"] .error.show{
    background:#991b1b !important;
    border-color:#b91c1c !important;
    color:#fee2e2 !important;
}

html[data-theme="dark"] .is-hidden{
    display:none !important;
}
.theme-toggle {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.theme-switch {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    background: #dbe4f0;
    border: 1px solid #c7d2e3;
    position: relative;
    flex: 0 0 34px;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.theme-switch-knob {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    top: 1px;
    left: 1px;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .25);
    transition: transform .25s ease, background .25s ease;
}

.theme-switch.active {
    background: #2563eb;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .16);
}

.theme-switch.active .theme-switch-knob {
    transform: translateX(16px);
    background: #f8fafc;
}

html[data-theme="dark"] .theme-switch {
    background: #334155;
    border-color: #475569;
}

html[data-theme="dark"] .theme-switch.active {
    background: #2563eb;
    border-color: #3b82f6;
}

html[data-theme="dark"] .theme-toggle {
    color: #cbd5e1;
}

html[data-theme="dark"] .theme-toggle:hover {
    background: #1e293b;
    color: #ffffff;
}

.tab-buttons,
.task-filter-tabs,
.record-filter-tabs,
.validation-filter-tabs,
.language-filter-tabs,
.clean-panel-head .tab-buttons,
.card-head .tab-buttons,
.month-calendar-head .tab-buttons,
.weekly-calendar-panel .tab-buttons,
.routine-collapse-body > .tab-buttons {
    width:max-content;
    max-width:100%;
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    padding:6px;
    border-radius:999px;
    background:rgba(255,255,255,.78);
    border:1px solid var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 10px 24px rgba(31,45,90,.035);
    position:relative;
}

.task-filter-tabs {
    justify-content:flex-end;
}

.tab-button,
.task-filter,
.record-filter-tabs button,
.validation-filter-tabs button {
    position:relative;
    isolation:isolate;
    min-height:34px;
    border-radius:999px;
    border:1px solid transparent;
    background:transparent;
    color:var(--text-soft);
    padding:8px 14px;
    box-shadow:none;
    transform:translateY(0) scale(1);
    transition:color .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease);
}

.tab-button:hover,
.task-filter:hover,
.record-filter-tabs button:hover,
.validation-filter-tabs button:hover {
    background:var(--surface);
    border-color:var(--line);
    transform:translateY(-1px);
}

.tab-button.active,
.task-filter.active,
.record-filter-tabs button.active,
.validation-filter-tabs button.active {
    background:linear-gradient(180deg,var(--primary) 0%,var(--primary-dark) 100%);
    color:#ffffff;
    border-color:transparent;
    box-shadow:0 8px 18px rgba(41,79,195,.16);
    transform:translateY(-1px) scale(1.01);
}

.tab-panel {
    transform-origin:top center;
}

.tab-panel.active {
    animation:tabWindowIn .34s var(--ease) both;
}

@keyframes tabWindowIn {
    from {
        opacity:0;
        transform:translateY(10px) scale(.992);
        filter:blur(2px);
    }
    to {
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}

.group-summary-metrics,
.grouped-summary-metrics,
.monitoring-summary-metrics {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
    align-items:center;
}

.group-summary-metrics div,
.grouped-summary-metrics div,
.monitoring-summary-metrics div {
    min-width:108px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    padding:10px 12px;
    display:grid;
    gap:4px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.group-summary-metrics span,
.grouped-summary-metrics span,
.monitoring-summary-metrics span {
    color:var(--muted-light);
    font-size:10px;
    font-weight:900;
    margin:0;
}

.group-summary-metrics strong,
.grouped-summary-metrics strong,
.monitoring-summary-metrics strong {
    color:var(--text);
    font-size:16px;
    font-weight:900;
}

#summary .compact-task-item,
#flagged .compact-task-item,
.monitoring-summary-card,
.grouped-summary-card {
    background:linear-gradient(180deg,#ffffff 0%,#fbfcff 100%);
    border:1px solid var(--line);
    border-radius:18px;
    box-shadow:0 10px 24px rgba(31,45,90,.035);
}

.minimal-login-page {
    display:grid;
    place-items:center;
    padding:42px;
    background:
        radial-gradient(circle at 14% 16%,rgba(255,255,255,.16),transparent 25%),
        radial-gradient(circle at 84% 78%,rgba(255,255,255,.09),transparent 28%),
        linear-gradient(135deg,#183b98 0%,#294fc3 48%,#1d3e99 100%);
}

.minimal-login-card {
    width:min(1040px,100%);
    min-height:560px;
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.72fr);
    align-items:center;
    justify-items:stretch;
    gap:34px;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.22);
    border-radius:34px;
    padding:34px;
    box-shadow:0 34px 90px rgba(12,24,72,.24);
    backdrop-filter:blur(22px);
}

.minimal-login-brand {
    height:100%;
    min-height:450px;
    margin:0;
    text-align:left;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding:36px;
    border-radius:28px;
    background:linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.035));
    border:1px solid rgba(255,255,255,.18);
    position:relative;
    overflow:hidden;
}

.minimal-login-brand:after {
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    right:-90px;
    bottom:-110px;
    border-radius:999px;
    background:rgba(255,255,255,.08);
}

.minimal-login-brand h1 {
    font-size:64px;
    line-height:.98;
    letter-spacing:-.075em;
    margin-bottom:14px;
    position:relative;
    z-index:1;
}

.minimal-login-brand p {
    max-width:360px;
    color:rgba(255,255,255,.76);
    font-size:15px;
    line-height:1.45;
    letter-spacing:.04em;
    position:relative;
    z-index:1;
}

.minimal-login-form,
.minimal-login-card > .error,
.forgot-link {
    width:100%;
    max-width:380px;
    justify-self:center;
}

.minimal-login-form {
    background:rgba(255,255,255,.96);
    border:1px solid rgba(255,255,255,.85);
    border-radius:28px;
    padding:28px;
    box-shadow:0 24px 58px rgba(12,24,72,.18);
}

.minimal-input {
    height:50px;
    border:1px solid #e1e7f2;
    border-radius:16px;
    background:#f7f9fd;
    color:var(--text);
    grid-template-columns:46px 1fr;
}

.minimal-input:focus-within {
    background:#ffffff;
    border-color:#b9c8f3;
    box-shadow:0 0 0 4px rgba(41,79,195,.08);
}

.minimal-input span {
    color:#51607a;
}

.minimal-input input {
    color:#202437;
    letter-spacing:0;
}

.minimal-input input::placeholder {
    color:#9aa3b4;
}

.minimal-login-btn {
    height:50px;
    border-radius:16px;
    background:linear-gradient(180deg,var(--primary) 0%,var(--primary-dark) 100%);
    color:#ffffff;
}

.forgot-link {
    color:rgba(255,255,255,.82);
    text-align:center;
    justify-self:center;
}

html[data-theme="dark"] {
    --primary:#8aa4ff;
    --primary-dark:#637fdc;
    --primary-soft:#1b2540;
    --primary-line:#2b3a63;
    --bg:#0d1424;
    --surface:#111827;
    --surface-soft:#172133;
    --surface-muted:#202b40;
    --text:#eef4ff;
    --text-soft:#c7d2e4;
    --muted:#9aa8bc;
    --muted-light:#7f8ea5;
    --line:#243149;
    --line-soft:#182235;
    --success:#a8c7b5;
    --success-bg:#163428;
    --success-line:#285844;
    --warning:#d5bd86;
    --warning-bg:#3c321f;
    --warning-line:#665330;
    --danger:#dfa0a0;
    --danger-bg:#3e2224;
    --danger-line:#6d3438;
    --neutral-bg:#182235;
    --neutral-line:#2a3850;
}

html[data-theme="dark"] body {
    background:linear-gradient(180deg,#0b1220 0%,#0d1424 100%) !important;
    color:var(--text) !important;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .lesson-table,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .clean-panel,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .monitoring-board,
html[data-theme="dark"] .weekly-calendar-panel {
    background:#111827 !important;
    border-color:#243149 !important;
    color:var(--text) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .student-overview-card,
html[data-theme="dark"] .task-command-card,
html[data-theme="dark"] .schedule-hero,
html[data-theme="dark"] .language-hero,
html[data-theme="dark"] .task-workload-overview,
html[data-theme="dark"] .validation-compact-summary {
    background:#111827 !important;
    background-image:linear-gradient(135deg,#111827 0%,#142033 100%) !important;
    border:1px solid #243149 !important;
    color:var(--text) !important;
    box-shadow:0 18px 42px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .student-overview-card:after,
html[data-theme="dark"] .task-command-card:after,
html[data-theme="dark"] .schedule-hero:after,
html[data-theme="dark"] .language-hero:after {
    background:rgba(255,255,255,.035) !important;
}

html[data-theme="dark"] .simple-summary-card,
html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .routine-card,
html[data-theme="dark"] .load-meter-top div,
html[data-theme="dark"] .mini-stat-list div,
html[data-theme="dark"] .activity-panel,
html[data-theme="dark"] .compact-task-item,
html[data-theme="dark"] .focus-simplified-card,
html[data-theme="dark"] .task-board-item,
html[data-theme="dark"] .schedule-metric,
html[data-theme="dark"] .language-mode-card,
html[data-theme="dark"] .record-history-card,
html[data-theme="dark"] .weekly-day-card,
html[data-theme="dark"] .calendar-day,
html[data-theme="dark"] .month-day-card,
html[data-theme="dark"] .monitor-card,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .validation-scenario-card,
html[data-theme="dark"] #summary .compact-task-item,
html[data-theme="dark"] #flagged .compact-task-item,
html[data-theme="dark"] .monitoring-summary-card,
html[data-theme="dark"] .grouped-summary-card {
    background:#172133 !important;
    background-image:none !important;
    border-color:#2a3850 !important;
    color:var(--text) !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .activity-task-item,
html[data-theme="dark"] .quick-action-card,
html[data-theme="dark"] .focus-simplified-advice,
html[data-theme="dark"] .task-control,
html[data-theme="dark"] .calendar-day-head,
html[data-theme="dark"] .calendar-item,
html[data-theme="dark"] .weekly-day-head,
html[data-theme="dark"] .weekly-block,
html[data-theme="dark"] .weekly-unscheduled,
html[data-theme="dark"] .weekly-unscheduled-list div,
html[data-theme="dark"] .month-task-dot,
html[data-theme="dark"] .modal-head,
html[data-theme="dark"] .modal-grid div,
html[data-theme="dark"] .monitor-status-row,
html[data-theme="dark"] .monitor-mini-grid div,
html[data-theme="dark"] .record-score-row div,
html[data-theme="dark"] .meta-row,
html[data-theme="dark"] .record-guidance-strip div,
html[data-theme="dark"] .task-detail-grid div,
html[data-theme="dark"] .task-feasibility-note,
html[data-theme="dark"] .rule-details,
html[data-theme="dark"] .rule-basis-card,
html[data-theme="dark"] .subtask-box,
html[data-theme="dark"] .group-summary-metrics div,
html[data-theme="dark"] .grouped-summary-metrics div,
html[data-theme="dark"] .monitoring-summary-metrics div {
    background:#111827 !important;
    border-color:#243149 !important;
    color:var(--text) !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .compact-task-card,
html[data-theme="dark"] .task-focus-card {
    background:#172133 !important;
    border-color:#2a3850 !important;
    color:var(--text) !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .compact-task-card.critical,
html[data-theme="dark"] .compact-task-card.high,
html[data-theme="dark"] .compact-task-card.medium,
html[data-theme="dark"] .compact-task-card.low,
html[data-theme="dark"] .task-focus-card.critical,
html[data-theme="dark"] .task-focus-card.high,
html[data-theme="dark"] .task-focus-card.medium,
html[data-theme="dark"] .task-focus-card.low {
    background:#172133 !important;
    border-color:#2a3850 !important;
}

html[data-theme="dark"] .compact-task-card.focus-task,
html[data-theme="dark"] .task-focus-card.focus-task,
html[data-theme="dark"] .compact-task-card.today,
html[data-theme="dark"] .compact-task-card.active-focus {
    background:#1a2640 !important;
    border-color:#3b4f78 !important;
}

html[data-theme="dark"] .tab-buttons,
html[data-theme="dark"] .task-filter-tabs,
html[data-theme="dark"] .record-filter-tabs,
html[data-theme="dark"] .validation-filter-tabs,
html[data-theme="dark"] .language-filter-tabs {
    background:#111827 !important;
    border-color:#243149 !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
}

html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .task-filter,
html[data-theme="dark"] .record-filter-tabs button,
html[data-theme="dark"] .validation-filter-tabs button {
    background:transparent !important;
    color:#c7d2e4 !important;
    border-color:transparent !important;
}

html[data-theme="dark"] .tab-button:hover,
html[data-theme="dark"] .task-filter:hover,
html[data-theme="dark"] .record-filter-tabs button:hover,
html[data-theme="dark"] .validation-filter-tabs button:hover {
    background:#172133 !important;
    border-color:#2a3850 !important;
}

html[data-theme="dark"] .tab-button.active,
html[data-theme="dark"] .task-filter.active,
html[data-theme="dark"] .record-filter-tabs button.active,
html[data-theme="dark"] .validation-filter-tabs button.active {
    background:#2b3a63 !important;
    color:#eef4ff !important;
    border-color:#3b4f78 !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .task-control.start,
html[data-theme="dark"] .minimal-login-btn {
    background:#2f4774 !important;
    border-color:#405b8e !important;
    color:#eef4ff !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .btn-secondary,
html[data-theme="dark"] .btn-info,
html[data-theme="dark"] .btn-icon,
html[data-theme="dark"] .btn-outline,
html[data-theme="dark"] .btn-ghost,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .task-control.done,
html[data-theme="dark"] .task-control.mute,
html[data-theme="dark"] .task-control.link,
html[data-theme="dark"] .dot-action,
html[data-theme="dark"] .modal-head button {
    background:#111827 !important;
    border-color:#2a3850 !important;
    color:#c7d2e4 !important;
}

html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .task-control.delete {
    background:#3e2224 !important;
    border-color:#6d3438 !important;
    color:#dfa0a0 !important;
}

html[data-theme="dark"] .status,
html[data-theme="dark"] .flag-pill {
    background:#182235 !important;
    color:#c7d2e4 !important;
    border-color:#2a3850 !important;
}

html[data-theme="dark"] .status.good,
html[data-theme="dark"] .flag-pill.good {
    background:#163428 !important;
    color:#a8c7b5 !important;
    border-color:#285844 !important;
}

html[data-theme="dark"] .status.warning,
html[data-theme="dark"] .flag-pill.warning {
    background:#3c321f !important;
    color:#d5bd86 !important;
    border-color:#665330 !important;
}

html[data-theme="dark"] .status.danger,
html[data-theme="dark"] .flag-pill.danger {
    background:#3e2224 !important;
    color:#dfa0a0 !important;
    border-color:#6d3438 !important;
}

html[data-theme="dark"] .field input,
html[data-theme="dark"] .field select,
html[data-theme="dark"] .field textarea,
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background:#111827 !important;
    border-color:#2a3850 !important;
    color:#eef4ff !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color:#7f8ea5 !important;
}

html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .date,
html[data-theme="dark"] .record-history-top span,
html[data-theme="dark"] .focus-simplified-main span,
html[data-theme="dark"] .task-board-main span,
html[data-theme="dark"] .monitor-card-top span,
html[data-theme="dark"] .month-calendar-head span,
html[data-theme="dark"] .weekly-day-head small {
    background:#172133 !important;
    color:#eef4ff !important;
    border-color:#2a3850 !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .popup-menu {
    background:#111827 !important;
    border-color:#2a3850 !important;
    box-shadow:0 18px 50px rgba(0,0,0,.26) !important;
}

html[data-theme="dark"] .popup-menu button,
html[data-theme="dark"] .popup-menu a,
html[data-theme="dark"] .popup-menu span {
    background:#111827 !important;
    color:#c7d2e4 !important;
}

html[data-theme="dark"] .popup-menu button:hover,
html[data-theme="dark"] .popup-menu a:hover {
    background:#172133 !important;
    color:#eef4ff !important;
}

html[data-theme="dark"] .load-meter {
    background:#243149 !important;
}

html[data-theme="dark"] .load-meter span,
html[data-theme="dark"] .study-block:before,
html[data-theme="dark"] .record-history-card:before {
    background:#6078b4 !important;
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .compact-empty,
html[data-theme="dark"] .calendar-empty,
html[data-theme="dark"] .weekly-empty {
    background:#111827 !important;
    border-color:#2a3850 !important;
    color:#c7d2e4 !important;
}

html[data-theme="dark"] .theme-toggle {
    color:#c7d2e4 !important;
}

html[data-theme="dark"] .theme-switch {
    background:#243149 !important;
    border-color:#3b4f78 !important;
}

html[data-theme="dark"] .theme-switch.active {
    background:#6078b4 !important;
    border-color:#7892c9 !important;
    box-shadow:0 0 0 3px rgba(96,120,180,.16) !important;
}

html[data-theme="dark"] .theme-switch.active .theme-switch-knob {
    background:#eef4ff !important;
}

html[data-theme="dark"] .minimal-login-page {
    background:linear-gradient(135deg,#0b1220 0%,#111827 52%,#172133 100%) !important;
}

html[data-theme="dark"] .minimal-login-form {
    background:#111827 !important;
    border-color:#2a3850 !important;
}

html[data-theme="dark"] .minimal-input {
    background:#172133 !important;
    border-color:#2a3850 !important;
}

html[data-theme="dark"] .minimal-input span,
html[data-theme="dark"] .minimal-input input {
    color:#eef4ff !important;
}

@media(max-width:860px){
    .tab-buttons,
    .task-filter-tabs,
    .record-filter-tabs,
    .validation-filter-tabs,
    .language-filter-tabs{
        width:100%;
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        scrollbar-width:thin;
    }

    .tab-button,
    .task-filter,
    .record-filter-tabs button,
    .validation-filter-tabs button{
        white-space:nowrap;
    }

    .minimal-login-card{
        grid-template-columns:1fr;
        min-height:auto;
        gap:18px;
        padding:22px;
    }

    .minimal-login-brand{
        min-height:260px;
        padding:26px;
    }

    .minimal-login-brand h1{
        font-size:42px;
    }
}

body:has(.minimal-login-page){
    background:#f4f7fb !important;
}

.minimal-login-page{
    min-height:100vh !important;
    width:100% !important;
    padding:0 !important;
    display:block !important;
    place-items:unset !important;
    background:#f4f7fb !important;
    overflow:hidden !important;
    position:relative !important;
}

.minimal-login-page:before,
.minimal-login-page:after,
.login-blob,
.blob-one,
.blob-two,
.blob-three{
    display:none !important;
    content:none !important;
    animation:none !important;
    background:none !important;
}

.minimal-login-card{
    width:100% !important;
    min-height:100vh !important;
    max-width:none !important;
    position:relative !important;
    z-index:2 !important;
    display:grid !important;
    grid-template-columns:minmax(420px,.9fr) minmax(0,1.1fr) !important;
    grid-template-rows:1fr auto auto 1fr !important;
    align-items:center !important;
    justify-items:center !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:#f4f7fb !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

.minimal-login-brand{
    grid-column:2 !important;
    grid-row:1 / -1 !important;
    align-self:stretch !important;
    justify-self:stretch !important;
    min-height:100vh !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:clamp(48px,7vw,120px) clamp(42px,7vw,110px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:left !important;
    gap:20px !important;
    background:
        linear-gradient(135deg,rgba(15,38,107,.92),rgba(37,79,190,.88)),
        linear-gradient(135deg,#173c9f 0%,#2c5bd0 58%,#17398f 100%) !important;
    border-left:10px solid #e8c33a !important;
    border-radius:0 !important;
    overflow:hidden !important;
    box-shadow:none !important;
    color:#ffffff !important;
}

.minimal-login-brand:before{
    content:"Grade Evaluation Decision Support" !important;
    width:max-content !important;
    max-width:100% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px 18px !important;
    border-radius:10px !important;
    background:#e8c33a !important;
    color:#10295f !important;
    font-size:15px !important;
    font-weight:900 !important;
    letter-spacing:.02em !important;
    text-transform:none !important;
}

.minimal-login-brand:after{
    content:"" !important;
    width:150px !important;
    height:6px !important;
    border-radius:999px !important;
    background:#e8c33a !important;
    order:3 !important;
    margin-top:2px !important;
}

.minimal-login-brand h1{
    color:#ffffff !important;
    font-size:clamp(58px,7vw,112px) !important;
    font-weight:900 !important;
    letter-spacing:-.08em !important;
    line-height:.92 !important;
    margin:0 !important;
    text-shadow:0 18px 42px rgba(7,20,58,.22) !important;
}

.minimal-login-brand h1::first-letter{
    color:#ffffff !important;
}

.minimal-login-brand p{
    max-width:620px !important;
    color:rgba(255,255,255,.86) !important;
    font-size:clamp(15px,1.15vw,20px) !important;
    font-weight:600 !important;
    letter-spacing:.01em !important;
    line-height:1.65 !important;
    text-transform:none !important;
    margin:18px 0 0 !important;
    order:4 !important;
}

.minimal-login-brand p:empty::before{
    content:"Academic monitoring, task planning, and rule-based guidance for student support." !important;
}

.minimal-login-card > .error{
    grid-column:1 !important;
    grid-row:2 !important;
    width:min(440px,calc(100% - 48px)) !important;
    justify-self:center !important;
    margin:0 0 14px !important;
}

.minimal-login-form{
    grid-column:1 !important;
    grid-row:2 / 4 !important;
    width:min(440px,calc(100% - 48px)) !important;
    max-width:440px !important;
    display:grid !important;
    gap:16px !important;
    justify-self:center !important;
    align-self:center !important;
    background:#ffffff !important;
    border:1px solid #dce4f1 !important;
    border-radius:28px !important;
    padding:38px !important;
    box-shadow:0 34px 80px rgba(31,45,90,.12) !important;
    backdrop-filter:none !important;
    position:relative !important;
}

.minimal-login-form:before{
    content:"Login" !important;
    color:#122653 !important;
    display:block !important;
    font-size:48px !important;
    font-weight:900 !important;
    letter-spacing:-.075em !important;
    line-height:1 !important;
    margin:0 0 2px !important;
}

.minimal-login-form:after{
    content:"Enter your assigned Ka-Akbay account." !important;
    color:#64748b !important;
    display:block !important;
    font-size:14px !important;
    font-weight:650 !important;
    line-height:1.5 !important;
    margin:-4px 0 6px !important;
    order:-1 !important;
}

.minimal-input{
    height:54px !important;
    width:100% !important;
    border:1px solid #d7e0ee !important;
    border-radius:15px !important;
    background:#eef4ff !important;
    display:grid !important;
    grid-template-columns:48px 1fr !important;
    align-items:center !important;
    color:#1e335f !important;
    transition:background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease) !important;
}

.minimal-input:hover{
    background:#e8f0ff !important;
    border-color:#c6d5ed !important;
}

.minimal-input:focus-within{
    background:#ffffff !important;
    border-color:#294fc3 !important;
    box-shadow:0 0 0 4px rgba(41,79,195,.1) !important;
    transform:translateY(-1px) !important;
}

.minimal-input span{
    display:grid !important;
    place-items:center !important;
    color:#294fc3 !important;
    font-size:15px !important;
    font-weight:900 !important;
}

.minimal-input input{
    width:100% !important;
    height:100% !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#122653 !important;
    font-size:13px !important;
    font-weight:750 !important;
    letter-spacing:0 !important;
}

.minimal-input input::placeholder{
    color:#77849a !important;
}

.minimal-login-btn{
    width:100% !important;
    height:54px !important;
    background:#294fc3 !important;
    color:#ffffff !important;
    border-radius:15px !important;
    font-size:13px !important;
    font-weight:900 !important;
    letter-spacing:.06em !important;
    box-shadow:0 18px 34px rgba(41,79,195,.22) !important;
    cursor:pointer !important;
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease) !important;
}

.minimal-login-btn:hover{
    transform:translateY(-2px) !important;
    background:#1d3e99 !important;
    box-shadow:0 22px 40px rgba(41,79,195,.28) !important;
}

.forgot-link{
    grid-column:1 !important;
    grid-row:4 !important;
    width:min(440px,calc(100% - 48px)) !important;
    justify-self:center !important;
    align-self:start !important;
    text-align:center !important;
    color:#5b6680 !important;
    font-size:12.5px !important;
    font-weight:750 !important;
    margin:16px 0 0 !important;
}

html[data-theme="dark"] body:has(.minimal-login-page){
    background:#0f172a !important;
}

html[data-theme="dark"] .minimal-login-page,
html[data-theme="dark"] .minimal-login-card{
    background:#0f172a !important;
}

html[data-theme="dark"] .minimal-login-brand{
    background:
        linear-gradient(135deg,rgba(10,18,35,.82),rgba(30,58,138,.68)),
        linear-gradient(135deg,#0f172a 0%,#172554 58%,#1e3a8a 100%) !important;
    border-left-color:#d5b538 !important;
}

html[data-theme="dark"] .minimal-login-brand:before,
html[data-theme="dark"] .minimal-login-brand:after{
    background:#d5b538 !important;
    color:#0f172a !important;
}

html[data-theme="dark"] .minimal-login-form{
    background:#111827 !important;
    border-color:#2a3850 !important;
    box-shadow:0 34px 80px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .minimal-login-form:before{
    color:#eef4ff !important;
}

html[data-theme="dark"] .minimal-login-form:after{
    color:#aebbd0 !important;
}

html[data-theme="dark"] .minimal-input{
    background:#172133 !important;
    border-color:#2a3850 !important;
}

html[data-theme="dark"] .minimal-input:hover,
html[data-theme="dark"] .minimal-input:focus-within{
    background:#1d2940 !important;
    border-color:#6078b4 !important;
    box-shadow:0 0 0 4px rgba(96,120,180,.14) !important;
}

html[data-theme="dark"] .minimal-input span{
    color:#9db2e8 !important;
}

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

html[data-theme="dark"] .minimal-input input::placeholder{
    color:#8b9ab1 !important;
}

html[data-theme="dark"] .minimal-login-btn{
    background:#6078b4 !important;
    color:#ffffff !important;
    box-shadow:0 18px 34px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .minimal-login-btn:hover{
    background:#7892c9 !important;
}

html[data-theme="dark"] .forgot-link{
    color:#aebbd0 !important;
}

@media(max-width:980px){
    .minimal-login-card{
        grid-template-columns:1fr !important;
        grid-template-rows:auto auto auto auto !important;
        min-height:100vh !important;
        background:#f4f7fb !important;
    }

    .minimal-login-brand{
        grid-column:1 !important;
        grid-row:1 !important;
        min-height:36vh !important;
        padding:34px 28px !important;
        border-left:0 !important;
        border-bottom:8px solid #e8c33a !important;
        justify-content:center !important;
    }

    .minimal-login-brand h1{
        font-size:clamp(44px,10vw,72px) !important;
    }

    .minimal-login-brand p{
        font-size:14px !important;
        max-width:560px !important;
    }

    .minimal-login-form{
        grid-column:1 !important;
        grid-row:2 !important;
        margin:36px 0 0 !important;
        width:min(440px,calc(100% - 40px)) !important;
        padding:30px !important;
    }

    .minimal-login-card > .error{
        grid-column:1 !important;
        grid-row:2 !important;
    }

    .forgot-link{
        grid-column:1 !important;
        grid-row:3 !important;
        margin-bottom:34px !important;
    }
}

@media(max-width:560px){
    .minimal-login-brand{
        min-height:32vh !important;
        padding:28px 22px !important;
    }

    .minimal-login-brand:before{
        font-size:12px !important;
        padding:10px 13px !important;
    }

    .minimal-login-brand h1{
        font-size:42px !important;
    }

    .minimal-login-brand p{
        font-size:13px !important;
        line-height:1.5 !important;
    }

    .minimal-login-form{
        width:calc(100% - 28px) !important;
        padding:24px !important;
        border-radius:24px !important;
    }

    .minimal-login-form:before{
        font-size:38px !important;
    }

    .minimal-input,
    .minimal-login-btn{
        height:50px !important;
    }
}
body:has(.minimal-login-page){
    background:#2f55c7 !important;
}

.minimal-login-page{
    min-height:100vh !important;
    width:100% !important;
    padding:0 !important;
    display:block !important;
    place-items:unset !important;
    background:linear-gradient(135deg,#244cb8 0%,#2f5fd0 50%,#1f3f9d 100%) !important;
    overflow:hidden !important;
    position:relative !important;
}

.minimal-login-page:before,
.minimal-login-page:after,
.login-blob,
.blob-one,
.blob-two,
.blob-three{
    display:none !important;
    content:none !important;
    animation:none !important;
    background:none !important;
}

.minimal-login-card{
    width:100% !important;
    min-height:100vh !important;
    max-width:none !important;
    position:relative !important;
    z-index:2 !important;
    display:grid !important;
    grid-template-columns:minmax(480px,46vw) minmax(0,1fr) !important;
    grid-template-rows:1fr auto auto 1fr !important;
    align-items:center !important;
    justify-items:center !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
    background:linear-gradient(135deg,#244cb8 0%,#2f5fd0 50%,#1f3f9d 100%) !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    overflow:hidden !important;
}

.minimal-login-card:before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 88% 18%,rgba(22,52,150,.42) 0 12%,transparent 12.3%),
        radial-gradient(circle at 82% 82%,rgba(24,49,139,.34) 0 9%,transparent 9.3%),
        radial-gradient(circle at 14% 78%,rgba(255,255,255,.10) 0 16%,transparent 16.3%),
        linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,0)) !important;
}

.minimal-login-card:after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    bottom:0 !important;
    left:minmax(480px,46vw) !important;
    z-index:1 !important;
    width:0 !important;
    display:none !important;
}

.minimal-login-form{
    grid-column:1 !important;
    grid-row:2 / 4 !important;
    width:min(560px,calc(100% - 96px)) !important;
    max-width:560px !important;
    min-height:440px !important;
    display:grid !important;
    align-content:center !important;
    gap:18px !important;
    justify-self:center !important;
    align-self:center !important;
    background:rgba(18,44,120,.34) !important;
    border:1px solid rgba(255,255,255,.22) !important;
    border-radius:32px !important;
    padding:52px !important;
    box-shadow:0 34px 90px rgba(10,27,78,.24) !important;
    backdrop-filter:blur(18px) !important;
    position:relative !important;
    z-index:3 !important;
}

.minimal-login-form:before{
    content:"Login" !important;
    color:#ffffff !important;
    display:block !important;
    font-size:clamp(48px,4.2vw,72px) !important;
    font-weight:900 !important;
    letter-spacing:-.08em !important;
    line-height:.92 !important;
    margin:0 0 2px !important;
    text-shadow:0 16px 34px rgba(11,28,84,.22) !important;
}

.minimal-login-form:after{
    content:"Enter your assigned Ka-Akbay account." !important;
    color:rgba(255,255,255,.78) !important;
    display:block !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.5 !important;
    margin:-4px 0 10px !important;
    order:-1 !important;
}

.minimal-login-card > .error{
    grid-column:1 !important;
    grid-row:2 !important;
    width:min(560px,calc(100% - 96px)) !important;
    justify-self:center !important;
    margin:0 0 16px !important;
    z-index:4 !important;
}

.minimal-input{
    height:62px !important;
    width:100% !important;
    border:1px solid rgba(255,255,255,.2) !important;
    border-radius:18px !important;
    background:rgba(255,255,255,.14) !important;
    display:grid !important;
    grid-template-columns:58px 1fr !important;
    align-items:center !important;
    color:#ffffff !important;
    transition:background .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease),transform .22s var(--ease) !important;
}

.minimal-input:hover{
    background:rgba(255,255,255,.18) !important;
    border-color:rgba(255,255,255,.34) !important;
}

.minimal-input:focus-within{
    background:rgba(255,255,255,.22) !important;
    border-color:rgba(255,255,255,.58) !important;
    box-shadow:0 0 0 4px rgba(255,255,255,.1) !important;
    transform:translateY(-1px) !important;
}

.minimal-input span{
    display:grid !important;
    place-items:center !important;
    color:rgba(255,255,255,.86) !important;
    font-size:16px !important;
    font-weight:900 !important;
}

.minimal-input input{
    width:100% !important;
    height:100% !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#ffffff !important;
    font-size:15px !important;
    font-weight:750 !important;
    letter-spacing:0 !important;
}

.minimal-input input::placeholder{
    color:rgba(255,255,255,.62) !important;
}

.minimal-login-btn{
    width:100% !important;
    height:62px !important;
    background:#ffffff !important;
    color:#244cb8 !important;
    border:0 !important;
    border-radius:18px !important;
    font-size:14px !important;
    font-weight:900 !important;
    letter-spacing:.07em !important;
    box-shadow:0 18px 36px rgba(10,27,78,.22) !important;
    cursor:pointer !important;
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),color .22s var(--ease) !important;
}

.minimal-login-btn:hover{
    transform:translateY(-2px) !important;
    background:#e9efff !important;
    color:#17398f !important;
    box-shadow:0 24px 46px rgba(10,27,78,.26) !important;
}

.forgot-link{
    grid-column:1 !important;
    grid-row:4 !important;
    width:min(560px,calc(100% - 96px)) !important;
    justify-self:center !important;
    align-self:start !important;
    text-align:center !important;
    color:rgba(255,255,255,.78) !important;
    font-size:13px !important;
    font-weight:800 !important;
    margin:18px 0 0 !important;
    z-index:3 !important;
}

.minimal-login-brand{
    grid-column:2 !important;
    grid-row:1 / -1 !important;
    align-self:stretch !important;
    justify-self:stretch !important;
    min-height:100vh !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:clamp(56px,8vw,130px) clamp(54px,8vw,130px) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    text-align:left !important;
    gap:20px !important;
    background:transparent !important;
    border-left:0 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    box-shadow:none !important;
    color:#ffffff !important;
    position:relative !important;
    z-index:2 !important;
}

.minimal-login-brand:before{
    content:"Grade Evaluation Decision Support" !important;
    width:max-content !important;
    max-width:100% !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:12px 18px !important;
    border-radius:12px !important;
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.2) !important;
    color:#ffffff !important;
    font-size:15px !important;
    font-weight:900 !important;
    letter-spacing:.02em !important;
    text-transform:none !important;
    box-shadow:0 14px 34px rgba(10,27,78,.12) !important;
}

.minimal-login-brand:after{
    content:"" !important;
    width:160px !important;
    height:6px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.34) !important;
    order:3 !important;
    margin-top:2px !important;
}

.minimal-login-brand h1{
    color:#ffffff !important;
    font-size:clamp(68px,8vw,128px) !important;
    font-weight:900 !important;
    letter-spacing:-.08em !important;
    line-height:.92 !important;
    margin:0 !important;
    text-shadow:0 18px 42px rgba(7,20,58,.2) !important;
}

.minimal-login-brand h1::first-letter{
    color:#ffffff !important;
}

.minimal-login-brand p{
    max-width:670px !important;
    color:rgba(255,255,255,.84) !important;
    font-size:clamp(16px,1.2vw,21px) !important;
    font-weight:650 !important;
    letter-spacing:.01em !important;
    line-height:1.65 !important;
    text-transform:none !important;
    margin:18px 0 0 !important;
    order:4 !important;
}

.minimal-login-brand p:empty::before{
    content:"Academic monitoring, task planning, and rule-based guidance for student support." !important;
}

html[data-theme="dark"] body:has(.minimal-login-page){
    background:#0f172a !important;
}

html[data-theme="dark"] .minimal-login-page,
html[data-theme="dark"] .minimal-login-card{
    background:linear-gradient(135deg,#0f172a 0%,#172554 52%,#1e3a8a 100%) !important;
}

html[data-theme="dark"] .minimal-login-card:before{
    background:
        radial-gradient(circle at 88% 18%,rgba(15,23,42,.46) 0 12%,transparent 12.3%),
        radial-gradient(circle at 82% 82%,rgba(15,23,42,.36) 0 9%,transparent 9.3%),
        radial-gradient(circle at 14% 78%,rgba(255,255,255,.05) 0 16%,transparent 16.3%),
        linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,0)) !important;
}

html[data-theme="dark"] .minimal-login-form{
    background:rgba(17,24,39,.62) !important;
    border-color:rgba(148,163,184,.22) !important;
    box-shadow:0 34px 90px rgba(0,0,0,.3) !important;
}

html[data-theme="dark"] .minimal-login-form:before,
html[data-theme="dark"] .minimal-login-brand h1{
    color:#eef4ff !important;
}

html[data-theme="dark"] .minimal-login-form:after,
html[data-theme="dark"] .minimal-login-brand p,
html[data-theme="dark"] .forgot-link{
    color:rgba(226,232,240,.78) !important;
}

html[data-theme="dark"] .minimal-input{
    background:rgba(30,41,59,.62) !important;
    border-color:rgba(148,163,184,.24) !important;
}

html[data-theme="dark"] .minimal-input:hover,
html[data-theme="dark"] .minimal-input:focus-within{
    background:rgba(30,41,59,.82) !important;
    border-color:rgba(191,219,254,.42) !important;
    box-shadow:0 0 0 4px rgba(191,219,254,.08) !important;
}

html[data-theme="dark"] .minimal-input span{
    color:#c7d2fe !important;
}

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

html[data-theme="dark"] .minimal-input input::placeholder{
    color:#94a3b8 !important;
}

html[data-theme="dark"] .minimal-login-btn{
    background:#dbe7ff !important;
    color:#172554 !important;
    box-shadow:0 18px 36px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .minimal-login-btn:hover{
    background:#ffffff !important;
    color:#0f172a !important;
}

html[data-theme="dark"] .minimal-login-brand:before{
    background:rgba(255,255,255,.1) !important;
    border-color:rgba(255,255,255,.18) !important;
    color:#eef4ff !important;
}

html[data-theme="dark"] .minimal-login-brand:after{
    background:rgba(226,232,240,.28) !important;
}

@media(max-width:1100px){
    .minimal-login-card{
        grid-template-columns:minmax(420px,48vw) minmax(0,1fr) !important;
    }

    .minimal-login-form{
        width:min(500px,calc(100% - 56px)) !important;
        min-height:420px !important;
        padding:42px !important;
    }

    .minimal-login-brand h1{
        font-size:clamp(54px,8vw,94px) !important;
    }
}

@media(max-width:920px){
    .minimal-login-card{
        grid-template-columns:1fr !important;
        grid-template-rows:auto auto auto auto !important;
        min-height:100vh !important;
    }

    .minimal-login-brand{
        grid-column:1 !important;
        grid-row:1 !important;
        min-height:34vh !important;
        padding:36px 28px !important;
        align-items:center !important;
        text-align:center !important;
        justify-content:center !important;
    }

    .minimal-login-brand h1{
        font-size:clamp(44px,10vw,72px) !important;
    }

    .minimal-login-brand p{
        font-size:14px !important;
        max-width:560px !important;
    }

    .minimal-login-brand:after{
        margin-inline:auto !important;
    }

    .minimal-login-form{
        grid-column:1 !important;
        grid-row:2 !important;
        margin:28px 0 0 !important;
        width:min(520px,calc(100% - 40px)) !important;
        min-height:0 !important;
        padding:32px !important;
    }

    .minimal-login-card > .error{
        grid-column:1 !important;
        grid-row:2 !important;
        width:min(520px,calc(100% - 40px)) !important;
    }

    .forgot-link{
        grid-column:1 !important;
        grid-row:3 !important;
        width:min(520px,calc(100% - 40px)) !important;
        margin-bottom:34px !important;
    }
}

@media(max-width:560px){
    .minimal-login-brand{
        min-height:30vh !important;
        padding:28px 22px !important;
    }

    .minimal-login-brand:before{
        font-size:12px !important;
        padding:10px 13px !important;
    }

    .minimal-login-brand h1{
        font-size:42px !important;
    }

    .minimal-login-brand p{
        font-size:13px !important;
        line-height:1.5 !important;
    }

    .minimal-login-form{
        width:calc(100% - 28px) !important;
        padding:24px !important;
        border-radius:24px !important;
    }

    .minimal-login-form:before{
        font-size:38px !important;
    }

    .minimal-input,
    .minimal-login-btn{
        height:52px !important;
    }
}

html body:has(.minimal-login-page){
    min-height:100vh !important;
    overflow-x:hidden !important;
    background:#f4f3ff !important;
}

.minimal-login-page{
    min-height:100vh !important;
    width:100vw !important;
    display:block !important;
    place-items:unset !important;
    padding:0 !important;
    margin:0 !important;
    background:linear-gradient(135deg,#f7f5ff 0%,#eef2ff 45%,#f8fbff 100%) !important;
    position:relative !important;
    overflow:hidden !important;
}

.minimal-login-page:before,
.minimal-login-page:after,
.login-blob,
.blob-one,
.blob-two,
.blob-three{
    display:none !important;
    content:none !important;
    animation:none !important;
    background:none !important;
}

.minimal-login-card{
    width:100vw !important;
    min-width:100vw !important;
    max-width:none !important;
    min-height:100vh !important;
    height:100vh !important;
    position:relative !important;
    z-index:2 !important;
    display:grid !important;
    grid-template-columns:minmax(430px,48%) minmax(430px,52%) !important;
    grid-template-rows:1fr auto auto auto 1fr !important;
    align-items:center !important;
    justify-items:center !important;
    gap:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:hidden !important;
}

.minimal-login-card:before{
    content:"" !important;
    position:absolute !important;
    inset:0 auto 0 48% !important;
    width:80px !important;
    z-index:3 !important;
    background:
        radial-gradient(circle at 0 8%,transparent 0 34px,#ffffff 35px 54px,transparent 55px),
        radial-gradient(circle at 0 24%,transparent 0 34px,#ffffff 35px 54px,transparent 55px),
        radial-gradient(circle at 0 40%,transparent 0 34px,#ffffff 35px 54px,transparent 55px),
        radial-gradient(circle at 0 56%,transparent 0 34px,#ffffff 35px 54px,transparent 55px),
        radial-gradient(circle at 0 72%,transparent 0 34px,#ffffff 35px 54px,transparent 55px),
        radial-gradient(circle at 0 88%,transparent 0 34px,#ffffff 35px 54px,transparent 55px),
        linear-gradient(90deg,#ffffff 0 42px,rgba(109,40,217,.16) 43px 44px,transparent 45px) !important;
    pointer-events:none !important;
}

.minimal-login-card:after{
    content:"" !important;
    position:absolute !important;
    right:-15vw !important;
    top:-24vh !important;
    width:64vw !important;
    height:64vw !important;
    border-radius:999px !important;
    background:radial-gradient(circle,rgba(255,255,255,.16),rgba(255,255,255,.04) 44%,transparent 68%) !important;
    z-index:1 !important;
    pointer-events:none !important;
}

.minimal-login-brand{
    grid-column:2 !important;
    grid-row:1/6 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    min-height:100vh !important;
    justify-self:stretch !important;
    align-self:stretch !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:18px !important;
    padding:clamp(44px,6vw,92px) !important;
    margin:0 !important;
    text-align:center !important;
    color:#ffffff !important;
    background:
        radial-gradient(circle at 84% 16%,rgba(255,255,255,.16),transparent 28%),
        radial-gradient(circle at 18% 86%,rgba(255,255,255,.12),transparent 26%),
        linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%) !important;
    position:relative !important;
    overflow:hidden !important;
    z-index:2 !important;
}

.minimal-login-brand:before{
    content:"A Web-Based Academic Monitoring Decision Support System" !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:34px !important;
    padding:9px 18px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.16) !important;
    border:1px solid rgba(255,255,255,.26) !important;
    color:rgba(255,255,255,.92) !important;
    font-size:11px !important;
    font-weight:900 !important;
    letter-spacing:.16em !important;
    text-transform:uppercase !important;
    box-shadow:0 18px 40px rgba(35,27,98,.12) !important;
}

.minimal-login-brand h1{
    margin:0 !important;
    color:#ffffff !important;
    font-size:clamp(58px,6.5vw,116px) !important;
    font-weight:900 !important;
    letter-spacing:-.075em !important;
    line-height:.88 !important;
    text-shadow:0 18px 42px rgba(15,23,80,.22) !important;
}

.minimal-login-brand h1:before,
.minimal-login-brand h1:after,
.minimal-login-brand p:before{
    display:none !important;
    content:none !important;
}

.minimal-login-brand p{
    max-width:520px !important;
    margin:10px auto 0 !important;
    color:rgba(255,255,255,.84) !important;
    font-size:clamp(12px,1vw,15px) !important;
    font-weight:900 !important;
    letter-spacing:.18em !important;
    line-height:1.7 !important;
    text-transform:uppercase !important;
}

.minimal-login-form{
    grid-column:1 !important;
    grid-row:2/4 !important;
    width:min(520px,calc(100% - 80px)) !important;
    max-width:520px !important;
    justify-self:center !important;
    align-self:center !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:18px !important;
    padding:clamp(30px,4vw,52px) !important;
    margin:0 !important;
    background:rgba(255,255,255,.82) !important;
    border:1px solid rgba(226,232,240,.92) !important;
    border-radius:34px !important;
    box-shadow:0 30px 90px rgba(71,63,142,.14) !important;
    backdrop-filter:blur(18px) !important;
    position:relative !important;
    z-index:5 !important;
}

.minimal-login-form:before{
    content:"Hello!" !important;
    display:block !important;
    order:-3 !important;
    color:#1f2937 !important;
    font-size:clamp(42px,4.4vw,68px) !important;
    font-weight:900 !important;
    letter-spacing:-.055em !important;
    line-height:.95 !important;
    text-align:center !important;
    margin:0 !important;
}

.minimal-login-form:after{
    content:"Sign in to your account" !important;
    display:block !important;
    order:-2 !important;
    color:#64748b !important;
    font-size:15px !important;
    font-weight:750 !important;
    text-align:center !important;
    margin:-8px 0 10px !important;
}

.minimal-login-card .error{
    grid-column:1 !important;
    grid-row:1 !important;
    align-self:end !important;
    justify-self:center !important;
    width:min(520px,calc(100% - 80px)) !important;
    max-width:520px !important;
    margin:0 0 18px !important;
    position:relative !important;
    z-index:6 !important;
}

.minimal-input{
    height:64px !important;
    width:100% !important;
    display:grid !important;
    grid-template-columns:60px minmax(0,1fr) !important;
    align-items:center !important;
    border:1px solid #e3e8f4 !important;
    border-radius:999px !important;
    background:#eef4ff !important;
    color:#4f46e5 !important;
    box-shadow:0 14px 34px rgba(88,80,160,.08) !important;
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),background .22s var(--ease),border-color .22s var(--ease) !important;
    overflow:hidden !important;
}

.minimal-input:hover{
    transform:translateY(-1px) !important;
    background:#f3f6ff !important;
    border-color:#d9e1f5 !important;
    box-shadow:0 18px 42px rgba(88,80,160,.12) !important;
}

.minimal-input:focus-within{
    transform:translateY(-2px) !important;
    background:#ffffff !important;
    border-color:#a5b4fc !important;
    box-shadow:0 0 0 5px rgba(124,58,237,.10),0 22px 48px rgba(88,80,160,.16) !important;
}

.minimal-input span{
    width:42px !important;
    height:42px !important;
    margin-left:12px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:15px !important;
    background:linear-gradient(135deg,#7c3aed,#2563eb) !important;
    color:#ffffff !important;
    font-size:0 !important;
    font-weight:900 !important;
    box-shadow:0 14px 28px rgba(91,33,182,.22) !important;
    position:relative !important;
    overflow:hidden !important;
}

.minimal-input span:before{
    content:"" !important;
    width:20px !important;
    height:20px !important;
    display:block !important;
    background:#ffffff !important;
    mask-repeat:no-repeat !important;
    mask-position:center !important;
    mask-size:contain !important;
    -webkit-mask-repeat:no-repeat !important;
    -webkit-mask-position:center !important;
    -webkit-mask-size:contain !important;
}

.minimal-login-form .minimal-input:nth-of-type(1) span:before{
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E") !important;
}

.minimal-login-form .minimal-input:nth-of-type(2) span:before{
    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v2'/%3E%3C/svg%3E") !important;
    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2.5'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3Cpath d='M12 14v2'/%3E%3C/svg%3E") !important;
}

.minimal-input input{
    width:100% !important;
    height:100% !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#1e1b4b !important;
    font-size:14px !important;
    font-weight:800 !important;
    letter-spacing:.01em !important;
    padding:0 24px 0 4px !important;
}

.minimal-input input::placeholder{
    color:#7c7aa8 !important;
}

.minimal-login-btn{
    width:100% !important;
    height:62px !important;
    justify-self:center !important;
    margin-top:4px !important;
    border:0 !important;
    border-radius:999px !important;
    background:linear-gradient(135deg,#7c3aed 0%,#2563eb 100%) !important;
    color:#ffffff !important;
    font-size:13px !important;
    font-weight:900 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    box-shadow:0 18px 38px rgba(91,33,182,.26) !important;
    cursor:pointer !important;
    transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease) !important;
}

.minimal-login-btn:hover{
    transform:translateY(-2px) !important;
    filter:saturate(1.08) !important;
    box-shadow:0 24px 48px rgba(91,33,182,.32) !important;
}

.minimal-login-btn:active{
    transform:translateY(1px) scale(.99) !important;
    box-shadow:0 12px 26px rgba(91,33,182,.26) !important;
}

.forgot-link{
    grid-column:1 !important;
    grid-row:4 !important;
    justify-self:center !important;
    align-self:start !important;
    width:min(520px,calc(100% - 80px)) !important;
    max-width:520px !important;
    margin:18px 0 0 !important;
    color:#64748b !important;
    text-align:center !important;
    font-size:13px !important;
    font-weight:750 !important;
    text-decoration:none !important;
    position:relative !important;
    z-index:6 !important;
}

.forgot-link:hover{
    color:#5b21b6 !important;
}

html[data-theme="dark"] body:has(.minimal-login-page){
    background:#0f172a !important;
}

html[data-theme="dark"] .minimal-login-page{
    background:linear-gradient(135deg,#0f172a 0%,#111827 45%,#172554 100%) !important;
}

html[data-theme="dark"] .minimal-login-card:before{
    background:
        radial-gradient(circle at 0 8%,transparent 0 34px,#111827 35px 54px,transparent 55px),
        radial-gradient(circle at 0 24%,transparent 0 34px,#111827 35px 54px,transparent 55px),
        radial-gradient(circle at 0 40%,transparent 0 34px,#111827 35px 54px,transparent 55px),
        radial-gradient(circle at 0 56%,transparent 0 34px,#111827 35px 54px,transparent 55px),
        radial-gradient(circle at 0 72%,transparent 0 34px,#111827 35px 54px,transparent 55px),
        radial-gradient(circle at 0 88%,transparent 0 34px,#111827 35px 54px,transparent 55px),
        linear-gradient(90deg,#111827 0 42px,rgba(124,58,237,.24) 43px 44px,transparent 45px) !important;
}

html[data-theme="dark"] .minimal-login-form{
    background:rgba(17,24,39,.86) !important;
    border-color:rgba(148,163,184,.18) !important;
    box-shadow:0 30px 90px rgba(0,0,0,.26) !important;
}

html[data-theme="dark"] .minimal-login-form:before{
    color:#f8fafc !important;
}

html[data-theme="dark"] .minimal-login-form:after,
html[data-theme="dark"] .forgot-link{
    color:#cbd5e1 !important;
}

html[data-theme="dark"] .minimal-input{
    background:#1e293b !important;
    border-color:#334155 !important;
    box-shadow:0 14px 34px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .minimal-input:focus-within{
    background:#22304a !important;
    border-color:#6366f1 !important;
}

html[data-theme="dark"] .minimal-input input{
    color:#f8fafc !important;
}

html[data-theme="dark"] .minimal-input input::placeholder{
    color:#94a3b8 !important;
}

@media(max-width:1080px){
    .minimal-login-card{
        grid-template-columns:1fr !important;
        grid-template-rows:auto auto auto auto !important;
        min-height:100vh !important;
        height:auto !important;
        overflow:auto !important;
        padding:28px !important;
        background:
            linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.92) 48%,transparent 48%),
            linear-gradient(135deg,#7c3aed 0%,#4f46e5 50%,#2563eb 100%) !important;
    }

    .minimal-login-card:before,
    .minimal-login-card:after{
        display:none !important;
        content:none !important;
    }

    .minimal-login-brand{
        grid-column:1 !important;
        grid-row:1 !important;
        min-height:300px !important;
        height:auto !important;
        border-radius:34px !important;
        padding:44px 24px !important;
        margin:0 auto 24px !important;
        width:min(720px,100%) !important;
        justify-self:center !important;
        align-self:center !important;
    }

    .minimal-login-form{
        grid-column:1 !important;
        grid-row:2 !important;
        width:min(540px,100%) !important;
    }

    .minimal-login-card .error,
    .forgot-link{
        grid-column:1 !important;
        width:min(540px,100%) !important;
    }

    .forgot-link{
        grid-row:3 !important;
    }
}

@media(max-width:640px){
    .minimal-login-page{
        min-height:100svh !important;
        overflow:auto !important;
    }

    .minimal-login-card{
        min-height:100svh !important;
        padding:18px !important;
    }

    .minimal-login-brand{
        min-height:240px !important;
        border-radius:28px !important;
        padding:34px 18px !important;
    }

    .minimal-login-brand h1{
        font-size:clamp(42px,14vw,68px) !important;
    }

    .minimal-login-brand p{
        font-size:11px !important;
        letter-spacing:.12em !important;
    }

    .minimal-login-form{
        width:100% !important;
        padding:28px 20px !important;
        border-radius:28px !important;
    }

    .minimal-login-form:before{
        font-size:38px !important;
    }

    .minimal-input{
        height:58px !important;
        grid-template-columns:56px minmax(0,1fr) !important;
    }

    .minimal-input span{
        width:38px !important;
        height:38px !important;
        margin-left:10px !important;
    }

    .minimal-login-btn{
        height:58px !important;
    }

    .forgot-link{
        width:100% !important;
    }
}

.button-row,
.tab-buttons,
.task-filter-tabs,
.compact-task-actions,
.task-inline-actions,
.task-control-panel form,
.task-command-actions,
.modal-card .button-row,
.record-history-card .button-row,
.monitor-card .button-row,
.forms .button-row{
    width:max-content;
    max-width:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:7px;
    border-radius:16px;
    background:rgba(244,247,252,.86);
    border:1px solid rgba(219,226,238,.92);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72),0 8px 18px rgba(31,45,90,.035);
}

.button-row.full,
.forms .button-row.full{
    width:100%;
}

.clean-panel-head .tab-buttons,
.card-head .tab-buttons,
.section-head .tab-buttons,
.month-calendar-head .tab-buttons{
    background:rgba(244,247,252,.92);
    border-color:#dfe6f2;
    padding:6px;
    border-radius:18px;
}

.btn,
.tab-button,
.task-filter,
.task-control,
.dot-action,
.popup-menu button,
.popup-menu a,
.minimal-login-btn{
    position:relative;
    overflow:hidden;
    transform:translateZ(0);
    user-select:none;
    -webkit-tap-highlight-color:transparent;
}

.btn:active,
.tab-button:active,
.task-filter:active,
.task-control:active,
.dot-action:active,
.popup-menu button:active,
.popup-menu a:active,
.minimal-login-btn:active{
    transform:translateY(1px) scale(.985);
    box-shadow:inset 0 2px 7px rgba(24,36,72,.14),0 4px 10px rgba(31,45,90,.045);
}

.btn:focus-visible,
.tab-button:focus-visible,
.task-filter:focus-visible,
.task-control:focus-visible,
.dot-action:focus-visible,
.popup-menu button:focus-visible,
.popup-menu a:focus-visible,
.minimal-login-btn:focus-visible{
    outline:0;
    box-shadow:0 0 0 4px rgba(41,79,195,.14),0 10px 22px rgba(31,45,90,.06);
}

.btn:after,
.tab-button:after,
.task-filter:after,
.task-control:after,
.dot-action:after,
.minimal-login-btn:after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.24),transparent 45%);
    opacity:0;
    transition:opacity .18s var(--ease);
    pointer-events:none;
}

.btn:hover:after,
.tab-button:hover:after,
.task-filter:hover:after,
.task-control:hover:after,
.dot-action:hover:after,
.minimal-login-btn:hover:after{
    opacity:1;
}

.btn{
    border-radius:12px;
    min-height:40px;
    padding:10px 15px;
    background:#ffffff;
    border-color:#dfe6f2;
    color:#25304a;
    box-shadow:0 3px 8px rgba(31,45,90,.035);
}

.btn:hover{
    background:#f9fbff;
    border-color:#ccd8ea;
    color:#172033;
}

.btn-primary{
    background:linear-gradient(135deg,#3559bd,#2f64d4);
    border-color:#315ac3;
    color:#ffffff;
    box-shadow:0 8px 18px rgba(47,100,212,.14);
}

.btn-primary:hover{
    background:linear-gradient(135deg,#2f51ad,#2b5ec8);
    color:#ffffff;
    border-color:#315ac3;
}

.btn-outline,
.btn-secondary,
.btn-info,
.btn-icon,
.btn-ghost{
    background:#ffffff;
    color:#33415f;
    border-color:#dbe4f1;
}

.btn-outline:hover,
.btn-secondary:hover,
.btn-info:hover,
.btn-icon:hover,
.btn-ghost:hover{
    background:#f5f8fd;
    color:#294fc3;
    border-color:#cbd8ee;
}

.btn-danger{
    background:#fff7f7;
    color:#8d4949;
    border-color:#ead1d1;
}

.btn-danger:hover{
    background:#f8eded;
    color:#783a3a;
    border-color:#e2c2c2;
}

.btn-success{
    background:#f7faf8;
    color:#53675d;
    border-color:#dce9e2;
}

.btn-success:hover{
    background:#eef6f1;
    color:#475d52;
    border-color:#d0dfd6;
}

.tab-buttons{
    width:max-content;
    min-height:48px;
}

.tab-button,
.task-filter{
    min-height:36px;
    padding:8px 14px;
    border-radius:12px;
    background:transparent;
    border:1px solid transparent;
    color:#536078;
    box-shadow:none;
}

.tab-button:hover,
.task-filter:hover{
    background:#ffffff;
    border-color:#dbe4f1;
    color:#294fc3;
}

.tab-button.active,
.task-filter.active{
    background:#ffffff;
    border-color:#c9d6ec;
    color:#2449b5;
    box-shadow:0 7px 16px rgba(31,45,90,.06);
}

.task-filter-tabs{
    width:max-content;
    justify-content:flex-start;
}

.compact-task-actions{
    width:100%;
    justify-content:flex-start;
    margin-top:12px;
}

.compact-task-actions form{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.task-inline-actions{
    width:100%;
    justify-content:flex-start;
    margin-top:12px;
}

.status,
.flag-pill{
    min-height:34px;
    padding:8px 13px;
    border-radius:11px;
    font-size:11.5px;
    line-height:1.2;
    letter-spacing:.005em;
    background:#f5f7fb;
    color:#526073;
    border:1px solid #dfe6f1;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.status.good,
.flag-pill.good{
    background:#f0f6f3;
    color:#4f665b;
    border-color:#d8e7df;
}

.status.warning,
.flag-pill.warning{
    background:#f7f2e9;
    color:#6c5d45;
    border-color:#eadfcb;
}

.status.danger,
.flag-pill.danger{
    background:#f7eeee;
    color:#795151;
    border-color:#e6d1d1;
}

.status.critical,
.flag-pill.critical{
    background:#f6eeee;
    color:#764e4e;
    border-color:#e5d0d0;
}

.notice,
.error{
    border-radius:13px;
    padding:14px 16px;
    font-size:13px;
    line-height:1.55;
    border-width:1px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.62);
}

.notice{
    background:#f6f8fc;
    color:#46536a;
    border-color:#dfe6f1;
}

.notice.warning{
    background:#f7f2e9;
    color:#6c5d45;
    border-color:#eadfcb;
}

.notice.danger,
.error{
    background:#f7eeee;
    color:#795151;
    border-color:#e6d1d1;
}

.notice.good{
    background:#f0f6f3;
    color:#4f665b;
    border-color:#d8e7df;
}

.monitor-status-row,
.meta-row,
.activity-flag-wrap,
.flag-pill-list{
    gap:10px;
}

.monitor-status-row,
.meta-row{
    background:#f7f9fc;
    border-color:#dfe6f1;
    border-radius:16px;
    padding:12px;
}

.student-overview-card .status,
.task-command-card .status,
.schedule-hero .status,
.language-hero .status{
    background:rgba(255,255,255,.14);
    border-color:rgba(255,255,255,.22);
    color:#ffffff;
}

.section-overview,
.section-overview-card{
    min-height:280px;
    display:grid;
    grid-template-rows:auto 1fr;
    align-content:start;
}

.section-overview .flag-pill-list,
.section-overview-card .flag-pill-list{
    min-height:190px;
    align-content:start;
    padding:16px;
    border-radius:20px;
    background:#f7f9fc;
    border:1px solid #dfe6f1;
}

.dashboard-focus-grid .card.clean-panel:has(.flag-pill-list){
    min-height:300px;
}

.dashboard-focus-grid .card.clean-panel:has(.flag-pill-list) .flag-pill-list{
    min-height:210px;
    padding:16px;
    align-content:flex-start;
    background:#f7f9fc;
    border:1px solid #dfe6f1;
    border-radius:20px;
}

.dashboard-focus-grid .card.clean-panel:has(.flag-pill-list) .flag-pill{
    min-width:72px;
    justify-content:center;
}

.compact-task-list .compact-task-item{
    border-radius:18px;
}

.compact-task-item .flag-pill-list{
    justify-content:flex-end;
    min-height:auto;
    padding:0;
    background:transparent;
    border:0;
}

html[data-theme="dark"] .button-row,
html[data-theme="dark"] .tab-buttons,
html[data-theme="dark"] .task-filter-tabs,
html[data-theme="dark"] .compact-task-actions,
html[data-theme="dark"] .task-inline-actions,
html[data-theme="dark"] .task-control-panel form,
html[data-theme="dark"] .task-command-actions,
html[data-theme="dark"] .modal-card .button-row,
html[data-theme="dark"] .record-history-card .button-row,
html[data-theme="dark"] .monitor-card .button-row,
html[data-theme="dark"] .forms .button-row{
    background:rgba(24,34,53,.88);
    border-color:#2c3a54;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 8px 18px rgba(0,0,0,.12);
}

html[data-theme="dark"] .btn,
html[data-theme="dark"] .tab-button,
html[data-theme="dark"] .task-filter,
html[data-theme="dark"] .task-control{
    background:#111827;
    color:#cbd5e1;
    border-color:#2d3b52;
    box-shadow:0 4px 10px rgba(0,0,0,.12);
}

html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .tab-button:hover,
html[data-theme="dark"] .task-filter:hover,
html[data-theme="dark"] .task-control:hover{
    background:#182235;
    border-color:#3b4b66;
    color:#f8fafc;
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .tab-button.active,
html[data-theme="dark"] .task-filter.active,
html[data-theme="dark"] .task-control.start{
    background:#26395e;
    border-color:#40577d;
    color:#f8fafc;
    box-shadow:0 8px 18px rgba(0,0,0,.18);
}

html[data-theme="dark"] .btn-primary:hover,
html[data-theme="dark"] .tab-button.active:hover,
html[data-theme="dark"] .task-filter.active:hover{
    background:#2f436b;
    border-color:#4a628c;
}

html[data-theme="dark"] .btn-danger,
html[data-theme="dark"] .task-control.delete{
    background:#2f2024;
    color:#e7b8b8;
    border-color:#5c3338;
}

html[data-theme="dark"] .btn-danger:hover,
html[data-theme="dark"] .task-control.delete:hover{
    background:#39262a;
    color:#f1caca;
}

html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .status.good,
html[data-theme="dark"] .flag-pill.good{
    background:#1d332b;
    color:#b9d8c7;
    border-color:#345447;
}

html[data-theme="dark"] .status,
html[data-theme="dark"] .flag-pill{
    background:#1b2639;
    color:#cbd5e1;
    border-color:#334155;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}

html[data-theme="dark"] .status.warning,
html[data-theme="dark"] .flag-pill.warning{
    background:#342d21;
    color:#dfcfad;
    border-color:#5a4b31;
}

html[data-theme="dark"] .status.danger,
html[data-theme="dark"] .flag-pill.danger,
html[data-theme="dark"] .status.critical,
html[data-theme="dark"] .flag-pill.critical{
    background:#342326;
    color:#e2b5b5;
    border-color:#5a3439;
}

html[data-theme="dark"] .notice,
html[data-theme="dark"] .error{
    background:#182235;
    color:#cbd5e1;
    border-color:#334155;
}

html[data-theme="dark"] .notice.warning{
    background:#342d21;
    color:#dfcfad;
    border-color:#5a4b31;
}

html[data-theme="dark"] .notice.danger,
html[data-theme="dark"] .error{
    background:#342326;
    color:#e2b5b5;
    border-color:#5a3439;
}

html[data-theme="dark"] .notice.good{
    background:#1d332b;
    color:#b9d8c7;
    border-color:#345447;
}

html[data-theme="dark"] .monitor-status-row,
html[data-theme="dark"] .meta-row{
    background:#141e2f;
    border-color:#2d3b52;
}

html[data-theme="dark"] .section-overview .flag-pill-list,
html[data-theme="dark"] .section-overview-card .flag-pill-list,
html[data-theme="dark"] .dashboard-focus-grid .card.clean-panel:has(.flag-pill-list) .flag-pill-list{
    background:#141e2f;
    border-color:#2d3b52;
}

@media(max-width:860px){
    .button-row,
    .tab-buttons,
    .task-filter-tabs,
    .compact-task-actions,
    .task-inline-actions,
    .task-control-panel form,
    .task-command-actions{
        width:100%;
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        scrollbar-width:thin;
    }

    .button-row .btn,
    .tab-button,
    .task-filter,
    .task-control{
        flex:0 0 auto;
    }

    .dashboard-focus-grid .card.clean-panel:has(.flag-pill-list),
    .section-overview,
    .section-overview-card{
        min-height:auto;
    }

    .dashboard-focus-grid .card.clean-panel:has(.flag-pill-list) .flag-pill-list,
    .section-overview .flag-pill-list,
    .section-overview-card .flag-pill-list{
        min-height:140px;
    }
}

@media(max-width:520px){
    .button-row,
    .tab-buttons,
    .task-filter-tabs,
    .compact-task-actions,
    .task-inline-actions,
    .task-control-panel form,
    .task-command-actions{
        padding:6px;
        border-radius:14px;
    }

    .btn,
    .tab-button,
    .task-filter,
    .task-control{
        min-height:38px;
        padding:9px 12px;
        font-size:11px;
    }

    .status,
    .flag-pill{
        min-height:32px;
        padding:7px 11px;
        font-size:11px;
    }
}

.schedule-combined-panel{
    display:grid;
    gap:18px;
}

.schedule-combined-panel .clean-panel-head{
    align-items:center;
    margin-bottom:0;
}

.schedule-combined-panel .tab-panel{
    width:100%;
}

.schedule-combined-panel .section-subhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:16px;
    background:var(--surface-soft);
}

.schedule-combined-panel .section-subhead h3{
    color:var(--text);
    font-size:15px;
    font-weight:900;
    letter-spacing:-.02em;
}

.attendance-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.schedule-combined-panel .monitor-card{
    border-radius:18px;
    padding:15px;
    background:var(--surface);
    border-color:var(--line);
}

.schedule-combined-panel .monitor-card.warning,
.schedule-combined-panel .monitor-card.danger,
.schedule-combined-panel .monitor-card.good{
    background:var(--surface);
    border-color:var(--line);
}

.schedule-combined-panel .monitor-card-top{
    align-items:flex-start;
}

.schedule-combined-panel .monitor-card-top span{
    border-radius:10px;
    background:var(--surface-soft);
    color:var(--text-soft);
}

.schedule-combined-panel .monitor-status-row,
.schedule-combined-panel .meta-row,
.schedule-combined-panel .flag-pill-list{
    border-radius:14px;
}

.schedule-combined-panel .monitor-mini-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
}

.schedule-combined-panel .monitor-mini-grid div{
    min-height:70px;
    border-radius:12px;
}

.schedule-combined-panel .monitor-mini-grid span{
    font-size:10.5px;
    line-height:1.25;
}

.schedule-combined-panel .monitor-mini-grid strong{
    font-size:14px;
}

.schedule-combined-panel .mini-calendar{
    grid-template-columns:repeat(7,minmax(150px,1fr));
    gap:12px;
}

.schedule-combined-panel .calendar-day{
    min-height:250px;
    border-radius:18px;
    background:var(--surface-soft);
}

.schedule-combined-panel .calendar-day-head{
    min-height:64px;
    padding:14px;
}

.schedule-combined-panel .calendar-day-head strong{
    font-size:17px;
}

.schedule-combined-panel .calendar-day-head span{
    font-size:11.5px;
}

.schedule-combined-panel .calendar-item{
    border-radius:13px;
    padding:12px;
}

.schedule-combined-panel .calendar-item strong{
    font-size:13.5px;
}

.schedule-combined-panel .calendar-item span{
    font-size:12px;
}

.schedule-combined-panel .calendar-item small{
    font-size:11.5px;
}

.schedule-combined-panel .month-calendar-head{
    padding:12px 14px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:16px;
}

.schedule-combined-panel .month-calendar-grid{
    grid-template-columns:repeat(7,minmax(130px,1fr));
}

.activity-combined-panel{
    display:grid;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    gap:16px;
    align-items:stretch;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:22px;
    padding:14px;
}

.activity-combined-section{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    min-height:210px;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.activity-combined-section .activity-panel-head{
    margin-bottom:2px;
}

.activity-combined-section .activity-flag-wrap{
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:14px;
    padding:12px;
}

.activity-combined-section .activity-task-list{
    gap:9px;
}

.activity-combined-section .activity-task-item{
    border-radius:14px;
    padding:13px 13px 13px 15px;
}

.status,
.flag-pill{
    min-height:32px;
    padding:7px 12px;
    border-radius:10px;
    font-size:11.5px;
    line-height:1.25;
}

.status.good,
.flag-pill.good,
.notice.good{
    background:#eef6f1;
    color:#426653;
    border-color:#d7e7de;
}

.status.warning,
.flag-pill.warning,
.notice.warning{
    background:#f8f0df;
    color:#715728;
    border-color:#e8dcc2;
}

.status.danger,
.flag-pill.danger,
.notice.danger,
.error.show{
    background:#f6e6e7;
    color:#744646;
    border-color:#e7cfd1;
}

html[data-theme="dark"] .status.good,
html[data-theme="dark"] .flag-pill.good,
html[data-theme="dark"] .notice.good{
    background:#1f3a31;
    color:#c8e5d6;
    border-color:#315547;
}

html[data-theme="dark"] .status.warning,
html[data-theme="dark"] .flag-pill.warning,
html[data-theme="dark"] .notice.warning{
    background:#3d3320;
    color:#ead7af;
    border-color:#5b4a2c;
}

html[data-theme="dark"] .status.danger,
html[data-theme="dark"] .flag-pill.danger,
html[data-theme="dark"] .notice.danger,
html[data-theme="dark"] .error.show{
    background:#402729;
    color:#ecc6ca;
    border-color:#63383c;
}

.btn,
.tab-button,
.task-filter,
.task-control,
.dot-action,
.popup-menu button,
.popup-menu a{
    transition:transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease), box-shadow .16s var(--ease), color .16s var(--ease);
}

.btn:hover,
.tab-button:hover,
.task-filter:hover,
.task-control:hover,
.dot-action:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 16px rgba(31,45,90,.055);
}

.btn:active,
.tab-button:active,
.task-filter:active,
.task-control:active,
.dot-action:active,
.popup-menu button:active,
.popup-menu a:active{
    transform:translateY(1px) scale(.985);
    box-shadow:inset 0 2px 5px rgba(31,45,90,.12);
}

.button-row,
.tab-buttons,
.task-filter-tabs,
.compact-task-actions,
.task-inline-actions,
.task-command-actions,
.task-control-panel form{
    background:rgba(226,232,241,.48);
    border:1px solid rgba(203,213,225,.72);
    border-radius:15px;
    padding:7px;
}

html[data-theme="dark"] .button-row,
html[data-theme="dark"] .tab-buttons,
html[data-theme="dark"] .task-filter-tabs,
html[data-theme="dark"] .compact-task-actions,
html[data-theme="dark"] .task-inline-actions,
html[data-theme="dark"] .task-command-actions,
html[data-theme="dark"] .task-control-panel form{
    background:rgba(15,23,42,.45);
    border-color:rgba(148,163,184,.16);
}

html[data-theme="dark"] .schedule-combined-panel,
html[data-theme="dark"] .activity-combined-panel,
html[data-theme="dark"] .activity-combined-section,
html[data-theme="dark"] .schedule-combined-panel .section-subhead,
html[data-theme="dark"] .schedule-combined-panel .month-calendar-head{
    background:var(--surface);
    border-color:var(--line);
}

html[data-theme="dark"] .schedule-combined-panel .monitor-card,
html[data-theme="dark"] .activity-combined-section .activity-flag-wrap,
html[data-theme="dark"] .schedule-combined-panel .calendar-day,
html[data-theme="dark"] .schedule-combined-panel .month-day-card{
    background:var(--surface-soft);
    border-color:var(--line);
}

html[data-theme="dark"] .schedule-combined-panel .calendar-day-head,
html[data-theme="dark"] .schedule-combined-panel .calendar-item,
html[data-theme="dark"] .schedule-combined-panel .monitor-mini-grid div{
    background:var(--surface-muted);
    border-color:var(--line);
}

html[data-theme="dark"] .schedule-combined-panel .calendar-day-head strong,
html[data-theme="dark"] .schedule-combined-panel .calendar-item strong,
html[data-theme="dark"] .schedule-combined-panel .monitor-card-top h3,
html[data-theme="dark"] .schedule-combined-panel .section-subhead h3,
html[data-theme="dark"] .activity-combined-section .activity-panel-head h3{
    color:var(--text);
}

html[data-theme="dark"] .schedule-combined-panel .calendar-day-head span,
html[data-theme="dark"] .schedule-combined-panel .calendar-item small,
html[data-theme="dark"] .schedule-combined-panel .calendar-item span{
    color:var(--text-soft);
}

@media(max-width:1400px){
    .attendance-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .schedule-combined-panel .mini-calendar,
    .schedule-combined-panel .month-calendar-grid{
        grid-template-columns:repeat(4,minmax(150px,1fr));
    }
}

@media(max-width:1200px){
    .activity-combined-panel{
        grid-template-columns:1fr;
    }

    .schedule-combined-panel .monitor-mini-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:860px){
    .schedule-combined-panel .clean-panel-head{
        align-items:flex-start;
    }

    .attendance-summary-grid{
        grid-template-columns:1fr;
    }

    .schedule-combined-panel .mini-calendar,
    .schedule-combined-panel .month-calendar-grid{
        grid-template-columns:repeat(2,minmax(160px,1fr));
    }

    .schedule-combined-panel .monitor-mini-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .activity-combined-panel,
    .activity-combined-section{
        border-radius:18px;
    }
}

@media(max-width:520px){
    .schedule-combined-panel{
        padding:14px;
    }

    .schedule-combined-panel .tab-buttons,
    .schedule-combined-panel .button-row{
        width:100%;
    }

    .schedule-combined-panel .tab-button{
        flex:1 1 auto;
    }

    .schedule-combined-panel .mini-calendar,
    .schedule-combined-panel .month-calendar-grid,
    .schedule-combined-panel .monitor-mini-grid{
        grid-template-columns:1fr;
    }

    .activity-combined-panel{
        padding:12px;
    }

    .activity-combined-section{
        padding:14px;
        min-height:auto;
    }
}
.dashboard-attendance-schedule-panel{
    display:grid;
    gap:18px;
}

.dashboard-attendance-schedule-panel .clean-panel-head{
    align-items:center;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
    margin-bottom:0;
}

.dashboard-attendance-schedule-panel .tab-panel{
    padding-top:0;
}

.dashboard-section-divider{
    width:100%;
    display:flex;
    align-items:center;
    gap:14px;
    margin:4px 0 14px;
}

.dashboard-section-divider:before,
.dashboard-section-divider:after{
    content:"";
    height:1px;
    flex:1;
    background:linear-gradient(90deg,transparent,var(--line),transparent);
}

.dashboard-section-divider span{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:12px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    color:var(--text-soft);
    font-size:12px;
    font-weight:900;
    letter-spacing:.035em;
    text-transform:uppercase;
    white-space:nowrap;
}

.dashboard-section-divider.compact{
    margin:0 0 14px;
}

.dashboard-section-divider.compact span{
    min-height:30px;
    padding:7px 12px;
    font-size:11px;
}

.schedule-mode-panel{
    display:grid;
    gap:16px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
}

.schedule-mode-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:14px;
    border:1px solid var(--line);
    border-radius:18px;
    background:var(--surface);
}

.schedule-mode-head h3{
    color:var(--text);
    font-size:16px;
    font-weight:900;
    letter-spacing:-.025em;
}

.schedule-mode-head .tab-buttons{
    margin-left:auto;
}

.dashboard-attendance-schedule-panel .attendance-summary-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.dashboard-attendance-schedule-panel .monitor-card{
    border-radius:18px;
    min-height:auto;
}

.dashboard-attendance-schedule-panel .monitor-card-top .status,
.dashboard-attendance-schedule-panel .status,
.dashboard-attendance-schedule-panel .flag-pill{
    border-radius:10px;
}

.dashboard-attendance-schedule-panel .weekly-calendar-grid,
.dashboard-attendance-schedule-panel .month-calendar-grid{
    margin-top:0;
}

.dashboard-attendance-schedule-panel .weekly-day-head strong,
.dashboard-attendance-schedule-panel .calendar-day-head strong,
.dashboard-attendance-schedule-panel .month-day-card > span{
    font-size:18px;
    font-weight:900;
}

.dashboard-attendance-schedule-panel .weekly-day-head span,
.dashboard-attendance-schedule-panel .weekly-day-head small,
.dashboard-attendance-schedule-panel .calendar-day-head span,
.dashboard-attendance-schedule-panel .month-day-card > small,
.dashboard-attendance-schedule-panel .weekly-block span,
.dashboard-attendance-schedule-panel .weekly-block small,
.dashboard-attendance-schedule-panel .month-task-dot em{
    font-size:12px;
    font-weight:850;
}

.dashboard-attendance-schedule-panel .weekly-block strong,
.dashboard-attendance-schedule-panel .month-task-dot strong{
    font-size:13px;
    font-weight:900;
}

.tab-buttons,
.button-row,
.task-command-actions,
.task-control-panel form,
.compact-task-actions,
.task-inline-actions{
    background:rgba(148,163,184,.09);
    border:1px solid rgba(148,163,184,.16);
    border-radius:15px;
    padding:6px;
}

.tab-button,
.btn,
.task-control,
.dot-action{
    transition:transform .14s var(--ease), background .14s var(--ease), border-color .14s var(--ease), box-shadow .14s var(--ease), opacity .14s var(--ease);
}

.tab-button:hover,
.btn:hover,
.task-control:hover,
.dot-action:hover{
    transform:translateY(-1px);
    box-shadow:0 8px 16px rgba(31,45,90,.045);
}

.tab-button:active,
.btn:active,
.task-control:active,
.dot-action:active{
    transform:translateY(1px) scale(.985);
    box-shadow:inset 0 2px 7px rgba(31,45,90,.12);
}

.status,
.flag-pill{
    border-radius:10px;
    min-height:28px;
    padding:6px 11px;
    font-size:11px;
}

.status.good,
.flag-pill.good{
    background:#edf7f1;
    color:#3e6650;
    border-color:#d5e8dc;
}

.status.warning,
.flag-pill.warning,
.notice.warning{
    background:#f8f1e5;
    color:#735b2e;
    border-color:#eadcc1;
}

.status.danger,
.flag-pill.danger,
.notice.danger,
.error.show{
    background:#f7e9ea;
    color:#7a4a4d;
    border-color:#e7cacc;
}

.notice,
.error{
    border-radius:12px;
    font-size:13px;
    padding:13px 14px;
}

html[data-theme="dark"] .dashboard-attendance-schedule-panel .clean-panel-head{
    border-bottom-color:rgba(148,163,184,.16);
}

html[data-theme="dark"] .dashboard-section-divider:before,
html[data-theme="dark"] .dashboard-section-divider:after{
    background:linear-gradient(90deg,transparent,rgba(148,163,184,.22),transparent);
}

html[data-theme="dark"] .dashboard-section-divider span{
    background:#182235;
    border-color:rgba(148,163,184,.18);
    color:#cbd5e1;
}

html[data-theme="dark"] .schedule-mode-panel{
    background:#101a2e;
    border-color:rgba(148,163,184,.16);
}

html[data-theme="dark"] .schedule-mode-head{
    background:#111827;
    border-color:rgba(148,163,184,.16);
}

html[data-theme="dark"] .tab-buttons,
html[data-theme="dark"] .button-row,
html[data-theme="dark"] .task-command-actions,
html[data-theme="dark"] .task-control-panel form,
html[data-theme="dark"] .compact-task-actions,
html[data-theme="dark"] .task-inline-actions{
    background:rgba(15,23,42,.36);
    border-color:rgba(148,163,184,.14);
}

html[data-theme="dark"] .status.good,
html[data-theme="dark"] .flag-pill.good{
    background:#1f5f49;
    color:#d9f9e8;
    border-color:#2d765d;
}

html[data-theme="dark"] .status.warning,
html[data-theme="dark"] .flag-pill.warning,
html[data-theme="dark"] .notice.warning{
    background:#6f4f1f;
    color:#f8ead2;
    border-color:#85622b;
}

html[data-theme="dark"] .status.danger,
html[data-theme="dark"] .flag-pill.danger,
html[data-theme="dark"] .notice.danger,
html[data-theme="dark"] .error.show{
    background:#73343a;
    color:#fde2e4;
    border-color:#8a4249;
}

html[data-theme="dark"] .tab-button.active,
html[data-theme="dark"] .btn-primary{
    background:#3f5f9d;
    border-color:#4d6ca9;
    color:#ffffff;
    box-shadow:none;
}

html[data-theme="dark"] .tab-button:hover,
html[data-theme="dark"] .btn:hover,
html[data-theme="dark"] .task-control:hover,
html[data-theme="dark"] .dot-action:hover{
    box-shadow:0 8px 16px rgba(0,0,0,.14);
}

@media(max-width:1400px){
    .dashboard-attendance-schedule-panel .attendance-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .dashboard-attendance-schedule-panel .weekly-calendar-grid{
        grid-template-columns:repeat(4,minmax(190px,1fr));
    }

    .dashboard-attendance-schedule-panel .month-calendar-grid{
        grid-template-columns:repeat(4,minmax(130px,1fr));
    }
}

@media(max-width:980px){
    .schedule-mode-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .schedule-mode-head .tab-buttons{
        width:100%;
        margin-left:0;
    }

    .schedule-mode-head .tab-button{
        flex:1 1 auto;
    }

    .dashboard-attendance-schedule-panel .attendance-summary-grid{
        grid-template-columns:1fr;
    }
}

@media(max-width:860px){
    .dashboard-attendance-schedule-panel .weekly-calendar-grid,
    .dashboard-attendance-schedule-panel .month-calendar-grid{
        grid-template-columns:repeat(2,minmax(160px,1fr));
    }

    .dashboard-section-divider{
        gap:10px;
    }

    .dashboard-section-divider span{
        font-size:11px;
        white-space:normal;
        text-align:center;
    }
}

@media(max-width:520px){
    .dashboard-attendance-schedule-panel{
        padding:14px;
    }

    .dashboard-attendance-schedule-panel .clean-panel-head .tab-buttons,
    .schedule-mode-head .tab-buttons{
        width:100%;
    }

    .dashboard-attendance-schedule-panel .tab-button,
    .schedule-mode-head .tab-button{
        flex:1 1 100%;
    }

    .dashboard-attendance-schedule-panel .weekly-calendar-grid,
    .dashboard-attendance-schedule-panel .month-calendar-grid{
        grid-template-columns:1fr;
    }

    .schedule-mode-panel{
        padding:12px;
        border-radius:18px;
    }

    .schedule-mode-head{
        padding:12px;
        border-radius:16px;
    }

    .dashboard-section-divider:before,
    .dashboard-section-divider:after{
        display:none;
    }

    .dashboard-section-divider span{
        width:100%;
    }
}

html.modal-active,
body.modal-open{
    overflow:hidden;
}

body.modal-open .main,
body.modal-open .sidebar{
    pointer-events:none;
}

body.modal-open .modal-shell,
body.modal-open .modal-shell *{
    pointer-events:auto;
}

.modal-shell{
    position:fixed;
    inset:0;
    width:100vw;
    height:100dvh;
    min-height:100vh;
    display:none;
    align-items:flex-start;
    justify-content:center;
    padding:clamp(14px,2.5vh,28px) clamp(12px,2.5vw,30px);
    background:rgba(9,16,32,.58);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    z-index:9999;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
}

.modal-shell.open{
    display:flex;
}

.modal-card{
    width:min(560px,calc(100vw - 24px));
    max-height:calc(100dvh - 32px);
    margin:auto 0;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:22px;
    box-shadow:0 28px 80px rgba(6,12,28,.28);
    overflow:hidden;
    animation:modalUp .2s var(--ease) both;
}

.modal-card.large{
    width:min(820px,calc(100vw - 24px));
}

.modal-head{
    position:sticky;
    top:0;
    z-index:3;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:16px 18px;
    background:var(--surface-soft);
    border-bottom:1px solid var(--line);
}

.modal-head h3{
    color:var(--text);
    font-size:17px;
    font-weight:900;
    line-height:1.25;
}

.modal-head button{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    border:1px solid var(--line);
    background:var(--surface);
    color:var(--text-soft);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    transition:background .18s var(--ease),border-color .18s var(--ease),color .18s var(--ease),transform .18s var(--ease);
}

.modal-head button:hover{
    background:var(--surface-muted);
    border-color:var(--primary-line);
    color:var(--primary);
    transform:translateY(-1px);
}

.modal-body{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    padding:18px;
    display:grid;
    gap:14px;
    scrollbar-width:thin;
    scrollbar-color:var(--muted-light) transparent;
}

.modal-body::-webkit-scrollbar{
    width:8px;
}

.modal-body::-webkit-scrollbar-track{
    background:transparent;
}

.modal-body::-webkit-scrollbar-thumb{
    background:var(--muted-light);
    border-radius:999px;
}

.modal-body.forms{
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:start;
}

.modal-body.forms .field.full,
.modal-body.forms .button-row.full{
    grid-column:1/-1;
}

.modal-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

.popup-menu{
    position:absolute;
    right:0;
    top:calc(100% + 8px);
    min-width:210px;
    max-width:min(280px,calc(100vw - 28px));
    max-height:min(380px,calc(100dvh - 88px));
    overflow-y:auto;
    overflow-x:hidden;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:16px;
    box-shadow:0 22px 60px rgba(6,12,28,.18);
    padding:8px;
    display:none;
    z-index:9998;
    scrollbar-width:thin;
    scrollbar-color:var(--muted-light) transparent;
}

.popup-menu.open{
    display:grid;
    gap:4px;
}

.popup-menu::-webkit-scrollbar{
    width:7px;
}

.popup-menu::-webkit-scrollbar-track{
    background:transparent;
}

.popup-menu::-webkit-scrollbar-thumb{
    background:var(--muted-light);
    border-radius:999px;
}

.monitor-card-top,
.activity-panel-head,
.record-history-top,
.validation-scenario-top,
.clean-panel-head,
.card-head,
.task-board-main,
.compact-task-item,
.monitor-card,
.activity-panel,
.card,
.clean-panel{
    overflow:visible;
}

.monitoring-board,
.weekly-calendar-panel,
.activity-overview-card,
.dashboard-attendance-schedule-panel,
.validation-page .monitoring-board,
.validation-search-panel{
    overflow:visible;
}

.validation-page .monitoring-grid,
.user-grid,
.monitoring-grid{
    overflow:visible;
}

.popup-menu button,
.popup-menu a,
.popup-menu span{
    color:var(--text);
    background:transparent;
}

.popup-menu button:hover,
.popup-menu a:hover{
    background:var(--surface-soft);
    color:var(--primary);
}

html[data-theme="dark"] .modal-shell{
    background:rgba(2,6,18,.72);
}

html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .popup-menu{
    background:var(--surface);
    border-color:var(--line);
    box-shadow:0 28px 90px rgba(0,0,0,.46);
}

html[data-theme="dark"] .modal-head{
    background:var(--surface-soft);
    border-color:var(--line);
}

html[data-theme="dark"] .modal-head button{
    background:var(--surface-muted);
    color:var(--text-soft);
    border-color:var(--line);
}

html[data-theme="dark"] .popup-menu button:hover,
html[data-theme="dark"] .popup-menu a:hover{
    background:var(--surface-muted);
}

@media(max-width:860px){
    .modal-shell{
        align-items:flex-start;
        padding:12px;
    }

    .modal-card,
    .modal-card.large{
        width:calc(100vw - 24px);
        max-height:calc(100dvh - 24px);
        margin:auto 0;
        border-radius:20px;
    }

    .modal-body.forms,
    .modal-grid{
        grid-template-columns:1fr;
    }

    .modal-head{
        padding:14px;
    }

    .modal-body{
        padding:14px;
    }

    .popup-menu{
        position:fixed;
        right:14px;
        left:auto;
        top:auto;
        max-width:calc(100vw - 28px);
        max-height:50dvh;
        z-index:10000;
    }
}

@media(max-width:520px){
    .modal-shell{
        padding:8px;
    }

    .modal-card,
    .modal-card.large{
        width:calc(100vw - 16px);
        max-height:calc(100dvh - 16px);
        border-radius:18px;
    }

    .modal-head h3{
        font-size:15px;
    }

    .modal-body{
        padding:12px;
    }

    .modal-body .button-row,
    .modal-body .button-row .btn{
        width:100%;
    }
}

body:has(.minimal-login-page){
    background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%) !important;
}

.minimal-login-page{
    background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%) !important;
}

.minimal-login-card{
    background:
        radial-gradient(circle at 82% 18%,rgba(255,255,255,.12),transparent 28%),
        radial-gradient(circle at 18% 82%,rgba(255,255,255,.09),transparent 26%),
        linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%) !important;
}

.minimal-login-card:before{
    display:none !important;
    content:none !important;
    width:0 !important;
    height:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    opacity:0 !important;
    visibility:hidden !important;
}

.minimal-login-card:after{
    background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,.035) 44%,transparent 68%) !important;
    border:0 !important;
    box-shadow:none !important;
}

.minimal-login-brand{
    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    background:
        radial-gradient(circle at 84% 16%,rgba(255,255,255,.14),transparent 28%),
        radial-gradient(circle at 18% 86%,rgba(255,255,255,.10),transparent 26%),
        linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%) !important;
}

.minimal-login-form{
    background:rgba(255,255,255,.86) !important;
    border:1px solid rgba(255,255,255,.62) !important;
    box-shadow:0 34px 86px rgba(29,23,96,.22) !important;
}

html[data-theme="dark"] body:has(.minimal-login-page){
    background:linear-gradient(135deg,#0f172a 0%,#111827 45%,#172554 100%) !important;
}

html[data-theme="dark"] .minimal-login-page{
    background:linear-gradient(135deg,#0f172a 0%,#111827 45%,#172554 100%) !important;
}

html[data-theme="dark"] .minimal-login-card{
    background:
        radial-gradient(circle at 82% 18%,rgba(96,120,180,.12),transparent 28%),
        radial-gradient(circle at 18% 82%,rgba(96,120,180,.08),transparent 26%),
        linear-gradient(135deg,#0f172a 0%,#111827 45%,#172554 100%) !important;
}

html[data-theme="dark"] .minimal-login-card:before{
    display:none !important;
    content:none !important;
    width:0 !important;
    height:0 !important;
    background:none !important;
    border:0 !important;
    box-shadow:none !important;
    opacity:0 !important;
    visibility:hidden !important;
}

html[data-theme="dark"] .minimal-login-card:after{
    background:radial-gradient(circle,rgba(96,120,180,.10),rgba(96,120,180,.025) 44%,transparent 68%) !important;
    border:0 !important;
    box-shadow:none !important;
}

html[data-theme="dark"] .minimal-login-brand{
    border-left:0 !important;
    border-right:0 !important;
    border-top:0 !important;
    border-bottom:0 !important;
    background:
        radial-gradient(circle at 84% 16%,rgba(96,120,180,.13),transparent 28%),
        radial-gradient(circle at 18% 86%,rgba(96,120,180,.09),transparent 26%),
        linear-gradient(135deg,#0f172a 0%,#172554 52%,#1e3a8a 100%) !important;
}

html[data-theme="dark"] .minimal-login-form{
    background:rgba(17,24,39,.88) !important;
    border:1px solid rgba(148,163,184,.18) !important;
    box-shadow:0 34px 86px rgba(0,0,0,.34) !important;
}

@media(max-width:1080px){
    .minimal-login-card{
        background:
            radial-gradient(circle at 82% 18%,rgba(255,255,255,.12),transparent 28%),
            radial-gradient(circle at 18% 82%,rgba(255,255,255,.09),transparent 26%),
            linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%) !important;
    }

    .minimal-login-card:before{
        display:none !important;
        content:none !important;
    }

    html[data-theme="dark"] .minimal-login-card{
        background:
            radial-gradient(circle at 82% 18%,rgba(96,120,180,.12),transparent 28%),
            radial-gradient(circle at 18% 82%,rgba(96,120,180,.08),transparent 26%),
            linear-gradient(135deg,#0f172a 0%,#111827 45%,#172554 100%) !important;
    }

    html[data-theme="dark"] .minimal-login-card:before{
        display:none !important;
        content:none !important;
    }
}

@media(max-width:640px){
    .minimal-login-page,
    .minimal-login-card{
        background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%) !important;
    }

    html[data-theme="dark"] .minimal-login-page,
    html[data-theme="dark"] .minimal-login-card{
        background:linear-gradient(135deg,#0f172a 0%,#111827 45%,#172554 100%) !important;
    }
}
.popup-menu {
    display: none;
}

.popup-menu.open {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border-radius: 12px;
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: 0 18px 45px rgba(0, 0, 0, .28);
}

.popup-menu button,
.popup-menu a,
.popup-menu span {
    width: 100%;
    min-height: 36px;
    padding: 9px 11px;
    border-radius: 9px;
    border: 0;
    background: transparent;
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.popup-menu button:hover,
.popup-menu a:hover {
    background: var(--soft);
}

.popup-menu button:active,
.popup-menu a:active {
    transform: scale(.98);
}

.field input[data-task-weight-display] {
    background: var(--surface-muted);
    color: var(--text);
    border-color: var(--line);
    cursor: not-allowed;
    font-weight: 900;
}

.task-weight-field {
    position: relative;
}

.task-weight-field:after {
    content: "System assigned";
    position: absolute;
    right: 10px;
    bottom: 9px;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    border: 1px solid var(--primary-line);
    font-size: 9.5px;
    font-weight: 900;
    pointer-events: none;
}

.task-weight-field input[data-task-weight-display] {
    padding-right: 124px;
}

.task-weight-basis .notice {
    margin-top: 0;
    background: var(--primary-soft);
    color: var(--text-soft);
    border-color: var(--primary-line);
}

html[data-theme="dark"] .field input[data-task-weight-display] {
    background: var(--surface-muted);
    color: var(--text);
    border-color: var(--line);
}

html[data-theme="dark"] .task-weight-field:after {
    background: rgba(59, 130, 246, .12);
    color: #bfdbfe;
    border-color: rgba(96, 165, 250, .24);
}

html[data-theme="dark"] .task-weight-basis .notice {
    background: rgba(59, 130, 246, .08);
    color: var(--text-soft);
    border-color: rgba(96, 165, 250, .18);
}

.popup-menu button:hover,
.popup-menu a:hover {
    background: var(--surface-soft);
}

@media(max-width:520px) {
    .task-weight-field:after {
        position: static;
        width: max-content;
        margin-top: 6px;
    }

    .task-weight-field input[data-task-weight-display] {
        padding-right: 12px;
    }
}
html,
body{
    width:100%;
    min-height:100%;
}

body.modal-open{
    overflow:hidden;
    touch-action:none;
}

.btn.disabled,
.btn:disabled,
button:disabled,
input:disabled,
select:disabled,
textarea:disabled{
    opacity:.62;
    cursor:not-allowed;
    transform:none!important;
    box-shadow:none!important;
}

.btn.disabled{
    pointer-events:none;
}

.modal-shell{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    padding:clamp(12px,2.4vw,28px)!important;
    background:rgba(20,30,55,.46)!important;
    backdrop-filter:blur(9px)!important;
    -webkit-backdrop-filter:blur(9px)!important;
    z-index:10000!important;
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
}

.modal-shell.open{
    display:flex!important;
}

.modal-card{
    width:min(560px,100%)!important;
    max-width:100%!important;
    max-height:calc(100vh - 32px)!important;
    max-height:calc(100dvh - 32px)!important;
    background:var(--surface)!important;
    color:var(--text)!important;
    border:1px solid var(--line)!important;
    border-radius:22px!important;
    box-shadow:0 32px 80px rgba(20,30,55,.22)!important;
    overflow:hidden!important;
    display:flex!important;
    flex-direction:column!important;
}

.modal-card.large{
    width:min(860px,100%)!important;
}

.modal-head{
    flex:0 0 auto!important;
    background:var(--surface-soft)!important;
    color:var(--text)!important;
    border-bottom:1px solid var(--line)!important;
}

.modal-head h3{
    color:var(--text)!important;
}

.modal-head button{
    flex:0 0 auto!important;
    background:var(--surface)!important;
    color:var(--text-soft)!important;
    border:1px solid var(--line)!important;
}

.modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin;
}

.modal-body::-webkit-scrollbar{
    width:8px;
}

.modal-body::-webkit-scrollbar-track{
    background:var(--surface-soft);
    border-radius:999px;
}

.modal-body::-webkit-scrollbar-thumb{
    background:#c8d0df;
    border-radius:999px;
}

.modal-body.forms{
    align-content:start;
}

.modal-grid{
    width:100%;
}

.popup-menu{
    background:var(--surface)!important;
    color:var(--text)!important;
    border:1px solid var(--line)!important;
    box-shadow:0 24px 60px rgba(20,30,55,.18)!important;
    z-index:10020!important;
}

.popup-menu.open{
    background:var(--surface)!important;
}

.popup-menu button,
.popup-menu a,
.popup-menu span{
    background:transparent!important;
    color:var(--text)!important;
}

.popup-menu button:hover,
.popup-menu a:hover{
    background:var(--surface-soft)!important;
    color:var(--primary)!important;
}

.record-delete-request{
    margin-top:10px;
    width:100%;
}

.record-delete-request summary{
    list-style:none;
    width:max-content;
    cursor:pointer;
}

.record-delete-request summary::-webkit-details-marker{
    display:none;
}

.record-delete-request[open] summary{
    background:var(--primary-soft);
    color:var(--primary);
    border-color:var(--primary-line);
}

.compact-request-form{
    margin-top:12px;
    padding:14px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:18px;
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
}

.compact-request-form .button-row{
    margin-top:0;
}

.delete-request-panel,
.delete-request-card,
.deletion-request-card,
.request-review-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    display:grid;
    gap:12px;
    box-shadow:var(--shadow-soft);
}

.delete-request-grid,
.deletion-request-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:14px;
}

.delete-request-actions,
.request-review-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    padding:10px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:16px;
}

.delete-request-actions form,
.request-review-actions form{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.delete-request-actions .field,
.request-review-actions .field{
    min-width:min(100%,260px);
}

.record-history-card .notice,
.monitor-card .notice{
    border-radius:14px;
}

.record-history-card .button-row,
.monitor-card .button-row,
.compact-task-actions,
.validation-filter-actions,
.task-filter-tabs{
    padding:10px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:16px;
}

.record-history-card .button-row:empty,
.monitor-card .button-row:empty{
    display:none;
}

.field input[readonly],
.field textarea[readonly]{
    background:var(--surface-muted);
    border-color:var(--line);
    color:var(--text-soft);
    cursor:default;
}

.field input[data-task-weight-display]{
    background:var(--surface-muted)!important;
    color:var(--text)!important;
    border-color:var(--line)!important;
    cursor:not-allowed!important;
    font-weight:900!important;
}

.task-weight-field{
    position:relative;
}

.task-weight-field:after{
    content:"System assigned";
    position:absolute;
    right:10px;
    bottom:9px;
    padding:4px 8px;
    border-radius:999px;
    background:var(--primary-soft);
    color:var(--primary);
    border:1px solid var(--primary-line);
    font-size:9.5px;
    font-weight:900;
    pointer-events:none;
}

.task-weight-field input[data-task-weight-display]{
    padding-right:124px!important;
}

.task-weight-basis .notice{
    margin-top:0;
    background:var(--primary-soft);
    color:var(--text-soft);
    border-color:var(--primary-line);
}

.competency-field.full{
    grid-column:1/-1;
}

.competency-field.is-hidden input{
    display:none;
}

.user-grid .modal-card,
.user-grid .modal-card.large{
    width:min(900px,100%)!important;
}

.assignment-modal,
.manage-assignment-modal,
[data-modal*="assignment"] .modal-card,
[data-modal*="Assignment"] .modal-card{
    width:min(900px,100%)!important;
}

[data-modal*="assignment"] .modal-body,
[data-modal*="Assignment"] .modal-body{
    padding:20px!important;
}

[data-modal*="assignment"] .forms,
[data-modal*="Assignment"] .forms{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

[data-modal*="assignment"] .button-row,
[data-modal*="Assignment"] .button-row{
    grid-column:1/-1;
    padding:10px;
    background:var(--surface-soft);
    border:1px solid var(--line);
    border-radius:16px;
}

html[data-theme="dark"] body{
    background:
        radial-gradient(circle at top left,rgba(59,130,246,.08),transparent 34%),
        linear-gradient(180deg,#0f172a 0%,#111827 100%);
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .card,
html[data-theme="dark"] .lesson-table,
html[data-theme="dark"] .filter-panel,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .clean-panel,
html[data-theme="dark"] .profile-card,
html[data-theme="dark"] .monitoring-board,
html[data-theme="dark"] .weekly-calendar-panel{
    background:rgba(17,24,39,.92);
    border-color:var(--line);
}

html[data-theme="dark"] .topbar h1,
html[data-theme="dark"] .date,
html[data-theme="dark"] .calendar-day-head,
html[data-theme="dark"] .weekly-day-head,
html[data-theme="dark"] .calendar-item,
html[data-theme="dark"] .month-day-card.busy,
html[data-theme="dark"] .record-history-card,
html[data-theme="dark"] .record-score-row div,
html[data-theme="dark"] .record-guidance-strip div,
html[data-theme="dark"] .activity-panel,
html[data-theme="dark"] .activity-task-item,
html[data-theme="dark"] .subtask-box,
html[data-theme="dark"] .modal-card,
html[data-theme="dark"] .popup-menu,
html[data-theme="dark"] .language-mode-card{
    background:var(--surface);
    border-color:var(--line);
    color:var(--text);
}

html[data-theme="dark"] .meta-row,
html[data-theme="dark"] .monitor-status-row,
html[data-theme="dark"] .delete-request-actions,
html[data-theme="dark"] .request-review-actions,
html[data-theme="dark"] .record-history-card .button-row,
html[data-theme="dark"] .monitor-card .button-row,
html[data-theme="dark"] .compact-task-actions,
html[data-theme="dark"] .validation-filter-actions,
html[data-theme="dark"] .task-filter-tabs,
html[data-theme="dark"] .compact-request-form{
    background:var(--surface-soft);
    border-color:var(--line);
}

html[data-theme="dark"] .modal-shell{
    background:rgba(2,6,23,.62)!important;
}

html[data-theme="dark"] .modal-body::-webkit-scrollbar-thumb{
    background:#475569;
}

html[data-theme="dark"] .status{
    background:rgba(148,163,184,.12);
    color:#cbd5e1;
    border-color:rgba(148,163,184,.18);
}

html[data-theme="dark"] .status.good,
html[data-theme="dark"] .flag-pill.good{
    background:rgba(34,197,94,.10);
    color:#bbf7d0;
    border-color:rgba(34,197,94,.20);
}

html[data-theme="dark"] .status.warning,
html[data-theme="dark"] .flag-pill.warning{
    background:rgba(245,158,11,.10);
    color:#fde68a;
    border-color:rgba(245,158,11,.20);
}

html[data-theme="dark"] .status.danger,
html[data-theme="dark"] .flag-pill.danger{
    background:rgba(248,113,113,.10);
    color:#fecaca;
    border-color:rgba(248,113,113,.20);
}

html[data-theme="dark"] .task-weight-field:after{
    background:rgba(59,130,246,.12);
    color:#bfdbfe;
    border-color:rgba(96,165,250,.24);
}

html[data-theme="dark"] .task-weight-basis .notice{
    background:rgba(59,130,246,.08);
    color:var(--text-soft);
    border-color:rgba(96,165,250,.18);
}

@media(max-width:860px){
    .modal-shell{
        align-items:flex-start!important;
        justify-content:center!important;
        overflow-y:auto!important;
        padding:12px!important;
    }

    .modal-card,
    .modal-card.large,
    .assignment-modal,
    .manage-assignment-modal,
    [data-modal*="assignment"] .modal-card,
    [data-modal*="Assignment"] .modal-card{
        width:100%!important;
        max-height:calc(100dvh - 24px)!important;
        margin:auto 0!important;
    }

    [data-modal*="assignment"] .forms,
    [data-modal*="Assignment"] .forms{
        grid-template-columns:1fr;
    }

    .delete-request-actions,
    .request-review-actions,
    .delete-request-actions form,
    .request-review-actions form{
        display:grid;
        width:100%;
    }
}

@media(max-width:520px){
    .modal-shell{
        padding:8px!important;
    }

    .modal-card,
    .modal-card.large{
        border-radius:18px!important;
        max-height:calc(100dvh - 16px)!important;
    }

    .modal-head{
        padding:14px 15px!important;
    }

    .modal-body{
        padding:15px!important;
    }

    .task-weight-field:after{
        position:static;
        width:max-content;
        margin-top:6px;
    }

    .task-weight-field input[data-task-weight-display]{
        padding-right:12px!important;
    }

    .record-delete-request summary{
        width:100%;
    }

    .record-delete-request summary.btn{
        display:flex;
    }
}

html.modal-active,
body.modal-open{
    width:100%!important;
    height:100%!important;
    overflow:hidden!important;
    overscroll-behavior:none!important;
}

body.modal-open .page-enter,
body.modal-open .is-visible,
body.modal-open .card,
body.modal-open .clean-panel,
body.modal-open .monitor-card,
body.modal-open .record-history-card,
body.modal-open .validation-compact-summary,
body.modal-open .validation-search-panel,
body.modal-open .activity-panel,
body.modal-open .profile-card,
body.modal-open .task-workload-overview,
body.modal-open .compact-task-card,
body.modal-open .weekly-day-card,
body.modal-open .course-card,
body.modal-open .course-tab,
body.modal-open .panel,
body.modal-open .kpi,
body.modal-open .task,
body.modal-open .user-grid,
body.modal-open .monitoring-grid,
body.modal-open .main{
    transform:none!important;
    animation:none!important;
    perspective:none!important;
    filter:none!important;
    contain:initial!important;
}

body.modal-open .main,
body.modal-open .sidebar{
    pointer-events:none!important;
}

body.modal-open .modal-shell,
body.modal-open .modal-shell *{
    pointer-events:auto!important;
}

.modal-shell{
    position:fixed!important;
    inset:0!important;
    left:0!important;
    top:0!important;
    right:0!important;
    bottom:0!important;
    width:100vw!important;
    height:100vh!important;
    height:100dvh!important;
    min-width:100vw!important;
    min-height:100vh!important;
    min-height:100dvh!important;
    margin:0!important;
    padding:clamp(14px,2.4vw,30px)!important;
    display:none!important;
    align-items:center!important;
    justify-content:center!important;
    background:rgba(15,23,42,.62)!important;
    backdrop-filter:blur(10px)!important;
    -webkit-backdrop-filter:blur(10px)!important;
    z-index:2147483647!important;
    overflow:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    isolation:isolate!important;
}

body > .modal-shell{
    position:fixed!important;
    inset:0!important;
}

.modal-shell.open{
    display:flex!important;
}

.modal-card{
    position:relative!important;
    width:min(600px,calc(100vw - 32px))!important;
    max-width:calc(100vw - 32px)!important;
    max-height:calc(100vh - 32px)!important;
    max-height:calc(100dvh - 32px)!important;
    margin:auto!important;
    display:flex!important;
    flex-direction:column!important;
    background:var(--surface)!important;
    color:var(--text)!important;
    border:1px solid var(--line)!important;
    border-radius:22px!important;
    box-shadow:0 30px 90px rgba(2,6,23,.30)!important;
    overflow:hidden!important;
    transform:none!important;
    animation:modalUp .22s var(--ease) both!important;
}

.modal-card.large{
    width:min(860px,calc(100vw - 32px))!important;
}

.modal-head{
    position:relative!important;
    top:auto!important;
    z-index:2!important;
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
    padding:17px 19px!important;
    background:var(--surface-soft)!important;
    color:var(--text)!important;
    border-bottom:1px solid var(--line)!important;
}

.modal-head h3{
    color:var(--text)!important;
    font-size:18px!important;
    font-weight:900!important;
    line-height:1.2!important;
    margin:0!important;
}

.modal-head button{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    flex:0 0 34px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:11px!important;
    border:1px solid var(--line)!important;
    background:var(--surface)!important;
    color:var(--text-soft)!important;
    font-size:20px!important;
    line-height:1!important;
    cursor:pointer!important;
}

.modal-body{
    flex:1 1 auto!important;
    min-height:0!important;
    max-height:none!important;
    padding:18px!important;
    display:grid!important;
    gap:14px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin!important;
    scrollbar-color:var(--muted-light) transparent!important;
}

.modal-body.forms{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    align-content:start!important;
}

.modal-body.forms .field.full,
.modal-body.forms .button-row.full,
.modal-body .field.full,
.modal-body .button-row.full{
    grid-column:1/-1!important;
}

.modal-body::-webkit-scrollbar{
    width:8px!important;
}

.modal-body::-webkit-scrollbar-track{
    background:transparent!important;
}

.modal-body::-webkit-scrollbar-thumb{
    background:var(--muted-light)!important;
    border-radius:999px!important;
}

[data-modal^="assign-"] .modal-card,
[data-modal*="assign-"] .modal-card{
    width:min(780px,calc(100vw - 32px))!important;
    max-height:min(640px,calc(100dvh - 32px))!important;
}

[data-modal^="assign-"] .modal-body.forms,
[data-modal*="assign-"] .modal-body.forms{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

.popup-menu{
    z-index:2147483000!important;
}

body.modal-open .popup-menu.open{
    display:none!important;
}

html[data-theme="dark"] .modal-shell{
    background:rgba(2,6,23,.74)!important;
}

html[data-theme="dark"] .modal-card{
    background:var(--surface)!important;
    border-color:var(--line)!important;
    box-shadow:0 30px 100px rgba(0,0,0,.58)!important;
}

html[data-theme="dark"] .modal-head{
    background:var(--surface-soft)!important;
    border-color:var(--line)!important;
}

html[data-theme="dark"] .modal-head button{
    background:var(--surface-muted)!important;
    color:var(--text-soft)!important;
    border-color:var(--line)!important;
}

@media(max-width:860px){
    .modal-shell{
        align-items:flex-start!important;
        justify-content:center!important;
        padding:12px!important;
    }

    .modal-card,
    .modal-card.large,
    [data-modal^="assign-"] .modal-card,
    [data-modal*="assign-"] .modal-card{
        width:100%!important;
        max-width:100%!important;
        max-height:calc(100dvh - 24px)!important;
        margin:auto 0!important;
        border-radius:20px!important;
    }

    .modal-body.forms,
    [data-modal^="assign-"] .modal-body.forms,
    [data-modal*="assign-"] .modal-body.forms{
        grid-template-columns:1fr!important;
    }

    .modal-head{
        padding:15px!important;
    }

    .modal-body{
        padding:15px!important;
    }
}

@media(max-width:520px){
    .modal-shell{
        padding:8px!important;
    }

    .modal-card,
    .modal-card.large,
    [data-modal^="assign-"] .modal-card,
    [data-modal*="assign-"] .modal-card{
        max-height:calc(100dvh - 16px)!important;
        border-radius:18px!important;
    }

    .modal-head h3{
        font-size:15px!important;
    }

    .modal-body .button-row,
    .modal-body .button-row .btn{
        width:100%!important;
    }
}
.section-space-sm {
    margin-top: 14px;
}

.inline-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.inline-form button {
    white-space: nowrap;
}

.btn-small {
    min-height: 34px;
    padding: 8px 12px;
    font-size: 12px;
}

.flag-pill-list .inline-form {
    margin-left: 4px;
    margin-right: 8px;
}

.forms select {
    width: 100%;
}


@media(max-width:860px){
    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    *,
    *::before,
    *::after{
        max-width:100%;
    }

    .app,
    .main,
    .topbar,
    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card,
    .activity-panel,
    .record-history-card,
    .validation-scenario-card,
    .language-mode-card,
    .modal-card,
    .modal-card.large{
        min-width:0;
        max-width:100%;
    }

    h1,
    h2,
    h3,
    h4,
    p,
    span,
    strong,
    small,
    label,
    a,
    button,
    input,
    select,
    textarea,
    td,
    th,
    .btn,
    .status,
    .flag-pill,
    .notice,
    .nav-item,
    .task-control,
    .task-control span,
    .task-control small{
        max-width:100%;
        overflow-wrap:anywhere;
        word-break:normal;
        white-space:normal;
    }

    body{
        background:
            radial-gradient(circle at top left,rgba(41,79,195,.055),transparent 32%),
            linear-gradient(180deg,#f7f9fd 0%,#eef3fb 100%);
    }

    .app{
        display:flex;
        flex-direction:column;
        gap:12px;
        padding:12px;
    }

    .sidebar{
        position:sticky;
        top:8px;
        z-index:50;
        display:grid;
        gap:10px;
        width:100%;
        height:auto;
        max-height:none;
        padding:12px;
        border-radius:22px;
        overflow:visible;
        background:rgba(255,255,255,.96);
        border:1px solid var(--line);
        box-shadow:0 12px 30px rgba(31,45,90,.08);
        backdrop-filter:blur(18px);
    }

    html[data-theme="dark"] .sidebar{
        background:rgba(17,24,39,.96);
    }

    .sidebar > div:first-child{
        display:grid;
        gap:10px;
        min-width:0;
    }

    .sidebar .logo{
        display:flex!important;
        margin:0;
        min-height:34px;
        align-items:center;
        justify-content:center;
    }

    .sidebar .logo span{
        display:inline!important;
        font-size:18px;
    }

    .sidebar .menu-title{
        display:block!important;
        margin:4px 2px 2px;
        font-size:9.5px;
        letter-spacing:.08em;
    }

    .sidebar .nav-list{
        display:grid!important;
        grid-auto-flow:column;
        grid-auto-columns:minmax(86px,1fr);
        gap:7px;
        width:100%;
        overflow-x:auto;
        overflow-y:hidden;
        padding:0 0 4px;
        scroll-snap-type:x proximity;
        scrollbar-width:thin;
    }

    .sidebar .nav-list::-webkit-scrollbar{
        height:5px;
    }

    .sidebar .nav-list::-webkit-scrollbar-track{
        background:var(--surface-soft);
        border-radius:999px;
    }

    .sidebar .nav-list::-webkit-scrollbar-thumb{
        background:var(--primary-line);
        border-radius:999px;
    }

    .sidebar .nav-item,
    .sidebar .theme-toggle,
    .sidebar .logout{
        display:flex!important;
        visibility:visible!important;
        opacity:1!important;
        width:100%!important;
        min-width:86px!important;
        max-width:none!important;
        height:auto!important;
        min-height:42px;
        justify-content:flex-start;
        align-items:center;
        gap:8px;
        padding:9px 10px;
        border-radius:15px;
        scroll-snap-align:start;
        background:var(--surface-soft);
        border:1px solid var(--line);
        color:var(--text-soft);
        font-size:11px;
        line-height:1.15;
        text-align:left;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle span:last-child,
    .sidebar .logout span:last-child{
        display:inline!important;
        min-width:0;
        font-size:11px;
        line-height:1.15;
    }

    .sidebar .nav-symbol{
        width:24px;
        height:24px;
        min-width:24px;
        border-radius:9px;
        background:#ffffff;
        border:1px solid var(--line);
        color:var(--primary);
    }

    html[data-theme="dark"] .sidebar .nav-symbol{
        background:var(--surface-muted);
    }

    .sidebar .nav-item.active{
        background:var(--primary);
        color:#ffffff;
        border-color:var(--primary);
    }

    .sidebar .nav-item.active .nav-symbol{
        color:var(--primary);
        background:#ffffff;
        border-color:rgba(255,255,255,.65);
    }

    .sidebar .sidebar-bottom{
        display:grid!important;
        visibility:visible!important;
        opacity:1!important;
        gap:7px;
        width:100%;
        margin-top:2px;
        padding-top:10px;
        border-top:1px solid var(--line);
    }

    .sidebar .sidebar-bottom .nav-list{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        grid-auto-flow:row;
        grid-auto-columns:auto;
        overflow:visible;
        padding:0;
    }

    .sidebar .sidebar-bottom .nav-item,
    .sidebar .sidebar-bottom .theme-toggle,
    .sidebar .sidebar-bottom .logout{
        min-width:0!important;
        width:100%!important;
        justify-content:flex-start;
    }

    .theme-switch{
        width:32px;
        min-width:32px;
        height:18px;
        border-radius:999px;
        background:var(--primary-line);
        display:inline-flex;
        align-items:center;
        padding:2px;
    }

    .theme-switch-knob{
        width:14px;
        height:14px;
        border-radius:999px;
        background:#ffffff;
        box-shadow:0 2px 6px rgba(0,0,0,.14);
    }

    html[data-theme="dark"] .theme-switch{
        background:var(--primary);
        justify-content:flex-end;
    }

    .logout{
        color:var(--danger)!important;
        border-color:var(--danger-line)!important;
        background:var(--danger-bg)!important;
    }

    .main{
        gap:12px;
    }

    .topbar{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        min-height:auto;
        padding:14px;
        border-radius:22px;
    }

    .topbar h1{
        width:100%;
        max-width:100%;
        padding:9px 12px;
        border-radius:15px;
        font-size:clamp(20px,6vw,25px);
        line-height:1.15;
        letter-spacing:-.035em;
    }

    .topbar p{
        font-size:12px;
        line-height:1.45;
    }

    .date{
        width:100%;
        min-width:0;
        min-height:42px;
        justify-content:flex-start;
        padding:10px 12px;
        border-radius:15px;
        font-size:12px;
    }

    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        padding:15px;
        border-radius:20px;
        overflow:hidden;
    }

    .card-head,
    .panel-head,
    .clean-panel-head{
        margin-bottom:12px;
    }

    .card-head h2,
    .clean-panel-head h2,
    .panel-head h3,
    .profile-card h2{
        font-size:clamp(17px,5vw,20px);
        line-height:1.2;
    }

    .card-head p,
    .clean-panel-head p,
    .profile-card p{
        font-size:11.5px;
        line-height:1.45;
    }

    .clean-panel-head,
    .panel-head,
    .activity-panel-head,
    .record-history-top,
    .validation-scenario-top,
    .monitor-card-top,
    .monitor-foot,
    .integration-panel,
    .month-calendar-head{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .forms,
    .compact-form,
    .schedule-form,
    .task-simple-form,
    .modal-grid,
    .validation-scenario-grid,
    .dashboard-focus-grid,
    .activity-overview-grid,
    .schedule-layout,
    .language-mode-grid,
    .simple-summary-grid,
    .routine-grid,
    .record-score-row,
    .monitoring-grid,
    .monitor-mini-grid,
    .user-grid,
    .task-detail-grid,
    .load-meter-top,
    .mini-stat-list,
    .weekly-unscheduled-list{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

    .field,
    .full{
        min-width:0;
        grid-column:1/-1;
    }

    .field input,
    .field select,
    .field textarea{
        min-height:42px;
        padding:10px 11px;
        font-size:12px;
        border-radius:12px;
    }

    .button-row,
    .task-command-actions,
    .task-control-panel form,
    .tab-buttons,
    .flag-pill-list{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
        width:100%;
        align-items:stretch;
    }

    .button-row .btn,
    .button-row form,
    .button-row form .btn,
    .btn,
    .task-command-actions .btn,
    .task-control,
    .task-control-panel form .task-control,
    .tab-button{
        width:100%;
        min-width:0;
        min-height:42px;
        justify-content:center;
        text-align:center;
        white-space:normal;
    }

    .status,
    .flag-pill{
        width:auto;
        max-width:100%;
        min-height:26px;
        justify-content:center;
        text-align:center;
        white-space:normal;
        line-height:1.2;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        display:grid;
        grid-template-columns:1fr;
        align-items:start;
        gap:14px;
        padding:20px;
        border-radius:22px;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:clamp(22px,7vw,28px);
        line-height:1.08;
        letter-spacing:-.04em;
    }

    .student-overview-main p,
    .task-command-card p{
        font-size:12px;
        line-height:1.45;
    }

    .student-overview-main span,
    .task-command-card span,
    .schedule-hero span,
    .language-hero span{
        font-size:9.5px;
        letter-spacing:.12em;
        margin-bottom:9px;
    }

    .student-overview-status,
    .schedule-hero-stats,
    .schedule-hero-stats div{
        width:100%;
    }

    .simple-summary-card,
    .metric-card,
    .routine-card,
    .recommendation-card,
    .activity-panel,
    .activity-task-item,
    .quick-action-card,
    .compact-task-item,
    .focus-simplified-card,
    .task-board-item,
    .record-history-card,
    .validation-scenario-card,
    .language-mode-card,
    .monitor-card,
    .rule-basis-card{
        padding:14px;
        border-radius:18px;
        min-width:0;
    }

    .simple-summary-card strong,
    .metric-card strong,
    .routine-card strong,
    .load-meter-top strong,
    .mini-stat-list strong,
    .schedule-metric strong{
        font-size:clamp(18px,6vw,22px);
    }

    .recommendation-card,
    .quick-action-card,
    .activity-task-item,
    .task-board-main,
    .focus-simplified-card,
    .compact-task-item{
        display:grid;
        grid-template-columns:1fr;
        align-items:start;
        gap:10px;
    }

    .recommendation-icon,
    .quick-action-card span{
        width:36px;
        height:36px;
        border-radius:12px;
    }

    .task-board-badges{
        justify-content:flex-start;
    }

    .task-control-links{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .task-control-links a{
        display:block;
        width:100%;
        padding:10px 12px;
        border:1px solid var(--line);
        border-radius:12px;
        background:#ffffff;
        text-align:center;
    }

    .record-history-top,
    .monitor-card-top{
        padding-left:0;
    }

    .meta-row,
    .monitor-status-row{
        display:flex;
        flex-wrap:wrap;
        gap:7px;
        padding:9px;
    }

    .weekly-calendar-grid,
    .mini-calendar,
    .month-calendar-grid{
        display:grid;
        grid-template-columns:1fr;
        overflow:visible;
        gap:10px;
    }

    .weekly-day-card,
    .calendar-day,
    .month-day-card{
        min-height:auto;
        border-radius:18px;
    }

    .weekly-day-head{
        min-height:auto;
        padding:13px;
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .weekly-day-head small{
        width:max-content;
        max-width:100%;
    }

    .weekly-day-body,
    .calendar-items{
        padding:12px;
    }

    .weekly-block,
    .calendar-item,
    .month-task-dot{
        min-width:0;
    }

    table,
    .table{
        width:100%;
        min-width:640px;
    }

    .card:has(table),
    .clean-panel:has(table),
    .lesson-table,
    .filter-panel,
    .table-wrap,
    .responsive-table{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    th,
    td{
        font-size:12px;
        padding:10px 8px;
        vertical-align:top;
    }

    td:first-child{
        gap:8px;
    }

    .mini-avatar{
        width:30px;
        height:30px;
        border-radius:11px;
        font-size:10px;
    }

    .popup-menu{
        position:fixed;
        left:12px;
        right:12px;
        top:auto;
        bottom:12px;
        width:auto;
        min-width:0;
        max-width:calc(100vw - 24px);
        z-index:80;
    }

    .modal-shell{
        padding:10px;
        align-items:flex-start;
        overflow-y:auto;
    }

    .modal-card,
    .modal-card.large{
        width:100%;
        max-height:calc(100dvh - 20px);
        border-radius:20px;
        overflow:auto;
    }

    .modal-head{
        position:sticky;
        top:0;
        z-index:2;
        padding:14px;
    }

    .modal-head h3{
        font-size:16px;
        line-height:1.2;
    }

    .modal-body{
        padding:14px;
        gap:10px;
    }

    .minimal-login-page{
        min-height:100dvh;
        padding:18px;
        place-items:center;
        overflow:hidden;
    }

    .minimal-login-card{
        width:100%;
        max-width:360px;
        gap:15px;
    }

    .minimal-login-brand h1{
        font-size:clamp(30px,10vw,38px);
        line-height:1;
    }

    .minimal-login-brand p{
        font-size:11px;
        line-height:1.35;
        letter-spacing:.06em;
    }

    .minimal-login-form{
        gap:12px;
    }

    .minimal-input,
    .minimal-login-btn{
        height:46px;
        border-radius:12px;
    }

    .minimal-input{
        grid-template-columns:38px minmax(0,1fr);
    }

    .minimal-input input{
        font-size:12px;
        letter-spacing:.02em;
        min-width:0;
    }

    .forgot-link{
        font-size:12px;
        text-align:center;
    }

    .login-blob{
        opacity:.8;
    }
}

@media(max-width:520px){
    .app{
        padding:8px;
        gap:10px;
    }

    .sidebar{
        top:6px;
        padding:10px;
        border-radius:18px;
    }

    .sidebar .logo span{
        font-size:17px;
    }

    .sidebar .nav-list{
        grid-auto-columns:minmax(78px,1fr);
        gap:6px;
    }

    .sidebar .nav-item,
    .sidebar .theme-toggle,
    .sidebar .logout{
        min-width:78px!important;
        min-height:39px;
        padding:8px 9px;
        border-radius:13px;
        gap:7px;
        font-size:10.5px;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle span:last-child,
    .sidebar .logout span:last-child{
        font-size:10.5px;
    }

    .sidebar .nav-symbol{
        width:22px;
        height:22px;
        min-width:22px;
        font-size:9px;
    }

    .sidebar .sidebar-bottom .nav-list{
        grid-template-columns:1fr 1fr;
    }

    .topbar,
    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        padding:12px;
        border-radius:18px;
    }

    .topbar h1{
        padding:8px 10px;
        border-radius:13px;
        font-size:21px;
    }

    .date{
        min-height:39px;
        padding:9px 10px;
        font-size:11px;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        padding:16px;
        border-radius:19px;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:23px;
    }

    .simple-summary-card,
    .metric-card,
    .routine-card,
    .recommendation-card,
    .activity-panel,
    .activity-task-item,
    .quick-action-card,
    .compact-task-item,
    .focus-simplified-card,
    .task-board-item,
    .record-history-card,
    .validation-scenario-card,
    .language-mode-card,
    .monitor-card,
    .rule-basis-card{
        padding:12px;
        border-radius:16px;
    }

    .field input,
    .field select,
    .field textarea,
    .btn,
    .task-control,
    .tab-button,
    .minimal-input,
    .minimal-login-btn{
        min-height:40px;
        font-size:11.5px;
    }

    .button-row,
    .task-command-actions,
    .task-control-panel form,
    .tab-buttons,
    .flag-pill-list{
        gap:7px;
    }

    .status,
    .flag-pill{
        font-size:10px;
        padding:5px 8px;
    }

    table,
    .table{
        min-width:560px;
    }

    th,
    td{
        font-size:11.5px;
        padding:9px 7px;
    }

    .minimal-login-page{
        padding:14px;
    }

    .minimal-login-card{
        max-width:330px;
    }

    .blob-one{
        width:420px;
        height:280px;
        top:60px;
        right:-210px;
    }

    .blob-two{
        width:280px;
        height:230px;
        left:-120px;
        bottom:-60px;
    }

    .blob-three{
        width:250px;
        height:220px;
        right:-120px;
        bottom:70px;
    }
}

@media(max-width:380px){
    .app{
        padding:6px;
    }

    .sidebar{
        padding:8px;
    }

    .sidebar .nav-list{
        grid-auto-columns:minmax(72px,1fr);
    }

    .sidebar .nav-item,
    .sidebar .theme-toggle,
    .sidebar .logout{
        min-width:72px!important;
        padding:7px 8px;
        gap:6px;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle span:last-child,
    .sidebar .logout span:last-child{
        font-size:10px;
    }

    .sidebar .sidebar-bottom .nav-list{
        grid-template-columns:1fr;
    }

    .topbar h1{
        font-size:20px;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:21px;
    }

    table,
    .table{
        min-width:520px;
    }
}

.mobile-menu-toggle,
.mobile-nav-backdrop{
    display:none;
}

@media(max-width:860px){
    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    body{
        background:linear-gradient(180deg,#f6f8fc 0%,#eef3fb 100%);
    }

    body.nav-open{
        overflow:hidden;
    }

    .app{
        display:flex;
        flex-direction:column;
        width:100%;
        min-height:100vh;
        padding:12px;
        padding-top:72px;
        gap:14px;
    }

    .mobile-menu-toggle{
        position:fixed;
        top:calc(env(safe-area-inset-top,0px) + 12px);
        right:14px;
        z-index:120;
        width:50px;
        height:50px;
        display:grid;
        place-items:center;
        border-radius:18px;
        background:rgba(25,30,45,.94);
        color:#ffffff;
        border:1px solid rgba(255,255,255,.12);
        box-shadow:0 16px 34px rgba(18,24,40,.28);
        cursor:pointer;
    }

    .mobile-menu-toggle span{
        position:relative;
        width:20px;
        height:2px;
        display:block;
        border-radius:999px;
        background:#ffffff;
        transition:background .18s var(--ease);
    }

    .mobile-menu-toggle span::before,
    .mobile-menu-toggle span::after{
        content:"";
        position:absolute;
        left:0;
        width:20px;
        height:2px;
        border-radius:999px;
        background:#ffffff;
        transition:transform .18s var(--ease), top .18s var(--ease);
    }

    .mobile-menu-toggle span::before{
        top:-7px;
    }

    .mobile-menu-toggle span::after{
        top:7px;
    }

    body.nav-open .mobile-menu-toggle span{
        background:transparent;
    }

    body.nav-open .mobile-menu-toggle span::before{
        top:0;
        transform:rotate(45deg);
    }

    body.nav-open .mobile-menu-toggle span::after{
        top:0;
        transform:rotate(-45deg);
    }

    .mobile-nav-backdrop{
        position:fixed;
        inset:0;
        z-index:90;
        display:block;
        background:rgba(15,23,42,.34);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        backdrop-filter:blur(5px);
        transition:opacity .2s var(--ease), visibility .2s var(--ease);
    }

    body.nav-open .mobile-nav-backdrop{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .sidebar{
        position:fixed!important;
        top:calc(env(safe-area-inset-top,0px) + 12px)!important;
        left:12px!important;
        bottom:12px!important;
        z-index:110!important;
        width:min(340px,calc(100vw - 24px))!important;
        height:auto!important;
        max-height:calc(100dvh - 24px)!important;
        display:flex!important;
        flex-direction:column!important;
        justify-content:flex-start!important;
        gap:16px!important;
        padding:18px!important;
        border-radius:28px!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        background:rgba(255,255,255,.98)!important;
        border:1px solid rgba(226,232,241,.96)!important;
        box-shadow:0 28px 70px rgba(15,23,42,.22)!important;
        transform:translateX(calc(-100% - 24px));
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:transform .24s var(--ease), opacity .2s var(--ease), visibility .2s var(--ease);
    }

    html[data-theme="dark"] .sidebar{
        background:rgba(17,24,39,.98)!important;
        border-color:var(--line)!important;
    }

    body.nav-open .sidebar{
        transform:translateX(0);
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .sidebar > div:first-child,
    .sidebar .sidebar-bottom{
        display:grid!important;
        width:100%!important;
        gap:12px!important;
        min-width:0!important;
    }

    .sidebar .logo{
        display:flex!important;
        justify-content:flex-start!important;
        align-items:center!important;
        min-height:38px!important;
        margin:0 56px 4px 0!important;
    }

    .sidebar .logo span{
        display:inline!important;
        color:var(--primary)!important;
        font-size:24px!important;
        line-height:1!important;
        letter-spacing:-.05em!important;
        white-space:nowrap!important;
    }

    .sidebar .menu-title{
        display:block!important;
        margin:6px 0 2px!important;
        color:var(--muted-light)!important;
        font-size:10px!important;
        font-weight:900!important;
        letter-spacing:.16em!important;
        white-space:nowrap!important;
    }

    .sidebar .nav-list,
    .sidebar .sidebar-bottom .nav-list{
        display:grid!important;
        grid-template-columns:1fr!important;
        grid-auto-flow:row!important;
        grid-auto-columns:auto!important;
        gap:10px!important;
        width:100%!important;
        padding:0!important;
        overflow:visible!important;
        scroll-snap-type:none!important;
    }

    .sidebar .sidebar-bottom{
        visibility:visible!important;
        opacity:1!important;
        margin-top:4px!important;
        padding-top:14px!important;
        border-top:1px solid var(--line)!important;
    }

    .sidebar .nav-item,
    .sidebar .theme-toggle,
    .sidebar .logout{
        display:grid!important;
        grid-template-columns:42px minmax(0,1fr)!important;
        align-items:center!important;
        justify-content:start!important;
        gap:12px!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        min-height:56px!important;
        height:auto!important;
        padding:9px 12px!important;
        border-radius:18px!important;
        background:var(--surface-soft)!important;
        border:1px solid var(--line)!important;
        color:var(--text-soft)!important;
        font-size:14px!important;
        font-weight:850!important;
        line-height:1.15!important;
        text-align:left!important;
        white-space:normal!important;
        overflow:visible!important;
        transform:none!important;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle span:last-child,
    .sidebar .logout span:last-child{
        display:block!important;
        min-width:0!important;
        width:auto!important;
        color:inherit!important;
        font-size:14px!important;
        font-weight:850!important;
        line-height:1.15!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:break-word!important;
    }

    .sidebar .nav-symbol{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        border-radius:16px!important;
        display:grid!important;
        place-items:center!important;
        background:#ffffff!important;
        border:1px solid var(--line)!important;
        color:var(--primary)!important;
        font-size:12px!important;
        font-weight:900!important;
    }

    html[data-theme="dark"] .sidebar .nav-symbol{
        background:var(--surface-muted)!important;
    }

    .sidebar .nav-item.active{
        background:var(--primary)!important;
        border-color:var(--primary)!important;
        color:#ffffff!important;
        box-shadow:0 12px 24px rgba(41,79,195,.22)!important;
    }

    .sidebar .nav-item.active .nav-symbol{
        background:#ffffff!important;
        color:var(--primary)!important;
        border-color:rgba(255,255,255,.72)!important;
    }

    .sidebar .theme-toggle{
        cursor:pointer!important;
    }

    .sidebar .theme-toggle .theme-switch{
        grid-column:1!important;
        width:42px!important;
        min-width:42px!important;
        height:26px!important;
        border-radius:999px!important;
        display:inline-flex!important;
        align-items:center!important;
        padding:3px!important;
        background:#dde7ff!important;
        border:1px solid var(--primary-line)!important;
    }

    .sidebar .theme-toggle .theme-switch-knob{
        width:18px!important;
        height:18px!important;
        border-radius:999px!important;
        background:#ffffff!important;
        box-shadow:0 2px 8px rgba(15,23,42,.14)!important;
    }

    html[data-theme="dark"] .sidebar .theme-toggle .theme-switch{
        background:var(--primary)!important;
        justify-content:flex-end!important;
    }

    .sidebar .logout{
        background:var(--danger-bg)!important;
        border-color:var(--danger-line)!important;
        color:var(--danger)!important;
    }

    .main{
        width:100%;
        min-width:0;
        gap:14px;
    }

    .topbar{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        min-height:auto;
        padding:14px;
        border-radius:24px;
    }

    .topbar h1{
        width:100%;
        max-width:100%;
        padding:10px 12px;
        border-radius:18px;
        font-size:clamp(22px,7vw,28px);
        line-height:1.12;
        letter-spacing:-.04em;
    }

    .topbar p{
        font-size:12px;
        line-height:1.45;
    }

    .date{
        width:100%;
        min-width:0;
        min-height:44px;
        justify-content:flex-start;
        padding:10px 12px;
        border-radius:16px;
        font-size:12px;
    }

    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        width:100%;
        min-width:0;
        max-width:100%;
        padding:16px;
        border-radius:24px;
        overflow:hidden;
    }

    .card-head h2,
    .clean-panel-head h2,
    .panel-head h3,
    .profile-card h2{
        font-size:clamp(19px,6vw,23px);
        line-height:1.14;
        letter-spacing:-.035em;
    }

    .card-head p,
    .clean-panel-head p,
    .profile-card p,
    .notice,
    .recommendation-card p,
    .rule-basis-card p,
    .task-feasibility-note,
    .modal-body p{
        font-size:12px;
        line-height:1.45;
    }

    .clean-panel-head,
    .panel-head,
    .activity-panel-head,
    .record-history-top,
    .validation-scenario-top,
    .monitor-card-top,
    .monitor-foot,
    .integration-panel,
    .month-calendar-head{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    .forms,
    .compact-form,
    .schedule-form,
    .task-simple-form,
    .modal-grid,
    .validation-scenario-grid,
    .dashboard-focus-grid,
    .activity-overview-grid,
    .schedule-layout,
    .language-mode-grid,
    .simple-summary-grid,
    .routine-grid,
    .record-score-row,
    .monitoring-grid,
    .monitor-mini-grid,
    .user-grid,
    .task-detail-grid,
    .load-meter-top,
    .mini-stat-list,
    .weekly-unscheduled-list{
        display:grid;
        grid-template-columns:1fr;
        gap:12px;
        min-width:0;
    }

    .field,
    .full{
        min-width:0;
        grid-column:1/-1;
    }

    .field input,
    .field select,
    .field textarea{
        width:100%;
        min-height:44px;
        padding:11px 12px;
        font-size:13px;
        border-radius:14px;
    }

    .button-row,
    .task-command-actions,
    .task-control-panel form,
    .tab-buttons,
    .flag-pill-list{
        display:flex;
        flex-wrap:wrap;
        gap:8px;
        width:100%;
        align-items:center;
    }

    .button-row .btn,
    .button-row form,
    .button-row form .btn,
    .btn,
    .task-command-actions .btn,
    .task-control,
    .task-control-panel form .task-control,
    .tab-button{
        min-width:0;
        min-height:42px;
        justify-content:center;
        text-align:center;
        white-space:normal;
        line-height:1.15;
    }

    .button-row .btn,
    .button-row form,
    .button-row form .btn,
    .task-command-actions .btn,
    .task-control,
    .task-control-panel form .task-control{
        width:100%;
    }

    .tab-buttons{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        padding:8px;
        border-radius:20px;
        background:var(--surface-soft);
        border:1px solid var(--line);
    }

    .tab-button{
        width:100%;
        padding:10px 8px;
        border-radius:14px;
        font-size:12px;
    }

    .status,
    .flag-pill{
        max-width:100%;
        min-height:28px;
        justify-content:center;
        text-align:center;
        white-space:normal;
        line-height:1.15;
        font-size:11px;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        display:grid;
        grid-template-columns:1fr;
        align-items:start;
        gap:14px;
        padding:20px;
        border-radius:26px;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:clamp(25px,8vw,32px);
        line-height:1.05;
        letter-spacing:-.045em;
    }

    .student-overview-main p,
    .task-command-card p{
        font-size:12px;
        line-height:1.45;
    }

    .student-overview-main span,
    .task-command-card span,
    .schedule-hero span,
    .language-hero span{
        font-size:9.5px;
        letter-spacing:.12em;
        margin-bottom:9px;
    }

    .student-overview-status,
    .schedule-hero-stats,
    .schedule-hero-stats div{
        width:100%;
    }

    .simple-summary-card,
    .metric-card,
    .routine-card,
    .recommendation-card,
    .activity-panel,
    .activity-task-item,
    .quick-action-card,
    .compact-task-item,
    .focus-simplified-card,
    .task-board-item,
    .record-history-card,
    .validation-scenario-card,
    .language-mode-card,
    .monitor-card,
    .rule-basis-card{
        width:100%;
        min-width:0;
        padding:14px;
        border-radius:20px;
    }

    .simple-summary-card strong,
    .metric-card strong,
    .routine-card strong,
    .load-meter-top strong,
    .mini-stat-list strong,
    .schedule-metric strong{
        font-size:clamp(20px,7vw,25px);
    }

    .recommendation-card,
    .quick-action-card,
    .activity-task-item,
    .task-board-main,
    .focus-simplified-card,
    .compact-task-item{
        display:grid;
        grid-template-columns:1fr;
        align-items:start;
        gap:10px;
    }

    .recommendation-icon,
    .quick-action-card span{
        width:38px;
        height:38px;
        border-radius:13px;
    }

    .task-command-card{
        padding:22px 20px;
    }

    .task-command-card .task-command-actions,
    .task-command-card .btn{
        width:100%;
    }

    .task-board-list{
        gap:14px;
    }

    .task-board-item{
        gap:14px;
        border-radius:24px;
    }

    .task-board-main{
        gap:12px;
    }

    .task-board-main span{
        width:auto;
        max-width:100%;
        font-size:11px;
        padding:6px 10px;
        line-height:1.1;
    }

    .task-board-main h3{
        font-size:20px;
        line-height:1.15;
        letter-spacing:-.03em;
    }

    .task-board-main p{
        font-size:12px;
        line-height:1.35;
    }

    .task-board-badges{
        display:flex;
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:8px;
        width:100%;
    }

    .task-detail-grid{
        gap:10px;
    }

    .task-detail-grid div{
        padding:12px;
        border-radius:16px;
    }

    .task-detail-grid strong{
        font-size:15px;
        line-height:1.2;
    }

    .task-control-links{
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .task-control-links a{
        display:block;
        width:100%;
        padding:10px 12px;
        border:1px solid var(--line);
        border-radius:14px;
        background:#ffffff;
        text-align:center;
    }

    .weekly-calendar-grid,
    .mini-calendar,
    .month-calendar-grid{
        display:grid;
        grid-template-columns:1fr;
        overflow:visible;
        gap:10px;
    }

    .weekly-day-card,
    .calendar-day,
    .month-day-card{
        min-height:auto;
        border-radius:20px;
    }

    .weekly-day-head{
        min-height:auto;
        padding:13px;
        display:grid;
        grid-template-columns:1fr;
        gap:8px;
    }

    .weekly-day-head small{
        width:max-content;
        max-width:100%;
    }

    .weekly-day-body,
    .calendar-items{
        padding:12px;
    }

    table,
    .table{
        width:100%;
        min-width:620px;
    }

    .card:has(table),
    .clean-panel:has(table),
    .lesson-table,
    .filter-panel,
    .table-wrap,
    .responsive-table{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    th,
    td{
        font-size:12px;
        padding:10px 8px;
        vertical-align:top;
    }

    td:first-child{
        gap:8px;
    }

    .mini-avatar{
        width:30px;
        height:30px;
        border-radius:11px;
        font-size:10px;
    }

    .popup-menu{
        position:fixed;
        left:12px;
        right:12px;
        top:auto;
        bottom:12px;
        width:auto;
        min-width:0;
        max-width:calc(100vw - 24px);
        z-index:130;
    }

    .modal-shell{
        padding:10px;
        align-items:flex-start;
        overflow-y:auto;
    }

    .modal-card,
    .modal-card.large{
        width:100%;
        max-height:calc(100dvh - 20px);
        border-radius:22px;
        overflow:auto;
    }

    .modal-head{
        position:sticky;
        top:0;
        z-index:2;
        padding:14px;
    }

    .modal-head h3{
        font-size:17px;
        line-height:1.2;
    }

    .modal-body{
        padding:14px;
        gap:10px;
    }

    .minimal-login-page{
        min-height:100dvh;
        padding:18px;
        place-items:center;
        overflow:hidden;
    }

    .minimal-login-card{
        width:100%;
        max-width:360px;
        gap:15px;
    }

    .minimal-login-brand h1{
        font-size:clamp(30px,10vw,38px);
        line-height:1;
    }

    .minimal-login-brand p{
        font-size:11px;
        line-height:1.35;
        letter-spacing:.06em;
    }

    .minimal-login-form{
        gap:12px;
    }

    .minimal-input,
    .minimal-login-btn{
        height:46px;
        border-radius:12px;
    }

    .minimal-input{
        grid-template-columns:38px minmax(0,1fr);
    }

    .minimal-input input{
        font-size:12px;
        letter-spacing:.02em;
        min-width:0;
    }

    .forgot-link{
        font-size:12px;
        text-align:center;
    }

    .login-blob{
        opacity:.8;
    }
}

@media(max-width:520px){
    .app{
        padding:10px;
        padding-top:72px;
        gap:12px;
    }

    .mobile-menu-toggle{
        width:48px;
        height:48px;
        right:12px;
        border-radius:17px;
    }

    .sidebar{
        left:10px!important;
        bottom:10px!important;
        width:min(326px,calc(100vw - 20px))!important;
        max-height:calc(100dvh - 20px)!important;
        padding:16px!important;
        border-radius:26px!important;
    }

    .sidebar .logo span{
        font-size:22px!important;
    }

    .sidebar .nav-item,
    .sidebar .theme-toggle,
    .sidebar .logout{
        min-height:54px!important;
        grid-template-columns:40px minmax(0,1fr)!important;
        gap:11px!important;
        padding:9px 11px!important;
        border-radius:17px!important;
    }

    .sidebar .nav-symbol{
        width:40px!important;
        height:40px!important;
        min-width:40px!important;
        border-radius:15px!important;
    }

    .topbar,
    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        padding:14px;
        border-radius:22px;
    }

    .topbar h1{
        font-size:24px;
        padding:10px 11px;
        border-radius:16px;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        padding:18px;
        border-radius:24px;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:26px;
    }

    .simple-summary-card,
    .metric-card,
    .routine-card,
    .recommendation-card,
    .activity-panel,
    .activity-task-item,
    .quick-action-card,
    .compact-task-item,
    .focus-simplified-card,
    .task-board-item,
    .record-history-card,
    .validation-scenario-card,
    .language-mode-card,
    .monitor-card,
    .rule-basis-card{
        padding:13px;
        border-radius:18px;
    }

    .tab-buttons{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:7px;
        padding:7px;
    }

    .tab-button{
        font-size:11.5px;
        padding:10px 6px;
    }

    .field input,
    .field select,
    .field textarea,
    .btn,
    .task-control,
    .minimal-input,
    .minimal-login-btn{
        min-height:42px;
        font-size:12px;
    }

    table,
    .table{
        min-width:560px;
    }
}

@media(max-width:390px){
    .app{
        padding:8px;
        padding-top:68px;
    }

    .mobile-menu-toggle{
        width:46px;
        height:46px;
        top:calc(env(safe-area-inset-top,0px) + 10px);
        right:10px;
    }

    .sidebar{
        top:calc(env(safe-area-inset-top,0px) + 10px)!important;
        left:8px!important;
        bottom:8px!important;
        width:calc(100vw - 16px)!important;
        max-height:calc(100dvh - 18px)!important;
        padding:14px!important;
        border-radius:24px!important;
    }

    .sidebar .logo span{
        font-size:21px!important;
    }

    .sidebar .nav-item,
    .sidebar .theme-toggle,
    .sidebar .logout{
        min-height:52px!important;
        grid-template-columns:38px minmax(0,1fr)!important;
        padding:8px 10px!important;
    }

    .sidebar .nav-symbol{
        width:38px!important;
        height:38px!important;
        min-width:38px!important;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle span:last-child,
    .sidebar .logout span:last-child{
        font-size:13px!important;
    }

    .topbar,
    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        padding:12px;
        border-radius:20px;
    }

    .topbar h1{
        font-size:22px;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:24px;
    }

    .tab-buttons{
        grid-template-columns:1fr;
    }

    table,
    .table{
        min-width:520px;
    }
}

@media(max-width:860px){
    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
        background:#f3f6fb;
    }

    body.nav-open{
        overflow:hidden;
    }

    .app{
        display:block!important;
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        padding:76px 14px 22px!important;
    }

    .main{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        gap:16px!important;
    }

    .sidebar{
        position:fixed!important;
        top:calc(env(safe-area-inset-top,0px) + 14px)!important;
        left:14px!important;
        bottom:14px!important;
        width:min(340px,calc(100vw - 28px))!important;
        max-width:calc(100vw - 28px)!important;
        height:auto!important;
        max-height:calc(100dvh - 28px)!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        justify-content:flex-start!important;
        gap:18px!important;
        padding:18px!important;
        border-radius:28px!important;
        background:rgba(255,255,255,.96)!important;
        border:1px solid rgba(226,232,241,.95)!important;
        box-shadow:0 28px 80px rgba(20,30,55,.22)!important;
        backdrop-filter:blur(22px)!important;
        z-index:120!important;
        transform:translateX(calc(-100% - 36px))!important;
        opacity:0!important;
        pointer-events:none!important;
        transition:transform .26s var(--ease), opacity .22s var(--ease)!important;
    }

    body.nav-open .sidebar{
        transform:translateX(0)!important;
        opacity:1!important;
        pointer-events:auto!important;
    }

    .sidebar .logo{
        display:flex!important;
        justify-content:center!important;
        align-items:center!important;
        margin:0 0 14px!important;
        padding:8px 0 4px!important;
    }

    .sidebar .logo span{
        display:block!important;
        color:var(--primary)!important;
        font-size:24px!important;
        font-weight:900!important;
        letter-spacing:-.05em!important;
    }

    .sidebar .menu-title{
        display:block!important;
        margin:18px 4px 9px!important;
        color:#a1a9ba!important;
        font-size:11px!important;
        font-weight:900!important;
        letter-spacing:.18em!important;
    }

    .sidebar .nav-list{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
        overflow:visible!important;
        padding:0!important;
    }

    .sidebar .sidebar-bottom{
        display:block!important;
        margin-top:8px!important;
        padding-top:14px!important;
        border-top:1px solid var(--line)!important;
    }

    .sidebar .nav-item,
    .sidebar .theme-toggle,
    .sidebar .logout{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        min-height:58px!important;
        height:auto!important;
        display:grid!important;
        grid-template-columns:42px minmax(0,1fr)!important;
        align-items:center!important;
        justify-content:start!important;
        gap:12px!important;
        padding:9px 12px!important;
        border-radius:18px!important;
        border:1px solid var(--line)!important;
        background:#f9fbff!important;
        color:#3f4658!important;
        font-size:14px!important;
        font-weight:850!important;
        text-align:left!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        line-height:1.22!important;
        transform:none!important;
    }

    .sidebar .nav-item:hover,
    .sidebar .nav-item.active{
        background:var(--primary-soft)!important;
        color:var(--primary)!important;
        border-color:var(--primary-line)!important;
    }

    .sidebar .logout{
        background:#fff8f8!important;
        color:var(--danger)!important;
        border-color:var(--danger-line)!important;
    }

    .sidebar .nav-symbol{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        display:grid!important;
        place-items:center!important;
        border-radius:16px!important;
        background:#ffffff!important;
        border:1px solid var(--line)!important;
        color:var(--primary)!important;
        font-size:12px!important;
        font-weight:900!important;
        flex:none!important;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle span:last-child,
    .sidebar .logout span:last-child{
        display:block!important;
        width:auto!important;
        min-width:0!important;
        max-width:100%!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        hyphens:none!important;
        font-size:14px!important;
        line-height:1.22!important;
        letter-spacing:0!important;
    }

    .sidebar .theme-toggle{
        grid-template-columns:58px minmax(0,1fr)!important;
        cursor:pointer!important;
    }

    .theme-switch{
        width:48px!important;
        height:28px!important;
        border-radius:999px!important;
        background:#e8edf9!important;
        display:flex!important;
        align-items:center!important;
        padding:3px!important;
        border:1px solid var(--line)!important;
    }

    .theme-switch-knob{
        width:20px!important;
        height:20px!important;
        border-radius:50%!important;
        background:#ffffff!important;
        box-shadow:0 4px 10px rgba(31,45,90,.12)!important;
        transition:transform .22s var(--ease)!important;
    }

    html[data-theme="dark"] .theme-switch{
        background:var(--primary)!important;
        border-color:var(--primary)!important;
    }

    html[data-theme="dark"] .theme-switch-knob{
        transform:translateX(20px)!important;
    }

    .mobile-menu-toggle{
        position:fixed!important;
        top:calc(env(safe-area-inset-top,0px) + 14px)!important;
        right:14px!important;
        width:52px!important;
        height:52px!important;
        display:grid!important;
        place-items:center!important;
        border-radius:18px!important;
        background:rgba(31,35,45,.92)!important;
        border:1px solid rgba(255,255,255,.08)!important;
        box-shadow:0 14px 34px rgba(20,30,55,.24)!important;
        z-index:130!important;
        cursor:pointer!important;
        backdrop-filter:blur(16px)!important;
    }

    .mobile-menu-toggle span,
    .mobile-menu-toggle span:before,
    .mobile-menu-toggle span:after{
        content:""!important;
        display:block!important;
        width:21px!important;
        height:2px!important;
        border-radius:999px!important;
        background:#ffffff!important;
        position:relative!important;
        transition:transform .22s var(--ease), top .22s var(--ease), opacity .22s var(--ease)!important;
    }

    .mobile-menu-toggle span:before{
        position:absolute!important;
        top:-7px!important;
    }

    .mobile-menu-toggle span:after{
        position:absolute!important;
        top:7px!important;
    }

    body.nav-open .mobile-menu-toggle span{
        background:transparent!important;
    }

    body.nav-open .mobile-menu-toggle span:before{
        top:0!important;
        transform:rotate(45deg)!important;
    }

    body.nav-open .mobile-menu-toggle span:after{
        top:0!important;
        transform:rotate(-45deg)!important;
    }

    .mobile-nav-backdrop{
        position:fixed!important;
        inset:0!important;
        background:rgba(15,23,42,.34)!important;
        backdrop-filter:blur(4px)!important;
        z-index:110!important;
        opacity:0!important;
        pointer-events:none!important;
        transition:opacity .22s var(--ease)!important;
    }

    body.nav-open .mobile-nav-backdrop{
        opacity:1!important;
        pointer-events:auto!important;
    }

    .topbar{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        width:100%!important;
        max-width:100%!important;
        min-height:auto!important;
        padding:14px!important;
        border-radius:22px!important;
    }

    .topbar h1{
        width:100%!important;
        max-width:100%!important;
        font-size:26px!important;
        padding:12px 14px!important;
        border-radius:18px!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
    }

    .date{
        width:100%!important;
        min-width:0!important;
        min-height:48px!important;
        justify-content:flex-start!important;
        padding:12px 14px!important;
        border-radius:18px!important;
    }

    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:16px!important;
        border-radius:24px!important;
        overflow:hidden!important;
    }

    .card-head h2,
    .clean-panel-head h2,
    .panel-head h3,
    .profile-card h2{
        font-size:22px!important;
        line-height:1.15!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
    }

    .clean-panel-head,
    .panel-head,
    .card-head{
        gap:12px!important;
        margin-bottom:14px!important;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        width:100%!important;
        max-width:100%!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:14px!important;
        align-items:start!important;
        padding:22px!important;
        border-radius:26px!important;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:30px!important;
        line-height:1.06!important;
        letter-spacing:-.045em!important;
        max-width:100%!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
    }

    .student-overview-status{
        width:100%!important;
        padding:16px!important;
        border-radius:20px!important;
    }

    .simple-summary-grid,
    .dashboard-focus-grid,
    .activity-overview-grid,
    .schedule-layout,
    .forms,
    .compact-form,
    .schedule-form,
    .task-simple-form,
    .load-meter-top,
    .mini-stat-list,
    .record-score-row,
    .monitoring-grid,
    .user-grid,
    .monitor-mini-grid,
    .modal-grid,
    .validation-scenario-grid,
    .language-mode-grid,
    .task-detail-grid{
        grid-template-columns:1fr!important;
        gap:12px!important;
    }

    .simple-summary-card,
    .metric-card,
    .routine-card,
    .recommendation-card,
    .activity-panel,
    .activity-task-item,
    .quick-action-card,
    .compact-task-item,
    .focus-simplified-card,
    .task-board-item,
    .record-history-card,
    .validation-scenario-card,
    .language-mode-card,
    .monitor-card,
    .rule-basis-card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:15px!important;
        border-radius:20px!important;
    }

    .activity-task-item,
    .compact-task-item,
    .record-history-top,
    .monitor-card-top,
    .monitor-foot,
    .task-board-main,
    .focus-simplified-card{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        align-items:start!important;
        justify-content:start!important;
    }

    .quick-action-card{
        grid-template-columns:42px minmax(0,1fr)!important;
    }

    .task-board-badges,
    .flag-pill-list,
    .monitor-status-row,
    .meta-row,
    .button-row,
    .task-command-actions,
    .task-control-panel form,
    .task-control-links{
        display:flex!important;
        flex-wrap:wrap!important;
        justify-content:flex-start!important;
        align-items:center!important;
        gap:8px!important;
        width:100%!important;
        max-width:100%!important;
    }

    .tab-buttons{
        display:flex!important;
        flex-wrap:nowrap!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:8px!important;
        width:100%!important;
        max-width:100%!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        padding:9px!important;
        border-radius:20px!important;
        -webkit-overflow-scrolling:touch!important;
        scrollbar-width:none!important;
    }

    .tab-buttons::-webkit-scrollbar{
        display:none!important;
    }

    .tab-button{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:max-content!important;
        max-width:none!important;
        min-height:44px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        padding:10px 14px!important;
        border-radius:16px!important;
        white-space:nowrap!important;
        word-break:keep-all!important;
        overflow-wrap:normal!important;
        writing-mode:horizontal-tb!important;
        text-orientation:mixed!important;
        line-height:1.1!important;
        font-size:12.5px!important;
    }

    .field,
    .full{
        min-width:0!important;
        max-width:100%!important;
    }

    .field input,
    .field select,
    .field textarea{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        min-height:46px!important;
        font-size:13px!important;
        border-radius:15px!important;
    }

    .btn,
    .task-control,
    .minimal-login-btn{
        width:auto!important;
        max-width:100%!important;
        min-height:44px!important;
        padding:10px 14px!important;
        border-radius:15px!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
        line-height:1.2!important;
    }

    .button-row .btn,
    .button-row form,
    .button-row form .btn,
    .task-command-actions .btn{
        width:100%!important;
    }

    .task-control{
        flex:1 1 130px!important;
        display:grid!important;
        justify-items:center!important;
    }

    .status,
    .flag-pill{
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
        text-align:center!important;
        line-height:1.15!important;
        min-height:28px!important;
    }

    .focus-simplified-main span,
    .task-board-main span,
    .monitor-card-top span,
    .record-history-top span{
        width:auto!important;
        max-width:100%!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
        line-height:1.15!important;
    }

    .mini-calendar,
    .weekly-calendar-grid,
    .month-calendar-grid{
        display:flex!important;
        grid-template-columns:none!important;
        gap:12px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        padding-bottom:8px!important;
        -webkit-overflow-scrolling:touch!important;
    }

    .calendar-day,
    .weekly-day-card,
    .month-day-card{
        flex:0 0 min(82vw,280px)!important;
        min-width:0!important;
    }

    .weekly-unscheduled-list,
    .routine-grid{
        grid-template-columns:1fr!important;
    }

    table,
    .table{
        min-width:640px!important;
    }

    .card:has(table),
    .clean-panel:has(table),
    .table-wrap{
        overflow-x:auto!important;
        -webkit-overflow-scrolling:touch!important;
    }

    .modal-shell{
        align-items:flex-end!important;
        padding:12px!important;
    }

    .modal-card,
    .modal-card.large{
        width:100%!important;
        max-width:100%!important;
        max-height:calc(100dvh - 28px)!important;
        overflow:auto!important;
        border-radius:24px!important;
    }

    .modal-head,
    .modal-body{
        padding:16px!important;
    }

    .minimal-login-page{
        min-height:100dvh!important;
        padding:22px!important;
    }

    .minimal-login-card{
        width:100%!important;
        max-width:360px!important;
    }
}

@media(max-width:520px){
    .app{
        padding:70px 12px 20px!important;
    }

    .mobile-menu-toggle{
        width:50px!important;
        height:50px!important;
        top:calc(env(safe-area-inset-top,0px) + 12px)!important;
        right:12px!important;
    }

    .sidebar{
        top:calc(env(safe-area-inset-top,0px) + 12px)!important;
        left:12px!important;
        bottom:12px!important;
        width:min(332px,calc(100vw - 24px))!important;
        max-width:calc(100vw - 24px)!important;
        max-height:calc(100dvh - 24px)!important;
        padding:16px!important;
        border-radius:26px!important;
    }

    .topbar,
    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        padding:15px!important;
        border-radius:22px!important;
    }

    .topbar h1{
        font-size:25px!important;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        padding:20px!important;
        border-radius:24px!important;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:28px!important;
    }

    .simple-summary-card strong,
    .metric-card strong,
    .routine-card strong,
    .load-meter-top strong,
    .mini-stat-list strong{
        font-size:22px!important;
    }

    .task-board-main h3,
    .focus-simplified-main h3,
    .activity-task-item strong{
        font-size:17px!important;
        line-height:1.25!important;
    }

    .tab-buttons{
        padding:8px!important;
        border-radius:19px!important;
    }

    .tab-button{
        min-height:42px!important;
        padding:10px 13px!important;
        font-size:12px!important;
    }
}

@media(max-width:390px){
    .app{
        padding:68px 10px 18px!important;
    }

    .sidebar{
        left:10px!important;
        bottom:10px!important;
        width:calc(100vw - 20px)!important;
        max-width:calc(100vw - 20px)!important;
    }

    .sidebar .nav-item,
    .sidebar .theme-toggle,
    .sidebar .logout{
        min-height:56px!important;
        grid-template-columns:40px minmax(0,1fr)!important;
        padding:8px 10px!important;
    }

    .sidebar .nav-symbol{
        width:40px!important;
        height:40px!important;
        min-width:40px!important;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle span:last-child,
    .sidebar .logout span:last-child{
        font-size:13.5px!important;
    }

    .topbar,
    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        padding:14px!important;
        border-radius:21px!important;
    }

    .topbar h1{
        font-size:23px!important;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:26px!important;
    }

    .tab-button{
        min-height:40px!important;
        padding:9px 12px!important;
        font-size:11.5px!important;
    }
}

@media(max-width:860px){
    html,
    body{
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
    }

    body{
        background:#f4f7fb!important;
    }

    *,
    *:before,
    *:after{
        min-width:0;
        box-sizing:border-box;
    }

    .app{
        width:100%!important;
        max-width:100%!important;
        display:block!important;
        padding:76px 14px 22px!important;
        overflow-x:hidden!important;
    }

    .main{
        width:100%!important;
        max-width:100%!important;
        gap:18px!important;
        overflow:hidden!important;
    }

    .mobile-menu-toggle{
        position:fixed!important;
        top:calc(env(safe-area-inset-top,0px) + 14px)!important;
        right:14px!important;
        z-index:1200!important;
        width:54px!important;
        height:54px!important;
        border-radius:18px!important;
        display:grid!important;
        place-items:center!important;
        background:#202532!important;
        box-shadow:0 14px 30px rgba(15,23,42,.28)!important;
        border:1px solid rgba(255,255,255,.16)!important;
    }

    .mobile-menu-toggle span,
    .mobile-menu-toggle span:before,
    .mobile-menu-toggle span:after{
        content:""!important;
        display:block!important;
        width:24px!important;
        height:2px!important;
        border-radius:999px!important;
        background:#ffffff!important;
        position:relative!important;
        transition:transform .2s var(--ease), opacity .2s var(--ease)!important;
    }

    .mobile-menu-toggle span:before{
        position:absolute!important;
        transform:translateY(-8px)!important;
    }

    .mobile-menu-toggle span:after{
        position:absolute!important;
        transform:translateY(8px)!important;
    }

    body.nav-open .mobile-menu-toggle span{
        background:transparent!important;
    }

    body.nav-open .mobile-menu-toggle span:before{
        transform:rotate(45deg)!important;
    }

    body.nav-open .mobile-menu-toggle span:after{
        transform:rotate(-45deg)!important;
    }

    .mobile-nav-backdrop{
        position:fixed!important;
        inset:0!important;
        background:rgba(15,23,42,.36)!important;
        backdrop-filter:blur(6px)!important;
        z-index:1090!important;
        opacity:0!important;
        visibility:hidden!important;
        transition:opacity .22s var(--ease), visibility .22s var(--ease)!important;
    }

    body.nav-open .mobile-nav-backdrop{
        opacity:1!important;
        visibility:visible!important;
    }

    .sidebar{
        position:fixed!important;
        top:calc(env(safe-area-inset-top,0px) + 14px)!important;
        left:14px!important;
        bottom:14px!important;
        width:min(340px,calc(100vw - 28px))!important;
        height:auto!important;
        max-height:calc(100dvh - 28px)!important;
        z-index:1150!important;
        display:flex!important;
        flex-direction:column!important;
        justify-content:flex-start!important;
        gap:18px!important;
        padding:20px!important;
        border-radius:28px!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        transform:translateX(calc(-100% - 28px))!important;
        transition:transform .24s var(--ease)!important;
        background:rgba(255,255,255,.96)!important;
        border:1px solid rgba(226,232,240,.96)!important;
        box-shadow:0 26px 70px rgba(15,23,42,.22)!important;
        backdrop-filter:blur(18px)!important;
    }

    body.nav-open .sidebar{
        transform:translateX(0)!important;
    }

    .sidebar > div{
        width:100%!important;
    }

    .sidebar .logo{
        display:flex!important;
        justify-content:center!important;
        align-items:center!important;
        margin:2px 0 16px!important;
        width:100%!important;
    }

    .sidebar .logo span{
        display:block!important;
        color:var(--primary)!important;
        font-size:24px!important;
        font-weight:900!important;
        letter-spacing:-.045em!important;
    }

    .sidebar .menu-title{
        display:block!important;
        margin:16px 0 9px!important;
        color:var(--muted-light)!important;
        font-size:10px!important;
        font-weight:900!important;
        letter-spacing:.2em!important;
    }

    .sidebar .nav-list{
        width:100%!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:9px!important;
        overflow:visible!important;
        padding:0!important;
    }

    .sidebar .sidebar-bottom{
        display:block!important;
        width:100%!important;
        margin-top:4px!important;
        padding-top:14px!important;
        border-top:1px solid var(--line)!important;
    }

    .sidebar .nav-item,
    .sidebar .theme-toggle,
    .sidebar .logout{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        min-height:56px!important;
        height:auto!important;
        display:grid!important;
        grid-template-columns:42px minmax(0,1fr)!important;
        align-items:center!important;
        justify-content:start!important;
        gap:12px!important;
        padding:9px 12px!important;
        border-radius:18px!important;
        background:#f8fafc!important;
        border:1px solid var(--line)!important;
        color:var(--text-soft)!important;
        text-align:left!important;
        transform:none!important;
    }

    .sidebar .nav-item.active{
        background:var(--primary-soft)!important;
        border-color:var(--primary-line)!important;
        color:var(--primary)!important;
    }

    .sidebar .logout{
        background:var(--danger-bg)!important;
        border-color:var(--danger-line)!important;
        color:var(--danger)!important;
    }

    .sidebar .nav-symbol{
        width:42px!important;
        min-width:42px!important;
        height:42px!important;
        border-radius:15px!important;
        display:grid!important;
        place-items:center!important;
        background:#ffffff!important;
        border:1px solid var(--line)!important;
        font-size:12px!important;
        font-weight:900!important;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle span:last-child,
    .sidebar .logout span:last-child{
        display:block!important;
        width:100%!important;
        max-width:100%!important;
        font-size:14px!important;
        font-weight:900!important;
        line-height:1.2!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:break-word!important;
    }

    .theme-switch{
        width:42px!important;
        height:28px!important;
        border-radius:999px!important;
        background:#e7ecf6!important;
        border:1px solid var(--line)!important;
        display:flex!important;
        align-items:center!important;
        padding:3px!important;
    }

    .theme-switch-knob{
        width:20px!important;
        height:20px!important;
        border-radius:999px!important;
        background:#ffffff!important;
        box-shadow:0 4px 10px rgba(15,23,42,.14)!important;
        transform:translateX(0)!important;
        transition:transform .2s var(--ease)!important;
    }

    .theme-switch.active .theme-switch-knob{
        transform:translateX(14px)!important;
    }

    .topbar,
    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        width:100%!important;
        max-width:100%!important;
        overflow:hidden!important;
        padding:18px!important;
        border-radius:24px!important;
    }

    .topbar{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:14px!important;
        min-height:auto!important;
    }

    .topbar h1{
        width:100%!important;
        max-width:100%!important;
        font-size:28px!important;
        padding:13px 15px!important;
        border-radius:18px!important;
        white-space:normal!important;
        overflow-wrap:break-word!important;
    }

    .date{
        width:100%!important;
        min-width:0!important;
        min-height:48px!important;
        justify-content:flex-start!important;
        padding:12px 15px!important;
        border-radius:18px!important;
        font-size:14px!important;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        width:100%!important;
        max-width:100%!important;
        padding:24px!important;
        border-radius:26px!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:18px!important;
        overflow:hidden!important;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:32px!important;
        line-height:1.05!important;
        max-width:100%!important;
        white-space:normal!important;
        overflow-wrap:break-word!important;
    }

    .student-overview-status,
    .schedule-hero-stats,
    .schedule-hero-stats div{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .simple-summary-grid,
    .dashboard-focus-grid,
    .activity-overview-grid,
    .schedule-layout,
    .forms,
    .compact-form,
    .schedule-form,
    .task-simple-form,
    .load-meter-top,
    .mini-stat-list,
    .record-score-row,
    .monitoring-grid,
    .user-grid,
    .monitor-mini-grid,
    .modal-grid,
    .validation-scenario-grid,
    .language-mode-grid,
    .task-detail-grid,
    .weekly-unscheduled-list,
    .routine-grid{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        width:100%!important;
        max-width:100%!important;
    }

    .clean-panel-head,
    .card-head,
    .panel-head,
    .month-calendar-head,
    .activity-panel-head,
    .record-history-top,
    .validation-scenario-top{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        align-items:start!important;
        justify-items:stretch!important;
        width:100%!important;
        max-width:100%!important;
    }

    .clean-panel-head h2,
    .card-head h2,
    .panel-head h3,
    .profile-card h2,
    .month-calendar-head strong{
        font-size:22px!important;
        line-height:1.15!important;
        white-space:normal!important;
        overflow-wrap:break-word!important;
    }

    .clean-panel-head p,
    .card-head p,
    .profile-card p,
    .month-calendar-head span{
        max-width:100%!important;
        white-space:normal!important;
        overflow-wrap:break-word!important;
    }

    .tab-buttons{
        width:100%!important;
        max-width:100%!important;
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
        overflow:visible!important;
        padding:8px!important;
        border-radius:20px!important;
        background:var(--surface-soft)!important;
        border:1px solid var(--line)!important;
    }

    .tab-button,
    [data-task-filter],
    [data-record-filter],
    [data-tab-target]{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        min-height:44px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        padding:10px 12px!important;
        border-radius:15px!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        text-align:center!important;
        line-height:1.1!important;
        writing-mode:horizontal-tb!important;
        text-orientation:mixed!important;
    }

    .tab-button.active,
    [data-task-filter].active,
    [data-record-filter].active,
    [data-tab-target].active{
        background:var(--primary)!important;
        color:#ffffff!important;
        border-color:var(--primary)!important;
    }

    .task-board-list,
    .focus-simplified-list,
    .compact-task-list,
    .recommendation-stack,
    .activity-task-list,
    .quick-action-grid,
    .record-history-grid,
    .rule-basis-list{
        width:100%!important;
        max-width:100%!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:14px!important;
    }

    .task-board-item,
    .focus-simplified-card,
    .compact-task-item,
    .activity-task-item,
    .recommendation-card,
    .quick-action-card,
    .record-history-card,
    .monitor-card,
    .validation-scenario-card,
    .rule-basis-card,
    .simple-summary-card,
    .metric-card,
    .routine-card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        padding:16px!important;
        border-radius:22px!important;
        overflow:hidden!important;
    }

    .task-board-main,
    .focus-simplified-card,
    .compact-task-item,
    .activity-task-item,
    .monitor-card-top,
    .monitor-foot,
    .integration-panel{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        align-items:start!important;
        justify-content:start!important;
        width:100%!important;
        max-width:100%!important;
    }

    .task-board-main h3,
    .focus-simplified-main h3,
    .activity-task-item strong,
    .compact-task-item strong{
        font-size:19px!important;
        line-height:1.2!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:break-word!important;
    }

    .task-board-badges,
    .flag-pill-list,
    .monitor-status-row,
    .meta-row,
    .button-row,
    .task-command-actions,
    .task-control-links{
        width:100%!important;
        max-width:100%!important;
        display:flex!important;
        flex-wrap:wrap!important;
        justify-content:flex-start!important;
        align-items:center!important;
        gap:8px!important;
    }

    .task-control-panel,
    .task-control-panel form{
        width:100%!important;
        max-width:100%!important;
    }

    .task-control-panel form{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:9px!important;
        align-items:stretch!important;
    }

    .task-control{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        min-height:48px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        padding:10px 12px!important;
        border-radius:16px!important;
        text-align:center!important;
        white-space:nowrap!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        line-height:1.1!important;
        writing-mode:horizontal-tb!important;
        text-orientation:mixed!important;
        overflow:hidden!important;
        text-overflow:ellipsis!important;
    }

    .task-control span,
    .task-control small,
    .task-control strong,
    .task-control em,
    .task-control b{
        white-space:nowrap!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        writing-mode:horizontal-tb!important;
        text-orientation:mixed!important;
    }

    .btn,
    .minimal-login-btn{
        min-height:46px!important;
        border-radius:16px!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:break-word!important;
        line-height:1.15!important;
    }

    .button-row .btn,
    .button-row form,
    .button-row form .btn,
    .task-command-actions .btn{
        width:100%!important;
    }

    .status,
    .flag-pill,
    .focus-simplified-main span,
    .task-board-main span,
    .monitor-card-top span,
    .record-history-top span,
    .month-calendar-head span{
        width:auto!important;
        max-width:100%!important;
        min-height:30px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:break-word!important;
        text-align:center!important;
        line-height:1.12!important;
    }

    .field,
    .full,
    .field input,
    .field select,
    .field textarea{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .field input,
    .field select,
    .field textarea{
        min-height:46px!important;
        font-size:13px!important;
        border-radius:16px!important;
    }

    .mini-calendar,
    .weekly-calendar-grid,
    .month-calendar-grid{
        width:100%!important;
        max-width:100%!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        overflow:visible!important;
        padding:0!important;
    }

    .calendar-day,
    .weekly-day-card,
    .month-day-card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        flex:none!important;
        min-height:auto!important;
    }

    .month-day-card{
        min-height:128px!important;
    }

    .weekly-day-card{
        min-height:auto!important;
    }

    .weekly-day-body,
    .calendar-items{
        width:100%!important;
    }

    .weekly-block,
    .calendar-item,
    .month-task-dot,
    .weekly-unscheduled,
    .task-feasibility-note,
    .focus-simplified-advice,
    .rule-details,
    .notice{
        width:100%!important;
        max-width:100%!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:break-word!important;
    }

    table,
    .table{
        min-width:620px!important;
    }

    .card:has(table),
    .clean-panel:has(table),
    .table-wrap{
        overflow-x:auto!important;
        overflow-y:hidden!important;
        -webkit-overflow-scrolling:touch!important;
    }

    .modal-shell{
        align-items:flex-end!important;
        padding:12px!important;
    }

    .modal-card,
    .modal-card.large{
        width:100%!important;
        max-width:100%!important;
        max-height:calc(100dvh - 24px)!important;
        overflow:auto!important;
        border-radius:24px!important;
    }

    .modal-head,
    .modal-body{
        padding:16px!important;
    }

    .minimal-login-page{
        min-height:100dvh!important;
        padding:22px!important;
    }

    .minimal-login-card{
        width:100%!important;
        max-width:360px!important;
    }
}

@media(max-width:520px){
    .app{
        padding:74px 12px 20px!important;
    }

    .mobile-menu-toggle{
        width:52px!important;
        height:52px!important;
        top:calc(env(safe-area-inset-top,0px) + 12px)!important;
        right:12px!important;
    }

    .sidebar{
        top:calc(env(safe-area-inset-top,0px) + 12px)!important;
        left:12px!important;
        bottom:12px!important;
        width:min(330px,calc(100vw - 24px))!important;
        max-width:calc(100vw - 24px)!important;
        max-height:calc(100dvh - 24px)!important;
        padding:18px!important;
        border-radius:26px!important;
    }

    .topbar,
    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        padding:16px!important;
        border-radius:22px!important;
    }

    .topbar h1{
        font-size:26px!important;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        padding:20px!important;
        border-radius:24px!important;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:29px!important;
    }

    .clean-panel-head h2,
    .card-head h2,
    .panel-head h3,
    .profile-card h2,
    .month-calendar-head strong{
        font-size:21px!important;
    }

    .task-board-main h3,
    .focus-simplified-main h3,
    .activity-task-item strong,
    .compact-task-item strong{
        font-size:18px!important;
    }

    .simple-summary-card strong,
    .metric-card strong,
    .routine-card strong,
    .load-meter-top strong,
    .mini-stat-list strong{
        font-size:22px!important;
    }

    .tab-buttons{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:7px!important;
        padding:7px!important;
    }

    .tab-button,
    [data-task-filter],
    [data-record-filter],
    [data-tab-target]{
        min-height:42px!important;
        padding:9px 10px!important;
        font-size:12px!important;
    }

    .task-control-panel form{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
    }

    .task-control{
        min-height:46px!important;
        padding:9px 10px!important;
        font-size:12px!important;
    }
}

@media(max-width:390px){
    .app{
        padding:72px 10px 18px!important;
    }

    .sidebar{
        left:10px!important;
        bottom:10px!important;
        width:calc(100vw - 20px)!important;
        max-width:calc(100vw - 20px)!important;
    }

    .topbar,
    .card,
    .lesson-table,
    .filter-panel,
    .panel,
    .clean-panel,
    .profile-card,
    .monitoring-board,
    .weekly-calendar-panel,
    .activity-overview-card{
        padding:14px!important;
        border-radius:21px!important;
    }

    .topbar h1{
        font-size:24px!important;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2{
        font-size:27px!important;
    }

    .tab-buttons{
        grid-template-columns:1fr 1fr!important;
    }

    .tab-button,
    [data-task-filter],
    [data-record-filter],
    [data-tab-target]{
        min-height:40px!important;
        font-size:11.5px!important;
        padding:8px!important;
    }

    .task-control-panel form{
        grid-template-columns:1fr 1fr!important;
    }

    .task-control{
        min-height:44px!important;
        font-size:11.5px!important;
    }

    table,
    .table{
        min-width:560px!important;
    }
}

@media(max-width:860px){
    .task-filter-select-wrap,
    .mobile-tab-select-wrap{
        display:block!important;
        width:100%!important;
        margin:0 0 12px!important;
    }

    .task-filter-select,
    .mobile-tab-select{
        width:100%!important;
        min-height:50px!important;
        border:1px solid var(--primary-line)!important;
        border-radius:18px!important;
        background:linear-gradient(180deg,#ffffff 0%,#f8faff 100%)!important;
        color:var(--primary)!important;
        padding:0 44px 0 16px!important;
        font-size:14px!important;
        font-weight:900!important;
        letter-spacing:0!important;
        outline:0!important;
        appearance:none!important;
        -webkit-appearance:none!important;
        box-shadow:0 12px 24px rgba(31,45,90,.045)!important;
        background-image:linear-gradient(45deg,transparent 50%,var(--primary) 50%),linear-gradient(135deg,var(--primary) 50%,transparent 50%),linear-gradient(180deg,#ffffff 0%,#f8faff 100%)!important;
        background-position:calc(100% - 24px) 21px,calc(100% - 18px) 21px,0 0!important;
        background-size:6px 6px,6px 6px,100% 100%!important;
        background-repeat:no-repeat!important;
    }

    .tab-buttons:has([data-task-filter]),
    .tab-buttons.task-filter-buttons,
    .task-filter-buttons{
        display:none!important;
    }

    .tab-buttons:has([data-tab-target]){
        overflow-x:auto!important;
        display:flex!important;
        flex-wrap:nowrap!important;
        gap:8px!important;
        padding:8px!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .tab-buttons:has([data-tab-target]) .tab-button,
    .tab-buttons:has([data-tab-target]) [data-tab-target]{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:118px!important;
        max-width:none!important;
        min-height:42px!important;
        padding:9px 14px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:nowrap!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        text-align:center!important;
        line-height:1.2!important;
    }

    .task-board-item,
    .focus-simplified-card,
    [data-task-card]{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow:hidden!important;
        padding:18px!important;
        border-radius:24px!important;
    }

    .task-board-main,
    .focus-simplified-card{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        width:100%!important;
        min-width:0!important;
        align-items:start!important;
    }

    .task-board-main > div,
    .task-board-main > section,
    .task-board-main > article,
    .task-board-main > aside,
    .focus-simplified-main,
    .task-board-badges{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .task-board-badges,
    .meta-row,
    .flag-pill-list,
    .monitor-status-row{
        display:flex!important;
        flex-wrap:wrap!important;
        justify-content:flex-start!important;
        gap:8px!important;
    }

    .task-board-badges .status,
    .task-board-badges .flag-pill,
    .meta-row .status,
    .meta-row .flag-pill,
    .status,
    .flag-pill{
        width:auto!important;
        max-width:100%!important;
        min-width:0!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
        text-align:center!important;
        line-height:1.25!important;
        padding:7px 11px!important;
    }

    .task-control-panel,
    .task-control-panel form{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .task-control-panel form{
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:9px!important;
        align-items:stretch!important;
        justify-content:stretch!important;
    }

    .task-control,
    .task-control-panel.compact .task-control{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        min-height:46px!important;
        padding:9px 10px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        text-align:center!important;
        line-height:1.2!important;
        border-radius:15px!important;
    }

    .task-control span,
    .task-control small{
        display:inline!important;
        width:auto!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        line-height:1.2!important;
    }

    .task-detail-grid{
        grid-template-columns:1fr!important;
        gap:10px!important;
    }

    .task-detail-grid div,
    .focus-simplified-advice,
    .task-feasibility-note,
    .rule-details,
    .notice,
    .recommendation-card,
    .activity-task-item{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:break-word!important;
    }

    .weekly-calendar-panel,
    .calendar-panel,
    .routine-card,
    .clean-panel:has(.month-calendar-grid),
    .clean-panel:has(.weekly-calendar-grid),
    .clean-panel:has(.mini-calendar){
        overflow:hidden!important;
    }

    .weekly-calendar-grid,
    .mini-calendar,
    .month-calendar-grid{
        display:grid!important;
        grid-template-columns:1fr!important;
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow:visible!important;
        gap:12px!important;
    }

    .month-calendar-head,
    .clean-panel-head{
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        width:100%!important;
    }

    .month-calendar-head span,
    .clean-panel-head .btn,
    .clean-panel-head button,
    .clean-panel-head a{
        width:100%!important;
        min-height:42px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:normal!important;
        text-align:center!important;
    }

    .month-day-card,
    .weekly-day-card,
    .calendar-day{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        min-height:120px!important;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        overflow:hidden!important;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2,
    .topbar h1,
    h1,
    h2,
    h3,
    h4,
    strong,
    p,
    span,
    small,
    a,
    button,
    label{
        word-break:normal!important;
        overflow-wrap:break-word!important;
    }
}

@media(max-width:520px){
    .task-filter-select,
    .mobile-tab-select{
        min-height:48px!important;
        font-size:13.5px!important;
        border-radius:17px!important;
    }

    .task-control-panel form{
        grid-template-columns:1fr 1fr!important;
        gap:8px!important;
    }

    .task-control,
    .task-control-panel.compact .task-control{
        min-height:44px!important;
        font-size:12px!important;
        padding:8px!important;
    }

    .task-board-item,
    .focus-simplified-card,
    [data-task-card]{
        padding:16px!important;
    }
}

@media(max-width:860px){
    .task-filter-select-wrap,
    .mobile-tab-select-wrap,
    .mobile-task-filter-wrap{
        display:none!important;
    }

    .tab-buttons,
    .task-filter-tabs,
    .task-list-tabs,
    .task-filter-row{
        width:100%!important;
        max-width:100%!important;
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        align-items:center!important;
        gap:8px!important;
        overflow-x:auto!important;
        overflow-y:hidden!important;
        padding:8px!important;
        border-radius:22px!important;
        background:#ffffff!important;
        border:1px solid var(--line)!important;
        scrollbar-width:none!important;
        -webkit-overflow-scrolling:touch!important;
    }

    .tab-buttons::-webkit-scrollbar,
    .task-filter-tabs::-webkit-scrollbar,
    .task-list-tabs::-webkit-scrollbar,
    .task-filter-row::-webkit-scrollbar{
        display:none!important;
    }

    .tab-button,
    [data-task-filter],
    [data-record-filter],
    [data-tab-target]{
        flex:0 0 auto!important;
        width:auto!important;
        min-width:max-content!important;
        max-width:none!important;
        height:44px!important;
        min-height:44px!important;
        padding:0 18px!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        text-align:center!important;
        white-space:nowrap!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        writing-mode:horizontal-tb!important;
        text-orientation:mixed!important;
        line-height:1!important;
        border-radius:16px!important;
        font-size:12px!important;
        font-weight:900!important;
    }

    .tab-button.active,
    [data-task-filter].active,
    [data-record-filter].active,
    [data-tab-target].active{
        background:var(--primary)!important;
        color:#ffffff!important;
        border-color:var(--primary)!important;
    }

    .task-control-panel{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
        padding:12px!important;
        background:var(--surface-soft)!important;
        border:1px solid var(--line)!important;
        border-radius:20px!important;
        overflow:visible!important;
    }

    .task-control-panel form{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:10px!important;
        align-items:stretch!important;
        justify-content:stretch!important;
    }

    .task-control,
    .task-control-panel .task-control,
    .task-control-panel.compact .task-control,
    .task-control-panel .btn,
    .task-control-panel button,
    .task-control-panel a{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        height:44px!important;
        min-height:44px!important;
        padding:0 10px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        text-align:center!important;
        white-space:nowrap!important;
        word-break:normal!important;
        overflow-wrap:normal!important;
        writing-mode:horizontal-tb!important;
        text-orientation:mixed!important;
        line-height:1!important;
        border-radius:16px!important;
        font-size:12px!important;
        font-weight:900!important;
    }

    .task-board-item,
    .focus-simplified-card,
    [data-task-card]{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow:hidden!important;
        padding:18px!important;
        border-radius:24px!important;
    }

    .task-board-main{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        align-items:start!important;
    }

    .task-board-main > div,
    .task-board-main > form{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
    }

    .task-board-badges{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        display:flex!important;
        flex-wrap:wrap!important;
        justify-content:flex-start!important;
        gap:8px!important;
    }

    .task-board-badges .status,
    .task-board-badges .flag-pill,
    .status,
    .flag-pill{
        max-width:100%!important;
        white-space:normal!important;
        word-break:normal!important;
        overflow-wrap:anywhere!important;
        text-align:center!important;
        line-height:1.2!important;
    }

    .task-detail-grid{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
    }

    .task-detail-grid div,
    .task-feasibility-note,
    .focus-simplified-advice,
    .rule-details{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        overflow-wrap:anywhere!important;
        word-break:normal!important;
    }

    .clean-panel-head{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:12px!important;
        margin-bottom:16px!important;
    }

    .clean-panel-head h2,
    .card-head h2{
        min-width:0!important;
        max-width:100%!important;
        font-size:24px!important;
        line-height:1.1!important;
        word-break:normal!important;
        overflow-wrap:break-word!important;
    }

    .clean-panel-head .btn,
    .card-head .btn,
    [data-modal-open]{
        flex:0 0 auto!important;
        width:auto!important;
        max-width:52%!important;
        min-width:max-content!important;
        white-space:nowrap!important;
        text-align:center!important;
    }

    .weekly-calendar-grid,
    .mini-calendar,
    .month-calendar-grid{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:12px!important;
        overflow:visible!important;
        padding:0!important;
    }

    .weekly-day-card,
    .calendar-day,
    .month-day-card{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        min-height:120px!important;
    }

    .month-calendar-head{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        justify-content:space-between!important;
        gap:10px!important;
    }

    .month-calendar-head strong{
        min-width:0!important;
        font-size:20px!important;
        overflow-wrap:break-word!important;
    }

    .month-calendar-head span{
        flex:0 0 auto!important;
        width:auto!important;
        min-height:40px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        white-space:normal!important;
        text-align:center!important;
    }

    .student-overview-card,
    .task-command-card,
    .schedule-hero,
    .language-hero{
        overflow:hidden!important;
        padding:22px!important;
    }

    .student-overview-main h2,
    .task-command-card h2,
    .schedule-hero h2,
    .language-hero h2,
    .topbar h1,
    h1,
    h2,
    h3,
    h4,
    strong,
    p,
    span,
    small,
    a,
    button,
    label{
        word-break:normal!important;
        overflow-wrap:break-word!important;
    }
}

@media(max-width:520px){
    .task-control-panel form{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        gap:8px!important;
    }

    .task-control,
    .task-control-panel .task-control,
    .task-control-panel.compact .task-control,
    .task-control-panel .btn,
    .task-control-panel button,
    .task-control-panel a{
        height:42px!important;
        min-height:42px!important;
        font-size:11.5px!important;
        padding:0 8px!important;
        border-radius:15px!important;
    }

    .tab-button,
    [data-task-filter],
    [data-record-filter],
    [data-tab-target]{
        height:42px!important;
        min-height:42px!important;
        padding:0 15px!important;
        font-size:11.5px!important;
    }

    .clean-panel-head h2,
    .card-head h2{
        font-size:22px!important;
    }

    .clean-panel-head .btn,
    .card-head .btn,
    [data-modal-open]{
        max-width:54%!important;
        font-size:11.5px!important;
        padding:0 14px!important;
    }

    .task-board-item,
    .focus-simplified-card,
    [data-task-card]{
        padding:16px!important;
    }
}
@media(max-width:860px){
    html,
    body{
        width:100%!important;
        max-width:100%!important;
        overflow-x:hidden!important;
    }

    body:has(.minimal-login-page){
        min-height:100svh!important;
        min-height:100dvh!important;
        overflow-x:hidden!important;
        overflow-y:auto!important;
        background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%)!important;
    }

    .minimal-login-page{
        width:100%!important;
        min-height:100svh!important;
        min-height:100dvh!important;
        display:flex!important;
        align-items:center!important;
        justify-content:center!important;
        padding:18px!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        background:linear-gradient(135deg,#7c3aed 0%,#4f46e5 48%,#2563eb 100%)!important;
    }

    .minimal-login-page:before,
    .minimal-login-page:after,
    .login-blob,
    .blob-one,
    .blob-two,
    .blob-three{
        display:none!important;
        content:none!important;
        animation:none!important;
        background:none!important;
    }

    .minimal-login-card{
        width:min(100%,420px)!important;
        min-width:0!important;
        max-width:420px!important;
        min-height:auto!important;
        height:auto!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:stretch!important;
        justify-content:center!important;
        gap:14px!important;
        padding:0!important;
        margin:auto!important;
        background:transparent!important;
        box-shadow:none!important;
        overflow:visible!important;
        position:relative!important;
    }

    .minimal-login-card:before,
    .minimal-login-card:after{
        display:none!important;
        content:none!important;
    }

    .minimal-login-brand{
        width:100%!important;
        min-height:150px!important;
        height:auto!important;
        display:flex!important;
        flex-direction:column!important;
        align-items:center!important;
        justify-content:center!important;
        gap:10px!important;
        text-align:center!important;
        padding:22px 18px!important;
        margin:0!important;
        border-radius:28px!important;
        background:
            radial-gradient(circle at 82% 18%,rgba(255,255,255,.14),transparent 30%),
            linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;
        border:1px solid rgba(255,255,255,.14)!important;
        box-shadow:0 22px 52px rgba(28,39,116,.14)!important;
        backdrop-filter:blur(10px)!important;
        color:#ffffff!important;
    }

    .minimal-login-brand:before{
        content:"A WEB-BASED ACADEMIC MONITORING DECISION SUPPORT SYSTEM"!important;
        width:min(100%,360px)!important;
        display:inline-flex!important;
        align-items:center!important;
        justify-content:center!important;
        padding:9px 13px!important;
        border-radius:999px!important;
        background:rgba(255,255,255,.12)!important;
        border:1px solid rgba(255,255,255,.22)!important;
        color:rgba(255,255,255,.88)!important;
        font-size:9.5px!important;
        line-height:1.35!important;
        letter-spacing:.16em!important;
        font-weight:900!important;
        text-align:center!important;
    }

    .minimal-login-brand h1{
        color:#ffffff!important;
        font-size:clamp(40px,13vw,66px)!important;
        line-height:.95!important;
        letter-spacing:-.07em!important;
        margin:0!important;
        text-align:center!important;
    }

    .minimal-login-brand p{
        color:rgba(255,255,255,.82)!important;
        font-size:10.5px!important;
        line-height:1.4!important;
        letter-spacing:.16em!important;
        font-weight:900!important;
        margin:0!important;
        text-align:center!important;
    }

    .minimal-login-form{
        width:100%!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:13px!important;
        padding:22px!important;
        margin:0!important;
        border-radius:28px!important;
        background:rgba(255,255,255,.88)!important;
        border:1px solid rgba(255,255,255,.72)!important;
        box-shadow:0 28px 70px rgba(29,23,96,.18)!important;
        backdrop-filter:blur(16px)!important;
    }

    .minimal-login-form:before{
        content:"Hello!"!important;
        display:block!important;
        color:#202437!important;
        font-size:38px!important;
        line-height:1!important;
        letter-spacing:-.05em!important;
        font-weight:900!important;
        text-align:center!important;
        margin:0 0 2px!important;
    }

    .minimal-login-form:after{
        content:"Sign in to your account"!important;
        display:block!important;
        color:#687086!important;
        font-size:14px!important;
        line-height:1.3!important;
        font-weight:800!important;
        text-align:center!important;
        margin:-6px 0 12px!important;
    }

    .minimal-input{
        width:100%!important;
        height:54px!important;
        min-height:54px!important;
        display:grid!important;
        grid-template-columns:48px 1fr!important;
        align-items:center!important;
        border-radius:18px!important;
        border:1px solid #e8edf6!important;
        background:#f3f6fb!important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 10px 22px rgba(31,45,90,.04)!important;
        overflow:hidden!important;
    }

    .minimal-input span{
        width:38px!important;
        height:38px!important;
        margin-left:8px!important;
        display:grid!important;
        place-items:center!important;
        border-radius:14px!important;
        background:linear-gradient(135deg,#7c3aed,#2563eb)!important;
        color:#ffffff!important;
        font-size:15px!important;
        flex:0 0 auto!important;
    }

    .minimal-input input{
        width:100%!important;
        height:100%!important;
        padding:0 14px!important;
        border:0!important;
        background:transparent!important;
        color:#202437!important;
        font-size:13px!important;
        font-weight:800!important;
        letter-spacing:.04em!important;
        outline:0!important;
    }

    .minimal-input input::placeholder{
        color:#7b8398!important;
    }

    .minimal-login-btn{
        width:100%!important;
        height:54px!important;
        min-height:54px!important;
        border-radius:18px!important;
        background:linear-gradient(135deg,#7c3aed,#2563eb)!important;
        color:#ffffff!important;
        border:0!important;
        box-shadow:0 16px 34px rgba(50,70,190,.26)!important;
        font-size:13px!important;
        font-weight:900!important;
        letter-spacing:.08em!important;
    }

    .forgot-link{
        color:rgba(255,255,255,.82)!important;
        text-align:center!important;
        font-size:12px!important;
        font-weight:800!important;
        text-decoration:none!important;
        margin:0!important;
    }

    body.nav-open{
        overflow:hidden!important;
    }

    .mobile-nav-backdrop{
        display:block!important;
        position:fixed!important;
        inset:0!important;
        background:rgba(15,23,42,.46)!important;
        backdrop-filter:blur(8px)!important;
        opacity:0!important;
        pointer-events:none!important;
        z-index:8990!important;
        transition:opacity .22s var(--ease)!important;
    }

    body.nav-open .mobile-nav-backdrop{
        opacity:1!important;
        pointer-events:auto!important;
    }

    .mobile-menu-toggle{
        display:grid!important;
        place-items:center!important;
        position:fixed!important;
        top:calc(env(safe-area-inset-top,0px) + 18px)!important;
        right:18px!important;
        width:58px!important;
        height:58px!important;
        border-radius:22px!important;
        background:#111827!important;
        border:1px solid rgba(255,255,255,.08)!important;
        box-shadow:0 18px 36px rgba(15,23,42,.22)!important;
        z-index:9020!important;
    }

    .mobile-menu-toggle span,
    .mobile-menu-toggle span:before,
    .mobile-menu-toggle span:after{
        content:""!important;
        display:block!important;
        width:28px!important;
        height:3px!important;
        border-radius:999px!important;
        background:#ffffff!important;
        position:relative!important;
        transition:transform .22s var(--ease), opacity .22s var(--ease)!important;
    }

    .mobile-menu-toggle span:before{
        position:absolute!important;
        top:-9px!important;
        left:0!important;
    }

    .mobile-menu-toggle span:after{
        position:absolute!important;
        top:9px!important;
        left:0!important;
    }

    body.nav-open .mobile-menu-toggle span{
        background:transparent!important;
    }

    body.nav-open .mobile-menu-toggle span:before{
        top:0!important;
        transform:rotate(45deg)!important;
    }

    body.nav-open .mobile-menu-toggle span:after{
        top:0!important;
        transform:rotate(-45deg)!important;
    }

    .sidebar{
        display:flex!important;
        flex-direction:column!important;
        justify-content:flex-start!important;
        align-items:stretch!important;
        position:fixed!important;
        top:calc(env(safe-area-inset-top,0px) + 12px)!important;
        left:12px!important;
        right:12px!important;
        bottom:12px!important;
        width:auto!important;
        height:auto!important;
        max-height:calc(100dvh - env(safe-area-inset-top,0px) - 24px)!important;
        padding:26px 22px 22px!important;
        border-radius:28px!important;
        background:rgba(255,255,255,.97)!important;
        border:1px solid rgba(226,232,241,.92)!important;
        box-shadow:0 28px 80px rgba(15,23,42,.22)!important;
        backdrop-filter:blur(18px)!important;
        overflow-y:auto!important;
        overflow-x:hidden!important;
        z-index:9000!important;
        transform:translateX(112%)!important;
        opacity:0!important;
        pointer-events:none!important;
        transition:transform .28s var(--ease), opacity .22s var(--ease)!important;
    }

    body.nav-open .sidebar{
        transform:translateX(0)!important;
        opacity:1!important;
        pointer-events:auto!important;
    }

    .sidebar > div{
        display:block!important;
        width:100%!important;
    }

    .sidebar .logo{
        display:flex!important;
        justify-content:center!important;
        align-items:center!important;
        margin:0 0 28px!important;
        min-height:auto!important;
        color:var(--primary)!important;
        font-size:28px!important;
        line-height:1!important;
        letter-spacing:-.055em!important;
    }

    .sidebar .logo span{
        display:inline!important;
    }

    .sidebar .menu-title{
        display:block!important;
        margin:24px 0 12px!important;
        color:var(--muted-light)!important;
        font-size:11px!important;
        letter-spacing:.18em!important;
        font-weight:900!important;
    }

    .sidebar .nav-list{
        width:100%!important;
        display:grid!important;
        grid-template-columns:1fr!important;
        gap:10px!important;
        overflow:visible!important;
        padding:0!important;
    }

    .sidebar .nav-item{
        width:100%!important;
        min-width:0!important;
        height:auto!important;
        min-height:60px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:14px!important;
        padding:10px 14px!important;
        border-radius:20px!important;
        background:rgba(248,250,253,.88)!important;
        border:1px solid var(--line)!important;
        color:#3d4456!important;
        box-shadow:none!important;
        transform:none!important;
        text-align:left!important;
        white-space:normal!important;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle [data-theme-label]{
        display:inline!important;
        min-width:0!important;
        color:inherit!important;
        font-size:14px!important;
        line-height:1.25!important;
        font-weight:900!important;
        letter-spacing:0!important;
        overflow-wrap:anywhere!important;
        word-break:normal!important;
        white-space:normal!important;
    }

    .sidebar .nav-item.active{
        background:var(--primary-soft)!important;
        border-color:var(--primary-line)!important;
        color:var(--primary)!important;
    }

    .sidebar .nav-symbol{
        width:46px!important;
        height:46px!important;
        min-width:46px!important;
        display:grid!important;
        place-items:center!important;
        border-radius:16px!important;
        background:#ffffff!important;
        border:1px solid var(--line)!important;
        color:var(--primary)!important;
        font-size:12px!important;
        font-weight:900!important;
        flex:0 0 46px!important;
    }

    .sidebar-bottom{
        display:block!important;
        width:100%!important;
        margin-top:24px!important;
        padding-top:18px!important;
        border-top:1px solid var(--line)!important;
    }

    .theme-toggle{
        width:100%!important;
        min-height:60px!important;
        display:flex!important;
        align-items:center!important;
        justify-content:flex-start!important;
        gap:14px!important;
        padding:10px 14px!important;
        border-radius:20px!important;
        background:rgba(248,250,253,.88)!important;
        border:1px solid var(--line)!important;
        color:#3d4456!important;
        cursor:pointer!important;
        text-align:left!important;
        overflow:hidden!important;
    }

    .theme-switch{
        width:48px!important;
        height:28px!important;
        min-width:48px!important;
        flex:0 0 48px!important;
        display:block!important;
        position:relative!important;
        border-radius:999px!important;
        background:#dfe7f5!important;
        border:1px solid #cfd8e8!important;
        box-shadow:inset 0 1px 2px rgba(15,23,42,.08)!important;
        overflow:hidden!important;
    }

    .theme-switch-knob{
        width:22px!important;
        height:22px!important;
        position:absolute!important;
        top:2px!important;
        left:2px!important;
        right:auto!important;
        bottom:auto!important;
        border-radius:999px!important;
        background:#ffffff!important;
        box-shadow:0 4px 10px rgba(15,23,42,.18)!important;
        transform:translateX(0)!important;
        transition:transform .22s var(--ease)!important;
    }

    .theme-switch.active{
        background:linear-gradient(135deg,#7c3aed,#2563eb)!important;
        border-color:transparent!important;
    }

    .theme-switch.active .theme-switch-knob{
        transform:translateX(20px)!important;
    }

    .logout{
        color:var(--danger)!important;
        background:var(--danger-bg)!important;
        border-color:var(--danger-line)!important;
    }
}

@media(max-width:520px){
    .minimal-login-page{
        align-items:center!important;
        padding:14px!important;
    }

    .minimal-login-card{
        width:100%!important;
        max-width:390px!important;
        gap:12px!important;
    }

    .minimal-login-brand{
        min-height:132px!important;
        padding:18px 14px!important;
        border-radius:24px!important;
    }

    .minimal-login-brand:before{
        width:100%!important;
        font-size:8.5px!important;
        letter-spacing:.12em!important;
        padding:8px 10px!important;
    }

    .minimal-login-brand h1{
        font-size:clamp(36px,13vw,58px)!important;
    }

    .minimal-login-brand p{
        font-size:9.5px!important;
        letter-spacing:.12em!important;
    }

    .minimal-login-form{
        padding:18px!important;
        border-radius:24px!important;
        gap:11px!important;
    }

    .minimal-login-form:before{
        font-size:34px!important;
    }

    .minimal-login-form:after{
        font-size:13px!important;
        margin:-5px 0 9px!important;
    }

    .minimal-input,
    .minimal-login-btn{
        height:50px!important;
        min-height:50px!important;
        border-radius:17px!important;
    }

    .minimal-input{
        grid-template-columns:46px 1fr!important;
    }

    .minimal-input span{
        width:36px!important;
        height:36px!important;
        margin-left:7px!important;
    }

    .minimal-input input{
        font-size:12.5px!important;
        padding:0 12px!important;
    }

    .sidebar{
        top:calc(env(safe-area-inset-top,0px) + 10px)!important;
        left:10px!important;
        right:10px!important;
        bottom:10px!important;
        max-height:calc(100dvh - env(safe-area-inset-top,0px) - 20px)!important;
        padding:24px 18px 18px!important;
        border-radius:26px!important;
    }

    .mobile-menu-toggle{
        width:54px!important;
        height:54px!important;
        border-radius:20px!important;
        top:calc(env(safe-area-inset-top,0px) + 14px)!important;
        right:14px!important;
    }

    .sidebar .nav-item,
    .theme-toggle{
        min-height:56px!important;
        border-radius:18px!important;
        padding:9px 12px!important;
        gap:12px!important;
    }

    .sidebar .nav-symbol{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        flex-basis:42px!important;
        border-radius:15px!important;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle [data-theme-label]{
        font-size:13.5px!important;
    }

    .theme-switch{
        width:46px!important;
        height:27px!important;
        min-width:46px!important;
        flex-basis:46px!important;
    }

    .theme-switch-knob{
        width:21px!important;
        height:21px!important;
    }

    .theme-switch.active .theme-switch-knob{
        transform:translateX(19px)!important;
    }
}

@media(max-width:380px){
    .minimal-login-page{
        align-items:flex-start!important;
        padding:12px!important;
    }

    .minimal-login-card{
        margin:0 auto!important;
    }

    .minimal-login-brand{
        min-height:118px!important;
    }

    .minimal-login-form{
        padding:16px!important;
    }

    .sidebar .nav-item span:last-child,
    .sidebar .theme-toggle [data-theme-label]{
        font-size:13px!important;
    }
}

html[data-theme="dark"] body:has(.minimal-login-page){
    background:linear-gradient(135deg,#0f172a 0%,#111827 45%,#172554 100%)!important;
}

html[data-theme="dark"] .minimal-login-page{
    background:linear-gradient(135deg,#0f172a 0%,#111827 45%,#172554 100%)!important;
}

html[data-theme="dark"] .minimal-login-brand{
    background:
        radial-gradient(circle at 82% 18%,rgba(96,165,250,.12),transparent 30%),
        linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02))!important;
    border-color:rgba(148,163,184,.18)!important;
}

html[data-theme="dark"] .minimal-login-form{
    background:rgba(17,24,39,.9)!important;
    border-color:rgba(51,65,85,.9)!important;
    box-shadow:0 28px 70px rgba(0,0,0,.28)!important;
}

html[data-theme="dark"] .minimal-login-form:before{
    color:#f8fafc!important;
}

html[data-theme="dark"] .minimal-login-form:after{
    color:#cbd5e1!important;
}

html[data-theme="dark"] .minimal-input{
    background:#182235!important;
    border-color:#334155!important;
}

html[data-theme="dark"] .minimal-input input{
    color:#f8fafc!important;
}

html[data-theme="dark"] .minimal-input input::placeholder{
    color:#94a3b8!important;
}

html[data-theme="dark"] .sidebar{
    background:rgba(15,23,42,.97)!important;
    border-color:rgba(51,65,85,.9)!important;
}

html[data-theme="dark"] .sidebar .nav-item,
html[data-theme="dark"] .theme-toggle{
    background:rgba(17,24,39,.92)!important;
    border-color:#334155!important;
    color:#e5e7eb!important;
}

html[data-theme="dark"] .sidebar .nav-item.active{
    background:#1e293b!important;
    border-color:#3b82f6!important;
    color:#93c5fd!important;
}

html[data-theme="dark"] .sidebar .nav-symbol{
    background:#111827!important;
    border-color:#334155!important;
    color:#93c5fd!important;
}

html[data-theme="dark"] .theme-switch{
    background:#263247!important;
    border-color:#334155!important;
}

html[data-theme="dark"] .logout{
    background:#2a1418!important;
    border-color:#7f1d1d!important;
    color:#fecaca!important;
}