/* VIAL LMS clean layout layer. Keep this file as the single source for page geometry. */
:root{
  --vial-topbar-height:60px;
  --vial-page-gap:16px;
  --vial-page-pad:16px;
  --vial-viewport-width:calc(100vw - 32px);
  --vial-drawer-width:286px;
  --vial-page-width:1120px;
  --vial-home-width:1120px;
  --vial-course-width:1270px;
  --vial-lesson-width:1270px;
  --vial-admin-width:1120px;
  --vial-users-width:1260px;
  --vial-test-width:1040px;
  --vial-login-width:720px;
  --vial-line:#d9e3ec;
  --vial-soft:#eefafa;
  --vial-teal:#00857f;
  --vial-text:#0f172a;
  --vial-muted:#64748b;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html{
  margin:0;
  min-width:0;
  scrollbar-gutter:stable;
  overflow-x:hidden;
  background:#f4f7fa;
}

body{
  --vial-canvas-width:min(var(--vial-page-width), var(--vial-viewport-width));
  margin:0!important;
  min-width:0!important;
  padding-top:0!important;
  overflow-x:clip!important;
  background:#f4f7fa!important;
  color:var(--vial-text);
}

body.moodle-home:not(.guest-shell){--vial-canvas-width:min(var(--vial-home-width), var(--vial-viewport-width));}
body.moodle-admin-page,
body.admin-update-page{--vial-canvas-width:min(var(--vial-admin-width), var(--vial-viewport-width));}
body.users-admin-page{--vial-canvas-width:min(var(--vial-users-width), var(--vial-viewport-width));}
body.vial-admin-shell.users-admin-page{--vial-users-width:var(--vial-admin-width);}
body.course-view{--vial-canvas-width:min(var(--vial-course-width), var(--vial-viewport-width));}
body.lesson-page-view{--vial-canvas-width:min(var(--vial-lesson-width), var(--vial-viewport-width));}
body.test-view,
body.course-test-view{--vial-canvas-width:min(var(--vial-test-width), var(--vial-viewport-width));}
body.login-page,
body.guest-shell.moodle-home{--vial-canvas-width:min(var(--vial-login-width), var(--vial-viewport-width));}

.moodle-top{
  position:sticky!important;
  top:0!important;
  left:0!important;
  right:0!important;
  z-index:50000!important;
  display:block!important;
  min-height:var(--vial-topbar-height)!important;
  height:auto!important;
  overflow:visible!important;
  background:#fff!important;
  border-bottom:1px solid #e3ebf2!important;
  box-shadow:0 2px 14px rgba(15,23,42,.06)!important;
}

.moodle-top .moodle-bar{
  min-height:var(--vial-topbar-height)!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:3px 18px!important;
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:14px!important;
  overflow:visible!important;
}

.moodle-top .moodle-brand{
  grid-column:1!important;
  display:flex!important;
  align-items:center!important;
  min-width:0!important;
  text-decoration:none!important;
}

.moodle-top .moodle-brand img{
  display:block!important;
  width:auto!important;
  height:46px!important;
  max-width:154px!important;
  object-fit:contain!important;
}

.moodle-top .moodle-mainnav.compact,
.moodle-top .moodle-mainnav{
  grid-column:2!important;
  min-width:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:4px!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  white-space:nowrap!important;
}

.moodle-top .moodle-mainnav::-webkit-scrollbar{
  display:none!important;
}

.moodle-top .moodle-mainnav a{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:36px!important;
  padding:7px 10px!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:10px!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--vial-text)!important;
  font-size:14px!important;
  line-height:1.2!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

.moodle-top .moodle-mainnav a:hover,
.moodle-top .moodle-mainnav a:focus,
.moodle-top .moodle-mainnav a.active{
  background:var(--vial-soft)!important;
  color:#006b66!important;
  text-decoration:none!important;
  outline:none!important;
  border:0!important;
  border-bottom:0!important;
  box-shadow:none!important;
}

.moodle-actions{
  grid-column:3!important;
  min-width:0!important;
  margin-left:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  white-space:nowrap!important;
  overflow:visible!important;
}

.moodle-more-nav,
.nav-toggle{
  display:none!important;
}

.lang-switch{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:2px!important;
  margin:0!important;
  padding:3px!important;
  border:1px solid #dbe6ef!important;
  border-radius:999px!important;
  background:#f1f5f9!important;
}

.lang-switch a{
  min-width:38px!important;
  height:30px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:999px!important;
  text-decoration:none!important;
  color:#334155!important;
  font-weight:700!important;
  font-size:13px!important;
}

.lang-switch a.active{
  background:#0d9488!important;
  color:#fff!important;
}

.icon-btn{
  flex:0 0 auto!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #dbe6ef!important;
  border-radius:999px!important;
  background:#f8fafc!important;
  text-decoration:none!important;
  overflow:visible!important;
}

.edit-switch{
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
  white-space:nowrap!important;
}

.edit-switch input{
  width:auto!important;
  margin:0!important;
}

.user-menu{
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  z-index:50001!important;
}

.user-menu-btn{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:3px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid #dbe6ef!important;
  border-radius:999px!important;
  background:#fff!important;
  cursor:pointer!important;
  overflow:hidden!important;
  vertical-align:middle!important;
}

.user-menu-btn:hover,
.user-menu-btn:focus{
  background:var(--vial-soft)!important;
  outline:none!important;
  box-shadow:0 0 0 2px rgba(13,148,136,.18)!important;
}

.user-menu-name,
.user-menu-caret{
  display:none!important;
}

.avatar,
.avatar-sm,
.user-menu-btn img,
.user-menu-btn .avatar-fallback{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  border-radius:999px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  object-fit:cover!important;
  margin:0!important;
  line-height:32px!important;
}

.avatar-fallback{
  background:#e2e8f0!important;
  color:#334155!important;
  font-weight:800!important;
}

.user-menu-dropdown{
  min-width:240px!important;
  border:1px solid #dbe6ef!important;
  border-radius:14px!important;
  box-shadow:0 18px 42px rgba(15,23,42,.18)!important;
  background:#fff!important;
  padding:8px!important;
  z-index:2147483647!important;
}

.user-menu-dropdown.open{
  display:block!important;
}

.user-menu-dropdown a,
.user-submenu > button{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  border:0!important;
  background:transparent!important;
  color:#0f172a!important;
  padding:9px 10px!important;
  border-radius:10px!important;
  text-decoration:none!important;
  text-align:left!important;
  font:inherit!important;
  cursor:pointer!important;
}

.user-menu-dropdown a:hover,
.user-submenu > button:hover{
  background:#f1f5f9!important;
  color:#006b66!important;
}

.user-menu-dropdown hr{
  border:0!important;
  border-top:1px solid #e5edf3!important;
  margin:6px 0!important;
}

.user-submenu{
  position:relative!important;
}

.user-submenu > div{
  display:none;
  position:absolute!important;
  left:100%!important;
  top:0!important;
  min-width:210px!important;
  background:#fff!important;
  border:1px solid #dbe6ef!important;
  border-radius:14px!important;
  box-shadow:0 18px 42px rgba(15,23,42,.18)!important;
  padding:8px!important;
  z-index:2147483647!important;
}

