:root {
    --navy: #15324b;
    --navy-2: #0d263b;
    --ink: #1a2b3b;
    --muted: #708091;
    --cream: #f6f4ef;
    --paper: #ffffff;
    --line: #e3e8eb;
    --coral: #e76f51;
    --coral-dark: #d75b3d;
    --blue-soft: #e6f0f5;
    --green: #3f8f75;
    --shadow: 0 12px 35px rgba(20, 45, 65, .08);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    color: var(--ink);
    background: var(--cream);
    font-family: "DM Sans", Arial, sans-serif;
}
.app-loading { visibility: hidden; }
button, input, select, textarea { font-family: inherit; }
button { transition: transform .18s ease, opacity .18s ease, background .18s ease; }
.mobile-copyright { display: none; }
button:active { transform: scale(.98); }
.app-shell { min-height: 100vh; display: flex; }
.sidebar {
    width: 264px;
    min-height: 100vh;
    position: fixed;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    padding: 28px 20px 20px;
    color: #fff;
    background: var(--navy-2);
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; padding: 0 8px 30px; }
.brand-mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 50%;
    background: transparent;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand strong { display: block; font-family: "Playfair Display", Georgia, serif; font-size: 18px; line-height: 1.05; white-space: nowrap; }
.brand small { color: #aebcca; font-size: 11px; letter-spacing: .05em; }
.nav-caption { margin: 0 12px 10px; color: #71879a; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.side-nav { display: grid; gap: 5px; }
.side-nav .nav-link {
    border: 0;
    border-radius: 10px;
    padding: 11px 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #aebcca;
    background: transparent;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
}
.side-nav .nav-link:hover, .side-nav .nav-link.active { color: #fff; background: rgba(255,255,255,.09); }
.side-nav .nav-link.active::before {
    content: "";
    width: 3px;
    height: 22px;
    position: absolute;
    left: 0;
    border-radius: 0 4px 4px 0;
    background: var(--coral);
}
.nav-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    color: #fff;
    background: #697386;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .02em;
    text-align: center;
}
.side-nav .nav-link:hover .nav-icon, .side-nav .nav-link.active .nav-icon {
    color: #fff;
    filter: brightness(1.08);
}
.nav-dashboard { background: #b28a4b; }
.nav-contents { background: #5d9274; }
.nav-subjects { background: #6a5391; }
.nav-people { background: #5f6878; }
.nav-assignments { background: #c97357; }
.nav-settings { background: #3f8f75; }
.nav-count { margin-left: auto; padding: 1px 7px; border-radius: 10px; color: #fff; background: var(--coral); font-size: 10px; }
.sidebar-help {
    margin-top: auto;
    padding: 17px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    color: #c5d0d9;
    background: rgba(255,255,255,.05);
}
.help-icon { display: grid; place-items: center; width: 28px; height: 28px; margin-bottom: 10px; border-radius: 50%; color: var(--navy); background: #fff; font-weight: 700; }
.sidebar-help strong { color: #fff; font-size: 13px; }
.sidebar-help p { margin: 5px 0 13px; font-size: 11px; line-height: 1.5; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 16px 5px 0; border-top: 1px solid rgba(255,255,255,.08); }
.sidebar-help.d-none + .sidebar-user { margin-top: auto; }
.avatar { display: grid; place-items: center; width: 35px; height: 35px; flex: 0 0 auto; border-radius: 50%; color: var(--navy); background: #dce9ec; font-size: 11px; font-weight: 700; }
.user-copy { min-width: 0; flex: 1; }
.user-copy strong, .user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { color: #fff; font-size: 12px; }.user-copy small { color: #8094a5; font-size: 10px; }
.icon-button { width: 36px; height: 36px; border: 0; border-radius: 9px; display: grid; place-items: center; color: inherit; background: transparent; }
.icon-button:hover { background: rgba(128,145,158,.12); }
.main-content { min-width: 0; width: calc(100% - 264px); margin-left: 264px; }
.topbar {
    min-height: 88px;
    position: sticky;
    top: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 15px 36px;
    border-bottom: 1px solid var(--line);
    background: rgba(255,255,255,.94);
    backdrop-filter: blur(12px);
}
.topbar-title { min-width: 260px; }
.eyebrow { display: block; color: var(--muted); font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.topbar h1 { margin: 3px 0 0; font-family: "Playfair Display", Georgia, serif; font-size: 22px; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 11px; }
.search-box { width: min(300px, 25vw); display: flex; align-items: center; gap: 9px; padding: 8px 13px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafb; }
.search-box input { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; }
.search-box input[type="search"]::-webkit-search-decoration,
.search-box input[type="search"]::-webkit-search-cancel-button,
.search-box input[type="search"]::-webkit-search-results-button,
.search-box input[type="search"]::-webkit-search-results-decoration { display: none; }
.search-box input[type="search"] { appearance: textfield; -webkit-appearance: textfield; }
.search-clear { width: 22px; height: 22px; border: 0; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; color: var(--muted); background: #e8edf0; font-size: 16px; line-height: 1; }
.search-clear:hover { color: var(--ink); background: #dce5e9; }
.btn-primary { --bs-btn-bg: var(--coral); --bs-btn-border-color: var(--coral); --bs-btn-hover-bg: var(--coral-dark); --bs-btn-hover-border-color: var(--coral-dark); border-radius: 9px; font-size: 13px; font-weight: 600; }
.btn-light { --bs-btn-bg: #eff2f3; --bs-btn-border-color: #eff2f3; color: var(--ink); border-radius: 9px; font-size: 13px; }
.action-upload { padding: 9px 15px; }
.menu-button { display: none; border: 0; background: transparent; font-size: 22px; }
.content-area { padding: 32px 36px 50px; }
.app-view { display: none; animation: fadeIn .25s ease; }
.app-view.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } }
.welcome-panel {
    min-height: 190px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 36px 40px;
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(120deg, #183c58, #1d4d66);
    box-shadow: var(--shadow);
}
.welcome-panel::before { content: ""; width: 240px; height: 240px; position: absolute; right: 80px; top: -115px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.welcome-panel .section-kicker { color: #9db8c6; }
.section-kicker { display: block; margin-bottom: 5px; color: var(--coral); font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.welcome-panel h2, .view-heading h2 { margin: 5px 0 8px; font: 700 31px/1.2 "Playfair Display", Georgia, serif; }
.welcome-panel p { max-width: 600px; margin: 0; color: #c3d1da; font-size: 13px; }
.welcome-visual { width: 250px; height: 100%; margin-left: auto; position: absolute; right: 40px; top: 0; }
.globe { position: absolute; right: 22px; bottom: -52px; color: rgba(255,255,255,.13); font-size: 160px; line-height: 1; }
.speech-bubble { position: absolute; z-index: 2; padding: 8px 13px; border-radius: 12px 12px 12px 3px; color: var(--navy); background: #fff; font: 600 13px "Playfair Display", serif; box-shadow: 0 8px 20px rgba(0,0,0,.13); }
.bubble-one { right: 88px; top: 35px; }.bubble-two { right: 5px; top: 73px; background: #f6d9d0; }.bubble-three { right: 105px; top: 105px; background: #d9eaec; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0; }
.stat-card { position: relative; overflow: hidden; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 5px 15px rgba(20,45,65,.035); }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--blue-soft); font-size: 18px; }
.stat-change { color: var(--green); font-size: 10px; font-weight: 700; }
.stat-value { margin: 16px 0 1px; font: 700 27px "Playfair Display", Georgia, serif; }
.stat-label { color: var(--muted); font-size: 11px; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 20px; }
.panel { border: 1px solid var(--line); border-radius: 15px; background: var(--paper); box-shadow: 0 5px 18px rgba(20,45,65,.035); }
.panel-heading { min-height: 68px; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.panel-heading h3 { margin: 0; font: 700 17px "Playfair Display", Georgia, serif; }
.link-button { border: 0; color: var(--coral); background: none; font-size: 11px; font-weight: 700; }
.panel-footer-button { width: 100%; border: 0; border-top: 1px solid var(--line); padding: 13px 20px; color: var(--coral); background: #fff; text-align: left; font-size: 12px; font-weight: 700; }
.panel-footer-button:hover { background: #fafbfb; }
.activity-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 20px; border-bottom: 1px solid #eef1f2; }
.activity-item:last-child { border-bottom: 0; }
.file-icon { width: 38px; height: 42px; display: grid; place-items: center; border-radius: 8px 8px 8px 2px; color: #fff; background: var(--coral); font-size: 9px; font-weight: 700; }
.file-icon.audio { background: #527f9c; }.file-icon.video { background: #725b91; }.file-icon.link { background: #3e8e76; }.file-icon.image { background: #b57b3e; }.file-icon.generic { background: #596675; }
.activity-copy { min-width: 0; }
.activity-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.activity-copy small, .activity-meta { color: var(--muted); font-size: 10px; }
.activity-meta { text-align: right; }
.subject-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid #eef1f2; }
.subject-row:last-child { border-bottom: 0; }
.subject-code { min-width: 38px; height: 34px; padding: 0 8px; display: grid; place-items: center; border-radius: 10px; color: #315b72; background: #e8f1f5; font-size: 10px; font-weight: 700; }
.subject-row strong, .subject-row small { display: block; }.subject-row strong { font-size: 12px; }.subject-row small { color: var(--muted); font-size: 9px; }
.subject-row > small { padding: 4px 8px; border-radius: 10px; color: var(--green); background: #e8f3ef; font-weight: 700; }
.quick-panel { margin-top: 20px; }
.quick-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
.quick-actions button { display: flex; align-items: center; gap: 13px; padding: 18px 20px; border: 0; border-right: 1px solid var(--line); background: transparent; text-align: left; }
.quick-actions button:last-child { border: 0; }.quick-actions button:hover { background: #fafbfb; }
.quick-actions strong, .quick-actions small { display: block; }.quick-actions strong { font-size: 12px; }.quick-actions small { color: var(--muted); font-size: 9px; }
.quick-icon { width: 37px; height: 37px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; }
.quick-icon.coral { color: #b44f37; background: #f9e8e2; }.quick-icon.blue { color: #3c6e8e; background: #e4eff5; }.quick-icon.green { color: #377961; background: #e2f0eb; }
.view-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.view-heading p { margin: 0; color: var(--muted); font-size: 12px; }
.filter-bar { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 15px; margin-bottom: 20px; padding: 17px; }
.filter-bar label span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.form-control, .form-select { border-color: #dce2e5; border-radius: 9px; color: var(--ink); font-size: 13px; }
.form-control:focus, .form-select:focus { border-color: #eaa18f; box-shadow: 0 0 0 .2rem rgba(231,111,81,.12); }
.settings-panel { max-width: 720px; }
.settings-form { padding: 20px; }
.settings-form .form-control { max-width: 260px; }
.settings-actions { margin-top: 18px; }
.content-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 17px; }
.content-card { overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); box-shadow: 0 5px 15px rgba(20,45,65,.035); }
.content-preview { height: 128px; position: relative; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #26516d, #15324b); }
.content-preview.audio { background: linear-gradient(135deg, #4b86a2, #28526e); }.content-preview.video { background: linear-gradient(135deg, #7d6699, #433c6b); }.content-preview.link { background: linear-gradient(135deg, #4d9c82, #275d4b); }.content-preview.image { background: linear-gradient(135deg, #c89557, #8e5f34); }.content-preview.generic { background: linear-gradient(135deg, #687887, #394956); }
.content-preview-icon { font: 700 23px "Playfair Display", serif; opacity: .95; }
.content-type { position: absolute; top: 12px; left: 12px; padding: 4px 8px; border-radius: 9px; color: var(--ink); background: rgba(255,255,255,.88); font-size: 8px; font-weight: 700; text-transform: uppercase; }
.content-card-body { padding: 17px; }
.content-card h3 { min-height: 37px; margin: 0 0 7px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font: 700 15px/1.25 "Playfair Display", serif; }
.content-card p { height: 32px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin: 0 0 13px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.content-file-name { display: flex; align-items: center; gap: 6px; min-width: 0; margin: -3px 0 12px; padding: 7px 9px; border-radius: 8px; color: #405968; background: #f0f3f4; font-size: 10px; }
.content-file-name strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content-tags { display: flex; gap: 5px; margin-bottom: 14px; }
.content-course-name { margin: -6px 0 13px; color: var(--muted); font-size: 11px; }
.content-tags span, .status-pill { padding: 4px 8px; border-radius: 10px; color: #315b72; background: #e8f1f5; font-size: 9px; font-weight: 700; }
.content-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #eef1f2; }
.author-mini { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 9px; }
.author-mini .avatar { width: 25px; height: 25px; font-size: 8px; }
.content-actions { display: flex; gap: 4px; }.content-actions button, .content-actions a { width: 29px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 7px; color: var(--navy); background: #f0f3f4; text-decoration: none; font-size: 12px; }
.content-actions .danger-action { color: #a63c2d; background: #fae9e5; }
.content-actions .preview-content { color: #286b57; background: #e2f1eb; }
.preview-modal-content { min-height: min(760px, 90vh); }
.preview-modal-body { min-height: 60vh; padding: 0; overflow: hidden; background: #edf1f3; }
.preview-frame { display: block; width: 100%; height: 68vh; border: 0; background: #fff; }
.preview-image-wrap, .preview-media-wrap { min-height: 60vh; display: grid; place-items: center; padding: 24px; }
.preview-image { display: block; max-width: 100%; max-height: 66vh; object-fit: contain; border-radius: 8px; box-shadow: 0 10px 30px rgba(20,45,65,.15); }
.preview-video { display: block; width: min(100%, 1000px); max-height: 66vh; background: #111; }
.preview-audio { width: min(100%, 720px); }
.preview-status { min-height: 60vh; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 30px; color: var(--muted); text-align: center; }
.preview-status strong, .preview-status span { display: block; }
.preview-status.preview-unavailable, .preview-status.preview-error { flex-direction: column; }
.preview-status.preview-unavailable strong, .preview-status.preview-error strong { color: var(--ink); font-size: 18px; }
.preview-file-icon { color: var(--navy); font-size: 42px; line-height: 1; }
.preview-file-name { max-width: min(100%, 720px); overflow-wrap: anywhere; padding: 12px 18px; border: 1px solid #d9e0e3; border-radius: 10px; background: #fff; }
.record-actions { display: flex; align-items: center; gap: 5px; margin-left: auto; }
.record-actions button { min-width: 31px; height: 31px; display: grid; place-items: center; border: 0; border-radius: 8px; color: var(--navy); background: #eef2f4; font-size: 13px; }
.record-actions .student-assignments-button { color: #2d745d; background: #e2f1eb; }
.record-actions .danger-action { color: #a63c2d; background: #fae9e5; }
.empty-state { padding: 70px 20px; text-align: center; color: var(--muted); }.empty-state > span { font-size: 40px; }.empty-state h3 { color: var(--ink); font: 700 20px "Playfair Display", serif; }
.subject-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.subject-card { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.subject-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }.subject-card-head .subject-code { min-width: 48px; height: 45px; }.subject-card h3 { margin: 0; font: 700 18px "Playfair Display", serif; }.subject-card-head small { color: var(--muted); font-size: 10px; }
.course-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px 76px auto;
    align-items: center;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid #edf0f1;
    font-size: 11px;
}
.course-row > span:first-child {
    min-width: 0;
}
.course-row .year-badge {
    justify-self: center;
}
.course-row > span:last-child {
    justify-self: end;
    color: var(--muted);
    text-align: right;
    white-space: nowrap;
}
.course-actions { display: flex; justify-content: flex-end; gap: 6px; }
.course-actions button { border: 0; border-radius: 8px; padding: 7px 9px; color: var(--navy); background: #eef2f4; font-size: 10px; font-weight: 700; }
.course-actions .subject-content-button { color: #9f4f38; background: #fae9e5; }
.segmented-control { width: max-content; display: flex; gap: 3px; margin-bottom: 17px; padding: 4px; border-radius: 10px; background: #e8ebec; }.segmented-control button { border: 0; border-radius: 7px; padding: 7px 18px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }.segmented-control button.active { color: var(--ink); background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.06); }
.table-panel { overflow: hidden; }.table-panel .table { margin: 0; }.table-panel th { padding: 13px 20px; color: var(--muted); background: #f7f8f8; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; }.table-panel td { padding: 15px 20px; font-size: 11px; }.person-cell { display: flex; align-items: center; gap: 10px; }.person-cell strong, .person-cell small { display: block; }.person-cell small { color: var(--muted); font-size: 9px; }
.person-identifier-column { min-width: 150px; width: 150px; white-space: nowrap; }
.person-cell .person-email { font-size: 12px; line-height: 1.45; }
.status-pill.active { color: #2d745d; background: #e2f1eb; }.status-pill.neutral { color: #526675; background: #edf1f3; }
.assignment-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .7fr); gap: 20px; }.assignment-item { display: grid; grid-template-columns: minmax(190px, .55fr) minmax(0, 1.45fr); align-items: start; gap: 15px; padding: 16px 20px; border-bottom: 1px solid #edf0f1; }.assignment-item:last-child { border-bottom: 0; }.assignment-person { display: flex; align-items: center; gap: 10px; }.assignment-person strong, .assignment-person small { display: block; }.assignment-person small, .assignment-course small, .assignment-course-card small { color: var(--muted); font-size: 9px; }.assignment-course strong, .assignment-course-card strong { display: block; font-size: 11px; }
.assignment-course-list { display: grid; gap: 8px; }
.assignment-course-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f8fafb; }
.assignment-course-copy { min-width: 0; }
.assignment-person strong { font-size: 13px; }
.assignment-person small { font-size: 11px; }
.assignment-course-card strong { font-size: 13px; }
.assignment-course-card small { font-size: 11px; line-height: 1.45; }
.security-note { padding: 25px; }.security-icon { width: 45px; height: 45px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 25px; }.security-note h3 { margin: 18px 0 7px; font: 700 18px "Playfair Display", serif; }.security-note > p { color: var(--muted); font-size: 10px; line-height: 1.6; }.security-rule { display: flex; align-items: center; gap: 9px; margin-top: 13px; font-size: 10px; font-weight: 600; }.security-rule span { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--green); background: #e2f1eb; }
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 25px 70px rgba(12,35,51,.22); }.modal-header { padding: 22px 24px; border-color: var(--line); }.modal-title { font: 700 22px "Playfair Display", serif; }.modal-body { padding: 24px; }.modal-footer { padding: 15px 24px; border-color: var(--line); }.form-label { color: #506273; font-size: 10px; font-weight: 700; }.drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; padding: 28px; border: 1.5px dashed #bdc9cf; border-radius: 11px; color: var(--muted); background: #f8fafb; transition: border-color .2s ease, background .2s ease; }.drop-zone.drag-over, .drop-zone.has-file { border-color: var(--green); background: #f3faf7; }.drop-zone > span { color: var(--coral); font-size: 26px; }.drop-zone.has-file > span { color: var(--green); }.drop-zone strong { color: var(--ink); font-size: 11px; }.drop-zone small { font-size: 9px; }.drop-zone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }.external-link-box { display: flex; gap: 12px; align-items: flex-start; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }.external-link-box > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 10px; color: #fff; background: var(--green); font-weight: 800; }.external-link-box > div { flex: 1; }.external-link-box small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.modal-form-error { width: 100%; margin-right: auto; padding: 10px 12px; border-radius: 10px; color: #9f3328; background: #fce8e5; font-size: 12px; font-weight: 700; }
.file-feedback { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; color: #2d745d; background: #e2f1eb; }
.file-feedback-icon { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 12px; }
.file-feedback strong, .file-feedback small { display: block; }
.file-feedback strong { color: var(--ink); font-size: 12px; }
.file-feedback small { color: #526675; font-size: 10px; }
.file-feedback button { margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 8px; color: #a63c2d; background: #f8dcd5; font-size: 17px; line-height: 1; }
.form-help { display: block; margin-top: 6px; color: var(--muted); font-size: 10px; }
.selected-years-feedback { min-height: 34px; display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; padding: 10px; border: 1px dashed #c9d8df; border-radius: 12px; background: #f8fafb; }
.general-years-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #f8fafb; }
.general-years-grid .form-check { margin: 0; padding-left: 1.7rem; font-size: 12px; }
.selected-year-pill { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; color: #2d745d; background: #e2f1eb; font-size: 11px; font-weight: 700; }
.selected-course-pill { border-radius: 10px; color: #315b72; background: #e8f1f5; }
.selected-year-pill::before { content: "\2713"; width: 15px; height: 15px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--green); font-size: 10px; }
.selected-years-empty { align-self: center; color: var(--muted); font-size: 11px; }
.teacher-reference-feedback { align-items: stretch; }
.teacher-reference-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 12px; color: var(--ink); background: #e8f1f5; font-size: 11px; }
.teacher-reference-pill strong, .teacher-reference-pill small { display: block; line-height: 1.25; }
.teacher-reference-pill small { color: var(--muted); font-size: 10px; }
.teacher-reference-pill .avatar { width: 28px; height: 28px; font-size: 10px; }
.optional-label { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; }
.form-note { margin-top: 16px; padding: 11px 13px; border-radius: 9px; color: #526675; background: #edf2f4; font-size: 11px; }
.login-card { padding: 35px; }.login-card .login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }.login-brand strong, .login-brand small { display: block; }.login-brand strong { font: 700 19px "Playfair Display", serif; }.login-brand small { color: var(--muted); font-size: 9px; }.login-card h2 { margin: 0 0 6px; font: 700 27px "Playfair Display", serif; }.login-card > p { margin-bottom: 25px; color: var(--muted); font-size: 12px; }.demo-access { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; padding-top: 17px; border-top: 1px solid var(--line); }.demo-access span { width: 100%; color: var(--muted); font-size: 9px; text-transform: uppercase; }.demo-access button { border: 1px solid var(--line); border-radius: 7px; padding: 5px 8px; color: var(--navy); background: #fff; font-size: 9px; }.login-error { margin-top: 13px; padding: 9px; border-radius: 7px; color: #a6372c; background: #fce8e5; font-size: 10px; }
.login-help-note { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; text-align: center; }
.toast { border: 0; color: #fff; background: var(--navy); }.toast-check { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--green); }

.login-page { min-height: 100vh; background: #fff; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(420px, 1.05fr) minmax(420px, .95fr); }
.login-intro { min-height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 42px 56px; color: #fff; background: linear-gradient(145deg, var(--navy-2), #1d526d); }
.login-intro::before, .login-intro::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.login-intro::before { width: 480px; height: 480px; right: -180px; top: -150px; }
.login-intro::after { width: 300px; height: 300px; left: -120px; bottom: -100px; }
.login-intro .brand { position: relative; z-index: 1; padding: 0; }
.login-intro-copy { position: relative; z-index: 1; margin: auto 0; }
.login-intro-copy .section-kicker { color: #9fc3d2; }
.login-intro-copy h1 { max-width: 650px; margin: 12px 0 18px; font: 700 clamp(38px, 4vw, 62px)/1.08 "Playfair Display", Georgia, serif; }
.login-intro-copy p { max-width: 500px; color: #c2d4dc; font-size: 16px; }
.login-subject-strip { position: relative; z-index: 1; display: flex; gap: 10px; }
.login-subject-strip span { min-width: 43px; height: 43px; padding: 0 8px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #d9e5ea; font-size: 11px; font-weight: 700; }
.login-form-side { display: grid; place-items: center; padding: 45px; background: var(--cream); }
.login-page-card { width: min(440px, 100%); padding: 42px; border: 1px solid var(--line); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.login-page-card h2 { margin: 4px 0 8px; font: 700 31px "Playfair Display", Georgia, serif; }
.login-page-card > p { margin-bottom: 28px; color: var(--muted); font-size: 14px; }
.login-mobile-brand { display: none; align-items: center; gap: 10px; margin-bottom: 28px; font: 700 20px "Playfair Display", Georgia, serif; }

.student-page { background: var(--cream); }
.student-header { min-height: 82px; display: flex; align-items: center; justify-content: space-between; padding: 14px max(28px, calc((100vw - 1180px) / 2)); color: #fff; background: var(--navy-2); }
.student-header .brand { padding: 0; }
.student-user { display: flex; align-items: center; gap: 11px; }
.student-user > span:nth-child(2) strong, .student-user > span:nth-child(2) small { display: block; }
.student-user > span:nth-child(2) strong { font-size: 13px; }
.student-user > span:nth-child(2) small { color: #9eb0bd; font-size: 10px; }
.student-main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 36px 0 60px; }
.student-hero { margin-bottom: 36px; padding: 38px 42px; border-radius: 18px; color: #fff; background: linear-gradient(120deg, #183c58, #27627b); box-shadow: var(--shadow); }
.student-hero .section-kicker { color: #aad0dc; }
.student-hero h1 { margin: 5px 0 10px; font: 700 34px "Playfair Display", Georgia, serif; }
.student-hero p { max-width: 700px; margin: 0; color: #c8d8df; }
.student-assignments { margin-bottom: 38px; }
.student-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.student-course-card { display: flex; align-items: center; gap: 13px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.student-course-code { width: 42px; height: 42px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 11px; color: #fff; background: var(--navy); font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.student-course-copy { min-width: 0; flex: 1; }
.student-course-card strong, .student-course-card small { display: block; }
.student-course-card strong { font-size: 14px; }
.student-course-card small { color: var(--muted); font-size: 11px; }
.student-course-copy { cursor: pointer; }
.student-course-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.student-course-filter-button { border: 0; border-radius: 10px; padding: 8px 10px; color: #b94231; background: #fbece8; font-size: 10px; font-weight: 800; white-space: nowrap; }
.student-course-filter-button.is-active { color: #fff; background: var(--green); }
.year-badge { padding: 5px 9px; border-radius: 12px; color: #2d745d; background: #e2f1eb; font-size: 10px; font-weight: 700; white-space: nowrap; }
.student-filters { grid-template-columns: 1.5fr 1fr; }
.student-page .content-actions a, .student-page .content-actions button { width: auto; padding: 0 11px; font-weight: 700; }

/* Leggibilita: incremento moderato dei testi operativi e dei form. */
.brand small,
.sidebar-help p,
.stat-label,
.link-button,
.view-heading p,
.course-row,
.segmented-control button,
.assignment-course strong {
    font-size: 12px;
}
.nav-caption,
.nav-count,
.user-copy small,
.stat-change,
.activity-copy small,
.activity-meta,
.subject-card-head small,
.assignment-person small,
.assignment-course small,
.security-rule,
.drop-zone small,
.login-brand small,
.demo-access span,
.demo-access button {
    font-size: 11px;
}
.user-copy strong,
.search-box input,
.activity-copy strong,
.subject-row strong,
.quick-actions strong,
.view-heading p {
    font-size: 13px;
}
.sidebar-user .user-copy strong { font-size: 11px; }
.eyebrow,
.section-kicker,
.file-icon,
.subject-row small,
.quick-actions small,
.content-type,
.content-tags span,
.status-pill,
.author-mini,
.person-cell small,
.table-panel th {
    font-size: 10px;
}
.welcome-panel p,
.form-control,
.form-select,
.login-card > p {
    font-size: 14px;
}
.filter-bar label span,
.form-label,
.content-card p,
.table-panel td,
.security-note > p,
.login-error {
    font-size: 12px;
}
.content-card p {
    height: 38px;
}
.drop-zone strong {
    font-size: 13px;
}
.demo-access button {
    padding: 6px 9px;
}

@media (max-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .content-grid { grid-template-columns: repeat(2, 1fr); }
    .search-box { display: none; }
}
@media (max-width: 850px) {
    .sidebar { transform: translateX(-100%); transition: transform .25s ease; }.sidebar.open { transform: translateX(0); box-shadow: 15px 0 40px rgba(0,0,0,.2); }
    .main-content { width: 100%; margin-left: 0; }.menu-button { display: block; }.topbar { padding: 13px 18px; }.topbar-title .eyebrow { display: none; }.content-area { padding: 22px 18px 40px; }
    .dashboard-grid, .assignment-layout { grid-template-columns: 1fr; }.welcome-visual { opacity: .45; }.welcome-panel > div:first-child { position: relative; z-index: 2; }
    .quick-actions { grid-template-columns: 1fr; }.quick-actions button { border-right: 0; border-bottom: 1px solid var(--line); }
    .login-layout { grid-template-columns: 1fr; }
    .login-intro { display: none; }
    .login-mobile-brand { display: flex; }
    .login-form-side { min-height: 100vh; padding: 25px; }
    .student-course-grid { grid-template-columns: repeat(2, 1fr); }
    .side-nav .nav-link,
    .btn-primary,
    .btn-light,
    .form-control,
    .form-select,
    .login-page-card > p,
    .student-hero p {
        font-size: 15px;
    }
    .view-heading p,
    .content-card p,
    .table-panel td,
    .security-note > p,
    .student-course-card small,
    .form-help,
    .form-note {
        font-size: 13px;
        line-height: 1.55;
    }
    .filter-bar label span,
    .form-label,
    .section-kicker,
    .content-tags span,
    .status-pill,
    .year-badge {
        font-size: 11px;
    }
    .student-page .content-card h3 {
        font-size: 17px;
        line-height: 1.3;
    }
    .student-page .student-course-card strong {
        font-size: 16px;
        line-height: 1.3;
    }
    .student-page .content-card p,
    .student-page .student-course-card small,
    .student-page .student-course-filter-button,
    .student-page .content-actions a {
        font-size: 14px;
    }
    .student-page .content-tags span,
    .student-page .year-badge,
    .student-page .filter-bar label span {
        font-size: 12px;
    }
}
@media (max-width: 620px) {
    .topbar-title { min-width: 0; }.topbar h1 { font-size: 18px; }.action-upload { width: 38px; height: 38px; overflow: hidden; padding: 8px; white-space: nowrap; }.action-upload span { margin-right: 20px; }
    .welcome-panel { min-height: 210px; padding: 28px 24px; }.welcome-panel h2 { font-size: 27px; }.welcome-visual { right: -30px; }.stats-grid, .content-grid, .subject-cards { grid-template-columns: 1fr; }
    .filter-bar { grid-template-columns: 1fr; }.view-heading { align-items: flex-start; flex-direction: column; }.activity-meta { display: none; }
    .assignment-item { grid-template-columns: 1fr; }.assignment-course-list { grid-column: 1; }.table-panel td, .table-panel th { padding: 12px; }
    .login-page-card { padding: 28px 22px; }
    .student-header { padding: 12px 16px; }
    .student-header .brand small, .student-user > span:nth-child(2) { display: none; }
    .student-main { width: min(100% - 28px, 1180px); padding-top: 22px; }
    .student-hero { padding: 28px 24px; }
    .student-course-grid { grid-template-columns: 1fr; }
    .student-filters { grid-template-columns: 1fr; }
    .student-course-card { flex-wrap: wrap; }
    .student-course-actions { margin-left: 60px; }
    .course-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; }
    .course-row .year-badge { justify-self: end; }
    .course-row > span:last-child { grid-column: 1 / -1; justify-self: start; }
    .course-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
    .topbar h1 { font-size: 20px; }
    .welcome-panel p,
    .student-hero p,
    .login-error,
    .modal-form-error {
        font-size: 14px;
    }
    .activity-copy strong,
    .subject-row strong,
    .quick-actions strong,
    .student-course-card strong,
    .assignment-person strong,
    .assignment-course-card strong {
        font-size: 14px;
    }
    .activity-copy small,
    .subject-row small,
    .quick-actions small,
    .assignment-person small,
    .assignment-course-card small,
    .person-cell small,
    .author-mini,
    .content-type,
    .nav-count {
        font-size: 12px;
    }
    .content-card p {
        height: 42px;
    }
    .student-page .student-course-card {
        gap: 14px;
        padding: 20px;
    }
    .student-page .student-course-copy {
        flex: 1 1 calc(100% - 62px);
    }
    .student-page .student-course-actions {
        flex: 1 1 auto;
        justify-content: flex-end;
        margin-left: 60px;
        gap: 12px;
    }
    .student-page .student-course-code {
        width: 46px;
        height: 46px;
        font-size: 15px;
    }
    .student-page .content-card-body {
        padding: 19px;
    }
    .student-page .content-card h3 {
        font-size: 18px;
    }
    .student-page .student-course-card strong {
        font-size: 17px;
    }
    .student-page .content-card p {
        height: 52px;
        font-size: 16px;
        line-height: 1.55;
    }
    .student-page .student-course-card small,
    .student-page .student-course-filter-button,
    .student-page .content-actions a {
        font-size: 15px;
    }
    .student-page .content-tags span,
    .student-page .year-badge {
        font-size: 13px;
    }
    .content-actions button,
    .content-actions a,
    .record-actions button {
        font-size: 14px;
    }
    .mobile-copyright { display: block; width: 100%; padding: 0 16px 24px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
}