body { min-height: 100vh; }
.app-navbar { position: sticky; top: 0; z-index: 1030; }
.app-shell { display: flex; min-height: calc(100vh - 56px); }
.app-sidebar { width: 250px; flex: 0 0 250px; position: sticky; top: 56px; height: calc(100vh - 56px); overflow: hidden; background: #fff; border-right: 1px solid #dee2e6; transition: width .2s ease, flex-basis .2s ease, border-color .2s ease; }
.sidebar-collapsed .app-sidebar { width: 0; flex-basis: 0; border-right-color: transparent; }
.app-sidebar .sidebar-inner { min-width: 250px; }
.app-content { flex: 1 1 auto; min-width: 0; max-width: 1600px; margin: 0 auto; width: 100%; }
.sidebar-link { color: #344054; }
.sidebar-link:hover { background: #f1f5f9; color: #0d6efd; }
.sidebar-program-card { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; color: #0d6efd; text-decoration: none; background: #e7f1ff; border: 1px solid #cfe2ff; border-radius: .6rem; transition: transform .15s ease, background .15s ease; }
.sidebar-program-card small { color: #667085; }
.sidebar-program-card:hover, .sidebar-program-card.active { background: #0d6efd; color: #fff; transform: translateY(-1px); }
.sidebar-program-card:hover small, .sidebar-program-card.active small { color: #e7f1ff; }
.sidebar-youtube-card { display: flex; flex-direction: column; gap: .15rem; padding: .9rem 1rem; color: #b42318; text-decoration: none; background: #fff1f0; border: 1px solid #fecdca; border-radius: .6rem; transition: transform .15s ease, background .15s ease; }
.sidebar-youtube-card small { color: #667085; }
.sidebar-youtube-card:hover, .sidebar-youtube-card.active { background: #dc3545; color: #fff; transform: translateY(-1px); }
.sidebar-youtube-card:hover small, .sidebar-youtube-card.active small { color: #fff1f0; }
.module-card { transition: transform .15s ease, box-shadow .15s ease; }
.module-card:hover { transform: translateY(-2px); }
.profile-link:hover { text-decoration: underline !important; }
.profile-avatar { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #e7f1ff; color: #0d6efd; font-size: 1.75rem; font-weight: 700; }
.video-position { flex: 0 0 2rem; width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; background: #f2f4f7; color: #475467; font-size: .8rem; font-weight: 700; }
.video-thumb { width: 112px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .4rem; background: #e9ecef; }
.youtube-video-list { max-height: 72vh; overflow-y: auto; }
.weekday-options ul { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.weekday-options label { display: flex; align-items: center; gap: .35rem; padding: .45rem .65rem; border: 1px solid #dee2e6; border-radius: .45rem; cursor: pointer; }
.youtube-estimate { padding: 1rem; border-radius: .6rem; background: #fff1f0; color: #842029; }
.youtube-card-progress { height: .55rem; }
.youtube-card-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .75rem; border-radius: .55rem; background: #f8f9fa; }
.youtube-card-summary div { min-width: 0; }
.youtube-card-summary span, .youtube-card-summary strong { display: block; }
.youtube-card-summary span { color: #667085; font-size: .72rem; }
.youtube-card-summary strong { margin-top: .1rem; font-size: .82rem; }
.youtube-player-card { z-index: 10; }
.weekly-calendar-wrap { overflow-x: auto; }
.weekly-calendar { display: grid; grid-template-columns: repeat(7, minmax(180px, 1fr)); min-width: 1260px; }
.calendar-day { min-height: 260px; border-right: 1px solid #dee2e6; background: #fff; }
.calendar-day:last-child { border-right: 0; }
.calendar-day > header { display: flex; justify-content: space-between; gap: .5rem; padding: .7rem; background: #f8f9fa; border-bottom: 1px solid #dee2e6; font-size: .82rem; }
.calendar-day-off { background: #f8f9fa; }
.calendar-day-off > header { color: #98a2b3; }
.calendar-videos { display: flex; flex-direction: column; gap: .5rem; padding: .55rem; }
.calendar-video { padding: .55rem; border: 1px solid #fecdca; border-radius: .45rem; background: #fff1f0; color: #344054; font-size: .78rem; }
.calendar-video-main { display: flex; align-items: flex-start; gap: .4rem; color: inherit; text-decoration: none; }
.calendar-video strong, .calendar-video small { display: block; }
.calendar-video small { color: #667085; margin-top: .2rem; }
.calendar-video:hover { border-color: #dc3545; }
.calendar-video-main:hover { color: #b42318; }
.calendar-video.completed { border-color: #a6d9b5; background: #eaf7ee; }
.calendar-video-position { flex: 0 0 auto; font-weight: 700; }
.calendar-complete-btn { width: 100%; margin-top: .5rem; padding: .3rem .45rem; border: 1px solid #dc3545; border-radius: .35rem; background: #fff; color: #b42318; font-weight: 600; font-size: .75rem; }
.calendar-complete-btn:hover { background: #dc3545; color: #fff; }
.calendar-complete-btn.is-complete { border-color: #198754; color: #146c43; }
.calendar-complete-btn.is-complete:hover { background: #198754; color: #fff; }
.calendar-empty { color: #98a2b3; font-size: .78rem; text-align: center; padding: 1rem .25rem; }
.video-notes-list { max-height: 62vh; overflow-y: auto; }
.pre-line { white-space: pre-line; }
.task-check-button { width: 2rem; height: 2rem; display: grid; place-items: center; border: 2px solid #98a2b3; border-radius: 50%; background: #fff; color: #fff; font-weight: 700; }
.task-check-button:hover { border-color: #198754; }
.task-check-button.checked { border-color: #198754; background: #198754; }
.task-check-button:disabled { cursor: not-allowed; opacity: .72; }
.task-completed { background: #f0f9f3; }
.task-completed strong { text-decoration: line-through; color: #667085; }
.student-calendar-wrap { overflow-x: auto; }
.student-calendar { display: grid; grid-template-columns: repeat(7, minmax(190px, 1fr)); min-width: 1330px; }
.student-calendar-day { min-height: 360px; border-right: 1px solid #dee2e6; background: #fff; }
.student-calendar-day:last-child { border-right: 0; }
.student-calendar.month-view { grid-auto-rows: minmax(230px, auto); }
.student-calendar.day-view { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.student-calendar.day-view .student-calendar-day { min-height: 420px; border-right: 0; }
.student-calendar.day-view .student-day-tasks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); align-items: start; }
.student-calendar.month-view .student-calendar-day { min-height: 230px; border-bottom: 1px solid #dee2e6; }
.student-calendar-day > header { display: flex; justify-content: space-between; gap: .4rem; padding: .65rem; border-bottom: 1px solid #dee2e6; background: #f8f9fa; font-size: .78rem; }
.student-calendar-day.today > header { background: #e7f1ff; color: #0d6efd; }
.student-calendar-day.outside-period { opacity: .48; background: #f8f9fa; }
.student-day-tasks { display: flex; flex-direction: column; gap: .5rem; padding: .55rem; }
.student-day-empty { color: #98a2b3; text-align: center; font-size: .75rem; padding: 1rem 0; }
.unified-task { padding: .55rem; border: 1px solid var(--task-border); border-radius: .45rem; background: var(--task-background); font-size: .76rem; }
.unified-task.completed { border-color: #a6d9b5; background: #eef9f1; }
.unified-task strong, .unified-task small { display: block; color: #344054; }
.unified-task small { color: #667085; margin-top: .15rem; }
.unified-task.completed strong { text-decoration: line-through; }
.source-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--task-accent); margin-top: .25rem; }
.unified-task.completed .source-dot { background: #198754; }
.legend-swatch { display: inline-block; width: .75rem; height: .75rem; border-radius: .2rem; margin: 0 .3rem -.05rem 0; }
.legend-swatch.grouped { background: linear-gradient(135deg, #0d6efd 0 33%, #6f42c1 33% 66%, #fd7e14 66%); }
.legend-swatch.completed { background: #198754; }
.unified-task-toggle { width: 100%; margin-top: .45rem; padding: .25rem; border: 0; border-radius: .3rem; background: color-mix(in srgb, var(--task-accent) 12%, white); color: var(--task-accent); font-weight: 600; }
.unified-task.completed .unified-task-toggle { background: rgba(25,135,84,.12); color: #146c43; }
@media (max-width: 575.98px) { .student-calendar.day-view .student-day-tasks { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .video-thumb { width: 80px; } }
.selection-list ul { list-style: none; margin: 0; padding: 0; }
.selection-list li { padding: .4rem 0; }
.selection-list label { cursor: pointer; }
.selection-list input { margin-right: .5rem; }
.program-table-wrap { overflow: auto; max-height: 72vh; background: #fff; border-radius: .5rem; }
.program-table { min-width: 900px; table-layout: fixed; }
.program-table th, .program-table td { min-width: 230px; vertical-align: top; }
.program-table thead th { position: sticky; top: 0; z-index: 3; background: #0d6efd; color: #fff; }
.program-table .date-column { position: sticky; left: 0; z-index: 2; min-width: 120px; width: 120px; background: #f8f9fa; }
.program-table thead .date-column { z-index: 4; background: #0b5ed7; }
.cell-listbox { min-height: 150px; padding: .25rem; }
.cell-listbox option { padding: .5rem .6rem; border-radius: .3rem; margin-bottom: .15rem; white-space: normal; }
.cell-listbox option:checked { background: linear-gradient(#0d6efd, #0d6efd); color: #fff; }
.output-item { padding: .3rem 0; border-bottom: 1px dashed #dee2e6; }
.output-item:last-child { border-bottom: 0; }
.output-goal { display: block; margin-top: .15rem; color: #495057; font-weight: 600; }
.dashboard-progress-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin-top: .5rem; padding-top: .45rem; border-top: 1px dashed var(--task-border); }
.dashboard-progress-form .form-text { grid-column: 1 / -1; margin: 0; color: #667085; }
.dashboard-progress-form button { grid-column: 1 / -1; }
.statistics-daily-list { display: flex; flex-direction: column; gap: .65rem; }
.statistics-day-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: .75rem; }
.statistics-day-row > div:last-child { display: flex; flex-direction: column; gap: .2rem; }
.statistics-bar { min-width: 2px; height: 1.25rem; border-radius: .25rem; white-space: nowrap; font-size: .7rem; line-height: 1.25rem; }
.statistics-bar span { padding: 0 .35rem; }
.statistics-bar.target { background: #dbeafe; color: #1d4ed8; }
.statistics-bar.actual { background: #198754; color: #fff; }
.statistics-mini-progress { height: .35rem; margin-top: .3rem; min-width: 120px; }
.pomodoro-session-card { transition: transform .18s ease, box-shadow .18s ease; }
.pomodoro-session-card:hover { transform: translateY(-3px); }
.pomodoro-mini-mark { width: 3.25rem; height: 3.25rem; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #f1ecff; color: #6f42c1; font-weight: 800; }
.pomodoro-focus-card { max-width: 760px; margin: 0 auto; overflow: hidden; background: radial-gradient(circle at top, #f5f1ff 0, #fff 55%); }
.pomodoro-ring { --timer-progress: 0deg; width: min(72vw, 330px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(#6f42c1 var(--timer-progress), #e9e4f4 0); position: relative; box-shadow: 0 20px 55px rgba(111, 66, 193, .16); }
.pomodoro-ring::before { content: ""; position: absolute; inset: 12px; border-radius: inherit; background: #fff; }
.pomodoro-ring-inner { position: relative; z-index: 1; }
.pomodoro-time { color: #2d2340; font-size: clamp(3.1rem, 9vw, 5.6rem); line-height: 1; font-weight: 800; letter-spacing: -.06em; font-variant-numeric: tabular-nums; }
.pomodoro-ring-inner small { display: block; margin-top: .75rem; color: #667085; font-weight: 600; }
.pomodoro-cycles { max-width: 360px; margin-left: auto; margin-right: auto; }
.pomodoro-cycles .progress { height: .55rem; }
.pomodoro-cycles .progress-bar { background: #6f42c1; transition: width .3s ease; }
@media (max-width: 575.98px) { .pomodoro-focus-card .btn-lg { font-size: 1rem; } }
@media print {
  @page { size: A4 landscape; margin: 5mm; }
  nav, .app-sidebar, .offcanvas, .no-print, .alert, .btn { display: none !important; }
  html, body { width: 100%; height: auto; background: #fff !important; margin: 0; padding: 0 !important; }
  .app-shell { display: block; min-height: 0; }
  main.container, main.app-content { max-width: none; width: 100%; margin: 0; padding: 0 !important; }
  .program-output { width: 100%; max-width: 100%; overflow: visible; break-after: avoid-page; }
  .program-info { box-shadow: none !important; border: 1px solid #aaa !important; margin-bottom: 2mm !important; break-inside: avoid; }
  .program-info .card-body { padding: 3mm !important; }
  .program-info h1 { font-size: 17pt; margin-bottom: 1mm !important; }
  .program-info p, .program-info div { font-size: 9pt; line-height: 1.18; }
  .program-info hr { margin: 1.5mm 0; }
  .program-table-wrap { width: 100%; max-width: 100%; overflow: visible; max-height: none; box-shadow: none !important; }
  .program-table { min-width: 100%; width: 100%; font-size: 9pt; line-height: 1.12; page-break-inside: avoid; }
  .output-table { zoom: var(--print-scale); width: var(--print-width); max-width: none; transform-origin: top left; }
  .program-table thead { display: table-header-group; }
  .program-table tbody { break-inside: avoid; }
  .program-table tr { break-inside: avoid; page-break-inside: avoid; }
  .program-table th, .program-table td { min-width: 0; padding: 1.1mm !important; }
  .program-table .date-column, .program-table thead th { position: static; }
  .program-table .date-column { min-width: 20mm; width: 20mm; }
  .output-item { padding: .4mm 0; }
}