.user-submenu.open > div{
  display:block!important;
}

body > main.wrap,
body > main.wrap.single-layout,
body.no-sidebar > main.wrap.single-layout,
body.with-sidebar > main.wrap.app-layout.moodle-layout,
body.with-sidebar.sidebar-hidden > main.wrap.app-layout.moodle-layout,
body.with-sidebar:not(.sidebar-hidden) > main.wrap.app-layout.moodle-layout{
  display:block!important;
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  width:var(--vial-canvas-width)!important;
  min-width:var(--vial-canvas-width)!important;
  max-width:var(--vial-canvas-width)!important;
  margin:24px 0 0 50%!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  transition:none!important;
  grid-template-columns:none!important;
}

body > main.wrap > .main-content,
body.with-sidebar .main-content,
body.with-sidebar.sidebar-hidden .main-content,
body.with-sidebar:not(.sidebar-hidden) .main-content,
body.moodle-admin-page .main-content,
body.moodle-home .main-content{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
  transition:none!important;
}

.moodle-heading,
.vial-home-heading,
.moodle-tabs,
.breadcrumbs,
.moodle-admin-head,
.admin-tabs,
.admin-section-intro,
.admin-section-list,
.admin-directory-list,
.moodle-management-grid,
.admin-update-grid,
.update-details,
.course-header,
.course-outline-shell,
.moodle-section,
.add-section-box,
.lesson-reader-head,
.lesson-reading-layout,
.lesson-reading-main,
.lesson-reader-nav,
.lesson-reader-card,
.lesson-page-editor-card,
.lesson-materials,
.test-shell,
.test-head,
.test-tabs,
.test-attempt-form,
.test-question-page,
.test-page-controls,
.result-card,
.table-scroll{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
  transform:none!important;
}

.moodle-tabs,
.admin-tabs,
.test-tabs{
  display:flex!important;
  align-items:flex-end!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  border-bottom:1px solid #dbe6ef!important;
}

.moodle-tabs::-webkit-scrollbar,
.admin-tabs::-webkit-scrollbar,
.test-tabs::-webkit-scrollbar{
  display:none!important;
}

.moodle-tabs a,
.admin-tabs a,
.test-tabs a{
  flex:0 0 auto!important;
  text-decoration:none!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:10px 10px 0 0!important;
  padding:10px 12px!important;
  color:#00756f!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}

.moodle-tabs a.active,
.admin-tabs a.active,
.test-tabs a.active{
  background:#fff!important;
  color:#0f172a!important;
  box-shadow:inset 0 -3px 0 #0d9488!important;
  font-weight:700!important;
}

.moodle-tabs a:hover,
.admin-tabs a:hover,
.test-tabs a:hover{
  background:var(--vial-soft)!important;
  text-decoration:none!important;
}

body.moodle-home:not(.guest-shell) .home-columns,
body.moodle-home:not(.guest-shell) .vial-home-columns{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

body.moodle-home:not(.guest-shell) .vial-home-card{
  display:flex!important;
  flex-direction:column!important;
  gap:18px!important;
  width:100%!important;
  min-height:calc(100vh - var(--vial-topbar-height) - 138px)!important;
  padding:28px 30px!important;
  overflow:hidden!important;
}

body.moodle-home:not(.guest-shell) .vial-home-welcome,
body.moodle-home:not(.guest-shell) .vial-home-course-section{
  width:100%!important;
  min-width:0!important;
}

body.moodle-home:not(.guest-shell) .vial-home-course-section{
  padding-top:16px!important;
  border-top:1px solid #dbe6ef!important;
}

.welcome-card,
.my-courses-block{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}

.mini-course-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
  gap:12px!important;
  align-items:stretch!important;
  max-height:340px!important;
  overflow:auto!important;
  padding-right:2px!important;
}

.mini-course{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:72px minmax(0,1fr)!important;
  gap:12px!important;
  align-items:center!important;
  text-decoration:none!important;
  height:126px!important;
  box-sizing:border-box!important;
}

.mini-course b{
  display:-webkit-box!important;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  overflow-wrap:anywhere;
}

.mini-course .course-thumb,
.mini-course img{
  width:64px!important;
  height:64px!important;
  object-fit:cover!important;
}

.mini-course strong,
.mini-course span{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}

body.login-page .login-shell,
body.guest-shell.moodle-home .login-shell{
  min-height:calc(100vh - var(--vial-topbar-height) - 72px)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px 0!important;
}

body.login-page .login-card,
body.guest-shell.moodle-home .login-card{
  width:min(700px, calc(100vw - 32px))!important;
  min-width:0!important;
  max-width:700px!important;
  margin:0 auto!important;
  text-align:center!important;
}

body.login-page .login-card h1,
body.guest-shell.moodle-home .login-card h1{
  overflow-wrap:normal!important;
}

body.moodle-admin-page .admin-summary-strip{
  display:none!important;
}

.moodle-admin-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:var(--vial-page-gap)!important;
  align-items:start!important;
}

