/**
 * Charta Learning Center 3.5.2 unified learner/teacher experience layer.
 */
:root{
  --clx-primary:#2563eb;
  --clx-primary-hover:#1d4ed8;
  --clx-primary-soft:#eaf2ff;
  --clx-navy:#172033;
  --clx-text:#253247;
  --clx-muted:#68788d;
  --clx-line:#dce5ef;
  --clx-line-strong:#c8d6e5;
  --clx-page:#f5f7fb;
  --clx-surface:#fff;
  --clx-soft:#f8fafc;
  --clx-success:#16815d;
  --clx-warning:#ac6900;
  --clx-danger:#c2414f;
  --clx-radius-sm:10px;
  --clx-radius:16px;
  --clx-radius-lg:22px;
  --clx-shadow-sm:0 5px 16px rgba(28,48,73,.055);
  --clx-shadow:0 14px 38px rgba(28,48,73,.075);
  --clx-shadow-hover:0 18px 44px rgba(28,48,73,.11);
  --clx-focus:0 0 0 3px rgba(37,99,235,.22);
}

body:has(.clc-center),body:has(.clc-role-portal),body:has(.clc-case-gallery),body:has(.clc-content-hub){
  background:var(--clx-page)!important;
}
.clc-center,.clc-role-portal,.clc-case-gallery,.clc-content-hub,.clc-login-required{
  color:var(--clx-text)!important;
  line-height:1.65;
}
.clc-center *,.clc-role-portal *,.clc-case-gallery *,.clc-content-hub *{min-width:0;}

/* Unified interactive controls. */
.clc-center a,.clc-role-portal a,.clc-case-gallery a,.clc-content-hub a{text-underline-offset:3px;}
.clc-center :is(button,a,input,select,textarea,summary):focus-visible,
.clc-role-portal :is(button,a,input,select,textarea,summary):focus-visible,
.clc-case-gallery :is(button,a,input,select,textarea,summary):focus-visible{
  outline:2px solid var(--clx-primary)!important;
  outline-offset:3px!important;
  box-shadow:var(--clx-focus)!important;
}
.clc-center input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.clc-center select,.clc-center textarea,
.clc-role-portal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.clc-role-portal select,.clc-role-portal textarea{
  min-height:44px!important;
  border:1px solid var(--clx-line-strong)!important;
  border-radius:var(--clx-radius-sm)!important;
  background:#fff!important;
  color:var(--clx-text)!important;
  font:inherit!important;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease!important;
}
.clc-center textarea,.clc-role-portal textarea{min-height:112px!important;resize:vertical;}
.clc-center input:focus,.clc-center select:focus,.clc-center textarea:focus,
.clc-role-portal input:focus,.clc-role-portal select:focus,.clc-role-portal textarea:focus{
  border-color:var(--clx-primary)!important;
  box-shadow:var(--clx-focus)!important;
}
.clc-center label,.clc-role-portal label{color:#40536b;font-weight:700;}
.clc-center label small,.clc-role-portal label small,.clc-description{color:var(--clx-muted)!important;font-weight:500;}
.clc-button,.clc-center button[type="submit"],.clc-role-portal button[type="submit"]{
  min-height:44px!important;
  padding:10px 17px!important;
  border-radius:11px!important;
  background:var(--clx-primary)!important;
  box-shadow:0 7px 18px rgba(37,99,235,.18)!important;
  color:#fff!important;
  font-weight:780!important;
  transition:background-color .18s ease,box-shadow .18s ease,transform .18s ease!important;
}
.clc-button:hover,.clc-center button[type="submit"]:hover,.clc-role-portal button[type="submit"]:hover{
  background:var(--clx-primary-hover)!important;
  box-shadow:0 10px 24px rgba(37,99,235,.24)!important;
  transform:translateY(-1px)!important;
}
.clc-button.is-secondary,.clc-button.is-ghost{
  border:1px solid var(--clx-line-strong)!important;
  background:#fff!important;
  box-shadow:none!important;
  color:#355270!important;
}
.clc-button.is-secondary:hover,.clc-button.is-ghost:hover{border-color:#adc4e0!important;background:#f3f7fd!important;color:#174f99!important;}

/* Page containers and headers. */
.clc-center{width:min(calc(100% - 24px),1680px)!important;max-width:1680px!important;padding-top:20px!important;padding-bottom:48px!important;}
.clc-learning-app,.clc-teacher-center,.clc-role-portal{width:100%;}
.clc-app-header,.clc-teacher-header,.clc-role-hero,.clc-role-page-head{
  border-radius:var(--clx-radius-lg)!important;
  box-shadow:0 18px 44px rgba(22,47,80,.14)!important;
}
.clc-app-header,.clc-teacher-header{
  min-height:0!important;
  padding:clamp(22px,3vw,34px)!important;
}
.clc-app-header h1,.clc-teacher-header h1,.clc-role-hero h1{
  font-size:clamp(26px,3vw,38px)!important;
  line-height:1.25!important;
  text-wrap:balance;
}
.clc-profile-meta{gap:7px!important;margin-top:11px!important;}
.clc-profile-meta > span{min-height:28px!important;padding:5px 10px!important;}

/* Core application layout. */
.clc-app-shell{
  grid-template-columns:226px minmax(0,1fr) 318px!important;
  gap:18px!important;
  align-items:start!important;
  margin-top:22px!important;
}
.clc-teacher-shell,.clc-role-shell{
  grid-template-columns:minmax(0,1fr) 318px!important;
  gap:18px!important;
  align-items:start!important;
}
.clc-app-main,.clc-teacher-main,.clc-role-body{min-width:0;}
.clc-app-sidebar,.clc-app-rail,.clc-teacher-rail{position:sticky;top:18px;}
.clc-app-sidebar{
  padding:14px!important;
  border:1px solid var(--clx-line)!important;
  border-radius:var(--clx-radius-lg)!important;
  background:#fff!important;
  box-shadow:var(--clx-shadow-sm)!important;
}
.clc-app-nav{gap:6px!important;}
.clc-app-nav > a{
  min-height:48px!important;
  padding:7px 10px!important;
  border-radius:12px!important;
  color:#405872!important;
  font-size:14px!important;
  font-weight:760!important;
}
.clc-app-nav > a:hover{background:#edf4ff!important;color:#174f99!important;transform:none!important;}
.clc-app-nav > a.is-active{
  background:linear-gradient(135deg,#2e70df,#2259bb)!important;
  color:#fff!important;
  box-shadow:0 8px 18px rgba(34,89,187,.2)!important;
}
.clc-nav-icon{flex:0 0 34px!important;width:34px!important;height:34px!important;border-radius:10px!important;}

/* Cards: one visual language for learner and teacher pages. */
.clc-panel,.clc-surface-card,.clc-center-card,.clc-dashboard-card,.clc-role-panel,.clc-work-section,
.clc-section,.clc-personal-section,.clc-content-card,.clc-library-card,.clc-case-card{
  border:1px solid var(--clx-line)!important;
  border-radius:var(--clx-radius)!important;
  background:var(--clx-surface)!important;
  box-shadow:var(--clx-shadow-sm)!important;
}
.clc-panel,.clc-surface-card,.clc-role-panel,.clc-work-section{padding:clamp(18px,2.2vw,26px)!important;}
.clc-panel:hover,.clc-dashboard-card:hover,.clc-role-card:hover,.clc-case-card:hover,.clc-library-card:hover{
  border-color:#bed0e4!important;
  box-shadow:var(--clx-shadow-hover)!important;
}
.clc-surface-head,.clc-panel-head,.clc-section-heading,.clc-work-section__head{
  gap:16px!important;
  margin-bottom:18px!important;
}
.clc-surface-head h2,.clc-surface-head h3,.clc-panel-head h2,.clc-panel-head h3,.clc-section-heading h2,.clc-section-heading h3{
  margin:4px 0 0!important;
  color:var(--clx-navy)!important;
  line-height:1.35!important;
  text-wrap:balance;
}
.clc-surface-head span,.clc-panel-head span,.clc-section-heading span,.clc-work-section__head span{
  color:#2f67b5!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.12em!important;
}
.clc-empty{
  padding:26px!important;
  border:1px dashed var(--clx-line-strong)!important;
  border-radius:14px!important;
  background:var(--clx-soft)!important;
  color:var(--clx-muted)!important;
}
.clc-empty.is-compact{padding:18px!important;}

/* Metrics, badges and notices. */
.clc-stat-grid,.clc-role-metrics,.clc-data-summary{
  gap:14px!important;
}
.clc-stat,.clc-role-metrics article,.clc-data-summary > div,.clc-data-summary > a{
  border:1px solid var(--clx-line)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#fff,#f8fafc)!important;
  box-shadow:none!important;
}
.clc-stat strong,.clc-role-metrics strong,.clc-data-summary strong{color:#183b6b!important;font-variant-numeric:tabular-nums;}
.clc-notice,.notice.clc-notice{
  padding:14px 16px!important;
  border:1px solid #cbdcf3!important;
  border-left:4px solid var(--clx-primary)!important;
  border-radius:12px!important;
  background:#f3f7ff!important;
  color:#36516e!important;
  box-shadow:none!important;
}
.clc-notice.is-success{border-color:#b8dfcf!important;border-left-color:var(--clx-success)!important;background:#f0faf6!important;color:#176849!important;}
.clc-notice.is-warning{border-color:#f1d7aa!important;border-left-color:var(--clx-warning)!important;background:#fff8eb!important;color:#82500a!important;}
.clc-notice.is-error{border-color:#efc4c9!important;border-left-color:var(--clx-danger)!important;background:#fff4f5!important;color:#96303b!important;}
.clc-status,.clc-review-record-status{font-weight:800!important;}

/* Tabs and filters remain reachable on small screens. */
.clc-tabs,.clc-filter-tabs,.clc-review-filter-tabs,.clc-role-nav,.clc-assignment-scope-tabs,.clc-leaderboard-group-tabs{
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch;
}
.clc-tabs a,.clc-filter-tabs a,.clc-review-filter-tabs a,.clc-role-nav a,.clc-assignment-scope-tabs a{
  min-height:42px!important;
  white-space:nowrap;
}

/* Forms and upload steps. */
.clc-form-grid{gap:16px!important;}
.clc-form-step,.clc-review-form-step{
  border:1px solid var(--clx-line)!important;
  border-radius:14px!important;
  background:#fbfcfe!important;
}
.clc-upload-zone{
  min-height:132px!important;
  border:1.5px dashed #a9c2df!important;
  border-radius:14px!important;
  background:#f5f9ff!important;
  color:#365a82!important;
}
.clc-upload-zone:hover{border-color:var(--clx-primary)!important;background:#edf4ff!important;}
.clc-file-preview{gap:10px!important;}

/* Data tables: accessible horizontal scrolling rather than compressed columns. */
.clc-data-table-wrap,.clc-table-wrap,.clc-admin-table-wrap,.clc-opsdiag-table{
  overflow-x:auto!important;
  max-width:100%!important;
  border:1px solid var(--clx-line)!important;
  border-radius:12px!important;
  background:#fff!important;
  -webkit-overflow-scrolling:touch;
}
.clc-data-table-wrap table,.clc-table-wrap table,.clc-admin-table-wrap table,.clc-opsdiag-table table{min-width:680px!important;margin:0!important;}
.clc-center table th,.clc-center table td,.clc-role-portal table th,.clc-role-portal table td{
  padding:12px 14px!important;
  border-color:var(--clx-line)!important;
  vertical-align:middle!important;
}
.clc-center table th,.clc-role-portal table th{background:#f2f6fb!important;color:#30445f!important;font-weight:800!important;}
.clc-center table tbody tr:nth-child(even),.clc-role-portal table tbody tr:nth-child(even){background:#fbfcfe!important;}

/* Assignment, review and case content. */
.clc-assignment-card,.clc-assignment-record,.clc-front-review-list > a,.clc-teacher-queue > a{
  border-color:var(--clx-line)!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:none!important;
}
.clc-assignment-card:hover,.clc-assignment-record:hover,.clc-front-review-list > a:hover,.clc-teacher-queue > a:hover{
  border-color:#b8cde5!important;
  background:#fafdff!important;
  box-shadow:var(--clx-shadow-sm)!important;
  transform:translateY(-1px)!important;
}
.clc-review-content-block{
  border:1px solid var(--clx-line)!important;
  border-radius:14px!important;
  background:#fff!important;
}
.clc-media-gallery img,.clc-case-detail-image,.clc-content-files img{border-radius:12px!important;}
.clc-media-gallery video,.clc-content-files video,.clc-showcase-external-video iframe{border-radius:12px!important;}

/* Profile and personal space. */
.clc-profile-layout{gap:22px!important;}
.clc-profile-privacy{padding:18px!important;border:1px solid var(--clx-line)!important;border-radius:14px!important;background:#f8fafc!important;}
.clc-profile-privacy h3{color:var(--clx-navy)!important;}

/* 3.5.2: restore the spacious learner and teacher workbench. */
.clc-learning-app,.clc-teacher-front,.clc-role-portal{
  width:100%!important;
  max-width:none!important;
}
.clc-app-workspace,.clc-teacher-main,.clc-role-body{max-width:none!important;}

@media(max-width:1280px){
  .clc-app-shell{grid-template-columns:210px minmax(0,1fr)!important;}
  .clc-app-rail{position:static!important;grid-column:1/-1!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;}
  .clc-teacher-shell,.clc-role-shell{grid-template-columns:1fr!important;}
  .clc-teacher-rail,.clc-role-rail{position:static!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;margin-top:20px!important;}
}

@media(max-width:980px){
  .clc-center{width:calc(100% - 20px)!important;max-width:none!important;}
  .clc-app-shell,.clc-teacher-shell,.clc-role-shell{display:block!important;}
  .clc-app-sidebar,.clc-app-rail,.clc-teacher-rail{position:static!important;}
  .clc-app-sidebar{margin-bottom:18px!important;}
  .clc-app-nav{display:flex!important;overflow-x:auto!important;padding-bottom:4px!important;scrollbar-width:thin;}
  .clc-app-nav > a{flex:0 0 auto!important;min-width:132px!important;}
  .clc-app-rail,.clc-teacher-rail{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;margin-top:20px!important;}
  .clc-app-header,.clc-teacher-header,.clc-role-hero{align-items:flex-start!important;flex-direction:column!important;}
  .clc-app-header-actions,.clc-teacher-header-actions{width:100%!important;justify-content:flex-start!important;flex-wrap:wrap!important;}
}

@media(max-width:700px){
  .clc-center{width:calc(100% - 16px)!important;padding-top:8px!important;padding-bottom:82px!important;}
  .clc-app-header,.clc-teacher-header,.clc-role-hero,.clc-role-page-head{padding:20px 17px!important;border-radius:17px!important;}
  .clc-app-header h1,.clc-teacher-header h1,.clc-role-hero h1{font-size:25px!important;}
  .clc-profile-block{gap:12px!important;align-items:flex-start!important;}
  .clc-profile-avatar,.clc-profile-avatar img{width:62px!important;height:62px!important;flex-basis:62px!important;}
  .clc-app-sidebar{display:none!important;}
  .clc-app-rail,.clc-teacher-rail{grid-template-columns:1fr!important;}
  .clc-panel,.clc-surface-card,.clc-role-panel,.clc-work-section{padding:16px!important;border-radius:15px!important;}
  .clc-surface-head,.clc-panel-head,.clc-section-heading,.clc-work-section__head{align-items:flex-start!important;flex-direction:column!important;gap:8px!important;}
  .clc-form-grid{grid-template-columns:1fr!important;gap:13px!important;}
  .clc-stat-grid,.clc-role-metrics,.clc-data-summary{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
  .clc-button,.clc-center button[type="submit"],.clc-role-portal button[type="submit"]{min-height:46px!important;}
  .clc-front-review-actions{display:grid!important;grid-template-columns:1fr!important;}
  .clc-front-review-actions .clc-button{width:100%!important;}
  .clc-student-case-gallery,.clc-media-gallery,.clc-content-file-grid{grid-template-columns:1fr!important;}
}

@media(max-width:460px){
  .clc-stat-grid,.clc-role-metrics,.clc-data-summary{grid-template-columns:1fr!important;}
  .clc-app-header-actions,.clc-teacher-header-actions{display:grid!important;grid-template-columns:1fr!important;}
  .clc-app-header-actions a,.clc-app-header-actions button,.clc-teacher-header-actions a,.clc-teacher-header-actions button{width:100%!important;}
  .clc-profile-meta{align-items:flex-start!important;}
  .clc-profile-meta > span{max-width:100%!important;white-space:normal!important;}
}

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

/* 3.5.1: separate prominent class group chat from private messages. */
.clc-private-message-entry{
 display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 22px;padding:22px 24px;border:1px solid #d7e4f6;border-radius:18px;background:linear-gradient(135deg,#f6faff,#fff);box-shadow:0 12px 30px rgba(35,71,123,.07)
}
.clc-private-message-entry>div{min-width:0}
.clc-private-message-entry span{display:block;margin-bottom:6px;color:#2364d8;font-size:.75rem;font-weight:800;letter-spacing:.14em}
.clc-private-message-entry h2{margin:0 0 6px;color:#18304d;font-size:1.35rem;line-height:1.35}
.clc-private-message-entry p{margin:0;color:#607087;line-height:1.7}
.clc-private-message-entry>a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:12px;background:#1f63e9;color:#fff!important;font-weight:750;text-decoration:none!important;white-space:nowrap;box-shadow:0 10px 24px rgba(31,99,233,.22)}
.clc-private-message-entry>a:hover{background:#174fc1;color:#fff!important;transform:translateY(-1px)}
.clc-private-message-entry>a em{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:#fff;color:#1f63e9;font-style:normal;font-size:.75rem}
.clc-app-nav a[href*="group_chat"],.clc-workspace-nav .is-group-chat,.clc-role-nav .is-group-chat,.clc-app-header-actions .is-group-chat,.clc-workspace-actions .is-group-chat{border-color:#a9c8ff!important;background:linear-gradient(135deg,#eaf3ff,#f5f9ff)!important;color:#1456bd!important;font-weight:750!important}
.clc-app-nav a[href*="group_chat"] .clc-nav-icon{background:#dceaff!important;color:#1456bd!important}
.clc-app-nav a[href*="group_chat"].is-active,.clc-workspace-nav .is-group-chat.is-active{background:linear-gradient(135deg,#1e63e9,#5a5ce6)!important;color:#fff!important;box-shadow:0 10px 22px rgba(34,91,217,.22)!important}
.clc-app-nav a[href*="group_chat"].is-active .clc-nav-icon{background:rgba(255,255,255,.18)!important;color:#fff!important}
.clc-teacher-front[data-teacher-view="group_chat"] .clc-teacher-shell{grid-template-columns:minmax(0,1fr)!important}
.clc-teacher-front[data-teacher-view="group_chat"] .clc-teacher-rail{display:none!important}
.clc-teacher-front[data-teacher-view="group_chat"] .clc-teacher-main{max-width:none!important}
.clc-message-center.is-mode-group .clc-message-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.clc-message-center.is-mode-private .clc-message-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.clc-message-center.is-mode-group .clc-chat-sidebar-tabs{display:none!important}
.clc-message-center.is-mode-group .clc-chat-sidebar{padding-top:10px}
@media(max-width:782px){
 .clc-private-message-entry{align-items:flex-start;flex-direction:column;padding:18px;border-radius:15px}
 .clc-private-message-entry>a{width:100%}
 .clc-message-center.is-mode-group .clc-message-summary,.clc-message-center.is-mode-private .clc-message-summary{grid-template-columns:1fr 1fr}
}

/* 3.5.3 — widen learner/teacher workspaces and repair personal-space typography */
.clc-center{
  width:min(calc(100% - 24px),1820px)!important;
  max-width:1820px!important;
}
.clc-app-shell{
  grid-template-columns:248px minmax(0,1fr) 340px!important;
  gap:22px!important;
}
.clc-teacher-shell,.clc-role-shell{
  grid-template-columns:minmax(0,1fr) 340px!important;
  gap:22px!important;
}
.clc-app-sidebar{padding:16px!important;}
.clc-app-nav> a{min-height:50px!important;padding:8px 12px!important;}
.clc-app-nav > a span,.clc-app-nav > a strong{line-height:1.3!important;}
.clc-learning-app[data-clc-tab="space"] .clc-app-shell,
.clc-learning-app[data-clc-tab="profile"] .clc-app-shell{
  grid-template-columns:248px minmax(0,1fr)!important;
}
.clc-learning-app[data-clc-tab="space"] .clc-app-rail,
.clc-learning-app[data-clc-tab="profile"] .clc-app-rail,
.clc-teacher-front[data-teacher-view="profile"] .clc-teacher-rail{
  display:none!important;
}
.clc-learning-app[data-clc-tab="space"] .clc-personal-space,
.clc-learning-app[data-clc-tab="space"] .clc-app-main,
.clc-teacher-front[data-teacher-view="profile"] .clc-teacher-main{
  max-width:none!important;
}
.clc-personal-space{gap:22px!important;}
.clc-personal-space>header.clc-personal-hero{
  grid-template-columns:minmax(360px,1.25fr) minmax(360px,.95fr) auto!important;
  align-items:center!important;
  gap:22px!important;
  padding:30px 32px!important;
}
.clc-personal-hero__identity{grid-template-columns:104px minmax(0,1fr)!important;gap:18px!important;}
.clc-personal-hero__identity>img{width:104px!important;height:104px!important;border-radius:28px!important;}
.clc-personal-hero__identity h1{font-size:clamp(30px,2.4vw,42px)!important;line-height:1.08!important;}
.clc-personal-hero__identity p{font-size:14px!important;line-height:1.6!important;}
.clc-personal-hero__metrics{
  grid-template-columns:repeat(3,minmax(118px,1fr))!important;
  gap:12px!important;
}
.clc-personal-hero__metrics>div{
  min-width:0!important;
  min-height:94px!important;
  padding:14px 12px!important;
  border-radius:18px!important;
}
.clc-personal-hero__metrics strong{
  font-size:clamp(24px,2vw,32px)!important;
  line-height:1.05!important;
  word-break:break-word!important;
}
.clc-personal-hero__metrics span{
  margin-top:7px!important;
  font-size:11px!important;
  line-height:1.35!important;
  text-align:center!important;
  white-space:normal!important;
}
.clc-personal-hero__actions{gap:10px!important;min-width:170px!important;}
.clc-personal-space__grid{
  grid-template-columns:minmax(0,1.55fr) minmax(320px,.78fr)!important;
  gap:22px!important;
}
.clc-personal-space__grid>main{gap:22px!important;}
.clc-personal-space__grid>main>section,.clc-personal-space__grid>aside>section,.clc-contact-private-note{
  padding:24px!important;
  border-radius:22px!important;
}
.clc-personal-identity-card dl{grid-template-columns:108px minmax(0,1fr)!important;row-gap:12px!important;}
.clc-personal-works .clc-library-grid.is-compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;}
@media(max-width:1540px){
  .clc-center{width:min(calc(100% - 20px),1740px)!important;max-width:1740px!important;}
  .clc-app-shell{grid-template-columns:236px minmax(0,1fr) 318px!important;gap:18px!important;}
  .clc-teacher-shell,.clc-role-shell{grid-template-columns:minmax(0,1fr) 318px!important;gap:18px!important;}
  .clc-personal-space>header.clc-personal-hero{grid-template-columns:minmax(320px,1fr) minmax(320px,.9fr) auto!important;}
}
@media(max-width:1320px){
  .clc-learning-app[data-clc-tab="space"] .clc-app-shell,
  .clc-learning-app[data-clc-tab="profile"] .clc-app-shell{grid-template-columns:220px minmax(0,1fr)!important;}
  .clc-personal-space>header.clc-personal-hero{grid-template-columns:1fr auto!important;}
  .clc-personal-hero__actions{grid-column:1/-1!important;display:flex!important;flex-wrap:wrap!important;justify-content:flex-start!important;}
  .clc-personal-hero__actions>*{flex:0 0 auto!important;}
}
@media(max-width:1180px){
  .clc-personal-space__grid{grid-template-columns:1fr!important;}
  .clc-personal-works .clc-library-grid.is-compact{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
}
@media(max-width:980px){
  .clc-center{width:calc(100% - 16px)!important;max-width:none!important;}
  .clc-app-shell,.clc-teacher-shell,.clc-role-shell{display:block!important;}
}
@media(max-width:700px){
  .clc-personal-space>header.clc-personal-hero{grid-template-columns:1fr!important;padding:22px 18px!important;}
  .clc-personal-hero__identity{grid-template-columns:82px minmax(0,1fr)!important;gap:14px!important;}
  .clc-personal-hero__identity>img{width:82px!important;height:82px!important;border-radius:24px!important;}
  .clc-personal-hero__metrics{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;}
  .clc-personal-hero__metrics>div{min-height:78px!important;padding:10px 8px!important;}
  .clc-personal-hero__metrics strong{font-size:20px!important;}
  .clc-personal-hero__metrics span{font-size:10px!important;}
  .clc-personal-works .clc-library-grid.is-compact{grid-template-columns:1fr!important;}
}

/* 3.5.6 — learner center content hierarchy, spacing and responsive polish */
.clc-app-workspace{
  display:grid!important;
  align-content:start!important;
  gap:20px!important;
}
.clc-app-workspace>*{min-width:0!important;}
.clc-home-dashboard{display:grid!important;gap:20px!important;}

/* Keep the middle workspace comfortable on common 1366–1440px screens. */
@media(max-width:1600px) and (min-width:981px){
  .clc-app-shell{
    grid-template-columns:230px minmax(0,1fr)!important;
    gap:20px!important;
  }
  .clc-app-rail{
    position:static!important;
    grid-column:2!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
    margin-top:0!important;
  }
  .clc-app-rail>*{min-width:0!important;}
}
@media(max-width:1180px) and (min-width:981px){
  .clc-app-shell{grid-template-columns:212px minmax(0,1fr)!important;gap:16px!important;}
  .clc-app-rail{grid-template-columns:1fr 1fr!important;}
}

/* Shared page heading card for learner subpages. */
.clc-learning-app[data-clc-tab="growth"] .clc-growth-page,
.clc-learning-app[data-clc-tab="profile"] .clc-profile-page{
  display:grid!important;
  gap:18px!important;
}
.clc-learning-app[data-clc-tab="growth"] .clc-growth-page>.clc-section-heading,
.clc-learning-app[data-clc-tab="profile"] .clc-profile-page>.clc-section-heading{
  margin:0!important;
  padding:24px 26px!important;
  border:1px solid #dbe5f0!important;
  border-radius:20px!important;
  background:linear-gradient(135deg,#ffffff 0%,#f7faff 100%)!important;
  box-shadow:0 10px 30px rgba(28,48,73,.06)!important;
}
.clc-learning-app[data-clc-tab="growth"] .clc-section-heading h2,
.clc-learning-app[data-clc-tab="profile"] .clc-section-heading h2{
  margin:6px 0 8px!important;
  font-size:clamp(25px,2.2vw,34px)!important;
  line-height:1.24!important;
}
.clc-learning-app[data-clc-tab="growth"] .clc-section-heading p,
.clc-learning-app[data-clc-tab="profile"] .clc-section-heading p{
  max-width:760px!important;
  line-height:1.75!important;
}

/* Assignment page: one clear outer frame, then filters and cards. */
.clc-learning-app[data-clc-tab="assignments"] .clc-section{
  padding:26px!important;
  border:1px solid #dbe5f0!important;
  border-radius:22px!important;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
  box-shadow:0 12px 34px rgba(28,48,73,.065)!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-section-title{
  display:flex!important;
  align-items:flex-end!important;
  justify-content:space-between!important;
  gap:20px!important;
  margin:0!important;
  padding:0 0 20px!important;
  border-bottom:1px solid #e1e8f0!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-section-title h2{
  margin:7px 0 0!important;
  font-size:clamp(26px,2.25vw,34px)!important;
  line-height:1.2!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-section-title>p{
  max-width:520px!important;
  margin:0!important;
  color:#65758a!important;
  line-height:1.65!important;
  text-align:right!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-policy-banner{
  margin:18px 0 14px!important;
  padding:16px 18px!important;
  border:1px solid #efd08f!important;
  border-radius:15px!important;
  background:#fffaf0!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-assignment-track-filter{
  margin:0 0 12px!important;
  padding:10px!important;
  border:1px solid #dfe7f0!important;
  border-radius:14px!important;
  background:#f7f9fc!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-task-toolbar{
  margin:0!important;
  padding:7px!important;
  border:1px solid #dfe7f0!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 5px 15px rgba(28,48,73,.035)!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-task-toolbar button{
  min-height:40px!important;
  padding:8px 16px!important;
  border-radius:10px!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-assignment-grid{
  gap:16px!important;
  margin-top:18px!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-assignment-card{
  padding:21px!important;
  border:1px solid #dce5ef!important;
  border-top-width:4px!important;
  border-radius:17px!important;
  box-shadow:0 8px 22px rgba(28,48,73,.045)!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-assignment-card h3{
  margin:14px 0 10px!important;
  font-size:clamp(19px,1.5vw,24px)!important;
  line-height:1.42!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-assignment-card>p{
  min-height:3.4em!important;
  margin:0!important;
  color:#596b82!important;
  line-height:1.72!important;
}
.clc-learning-app[data-clc-tab="assignments"] .clc-assignment-bottom{
  margin-top:20px!important;
  padding-top:15px!important;
  border-top:1px solid #e7edf3!important;
}

/* Growth pages: heading, tabs and data sections become visually separated. */
.clc-learning-app[data-clc-tab="growth"] .clc-growth-tabs{
  margin:0!important;
  padding:7px!important;
  border:1px solid #dbe5ef!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 7px 22px rgba(28,48,73,.045)!important;
}
.clc-learning-app[data-clc-tab="growth"] .clc-growth-tabs a{
  min-height:42px!important;
  display:inline-flex!important;
  align-items:center!important;
  padding:9px 18px!important;
  border-radius:10px!important;
}
.clc-learning-app[data-clc-tab="growth"] .clc-score-list,
.clc-learning-app[data-clc-tab="growth"] .clc-points-overview,
.clc-learning-app[data-clc-tab="growth"] .clc-badge-page,
.clc-learning-app[data-clc-tab="growth"] .clc-leaderboard{
  margin:0!important;
}
.clc-learning-app[data-clc-tab="growth"] .clc-score-list article{
  padding:24px!important;
  border:1px solid #dbe5ef!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 9px 24px rgba(28,48,73,.05)!important;
}
.clc-learning-app[data-clc-tab="growth"] .clc-score-list h3{
  margin:12px 0 10px!important;
  font-size:22px!important;
  line-height:1.4!important;
}
.clc-learning-app[data-clc-tab="growth"] .clc-score-list p{
  line-height:1.75!important;
}

/* Profile page: give each information group a clear boundary and breathing room. */
.clc-learning-app[data-clc-tab="profile"] .clc-private-message-entry{
  margin:0!important;
}
.clc-learning-app[data-clc-tab="profile"] .clc-profile-layout{
  gap:20px!important;
  align-items:start!important;
}
.clc-learning-app[data-clc-tab="profile"] .clc-profile-layout>.clc-surface-card{
  padding:26px!important;
  border:1px solid #dbe5ef!important;
  border-radius:20px!important;
  box-shadow:0 10px 30px rgba(28,48,73,.055)!important;
}
.clc-learning-app[data-clc-tab="profile"] .clc-profile-editor{
  padding:18px!important;
  border:1px solid #dfe7f0!important;
  border-radius:17px!important;
  background:#f8fbff!important;
}
.clc-learning-app[data-clc-tab="profile"] .clc-profile-editor>div:last-child{
  min-width:0!important;
}
.clc-learning-app[data-clc-tab="profile"] .clc-profile-editor strong{
  display:block!important;
  margin-bottom:7px!important;
  font-size:18px!important;
  color:#1f334e!important;
}
.clc-learning-app[data-clc-tab="profile"] .clc-profile-editor p{
  margin:0 0 12px!important;
  color:#65758a!important;
  line-height:1.68!important;
}
.clc-learning-app[data-clc-tab="profile"] .clc-profile-avatar-presets{
  margin:18px 0!important;
  padding:20px!important;
  border:1px solid #dfe7f0!important;
  background:#fbfcfe!important;
}
.clc-learning-app[data-clc-tab="profile"] .clc-profile-privacy{
  margin-top:4px!important;
  padding:20px!important;
}
.clc-learning-app[data-clc-tab="profile"] .clc-profile-side-card{
  position:sticky!important;
  top:18px!important;
  padding:26px!important;
  border:1px solid #dbe5ef!important;
  border-radius:20px!important;
  box-shadow:0 10px 30px rgba(28,48,73,.055)!important;
}

/* Courses and notification pages also receive a visible page boundary. */
.clc-learning-app[data-clc-tab="courses"] .clc-course-system-page,
.clc-learning-app[data-clc-tab="messages"] .clc-message-center.is-standalone{
  padding:24px!important;
  border:1px solid #dbe5ef!important;
  border-radius:22px!important;
  background:#fff!important;
  box-shadow:0 10px 30px rgba(28,48,73,.055)!important;
}

@media(max-width:900px){
  .clc-learning-app[data-clc-tab="assignments"] .clc-section-title{
    align-items:flex-start!important;
    flex-direction:column!important;
    gap:9px!important;
  }
  .clc-learning-app[data-clc-tab="assignments"] .clc-section-title>p{text-align:left!important;}
  .clc-learning-app[data-clc-tab="assignments"] .clc-assignment-grid{grid-template-columns:1fr!important;}
  .clc-learning-app[data-clc-tab="profile"] .clc-profile-side-card{position:static!important;}
}
@media(max-width:700px){
  .clc-app-workspace{gap:14px!important;}
  .clc-learning-app[data-clc-tab="assignments"] .clc-section,
  .clc-learning-app[data-clc-tab="courses"] .clc-course-system-page,
  .clc-learning-app[data-clc-tab="messages"] .clc-message-center.is-standalone{
    padding:17px!important;
    border-radius:17px!important;
  }
  .clc-learning-app[data-clc-tab="growth"] .clc-growth-page>.clc-section-heading,
  .clc-learning-app[data-clc-tab="profile"] .clc-profile-page>.clc-section-heading{
    padding:19px 17px!important;
    border-radius:17px!important;
  }
  .clc-learning-app[data-clc-tab="growth"] .clc-growth-tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
  }
  .clc-learning-app[data-clc-tab="growth"] .clc-growth-tabs a{flex:0 0 auto!important;}
  .clc-learning-app[data-clc-tab="profile"] .clc-profile-layout>.clc-surface-card,
  .clc-learning-app[data-clc-tab="profile"] .clc-profile-side-card{padding:18px!important;border-radius:17px!important;}
  .clc-learning-app[data-clc-tab="profile"] .clc-profile-editor{
    grid-template-columns:72px minmax(0,1fr)!important;
    gap:13px!important;
    padding:15px!important;
  }
  .clc-learning-app[data-clc-tab="profile"] .clc-profile-editor img{width:72px!important;height:72px!important;}
}

/* 3.5.7 — remove the narrow desktop middle column and use a wide learner workbench. */
.clc-learning-app{
  width:min(calc(100% - 32px),1820px)!important;
  max-width:1820px!important;
}
.clc-learning-app .clc-app-shell{
  grid-template-columns:248px minmax(0,1fr)!important;
  grid-template-areas:
    "sidebar main"
    "sidebar rail"!important;
  column-gap:22px!important;
  row-gap:22px!important;
  align-items:start!important;
}
.clc-learning-app .clc-app-sidebar{
  grid-area:sidebar!important;
}
.clc-learning-app .clc-app-workspace{
  grid-area:main!important;
  width:100%!important;
  max-width:none!important;
}
.clc-learning-app .clc-app-workspace>*{
  width:100%!important;
  max-width:none!important;
  box-sizing:border-box!important;
}
.clc-learning-app .clc-app-rail{
  grid-area:rail!important;
  position:static!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:20px!important;
  width:100%!important;
  margin:0!important;
}
.clc-learning-app .clc-app-rail>*{
  min-width:0!important;
  height:auto!important;
}
.clc-learning-app .clc-home-dashboard,
.clc-learning-app .clc-growth-motivation,
.clc-learning-app .clc-course-system-page,
.clc-learning-app .clc-growth-page,
.clc-learning-app .clc-profile-page,
.clc-learning-app .clc-section{
  width:100%!important;
  max-width:none!important;
}
.clc-learning-app .clc-home-dashboard,
.clc-learning-app .clc-growth-motivation{
  gap:22px!important;
}
.clc-learning-app .clc-growth-dashboard-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(360px,.82fr)!important;
  gap:20px!important;
}
.clc-learning-app .clc-weekly-report,
.clc-learning-app .clc-badge-preview{
  min-width:0!important;
  padding:24px!important;
  border-radius:22px!important;
}
.clc-learning-app .clc-weekly-report__stats{
  gap:12px!important;
}
.clc-learning-app .clc-weekly-report__stats>div{
  min-height:82px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
}
.clc-learning-app .clc-badge-preview>div{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}

@media(max-width:1380px) and (min-width:981px){
  .clc-learning-app{
    width:calc(100% - 24px)!important;
    max-width:none!important;
  }
  .clc-learning-app .clc-app-shell{
    grid-template-columns:224px minmax(0,1fr)!important;
    column-gap:18px!important;
  }
  .clc-learning-app .clc-growth-dashboard-grid{
    grid-template-columns:1fr!important;
  }
  .clc-learning-app .clc-badge-preview>div{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}

@media(max-width:980px){
  .clc-learning-app{
    width:calc(100% - 20px)!important;
    max-width:none!important;
  }
  .clc-learning-app .clc-app-shell{
    display:block!important;
  }
  .clc-learning-app .clc-app-sidebar{
    position:static!important;
    margin-bottom:18px!important;
  }
  .clc-learning-app .clc-app-rail{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    margin-top:20px!important;
  }
  .clc-learning-app .clc-growth-dashboard-grid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:700px){
  .clc-learning-app{
    width:calc(100% - 14px)!important;
  }
  .clc-learning-app .clc-app-shell{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"main" "rail"!important;
    gap:14px!important;
  }
  .clc-learning-app .clc-app-rail{
    grid-template-columns:1fr!important;
    gap:14px!important;
    margin-top:0!important;
  }
  .clc-learning-app .clc-growth-dashboard-grid{
    gap:14px!important;
  }
  .clc-learning-app .clc-weekly-report,
  .clc-learning-app .clc-badge-preview{
    padding:17px!important;
    border-radius:17px!important;
  }
  .clc-learning-app .clc-weekly-report__stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .clc-learning-app .clc-badge-preview>div{
    grid-template-columns:1fr!important;
  }
}

/* 3.5.8 — restore the check-in and dual leaderboard rail to the right on desktop. */
@media(min-width:1281px){
  .clc-learning-app .clc-app-shell{
    grid-template-columns:238px minmax(0,1fr) 320px!important;
    grid-template-areas:"sidebar main rail"!important;
    column-gap:20px!important;
    row-gap:0!important;
    align-items:start!important;
  }
  .clc-learning-app .clc-app-sidebar{
    grid-area:sidebar!important;
    position:sticky!important;
    top:18px!important;
  }
  .clc-learning-app .clc-app-workspace{
    grid-area:main!important;
    min-width:0!important;
  }
  .clc-learning-app .clc-app-rail{
    grid-area:rail!important;
    position:sticky!important;
    top:18px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .clc-learning-app .clc-app-rail>*{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
  }

  .clc-teacher-front .clc-teacher-shell,
  .clc-role-portal .clc-role-shell{
    grid-template-columns:minmax(0,1fr) 320px!important;
    gap:20px!important;
    align-items:start!important;
  }
  .clc-teacher-front .clc-teacher-rail,
  .clc-role-portal .clc-role-rail{
    position:sticky!important;
    top:18px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:18px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }
  .clc-teacher-front .clc-teacher-rail>*,
  .clc-role-portal .clc-role-rail>*{
    width:100%!important;
    min-width:0!important;
  }

  /* Keep chat and profile pages focused on the main task. */
  .clc-learning-app[data-clc-tab="space"] .clc-app-shell,
  .clc-learning-app[data-clc-tab="profile"] .clc-app-shell{
    grid-template-columns:238px minmax(0,1fr)!important;
    grid-template-areas:"sidebar main"!important;
  }
  .clc-learning-app[data-clc-tab="space"] .clc-app-rail,
  .clc-learning-app[data-clc-tab="profile"] .clc-app-rail,
  .clc-teacher-front[data-teacher-view="profile"] .clc-teacher-rail,
  .clc-teacher-front[data-teacher-view="group_chat"] .clc-teacher-rail{
    display:none!important;
  }
  .clc-teacher-front[data-teacher-view="profile"] .clc-teacher-shell,
  .clc-teacher-front[data-teacher-view="group_chat"] .clc-teacher-shell{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* Common laptops: keep the right rail visible but slightly narrower. */
@media(min-width:1281px) and (max-width:1510px){
  .clc-learning-app{
    width:calc(100% - 20px)!important;
    max-width:none!important;
  }
  .clc-learning-app .clc-app-shell{
    grid-template-columns:214px minmax(0,1fr) 286px!important;
    column-gap:16px!important;
  }
  .clc-teacher-front .clc-teacher-shell,
  .clc-role-portal .clc-role-shell{
    grid-template-columns:minmax(0,1fr) 286px!important;
    gap:16px!important;
  }
  .clc-learning-app .clc-app-sidebar{padding:12px!important;}
  .clc-learning-app .clc-app-nav>a{padding-inline:8px!important;font-size:13px!important;}
}

/* Tablets and small laptops: rail moves below the work area instead of squeezing it. */
@media(max-width:1280px) and (min-width:701px){
  .clc-learning-app .clc-app-shell{
    grid-template-columns:212px minmax(0,1fr)!important;
    grid-template-areas:"sidebar main" "sidebar rail"!important;
    column-gap:16px!important;
    row-gap:18px!important;
  }
  .clc-learning-app .clc-app-rail{
    grid-area:rail!important;
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
    margin:0!important;
  }
  .clc-teacher-front .clc-teacher-shell,
  .clc-role-portal .clc-role-shell{
    grid-template-columns:1fr!important;
  }
  .clc-teacher-front .clc-teacher-rail,
  .clc-role-portal .clc-role-rail{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:16px!important;
    margin-top:20px!important;
  }
}

/* 3.5.11 — responsive third-party video players for teacher/student showcases */
.clc-platform-video{margin:30px 0;padding:18px;border:1px solid #dbe5f0;border-radius:22px;background:linear-gradient(145deg,#fff,#f7faff);box-shadow:0 16px 40px rgba(24,54,91,.08);overflow:hidden}
.clc-platform-video__head{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0 2px}
.clc-platform-video__head>span{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:999px;background:#eaf2ff;color:#245eb9;font-size:12px;font-weight:850;white-space:nowrap}
.clc-platform-video__head>strong{min-width:0;color:#17304f;font-size:17px;font-weight:850}
.clc-platform-video__head>a{margin-left:auto;color:#2a63bd!important;font-size:12px;font-weight:750;text-decoration:none!important;white-space:nowrap}
.clc-platform-video__frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:17px;background:#0d1522;overflow:hidden;box-shadow:0 12px 30px rgba(12,29,51,.18)}
.clc-platform-video__frame iframe,.clc-platform-video__frame video{display:block;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;border:0!important;border-radius:0!important;background:#0d1522;object-fit:contain}
.clc-platform-video.is-portrait .clc-platform-video__frame{max-width:480px;aspect-ratio:9/16;margin:0 auto}
.clc-platform-video__fallback{display:grid;place-items:center;min-height:240px;padding:34px;text-align:center;border:1px dashed #b9cce3;border-radius:17px;background:#f6f9fd}
.clc-platform-video__fallback b{color:#17304f;font-size:17px}
.clc-platform-video__fallback p{max-width:620px;margin:10px auto 18px;color:#6b7d92;line-height:1.75}
.clc-platform-video__fallback a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:12px;background:linear-gradient(135deg,#2d6be0,#1e55bc);color:#fff!important;font-weight:800;text-decoration:none!important;box-shadow:0 10px 22px rgba(38,94,198,.22)}
.clc-platform-video-field{display:block;margin:16px 0;padding:16px;border:1px solid #dce6f2;border-radius:16px;background:#f8fbff}
.clc-platform-video-field>strong,.clc-platform-video-field label strong{display:block;margin-bottom:7px;color:#17304f}
.clc-platform-video-field>span{display:block;margin:0 0 9px;color:#6d7e92;font-size:12px;line-height:1.65}
.clc-platform-video-field textarea{display:block;width:100%;min-height:100px;padding:12px 13px;border:1px solid #cdd9e7;border-radius:12px;background:#fff;box-sizing:border-box;resize:vertical}
.clc-platform-video-field textarea:focus{outline:0;border-color:#5b8fdf;box-shadow:0 0 0 4px rgba(55,116,218,.11)}
@media(max-width:700px){.clc-platform-video{margin:22px 0;padding:12px;border-radius:17px}.clc-platform-video__head{align-items:flex-start;flex-wrap:wrap}.clc-platform-video__head>a{width:100%;margin-left:0}.clc-platform-video__frame{border-radius:13px}.clc-platform-video__fallback{min-height:190px;padding:24px 16px}.clc-platform-video-field{padding:13px;border-radius:14px}}

/* 3.6.6 — stable notebook/tablet layout for learner and teacher centers */
.clc-learning-app,.clc-teacher-front,.clc-role-portal,
.clc-app-shell,.clc-teacher-shell,.clc-role-shell,
.clc-app-sidebar,.clc-app-workspace,.clc-app-rail,
.clc-teacher-main,.clc-teacher-rail,.clc-role-body,.clc-role-rail{
  min-width:0!important;
  box-sizing:border-box!important;
}
.clc-learning-app img,.clc-teacher-front img,.clc-role-portal img,
.clc-learning-app video,.clc-teacher-front video,.clc-role-portal video,
.clc-learning-app iframe,.clc-teacher-front iframe,.clc-role-portal iframe{
  max-width:100%!important;
}
.clc-learning-app img,.clc-teacher-front img,.clc-role-portal img{height:auto!important;object-fit:cover;}
.clc-app-shell>* , .clc-teacher-shell>* , .clc-role-shell>*{order:0!important;}
.clc-app-sidebar{grid-area:sidebar!important;}
.clc-app-workspace{grid-area:main!important;}
.clc-app-rail{grid-area:rail!important;}
.clc-teacher-main,.clc-role-body{grid-area:main!important;}
.clc-teacher-rail,.clc-role-rail{grid-area:rail!important;}

/* Standard and large notebooks: retain the original information hierarchy. */
@media (min-width:1281px) and (max-width:1600px){
  .clc-center{width:min(calc(100% - 24px),1560px)!important;max-width:1560px!important;}
  .clc-learning-app .clc-app-shell{
    display:grid!important;
    grid-template-columns:minmax(198px,218px) minmax(0,1fr) minmax(276px,296px)!important;
    grid-template-areas:"sidebar main rail"!important;
    gap:16px!important;
    align-items:start!important;
  }
  .clc-learning-app .clc-app-sidebar,
  .clc-learning-app .clc-app-rail{position:sticky!important;top:14px!important;}
  .clc-learning-app .clc-app-rail{display:flex!important;flex-direction:column!important;gap:16px!important;margin:0!important;}
  .clc-teacher-front .clc-teacher-shell,
  .clc-role-portal .clc-role-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(276px,296px)!important;
    grid-template-areas:"main rail"!important;
    gap:16px!important;
    align-items:start!important;
  }
  .clc-teacher-front .clc-teacher-rail,
  .clc-role-portal .clc-role-rail{position:sticky!important;top:14px!important;display:flex!important;flex-direction:column!important;gap:16px!important;margin:0!important;}
  .clc-assignment-grid,.clc-teacher-approval-grid,.clc-role-card-grid,.clc-teacher-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .clc-course-grid,.clc-track-grid,.clc-teacher-track-mini-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
  .clc-stat-grid,.clc-teacher-kpis,.clc-role-kpis{grid-template-columns:repeat(4,minmax(0,1fr))!important;}
  .clc-app-header,.clc-teacher-header,.clc-workspace-header{gap:18px!important;}
}

/* Small notebooks: protect the main work area by moving the right rail below it. */
@media (min-width:1024px) and (max-width:1280px){
  .clc-center{width:calc(100% - 20px)!important;max-width:none!important;}
  .clc-learning-app .clc-app-shell{
    display:grid!important;
    grid-template-columns:minmax(184px,204px) minmax(0,1fr)!important;
    grid-template-areas:"sidebar main" "sidebar rail"!important;
    gap:16px!important;
    align-items:start!important;
  }
  .clc-learning-app .clc-app-sidebar{position:sticky!important;top:12px!important;}
  .clc-learning-app .clc-app-rail{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    margin:0!important;
  }
  .clc-teacher-front .clc-teacher-shell,
  .clc-role-portal .clc-role-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"main" "rail"!important;
    gap:16px!important;
  }
  .clc-teacher-front .clc-teacher-rail,
  .clc-role-portal .clc-role-rail{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    margin:0!important;
  }
  .clc-assignment-grid,.clc-teacher-approval-grid,.clc-role-card-grid,.clc-teacher-home-grid,
  .clc-course-grid,.clc-track-grid,.clc-teacher-track-mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .clc-stat-grid,.clc-teacher-kpis,.clc-role-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .clc-app-header,.clc-teacher-header,.clc-workspace-header{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
  }
}

/* Tablets: navigation first, main work second, rail third; no CSS order swapping. */
@media (min-width:768px) and (max-width:1023px){
  .clc-center{width:calc(100% - 16px)!important;max-width:none!important;padding-inline:0!important;}
  .clc-learning-app .clc-app-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"sidebar" "main" "rail"!important;
    gap:16px!important;
  }
  .clc-learning-app .clc-app-sidebar{position:static!important;margin:0!important;padding:10px!important;}
  .clc-learning-app .clc-app-nav{
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding:0 0 4px!important;
    scrollbar-width:thin!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .clc-learning-app .clc-app-nav>a{flex:0 0 auto!important;min-width:120px!important;min-height:44px!important;}
  .clc-learning-app .clc-app-rail,
  .clc-teacher-front .clc-teacher-rail,
  .clc-role-portal .clc-role-rail{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
    margin:0!important;
  }
  .clc-teacher-front .clc-teacher-shell,
  .clc-role-portal .clc-role-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"main" "rail"!important;
    gap:16px!important;
  }
  .clc-role-nav,.clc-teacher-mobile-nav,.clc-tabs,.clc-filter-tabs{
    display:flex!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    scrollbar-width:thin!important;
    -webkit-overflow-scrolling:touch!important;
  }
  .clc-role-nav>a,.clc-teacher-mobile-nav>a,.clc-tabs>a,.clc-filter-tabs>a{flex:0 0 auto!important;white-space:nowrap!important;}
  .clc-assignment-grid,.clc-teacher-approval-grid,.clc-role-card-grid,.clc-teacher-home-grid,
  .clc-course-grid,.clc-track-grid,.clc-teacher-track-mini-grid,
  .clc-stat-grid,.clc-teacher-kpis,.clc-role-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  .clc-app-header,.clc-teacher-header,.clc-workspace-header,.clc-role-hero{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }
  .clc-app-header-actions,.clc-workspace-actions{justify-content:flex-start!important;flex-wrap:wrap!important;}
}

/* Short laptop screens: prevent sticky panels from being clipped vertically. */
@media (min-width:1024px) and (max-height:760px){
  .clc-learning-app .clc-app-sidebar,
  .clc-learning-app .clc-app-rail,
  .clc-teacher-front .clc-teacher-rail,
  .clc-role-portal .clc-role-rail{position:static!important;}
}

/* Stable media and text behaviour on every center screen. */
@media (min-width:768px) and (max-width:1600px){
  .clc-center h1,.clc-center h2,.clc-center h3,.clc-center p,
  .clc-teacher-front h1,.clc-teacher-front h2,.clc-teacher-front h3,.clc-teacher-front p,
  .clc-role-portal h1,.clc-role-portal h2,.clc-role-portal h3,.clc-role-portal p{
    overflow-wrap:anywhere!important;
    word-break:normal!important;
  }
  .clc-assignment-card,.clc-course-card,.clc-role-card-grid>*,.clc-teacher-home-grid>*,
  .clc-app-rail>*,.clc-teacher-rail>*,.clc-role-rail>*{min-width:0!important;height:auto!important;}
  .clc-media-gallery img,.clc-case-card img,.clc-library-card img,.clc-course-card img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
  }
  .clc-data-table-wrap,.clc-table-wrap{max-width:100%!important;overflow-x:auto!important;}
  .clc-data-table-wrap table,.clc-table-wrap table{min-width:720px!important;}
}

/* 3.6.9 — stable teacher right rail on notebooks and constrained admin layouts */
.clc-teacher-front{
  container-type:inline-size!important;
  container-name:clc-teacher-center!important;
}
.clc-teacher-front .clc-teacher-shell,
.clc-teacher-front .clc-teacher-main,
.clc-teacher-front .clc-teacher-rail,
.clc-teacher-front .clc-teacher-rail>*{
  min-width:0!important;
  box-sizing:border-box!important;
}
.clc-teacher-front .clc-teacher-rail{
  align-content:start!important;
}
.clc-teacher-front .clc-teacher-rail>*:nth-child(1){order:1!important;}
.clc-teacher-front .clc-teacher-rail>*:nth-child(2){order:2!important;}
.clc-teacher-front .clc-teacher-rail>*:nth-child(n+3){order:3!important;}
.clc-teacher-front .clc-rail-ranking,
.clc-teacher-front .clc-rail-checkin{
  width:100%!important;
  max-width:none!important;
  overflow:hidden!important;
}
.clc-teacher-front .clc-rail-rank-list{
  min-width:0!important;
  width:100%!important;
}
.clc-teacher-front .clc-rail-rank-row{
  width:100%!important;
  grid-template-columns:28px 42px minmax(120px,1fr) minmax(44px,auto)!important;
  gap:9px!important;
  align-items:center!important;
}
.clc-teacher-front .clc-rail-rank-row>div,
.clc-teacher-front .clc-rail-rank-row strong,
.clc-teacher-front .clc-rail-rank-row span{
  min-width:0!important;
}
.clc-teacher-front .clc-rail-rank-row strong{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  word-break:normal!important;
}
.clc-teacher-front .clc-rail-rank-row em{
  justify-self:end!important;
  white-space:nowrap!important;
  word-break:keep-all!important;
}

/* Use actual center width, including cases where an admin sidebar reduces usable space. */
@container clc-teacher-center (max-width:1180px){
  .clc-teacher-front .clc-teacher-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"main" "rail"!important;
    gap:18px!important;
    align-items:start!important;
  }
  .clc-teacher-front .clc-teacher-main{grid-area:main!important;}
  .clc-teacher-front .clc-teacher-rail{
    grid-area:rail!important;
    position:static!important;
    top:auto!important;
    display:grid!important;
    grid-template-columns:minmax(300px,.78fr) minmax(460px,1.22fr)!important;
    gap:16px!important;
    margin:0!important;
    width:100%!important;
  }
}
@container clc-teacher-center (max-width:980px){
  .clc-teacher-front .clc-teacher-rail{
    grid-template-columns:minmax(0,1fr)!important;
  }
}
@container clc-teacher-center (max-width:720px){
  .clc-teacher-front .clc-rail-rank-row{
    grid-template-columns:26px 38px minmax(0,1fr) auto!important;
    gap:7px!important;
    padding-inline:8px!important;
  }
}

/* Fallback for browsers without container queries. */
@media (min-width:1024px) and (max-width:1499px){
  @supports not (container-type:inline-size){
    .clc-teacher-front .clc-teacher-shell{
      display:grid!important;
      grid-template-columns:minmax(0,1fr)!important;
      grid-template-areas:"main" "rail"!important;
      gap:18px!important;
    }
    .clc-teacher-front .clc-teacher-rail{
      position:static!important;
      display:grid!important;
      grid-template-columns:minmax(300px,.78fr) minmax(460px,1.22fr)!important;
      gap:16px!important;
      margin:0!important;
    }
  }
}
@media (min-width:768px) and (max-width:1100px){
  .clc-teacher-front .clc-teacher-rail{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

/* 3.6.9 — teacher center notebook rail order and anti-squeeze fix */
.clc-teacher-front .clc-teacher-rail,
.clc-role-portal .clc-role-rail{
  min-width:0!important;
}
.clc-teacher-front .clc-teacher-rail>*,
.clc-role-portal .clc-role-rail>*{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  order:initial!important;
}

/* Wide notebooks and desktops: keep a readable right rail. */
@media (min-width:1441px) and (max-width:1600px){
  .clc-teacher-front .clc-teacher-shell,
  .clc-role-portal .clc-role-shell{
    grid-template-columns:minmax(0,1fr) minmax(316px,336px)!important;
    grid-template-areas:"main rail"!important;
    gap:18px!important;
  }
  .clc-teacher-front .clc-teacher-rail,
  .clc-role-portal .clc-role-rail{
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
  }
}

/* Common notebooks: do not squeeze the rail beside the work area. */
@media (min-width:1024px) and (max-width:1440px){
  .clc-teacher-front .clc-teacher-shell,
  .clc-role-portal .clc-role-shell{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"main" "rail"!important;
    gap:18px!important;
  }
  .clc-teacher-front .clc-teacher-main,
  .clc-role-portal .clc-role-body{
    grid-area:main!important;
    min-width:0!important;
  }
  .clc-teacher-front .clc-teacher-rail,
  .clc-role-portal .clc-role-rail{
    grid-area:rail!important;
    position:static!important;
    display:flex!important;
    flex-direction:column!important;
    gap:16px!important;
    width:100%!important;
    margin:0!important;
  }
}

/* Tablets: preserve source order and stack every rail card. */
@media (min-width:768px) and (max-width:1023px){
  .clc-teacher-front .clc-teacher-rail,
  .clc-role-portal .clc-role-rail{
    display:flex!important;
    flex-direction:column!important;
    gap:14px!important;
    width:100%!important;
  }
}

/* Keep ranking content readable at notebook widths. */
@media (min-width:768px) and (max-width:1600px){
  .clc-teacher-front .clc-rail-card,
  .clc-role-portal .clc-rail-card{
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  .clc-teacher-front .clc-rail-rank-tabs,
  .clc-role-portal .clc-rail-rank-tabs{
    grid-template-columns:repeat(2,minmax(120px,1fr))!important;
    gap:8px!important;
  }
  .clc-teacher-front .clc-rail-rank-tabs button,
  .clc-role-portal .clc-rail-rank-tabs button,
  .clc-teacher-front .clc-rail-rank-subtabs button,
  .clc-role-portal .clc-rail-rank-subtabs button{
    min-width:0!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .clc-teacher-front .clc-rail-champion,
  .clc-role-portal .clc-rail-champion{
    grid-template-columns:58px minmax(120px,1fr) auto!important;
  }
  .clc-teacher-front .clc-rail-rank-row,
  .clc-role-portal .clc-rail-rank-row{
    grid-template-columns:28px 42px minmax(120px,1fr) minmax(48px,auto)!important;
    gap:9px!important;
  }
  .clc-teacher-front .clc-rail-rank-row strong,
  .clc-role-portal .clc-rail-rank-row strong,
  .clc-teacher-front .clc-rail-rank-row span,
  .clc-role-portal .clc-rail-rank-row span,
  .clc-teacher-front .clc-rail-rank-row em,
  .clc-role-portal .clc-rail-rank-row em{
    word-break:keep-all!important;
    overflow-wrap:normal!important;
  }
  .clc-teacher-front .clc-rail-ranking>footer,
  .clc-role-portal .clc-rail-ranking>footer{
    flex-wrap:wrap!important;
  }
}