body.vial-admin-shell .moodle-admin-head h1{margin:0;font-size:clamp(1.25rem,2vw,1.6rem)}
body.vial-admin-shell .vial-admin-path{margin:0 0 .4rem}
body.vial-admin-shell .vial-admin-workspace table th{text-align:start;vertical-align:middle}
body.vial-admin-shell .admin-tabs{flex-wrap:wrap!important;overflow:visible!important}
body.vial-admin-shell .admin-tabs a:focus-visible{outline:2px solid #00756f;outline-offset:-2px}
body.vial-admin-shell .vial-module-table .module-mobile-label{display:none}
.vial-admin-dirty-dialog{width:min(28rem,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;border:1px solid #cad7e4;border-radius:12px;padding:18px;color:#172b42;background:#fff;box-shadow:0 12px 36px #102a4333}
.vial-admin-dirty-dialog::backdrop{background:#172b4273}
.vial-admin-dirty-dialog h3{margin:0 0 8px}
.vial-admin-dirty-dialog p{margin:0 0 14px}
.vial-admin-dirty-dialog .form-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin:0}
.vial-admin-dirty-dialog :focus-visible{outline:2px solid #0969b8;outline-offset:2px}
.vial-admin-setting-field{min-width:0}
.vial-admin-setting-field label{display:block;margin-bottom:4px}
.vial-admin-setting-field [aria-invalid=true]{border-color:#b91c1c}
.vial-admin-field-error{color:#9f1f1f;font-size:.875rem;margin:4px 0 0}
.vial-admin-row-actions{white-space:nowrap}
.vial-admin-row-actions summary{cursor:pointer;list-style:none}
.vial-admin-row-actions summary::-webkit-details-marker{display:none}
.vial-admin-row-items{min-width:10rem;padding:4px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;box-shadow:0 8px 22px #162c4326}
details[open].vial-admin-row-actions .vial-admin-row-items{margin-top:4px}
.vial-admin-row-items[popover]{position:fixed;inset:auto;margin:0;max-width:calc(100vw - 16px);overflow:auto}
.vial-admin-row-items form{margin:0}
.vial-admin-row-items :is(a,button){display:block;width:100%;min-height:34px;padding:7px 10px;text-align:start;white-space:normal;color:#172b42;background:#fff;border:0;border-radius:5px;text-decoration:none;font:inherit;cursor:pointer}
.vial-admin-row-items :is(a,button):hover{background:#edf5fc}
.vial-admin-row-actions :focus-visible,.vial-admin-row-items :focus-visible{outline:2px solid #0969b8;outline-offset:-2px}
[data-vial-admin-dialog]{min-width:0;max-width:100%}
[data-vial-admin-dialog] summary{cursor:pointer;list-style:none}
[data-vial-admin-dialog] summary::-webkit-details-marker{display:none}
[data-vial-admin-dialog] .vial-admin-dialog-content{margin-top:8px;padding:14px;border:1px solid #cad7e4;border-radius:10px;background:#fff}
.vial-admin-dialog{width:min(42rem,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;border:1px solid #cad7e4;border-radius:12px;padding:18px;background:#fff;color:#172b42;box-shadow:0 12px 36px #102a4333}
.vial-admin-dialog::backdrop{background:#172b4273}
.vial-admin-dialog-content h2{font-size:1.15rem;margin:0 0 12px}
.vial-admin-dialog-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.vial-admin-dialog-content .form-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin:14px 0 0}
.vial-admin-dialog-content [hidden]{display:none!important}
@media(max-width:540px){.vial-admin-dialog-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){
  body.vial-admin-shell .vial-module-table,
  body.vial-admin-shell .vial-module-table tbody{display:block;width:100%;min-width:0}
  body.vial-admin-shell .vial-module-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  body.vial-admin-shell .vial-module-table tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:10px;border-bottom:1px solid #dbe6ef}
  body.vial-admin-shell .vial-module-table td{display:block;padding:3px 0;border:0;min-width:0;overflow-wrap:anywhere}
  body.vial-admin-shell .vial-module-table :is(.module-name,.module-description){grid-column:1/-1}
  body.vial-admin-shell .vial-module-table .module-state{text-align:right}
  body.vial-admin-shell .vial-module-table .module-mobile-label{display:inline;font-size:.85em}
  body.vial-admin-shell .vial-module-table .module-state select{display:inline-block;width:auto;min-width:0;margin-left:6px}
}
body.vial-admin-shell .admin-section-group h3,
body.vial-admin-shell .admin-directory-row h3{margin:0 0 .55rem;font-size:1.1rem;color:#00756f}
body.system-diagnostics-page .diag-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:16px 0}
body.system-diagnostics-page .diag-card{padding:14px;border:1px solid #e2e8f0;border-radius:12px;background:#fff}
body.system-diagnostics-page .diag-card b{font-size:1.5rem;color:#0f766e}
body.system-diagnostics-page .badge.ok{background:#dcfce7;color:#166534}
body.system-diagnostics-page .badge.bad{background:#fee2e2;color:#991b1b}

.admin-search{
  display:flex!important;
  align-items:stretch!important;
  min-width:0!important;
}

body.moodle-admin-page .moodle-management-grid,
body.moodle-admin-page .admin-section-list,
body.moodle-admin-page .admin-directory-list,
body.admin-update-page .admin-update-grid{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:var(--vial-page-gap)!important;
}

.admin-directory-row,
.admin-section-group{
  display:grid!important;
  grid-template-columns:240px minmax(0,1fr)!important;
  gap:var(--vial-page-gap)!important;
  align-items:start!important;
  width:100%!important;
  min-width:0!important;
}

.admin-directory-links,
.admin-link-list{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))!important;
  gap:10px!important;
  min-width:0!important;
}

.admin-directory-links a,
.admin-link-row{
  min-width:0!important;
  overflow:hidden!important;
}

body.admin-update-page .admin-update-grid > .card,
body.admin-update-page .admin-update-grid > form.card,
body.admin-update-page .update-package-card,
body.admin-update-page .update-details{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}

body.users-admin-page .moodle-toolbar{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:10px!important;
  justify-content:flex-end!important;
  width:100%!important;
}

body.users-admin-page .table-scroll{
  width:100%!important;
  max-width:100%!important;
  overflow:auto!important;
}

body.users-admin-page table{
  min-width:980px!important;
}

body.course-view .course-left-drawer,
body.lesson-page-view .lesson-course-nav,
body.test-view .course-left-drawer,
body.with-sidebar .right-sidebar,
body.with-sidebar .right-sidebar.moodle-drawer,
body.with-sidebar .moodle-drawer.right-sidebar{
  position:fixed!important;
  top:var(--vial-topbar-height)!important;
  bottom:0!important;
  height:auto!important;
  width:var(--vial-drawer-width)!important;
  min-width:var(--vial-drawer-width)!important;
  max-width:var(--vial-drawer-width)!important;
  z-index:1300!important;
  overflow:auto!important;
  background:#f4f7fa!important;
  border-color:#dbe6ef!important;
  transition:transform .18s ease!important;
}

body.with-sidebar .right-sidebar,
body.with-sidebar .right-sidebar.moodle-drawer,
body.with-sidebar .moodle-drawer.right-sidebar{
  right:0!important;
  left:auto!important;
}

body.with-sidebar.sidebar-hidden .right-sidebar,
body.with-sidebar.sidebar-hidden .right-sidebar.moodle-drawer,
body.with-sidebar.sidebar-hidden .moodle-drawer.right-sidebar{
  transform:translateX(105%)!important;
}

body.course-view .course-left-drawer,
body.lesson-page-view .lesson-course-nav,
body.test-view .course-left-drawer{
  left:0!important;
  right:auto!important;
}

body.course-view .course-outline-shell:not(.course-outline-open) .course-left-drawer,
body.lesson-page-view:not(.lesson-nav-visible) .lesson-course-nav,
body.test-view .course-outline-shell:not(.course-outline-open) .course-left-drawer{
  transform:translateX(-105%)!important;
}

.right-sidebar .side-block,
.course-left-drawer .course-nav-item,
.lesson-course-nav .course-nav-item{
  border-radius:8px!important;
}

.sidebar-tab,
.course-left-tab,
.lesson-left-tab{
  position:fixed!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  z-index:1290!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.sidebar-tab{
  right:0!important;
}

body.with-sidebar:not(.sidebar-hidden) .sidebar-tab{
  display:none!important;
}

body.with-sidebar.sidebar-hidden .sidebar-tab{
  display:flex!important;
}

.vial-sidebar-backdrop{
  display:none!important;
}

@media (min-width:1280px){
  body.with-sidebar:not(.sidebar-hidden){
    --vial-canvas-width:calc(100% - var(--vial-drawer-width) - 48px);
  }

  body.with-sidebar:not(.sidebar-hidden) > main.wrap.app-layout.moodle-layout,
  body.with-sidebar:not(.sidebar-hidden) > .foot{
    margin-left:calc((100% - var(--vial-drawer-width))/2)!important;
  }
}

@media (max-width:1279px){
  body.with-sidebar:not(.sidebar-hidden) .vial-sidebar-backdrop{
    display:block!important;
    position:fixed!important;
    inset:var(--vial-topbar-height) 0 0!important;
    z-index:1250!important;
    border:0!important;
    border-radius:0!important;
    width:100%!important;
    height:auto!important;
    padding:0!important;
    background:rgba(15,23,42,.38)!important;
    cursor:default;
  }
}

body.with-sidebar:not(.sidebar-hidden) .sidebar-tab{
  right:var(--vial-drawer-width)!important;
}

.course-left-tab,
.lesson-left-tab{
  left:0!important;
}

body:is(.course-view,.test-view) .course-outline-shell.course-outline-open .course-left-tab,
body.lesson-page-view.lesson-nav-visible .lesson-left-tab,
body.test-view .course-outline-shell.course-outline-open .course-left-tab{
  left:var(--vial-drawer-width)!important;
}

body.course-view .course-header h1,
body.lesson-page-view .lesson-reader-head h1{
  max-width:100%!important;
  overflow-wrap:break-word!important;
}
body.course-view .course-header>div:first-child{flex:1 1 auto;min-width:0;}

.lesson-reader-head,
.course-header{
  margin-bottom:var(--vial-page-gap)!important;
}

.lesson-reader-nav{
  margin-top:var(--vial-page-gap)!important;
  margin-bottom:var(--vial-page-gap)!important;
}

.lesson-reader-card + .lesson-reader-nav{
  margin-top:var(--vial-page-gap)!important;
}

.lesson-materials{
  display:none!important;
}

.card,
.moodle-section,
.lesson-reader-card,
.lesson-page-editor-card,
.result-card,
.side-block{
  margin-bottom:var(--vial-page-gap)!important;
}

.foot{
  width:var(--vial-canvas-width)!important;
  min-width:var(--vial-canvas-width)!important;
  max-width:var(--vial-canvas-width)!important;
  margin:24px 0 0 50%!important;
  padding:16px 0 24px!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  color:var(--vial-muted)!important;
  overflow-wrap:anywhere!important;
}

img,
video,
iframe,
canvas,
svg{
  max-width:100%;
}

.protected-content,
.lesson-content,
.vial-editor-area{
  min-width:0!important;
  overflow-wrap:break-word!important;
}

.protected-content table,
.lesson-content table,
.vial-editor-area table{
  min-width:0!important;
  max-width:100%!important;
}

.protected-content img,
.lesson-content img,
.card img,
.vial-editor-area img{
  max-width:100%!important;
  height:auto;
}

@media (max-width:1100px){
  .edit-switch-label{
    display:none!important;
  }

  .moodle-top .moodle-bar{
    grid-template-columns:auto minmax(160px,1fr) auto!important;
    gap:8px!important;
    padding:8px 10px!important;
  }

  .moodle-top .moodle-brand img{
    height:40px!important;
    max-width:130px!important;
  }

  .moodle-top .moodle-mainnav a{
    padding:7px 8px!important;
    font-size:13px!important;
  }
}

@media (max-width:760px){
  :root{
    --vial-page-pad:12px;
    --vial-page-gap:14px;
    --vial-drawer-width:272px;
    --vial-viewport-width:calc(100vw - 24px);
  }

  .moodle-top .moodle-bar{
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }

  .moodle-top .moodle-brand img{
    height:38px!important;
    max-width:122px!important;
  }

  .moodle-actions{
    gap:5px!important;
  }

  .lang-switch a{
    min-width:32px!important;
    height:28px!important;
  }

  .icon-btn{
    width:34px!important;
    height:34px!important;
    min-width:34px!important;
    min-height:34px!important;
  }

  .user-menu-btn{
    width:38px!important;
    height:38px!important;
    min-width:38px!important;
    min-height:38px!important;
  }

  body.moodle-home:not(.guest-shell) .vial-home-card{
    padding:24px!important;
  }

  .moodle-admin-head,
  .admin-directory-row,
  .admin-section-group{
    grid-template-columns:1fr!important;
  }

  .admin-search{
    width:100%!important;
  }

  .admin-search input{
    flex:1 1 auto!important;
    min-width:0!important;
  }

  .admin-directory-links,
  .admin-link-list,
  .mini-course-list{
    grid-template-columns:1fr!important;
  }
}

/* Course editors are opt-in; an editor must not stretch the reading view. */
.course-cover-settings{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.course-cover-settings>img{display:block;width:112px;max-width:112px;height:112px;object-fit:cover;flex:0 0 112px;border-radius:12px;}
.course-cover-settings>.course-cover-drop{flex:1 1 260px;min-width:0;}
.course-builder-add-head h2{margin-bottom:4px;}
.course-builder-add-head p{margin:0 0 16px;}
.course-builder-add-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;}
.course-builder-add-form{display:flex;flex-direction:column;gap:12px;margin:0;min-width:0;padding:20px;background:#f8fbfd;border:1px solid #d8e4eb;}
.course-builder-add-form h3,.course-builder-add-form p{margin:0;}
.course-builder-add-form label{display:block;font-weight:650;}
.course-builder-add-form :is(input,select,textarea){width:100%;margin-top:6px;box-sizing:border-box;}
.course-builder-add-form details{border-top:1px solid #d8e4eb;padding-top:12px;}
.course-builder-add-form details[open]{display:grid;gap:12px;}
.course-builder-add-form summary{cursor:pointer;color:#087e85;font-weight:650;}
.course-builder-add-form .btn{align-self:flex-start;margin-top:auto;}
@media(max-width:760px){.course-builder-add-grid{grid-template-columns:minmax(0,1fr);}}
body.lesson-page-view .lesson-reader-actions{display:none!important;}
body.lesson-page-view.editing-mode .lesson-reader-actions{display:flex!important;}
body.course-view .inline-title-form,
body.course-view .course-description-editor,
body.course-view .course-section-editor,
body.course-view .content-edit-trigger{
  display:none!important;
}
body.course-view.editing-mode .content-edit-trigger{
  display:inline-flex!important;
}
body.course-view.editing-mode .inline-title-form.open{
  display:flex!important;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
}
body.course-view.editing-mode .inline-title-form.open input[name="title"]{
  flex:1 0 100%;
  min-width:0;
}
body.course-view.editing-mode .course-description-editor.open{
  display:block!important;
}
body.course-view.editing-mode .course-section-editor.open{
  display:block!important;
  margin:12px 16px 16px;
}
body.course-view .section-menu{margin-left:0;}
body.course-view .moodle-section .section-head h2{flex:1 1 auto;min-width:0;}
body.course-view .moodle-section .section-head{flex-wrap:wrap;}
body.course-view.editing-mode .section-head .inline-title-form.open{order:10;flex:1 0 100%;width:100%;padding-left:38px;}
.heading-align-field{display:flex;align-items:center;gap:4px;flex:0 0 auto;margin:0 8px 0 0;padding:0;border:0;min-width:0;}
.heading-align-field legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.heading-align-choice{display:inline-flex!important;align-items:center;justify-content:center;width:34px;height:32px;margin:0!important;padding:0!important;border:1px solid #c9d8e3;border-radius:6px;background:#fff;cursor:pointer;}
.heading-align-choice input{position:absolute;width:1px!important;height:1px!important;opacity:0;pointer-events:none;}
.heading-align-choice:has(input:checked){border-color:#087e85;background:#e8f7f6;color:#086f75;}
.heading-align-choice:has(input:focus-visible){outline:2px solid #087e85;outline-offset:2px;}
.heading-align-icon{display:flex;flex-direction:column;gap:3px;width:17px;}
.heading-align-icon i{display:block;height:2px;width:100%;background:currentColor;border-radius:1px;}
.heading-align-icon i:nth-child(2){width:70%;}
.heading-align-icon.align-center i:nth-child(2){align-self:center;}
.heading-align-icon.align-right i:nth-child(2){align-self:flex-end;}
.heading-align-icon.align-justify i:nth-child(2){width:100%;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
body.course-view.editing-mode .inline-title-form.open .heading-align-field{flex:0 0 auto;}
@media(max-width:760px){body.course-view.editing-mode .section-head .inline-title-form.open{padding-left:0;}}
/* Keep every course editing affordance as the same unboxed icon. */
body.course-view.editing-mode :is(.section-head,.activity-title-line) .edit-pencil,
body.course-view.editing-mode .section-head :is(.section-menu,.content-edit-trigger),
body.course-view.editing-mode .activity-drag-handle{
  border:0;
  border-radius:6px;
  background:transparent;
  box-shadow:none;
  color:#315b75;
}
body.course-view.editing-mode :is(.section-head,.activity-title-line) .edit-pencil{
  width:28px;
  height:28px;
  min-width:28px;
  padding:0;
  margin-left:0;
  font-family:Arial,sans-serif;
  font-size:20px;
  font-weight:400;
  line-height:1;
  align-items:center;
  justify-content:center;
}
body.course-view.editing-mode :is(.section-head,.activity-title-line) .edit-pencil[aria-expanded="true"],
body.course-view.editing-mode .section-head :is(.section-menu,.content-edit-trigger)[aria-expanded="true"]{background:#e7f2f5;}
body.course-view.editing-mode .section-head :is(.section-menu,.content-edit-trigger){
  width:28px;
  height:28px;
  padding:0;
  font-family:Arial,sans-serif;
  font-size:22px;
  font-weight:400;
  line-height:1;
  align-items:center;
  justify-content:center;
}
body.course-view.editing-mode :is(.section-head,.activity-title-line) .edit-pencil:hover,
body.course-view.editing-mode .section-head :is(.section-menu,.content-edit-trigger):hover,
body.course-view.editing-mode .activity-drag-handle:hover{background:#e7f2f5;}
body.course-view.editing-mode :is(.section-head,.activity-title-line) .edit-pencil:focus-visible,
body.course-view.editing-mode .section-head :is(.section-menu,.content-edit-trigger):focus-visible,
body.course-view.editing-mode .activity-drag-handle:focus-visible{outline:2px solid #087e85;outline-offset:2px;}
body.course-view .moodle-section.collapsed .course-section-editor{display:none!important;}
body.course-view .moodle-section.editing-summary .section-summary{display:none;}
body.course-view .general-section.editing-description .course-description-view{
  display:none;
}
body.course-view:not(.editing-mode) .activity-actions .edit-only{
  display:none!important;
}
body.course-view .activity-drag-handle{display:none!important;}
body.course-view.editing-mode .activity-drag-handle{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  align-self:center;
  flex:0 0 30px;
  min-height:34px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#315b75;
  cursor:grab;
  touch-action:none;
}
body.course-view.editing-mode .activity-drag-handle:active{cursor:grabbing;}
body.course-view.editing-mode .activity-row{grid-template-columns:30px 34px minmax(0,1fr) auto;}
@media(max-width:900px){body.course-view.editing-mode .activity-row{grid-template-columns:30px 28px minmax(0,1fr);}body.course-view.editing-mode .activity-actions{grid-column:2/-1;}}
body.course-view .activity-order-status:empty{display:none;}
body.course-view .activity-order-status{margin:8px 0;color:#315b75;font-size:.85rem;}

body:is(.course-view,.lesson-page-view,.test-view) .vial-course-nav{
  top:var(--vial-topbar-height)!important;
  padding:12px 12px 18px!important;
  background:#f7f9fb!important;
  border-right:1px solid #e2e8f0!important;
  box-shadow:6px 0 18px rgba(15,23,42,.08)!important;
}
body.course-view .right-sidebar,
body.lesson-page-view .right-sidebar{
  height:auto!important;
  bottom:0!important;
}
body.lesson-page-view .lesson-course-nav{
  padding:12px 12px 18px!important;
  background:#f7f9fb!important;
  border-right:1px solid #e2e8f0!important;
  box-shadow:6px 0 18px rgba(15,23,42,.08)!important;
}
.vial-course-nav-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin:0 2px 12px!important;
}
.vial-course-nav-head h2{
  margin:0!important;
  font-size:18px!important;
  color:#0f172a!important;
}
.vial-course-nav-close{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:30px!important;
  height:30px!important;
  padding:0!important;
  border:1px solid #cbd5e1!important;
  border-radius:8px!important;
  background:#fff!important;
  color:#334155!important;
  font-size:19px!important;
  cursor:pointer;
}
body.lesson-page-view .course-element-nav-list{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:8px!important;
  background:#fff!important;
  border:1px solid #dfe7ef!important;
  border-radius:8px!important;
}
body.lesson-page-view .course-element-nav-item{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  min-height:38px!important;
  padding:8px!important;
  border-radius:6px!important;
  color:#0b5f5d!important;
  text-decoration:none!important;
  font-size:14px!important;
}
body.lesson-page-view .course-element-nav-item:hover,
body.lesson-page-view .course-element-nav-item:focus-visible,
body.lesson-page-view .course-element-nav-item.active{
  background:#e0f2f1!important;
}
body.lesson-page-view .lesson-left-tab{
  width:34px!important;
  height:62px!important;
  padding:0!important;
  border:1px solid #d9e0e7!important;
  border-left:0!important;
  border-radius:0 28px 28px 0!important;
  background:#eef2f7!important;
  color:#64748b!important;
  box-shadow:2px 2px 10px rgba(15,23,42,.1)!important;
  font-size:24px!important;
}
body.lesson-page-view.lesson-nav-visible .lesson-left-tab{display:none!important;}
/* Reading and editing use the same base typography; saved inline formatting
   remains authoritative after the server-side CSS allowlist. */
body.lesson-page-view .lesson-reader-card .lesson-content,
body.lesson-page-view .vial-editor-area{
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:16px!important;
  line-height:1.5!important;
}
body.lesson-page-view .lesson-reader-card .lesson-content img,
body.lesson-page-view .vial-editor-area img{
  border-radius:0!important;
}

.vial-editor-shell dialog.vial-image-dialog{
  position:fixed!important;inset:0!important;margin:auto!important;width:min(580px,calc(100vw - 32px))!important;
  max-height:calc(100vh - 32px)!important;padding:16px!important;box-sizing:border-box;overflow:auto;
  border:1px solid #cbd5e1;border-radius:12px;background:#fff;
}
.vial-image-dialog::backdrop{background:rgba(15,23,42,.35)}
.vial-image-dialog .vial-image-preview{display:block;max-width:100%;max-height:150px;object-fit:contain;margin:8px auto}
.vial-image-dialog .vial-image-preview[hidden]{display:none}
.vial-image-dialog input[type="checkbox"]{width:16px!important;height:16px!important;margin-left:8px!important}
.vial-image-dialog label{display:block;margin:8px 0!important;font-size:14px}
.vial-image-dialog input,.vial-image-dialog select{box-sizing:border-box;width:100%;height:34px!important;margin:3px 0 0!important;padding:4px 8px!important}
.vial-image-dialog h3{margin:0 0 10px!important}
.vial-image-dialog .vial-table-properties-actions{display:flex;justify-content:flex-end;gap:8px}
/* Compact image-only layout; media dialogs keep their own field arrangement. */
.vial-editor-shell dialog.vial-image-dialog:not(.vial-media-dialog){width:min(480px,calc(100vw - 24px))!important;padding:12px!important}
.vial-image-dialog:not(.vial-media-dialog)[open]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px}
.vial-image-dialog:not(.vial-media-dialog)>*{grid-column:1/-1;min-width:0}
.vial-image-dialog:not(.vial-media-dialog) label{margin:0!important;font-size:12px}
.vial-image-dialog:not(.vial-media-dialog) label.vial-image-dimension,.vial-image-dialog:not(.vial-media-dialog) label.vial-image-proportions,.vial-image-dialog:not(.vial-media-dialog)>select{grid-column:auto}
.vial-image-dialog:not(.vial-media-dialog) label.vial-image-dimension{align-self:end}
.vial-image-dialog:not(.vial-media-dialog) label.vial-image-proportions{align-self:center}
.vial-image-dialog:not(.vial-media-dialog) input,.vial-image-dialog:not(.vial-media-dialog) select{height:30px!important}
.vial-image-dialog:not(.vial-media-dialog) input[type=checkbox]{height:16px!important}
.vial-image-dialog:not(.vial-media-dialog) p{margin:0;font-size:12px;overflow-wrap:anywhere}
.vial-image-dialog:not(.vial-media-dialog) h3{margin:0 0 2px!important;font-size:16px}
.vial-image-dialog:not(.vial-media-dialog) .vial-image-preview{max-height:96px;margin:0 auto}
.vial-image-dialog label.vial-image-dropzone{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px;border:2px dashed #94a3b8;border-radius:8px;background:#f8fafc;text-align:left}
.vial-image-dialog .vial-image-dropzone.is-dragover{border-color:#0f766e;background:#ccfbf1;outline:2px solid #0f766e;outline-offset:2px}
.vial-image-dialog .vial-image-dropzone button{flex:none;display:block;margin:0!important;padding:6px 12px!important;background:#e2e8f0}
.vial-image-dialog input[type=file][hidden]{display:none!important}
.vial-image-dialog .vial-image-attachment{color:#0f766e;font-weight:600}
.vial-image-dialog .vial-image-field-error{display:block;color:#b91c1c;font-size:11px;line-height:1.25}
.vial-image-dialog .vial-image-field-error:empty{display:none}
.vial-image-dialog input[aria-invalid=true]{border-color:#b91c1c!important}
.vial-image-dialog:not(.vial-media-dialog) .vial-table-properties-actions{padding-top:8px}
@media(max-width:360px){.vial-image-dialog:not(.vial-media-dialog)[open]{grid-template-columns:1fr}}
@media(min-width:641px){
  .vial-editor-shell dialog.vial-image-dialog:not(.vial-media-dialog):has(>.vial-image-preview:not([hidden])){width:min(660px,calc(100vw - 24px))!important;max-width:660px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 160px}
  .vial-image-dialog:not(.vial-media-dialog):has(>.vial-image-preview:not([hidden]))>*{grid-column:1/3}
  .vial-image-dialog:not(.vial-media-dialog):has(>.vial-image-preview:not([hidden]))>h3,.vial-image-dialog:not(.vial-media-dialog):has(>.vial-image-preview:not([hidden]))>.vial-table-properties-actions{grid-column:1/-1}
  .vial-image-dialog:not(.vial-media-dialog):has(>.vial-image-preview:not([hidden]))>label.vial-image-dimension,.vial-image-dialog:not(.vial-media-dialog):has(>.vial-image-preview:not([hidden]))>label.vial-image-proportions{grid-column:1}
  .vial-image-dialog:not(.vial-media-dialog):has(>.vial-image-preview:not([hidden]))>label.vial-image-dimension+label.vial-image-dimension,.vial-image-dialog:not(.vial-media-dialog):has(>.vial-image-preview:not([hidden]))>select{grid-column:2}
  .vial-image-dialog:not(.vial-media-dialog):has(>.vial-image-preview:not([hidden]))>.vial-image-preview{grid-column:3;grid-row:2/span 9;align-self:start;justify-self:center;width:160px;max-height:220px;margin:0}
}
.vial-editor-shell dialog.vial-toolbar-dialog{
  position:fixed!important;inset:0!important;margin:auto!important;
  width:min(640px,calc(100vw - 32px))!important;max-height:calc(100vh - 32px)!important;
  padding:18px!important;box-sizing:border-box;overflow:auto;
  border:1px solid #cbd5e1;border-radius:12px;background:#fff;
}
.vial-toolbar-dialog::backdrop{background:rgba(15,23,42,.35)}
.vial-toolbar-dialog .vial-toolbar-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px}
.vial-toolbar-dialog .vial-toolbar-options label{display:flex!important;align-items:center;gap:8px;padding:5px!important;margin:0!important;font-size:14px;line-height:20px}
.vial-toolbar-dialog .vial-toolbar-options input{width:16px!important;height:16px!important;margin:0!important;flex:0 0 16px}
.vial-toolbar-dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
@media(max-width:600px){.vial-toolbar-dialog .vial-toolbar-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* One compact header for every editor, including fullscreen. Reset inherited
   form-control margins so wrapped tool rows do not acquire extra blank space. */
.vial-editor-shell .vial-menubar{
  padding:3px 8px!important;
  min-height:0!important;
  margin:0!important;
}
.vial-editor-shell .vial-menu-button{
  padding:4px 10px!important;
  min-height:28px!important;
  line-height:20px!important;
  margin:0!important;
}
.vial-editor-shell .vial-toolbar{
  padding:3px 8px!important;
  /* Wrapped buttons must push the content down, not overflow a legacy cap. */
  max-height:none!important;
  height:auto!important;
  row-gap:2px!important;
  column-gap:4px!important;
  margin:0!important;
}
.vial-editor-shell .vial-toolbar .vial-font-control{
  margin:0!important;
  height:34px!important;
  min-height:34px!important;
  box-sizing:border-box!important;
  appearance:none;
  font:14px/20px Arial,Helvetica,sans-serif;
  color:#172033;
  background:#fff;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:4px 10px;
}
.vial-editor-shell .vial-toolbar>.vial-choice-button{min-width:140px;max-width:210px;overflow:hidden;text-overflow:ellipsis}
.vial-editor-shell .vial-font-control:hover{border-color:#0d9488;background:#f0fdfa}
.vial-editor-shell .vial-font-control:focus-visible{outline:2px solid #0d9488;outline-offset:1px}
.vial-editor-shell .vial-toolbar .vial-font-size-control{
  width:100px!important;
  min-width:100px!important;
  padding:4px 8px!important;
}
.vial-toolbar .vial-tb-btn{
  flex:0 0 34px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  padding:0!important;
  margin:0!important;
  font-size:16px!important;
  line-height:1!important;
}
.vial-toolbar .vial-tb-icon{
  display:block;
  width:19px;
  height:19px;
  flex:none;
}

body.course-view .course-drawer-close-row{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  min-height:30px;
  margin-bottom:8px;
}
body.course-view .course-drawer-close{
  width:30px;
  height:30px;
  border:1px solid #cbd5e1;
  border-radius:8px;
  background:#fff;
  color:#334155;
  cursor:pointer;
  font-size:19px;
  line-height:1;
  box-shadow:0 4px 12px rgba(15,23,42,.06);
}
.vial-course-nav h2{
  margin:0 2px 12px;
  font-size:18px;
  line-height:1.2;
  color:#0f172a;
}
body.course-view .course-outline-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.vial-course-nav-group{
  padding:8px;
  background:#fff;
  border:1px solid #dfe7ef;
  border-radius:8px;
  box-shadow:0 1px 3px rgba(15,23,42,.04);
}
.vial-course-nav .vial-course-nav-item{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:38px;
  padding:8px;
  border-radius:6px;
  color:#0b5f5d;
  text-decoration:none;
  overflow-wrap:anywhere;
}
.vial-course-nav .vial-course-nav-item:hover,
.vial-course-nav .vial-course-nav-item:focus-visible,
.vial-course-nav .vial-course-nav-item.active{
  background:#e0f2f1;
  outline:none;
}
body.course-view .course-outline-section{
  border-bottom:1px solid #edf2f6;
  border-radius:0!important;
  font-weight:700;
  color:#0f172a!important;
}
.vial-course-nav .vial-course-nav-item{
  padding-left:10px!important;
  font-size:14px;
}
.vial-course-nav .vial-course-nav-item b{
  font-weight:600;
}
.vial-course-nav .vial-course-nav-item .activity-icon{
  flex:0 0 28px;
  width:28px;
  height:28px;
  border-radius:7px;
}
/* Shared panel frame: stationary heading and one scrolling content region. */
body .right-sidebar.moodle-drawer.vial-panel,
body:is(.course-view,.lesson-page-view,.test-view) .vial-course-nav{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  padding:12px!important;
  height:calc(100dvh - var(--vial-topbar-height))!important;
  box-sizing:border-box!important;
  overflow:hidden!important;
  background:#f7f9fb!important;
}
.vial-panel-content{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding:0 0 8px!important;
  margin:0!important;
  scrollbar-gutter:stable;
  overscroll-behavior:contain;
}
.vial-course-nav-head{flex:0 0 auto;min-height:30px;gap:8px;}
.vial-course-nav-head h2{line-height:1.2!important;}
.vial-course-nav,.vial-panel{font-family:Arial,Helvetica,sans-serif!important;text-shadow:none!important;filter:none!important;}
.vial-course-nav .vial-course-nav-item,
.vial-panel .lesson-page-link,
.vial-panel .lesson-page-link b{font-size:14px!important;font-weight:600!important;line-height:1.45!important;text-shadow:none!important;}
.vial-course-nav-close{flex:0 0 30px;}
.vial-panel-content > :last-child{margin-bottom:0!important;}
.vial-panel .lesson-pages-drawer-block,
.vial-panel .test-nav-sidebar-block{
  margin:0!important;
  padding:8px!important;
  border:1px solid #dfe7ef!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
.vial-panel .lesson-drawer-page-list{display:flex!important;flex-direction:column;gap:0!important;}
.vial-panel .lesson-page-link{
  display:flex!important;align-items:center;gap:9px;
  min-height:38px;box-sizing:border-box;
  padding:8px!important;margin:0!important;
  border:0!important;border-radius:6px!important;
  box-shadow:none!important;background:transparent!important;
  color:#0b5f5d!important;text-decoration:none;font-size:14px!important;
}
.vial-panel .lesson-page-link b{font-weight:600;}
.vial-panel .lesson-page-link > span{border:0!important;background:transparent!important;box-shadow:none!important;}
.vial-panel .lesson-page-link:is(:hover,:focus-visible,.active){background:#e0f2f1!important;}
body:is(.course-view,.test-view) .course-left-tab{
  width:34px;
  height:62px;
  padding:0;
  border:1px solid #d9e0e7;
  border-left:0;
  border-radius:0 28px 28px 0;
  background:#eef2f7;
  color:#64748b;
  box-shadow:2px 2px 10px rgba(15,23,42,.1);
  cursor:pointer;
  font-size:24px;
}
body:is(.course-view,.test-view) .course-outline-shell.course-outline-open .course-left-tab{
  display:none!important;
}

/* Dock the outline beside the canvas on desktop, mirroring the right drawer. */
@media (min-width:1280px){
  body:is(.course-view,.test-view).course-outline-visible{
    --vial-canvas-width:calc(100% - var(--vial-drawer-width) - 48px);
  }
  body:is(.course-view,.test-view).course-outline-visible.with-sidebar:not(.sidebar-hidden){
    --vial-canvas-width:calc(100% - var(--vial-drawer-width) - var(--vial-drawer-width) - 48px);
  }
  body:is(.course-view,.test-view).course-outline-visible > main.wrap.app-layout.moodle-layout,
  body:is(.course-view,.test-view).course-outline-visible > .foot{
    margin-left:calc((100% + var(--vial-drawer-width))/2)!important;
  }
  body:is(.course-view,.test-view).course-outline-visible.with-sidebar:not(.sidebar-hidden) > main.wrap.app-layout.moodle-layout,
  body:is(.course-view,.test-view).course-outline-visible.with-sidebar:not(.sidebar-hidden) > .foot{
    margin-left:50%!important;
  }
  body.lesson-page-view.lesson-nav-visible{
    --vial-canvas-width:calc(100% - var(--vial-drawer-width) - 48px);
  }
  body.lesson-page-view.lesson-nav-visible.with-sidebar:not(.sidebar-hidden){
    --vial-canvas-width:calc(100% - var(--vial-drawer-width) - var(--vial-drawer-width) - 48px);
  }
  body.lesson-page-view.lesson-nav-visible > main.wrap.app-layout.moodle-layout,
  body.lesson-page-view.lesson-nav-visible > .foot{
    margin-left:calc((100% + var(--vial-drawer-width))/2)!important;
  }
  body.lesson-page-view.lesson-nav-visible.with-sidebar:not(.sidebar-hidden) > main.wrap.app-layout.moodle-layout,
  body.lesson-page-view.lesson-nav-visible.with-sidebar:not(.sidebar-hidden) > .foot{
    margin-left:50%!important;
  }
}

/* The left and right collapsed drawer handles share one visible surface. */
body .sidebar-tab,
body:is(.course-view,.test-view) .course-left-tab,
body.lesson-page-view .lesson-left-tab,
body.test-view .course-left-tab{
  background:#dce7ef!important;
  color:#334155!important;
  border-color:#9eafbd!important;
  box-shadow:0 3px 14px rgba(15,23,42,.2)!important;
}
body .sidebar-tab:hover,
body:is(.course-view,.test-view) .course-left-tab:hover,
body.lesson-page-view .lesson-left-tab:hover,
body.test-view .course-left-tab:hover,
body .sidebar-tab:focus-visible,
body:is(.course-view,.test-view) .course-left-tab:focus-visible,
body.lesson-page-view .lesson-left-tab:focus-visible,
body.test-view .course-left-tab:focus-visible{
  background:#c9dce8!important;
  color:#0f172a!important;
  outline:2px solid #0d9488!important;
  outline-offset:2px!important;
}
/* One management navigation for all pages of the same learning workspace. */
body:not(.editing-mode) .learning-navigation:not(.learning-editor-context){display:none!important;}
.learning-navigation{margin:0 0 16px;}

/* Shared action-menu rows: native form buttons must match navigation links. */
:is(.inline-menu>div,.bank-dropdown>div,.dropdown-menu,.user-menu-dropdown) form{margin:0;padding:0;}
:is(.inline-menu>div,.bank-dropdown>div,.dropdown-menu,.user-menu-dropdown) :is(a,button){
  display:flex;align-items:center;gap:8px;width:100%;min-height:40px;
  box-sizing:border-box;margin:0;padding:8px 10px;border:0;border-radius:5px;
  background:transparent;color:#0f172a;font-family:inherit;font-size:1rem;
  font-weight:400;line-height:1.5;text-align:left;text-decoration:none;cursor:pointer;
}
:is(.inline-menu>div,.bank-dropdown>div,.dropdown-menu,.user-menu-dropdown) :is(a,button):hover{background:#f1f5f9;color:#0f172a;}
:is(.inline-menu>div,.bank-dropdown>div,.dropdown-menu,.user-menu-dropdown) :is(a,button):focus-visible{outline:2px solid #0d9488;outline-offset:-2px;background:#f0fdfa;}
.inline-menu:focus-within>div{display:block;}
.vial-zone-author{position:relative;width:fit-content;max-width:100%;touch-action:none;cursor:crosshair}
.vial-zone-author>img{display:block;max-width:100%;max-height:480px;user-select:none}
.vial-zone-author>img[hidden]{display:none}
.vial-zone-overlay{position:absolute;inset:0;pointer-events:none}
.vial-zone-box{position:absolute;box-sizing:border-box;border:2px solid #0d9488;background:#0d948826;color:#062f35;font-weight:700;padding:2px}
.vial-zone-drawing{border-style:dashed;background:#0d948814}
.vial-zone-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.vial-font-size-wrap{display:flex;align-items:center;gap:0}
.vial-font-size-wrap input{border-radius:8px 0 0 8px!important}
/* Grid editors must shrink inside question fieldsets, including below 900px. */
.question-editor fieldset{min-width:0;min-inline-size:0}
.question-editor .answer-row{grid-template-columns:32px 30px minmax(0,1fr)}
.question-editor .answer-row>.vial-editor-shell{min-width:0;max-width:100%;width:100%}
@media(max-width:900px){.question-editor .answer-row{grid-template-columns:24px 24px minmax(0,1fr)}}
.vial-font-size-wrap button{border-radius:0 8px 8px 0!important;min-width:28px!important;width:28px!important}
.vial-choice-button{white-space:nowrap;text-align:left;cursor:pointer}
.vial-editor-shell .vial-font-menu{min-width:180px;width:max-content;padding:6px!important}
.vial-editor-shell .vial-font-menu[data-choice="fontSize"]{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;width:320px;min-width:0;max-width:calc(100vw - 16px)}
.vial-editor-shell .vial-font-menu[data-choice="fontName"]{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;width:360px;min-width:0;max-width:calc(100vw - 16px)}
.vial-editor-shell .vial-font-menu[data-choice]>.vial-menu-item{width:100%;min-width:0;box-sizing:border-box}
.vial-editor-shell .vial-font-menu[data-choice="fontSize"]>.vial-menu-item{text-align:center;padding:4px!important}
.vial-editor-shell .vial-font-size-wrap>.vial-choice-button{text-align:center;padding:0}
.vial-editor-shell dialog.vial-formula-dialog{position:fixed!important;inset:0!important;margin:auto!important;transform:none!important;width:min(460px,calc(100vw - 32px))!important;max-width:calc(100vw - 32px)!important;max-height:calc(100dvh - 32px)!important;height:max-content!important;padding:16px!important;background:#fff;border:1px solid #cbd5e1;border-radius:12px;box-shadow:0 16px 48px #0003;overflow:auto!important;box-sizing:border-box}
.vial-formula-dialog::backdrop{background:#0f172a55}
.vial-formula-settings{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.vial-formula-settings label{display:grid;gap:4px;font-size:13px}
.vial-formula-dialog button{font:inherit;padding:5px 9px;border:1px solid #cbd5e1;border-radius:6px;background:#f8fafc;color:#0f172a;cursor:pointer;margin-right:4px}
.vial-formula-dialog button:disabled{opacity:.5;cursor:default}
.vial-formula-dialog p{font-size:13px;margin:8px 0}
/* Reader controls stay centered independently of the page counter. */
body.lesson-page-read .lesson-reader-nav-top{position:relative!important}
body.lesson-page-read .lesson-page-position{position:absolute;right:0;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:13px}
body.lesson-page-read .lesson-reader-breadcrumbs{display:flex;align-items:center;gap:12px;min-width:0}
body.lesson-page-read .lesson-breadcrumb-trail{flex:1;min-width:0;overflow-wrap:anywhere}
body.lesson-page-read .lesson-page-position-compact{display:none;flex:none;white-space:nowrap;font-size:13px}
body.lesson-page-read.lesson-reader-counter-compact .lesson-page-position{visibility:hidden}
body.lesson-page-read.lesson-reader-counter-compact .lesson-page-position-compact{display:inline-block}
@media(max-width:680px){body.lesson-page-read:not(.lesson-reader-layout-ready) .lesson-page-position{visibility:hidden}body.lesson-page-read:not(.lesson-reader-layout-ready) .lesson-page-position-compact{display:inline-block}}
body.lesson-page-read .lesson-reader-card{padding:14px 20px!important;margin-bottom:8px!important}
body.lesson-page-read .lesson-reader-card .lesson-content>:first-child{margin-block-start:0}
body.lesson-page-read .lesson-reader-card .lesson-content>:last-child{margin-block-end:0}
body.lesson-page-read .lesson-reader-nav{margin-top:8px!important;margin-bottom:8px!important}
body.lesson-page-read>.wrap{margin-bottom:8px!important}
body.lesson-page-read>.foot{margin-top:8px!important;padding-top:8px!important;padding-bottom:16px!important}
@media(max-width:540px){body.lesson-page-read .lesson-reader-card{padding:12px 14px!important}}

.vial-editor-shell .vial-submenu.open.vial-font-submenu{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
  box-sizing:border-box;width:350px;max-width:calc(100vw - 16px)
}
.vial-editor-shell .vial-submenu.open.vial-submenu-inline{
  position:static!important;box-sizing:border-box;width:100%;min-width:0;
  max-width:100%;margin-block:3px 5px;box-shadow:none!important
}
.vial-editor-shell .vial-submenu-inline .vial-menu-item{
  min-width:0;white-space:normal;overflow-wrap:anywhere
}